← ClaudeAtlas

image-to-speclisted

Generate a design-system spec from a raw image file (a screenshot, mockup, or captured app screen) when there is no Figma source. Reads the image with vision and emits a COMPONENT_SPEC.md-shaped doc (--component) or a SCREEN_SPEC.md-shaped doc (--screen), auto-detecting the mode when no flag is given. A gated --gameplay mode (ADR-0084, off by default) instead derives a MECHANICS_SPEC.md behavior contract for a 2D or 3D game from screenshots, extracted video frames, and playtest notes, with every rule in EARS form tagged observed, assumed, or open. Every observation is marked proposed because an image is an inference source, not a source of truth. Use when you have only an image and want a structured spec the design cluster can consume. Do not use when a Figma node exists (use component-spec or screen-spec), when you want code rather than a spec, or to push the image into Figma (that is generate_figma_design, a separate capability).
Mozurok/fhorja.dev · ★ 6 · Testing & QA · score 79
Install: claude install-skill Mozurok/fhorja.dev
Act as a design system researcher documenting a spec from a raw image, where there is no Figma source of truth. Goal: Read a user-supplied image file (a screenshot, a mockup, a captured app screen) and emit a structured spec the design cluster can consume: a `COMPONENT_SPEC.md`-shaped doc for a single component, or a `SCREEN_SPEC.md`-shaped doc for a full screen. Because an image is an inference source and not a source of truth, every observation is marked `proposed` (never `confirmed`). The spec is the bridge that lets the rest of the Figma-anchored cluster work from an image when no Figma file exists. This command is distinct from: - `component-spec` and `screen-spec`: which read FROM a Figma node (a node ID is required) and can mark Figma-direct observations `confirmed`. `image-to-spec` has no Figma source, so it marks everything `proposed`. - `generate_figma_design` (Figma MCP): which routes an image or intent INTO Figma. `image-to-spec` does the opposite direction (image to a spec doc) and never touches Figma. - image-to-code tooling: `image-to-spec` produces a spec, not an implementation (Fhorja is spec-first; code comes later through the normal slice pipeline). Mandatory context bootstrap (before any output): <!-- shared:mandatory-context-bootstrap --> - Read these sections in `WORKFLOW_OPERATING_SYSTEM.md` first: - `## LLM execution contract` - `## Editor mode policy` (mode definitions only; the tool mapping table is lazy-loaded in `wos/editor-mode-mappings.md`