What problem does it solve? Coding agents lack persistent, trustworthy UI context, so generated interfaces drift from the product's actual design language. This Skill produces a single DESIGN.md that records normative tokens, typography, and component guidance grounded in real evidence rather than guesswork. ## Core Features & Use Cases - Dual evidence modes: Extract design decisions from a local product repository, or reconstruct a draft design system from a public website using rendered DOM and computed styles. - Schema-gated output: Normalize findings into a strict DESIGN.md frontmatter schema (colors, typography, rounded, spacing, components) with flat token names and canonical typography fields. - Validation pipeline: Lint the document and run a compatibility export (css-tailwind, json-tailwind, or dtcg) before reporting, rejecting invalid shapes and missing token categories. - Use Case: Point the Skill at your Next.js app repository and ask it to document the design system; it traces tokens, themes, and shared primitives, then writes a validated DESIGN.md that coding agents can follow on future tasks. ## Quick Start Ask the agent to create a DESIGN.md for this repository documenting its design tokens, typography, and component guidance.