design-system

This skill turns visual references into a structured, dual-format design system. It solves a common founder/agent handoff problem: a screenshot, mockup, Figma file, or live site captures a look, but a coding agent needs exact token values to implement it without guessing, while a human needs a readable style guide to review. The skill produces two mirrored artifacts that must always stay in sync: `docs/design.md` (a YAML token block in Google's open design.md format plus prose rationale, serving as the source of truth) and `docs/design.html` (a self-contained style guide that renders every token and component live in a browser).

The workflow is deliberately staged. It refuses to invent a design from imagination and asks for imagery first. It reads local image paths with the Read tool, uses Figma MCP tools for Figma URLs, and can use WebFetch only as a supplementary signal for live sites. During analysis it extracts colors, typography, spacing and density, corner-radius philosophy, elevation, visible components, and mood, then mirrors that back to the founder in tight bullets, flagging any conflicts between references. It asks context questions one at a time with tailored suggestions, and can read an existing product-vision doc to skip already-answered questions. It also handles re-runs, offering to refine, replace, or merge tokens, and confirms before destructive overwrites, always regenerating the HTML so the two files never drift.

Target users are founders and product teams who want a precise, implementable design token spec from reference imagery. Use cases include bootstrapping a design system from inspiration, supplementing a PRD with concrete tokens, and keeping an agent-readable spec and a human-readable style guide aligned.