extract-design
Installation
SKILL.md
extract-design
Turn an existing visual identity into a DESIGN.md file that conforms to the google-labs-code/design.md spec — YAML token frontmatter plus markdown rationale.
When to use
User asks to:
- Extract a design system from one or more HTML files
- Turn a live URL or screenshot into a DESIGN.md
- Reverse-engineer tokens from a Figma export, Webflow export, or static site
- Generate
DESIGN.mdso other agents can rebuild the same visual identity
What you produce
For each source the user provides, output one DESIGN.md file. If the user gives multiple sources representing distinct designs, produce one DESIGN.md per source and name them descriptively (DESIGN-<source-slug>.md). Default output location: same directory as the source, unless the user specifies otherwise.
Each DESIGN.md must contain: