Product & Designbuildgreatproducts/builde...
design-system
Translates an image (or a set of image references — screenshots,
mockups, Figma URLs, live websites) into two mirrored design-system
artifacts: `docs/design.md` (YAML tokens + prose, following Google's open
[design.md](https://github.com/google-labs-code/design.md) format, for the
coding agent) and `docs/design.html` (a self-contained, token-driven style
guide rendering every token and component live, for the human to read).
Reads the imagery, asks targeted clarifying questions, derives the design
tokens (colors, typography, spacing, rounded, components), and writes both
files. Fully standalone — requires no other document or skill. Use when the
founder says "create a design system", "design from image",
"translate image to design", "create design.md", "image to design
system", "extract design tokens", or shares an image with no other
clear intent.