image-to-design-md

Web

discovery — turns intent into artefacts

176 lines

2 references

2 scripts

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

When it applies

The user pastes 1+ image paths and asks for a design system / DESIGN.md.
The user describes images they have (Pinterest pins, Dribbble shots, competitor screenshots, hand-drawn mockups, scanned printouts).
An explicit request: "estrai design da queste immagini", "make a DESIGN.md from this image", "build a design system from this Figma export PNG".
The orchestrator (dev-flow) routes here from phase prd_drafted or empty when the user has no Figma URL but has images.

References it ships

Get it

/plugin install dev-flow@dev-flow      # the whole suite
./install.sh --platform claude        # or drop dist/image-to-design-md.skill into Claude Code

Read image-to-design-md/SKILL.md on GitHub →