Design System — Image to design.md + design.html

This skill takes an image (or a set of image references) and translates them into a design system captured as two mirrored files:

• docs/design.md — a YAML token block in Google's open design.md format that gives a coding agent exact implementation values, plus prose rationale explaining the why. This is the source of truth.
• docs/design.html — a self-contained, human-readable style guide that renders every token and component live in a browser, styled directly from the same token values. This is the mirror the human reads.

Same design system, two audiences: the agent reads the .md, the human opens the .html. They must always be written and updated together so they never drift.

When to Use This

• Founder shares a screenshot, mockup, Figma file, inspiration board, or live website and wants it captured as a structured design system
• Founder needs design tokens a coding agent can implement without guessing
• Founder wants a precise token spec to supplement an existing product vision or PRD
• Fully standalone — does not require any other document

Modes

No image provided yet: Ask for one (or more) before doing anything else. Don't draft a design.md from imagination.