image-to-spec

Solid

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).

Testing & QA 6 stars 0 forks Updated 5 days ago MIT

Install

View on GitHub

Quality Score: 81/100

Stars 20%
28
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

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`...

Details

Author
Mozurok
Repository
Mozurok/fhorja.dev
Created
1 months ago
Last Updated
5 days ago
Language
Python
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

component-spec

Generate a 15-section component specification from a Figma component using MCP tools (get_design_context, get_screenshot, get_variable_defs). Produces a spec doc matching the COMPONENT_SPEC.md template with anatomy, variants, sizes, states, accessibility, motion, haptics, platform, security, performance, and API sections pre-filled from Figma observations. Use when documenting a design system component. Do not use when the component has no Figma representation or when the spec already exists (edit manually instead).

6 Updated 5 days ago
Mozurok
Web & Frontend Listed

design-screenshot-spec

Turn user-supplied screenshots, copied inspect values, exports, assets, or design notes into a strict frontend Design Implementation Spec. Live design links alone are insufficient.

5 Updated 1 months ago
ytvee-dev
Web & Frontend Listed

image-to-design-md

Generate a DESIGN.md (Google design.md spec) from 1+ raster images — PNG / JPG screenshots, mockups, Pinterest pins, Dribbble shots, competitor app captures. Extracts palette via k-means, identifies typography + components via vision-LLM, infers layout / radius / spacing, synthesizes a spec-compliant DESIGN.md + copies images to `screenshots/`. Use whenever the user provides 1+ images and asks to generate / extract / build a DESIGN.md / design system / design tokens — even phrased loosely like "estrai design da queste immagini", "make a DESIGN.md from this mockup", "design system from these screenshots". Not for: Figma files (use `figma-to-design-md`), code scaffolding (use `design-md-to-app` after), or single-page generation (use `screenshot-to-page` after the project is scaffolded).

4 Updated 4 days ago
lukedj78