Design Language

Capture and enforce a product's visual language — principles + patterns that make it feel like itself. Two modes, one skill.

• Capture — given an external source (Figma URL, screenshot path, live URL), distill novel layout/hierarchy/density/motion decisions and propose a diff to the consumer repo's docs/design.md.
• Review — given a component or a built-UI screenshot plus an existing docs/design.md, check fidelity and produce a structured critique that cites specific principles and specific lines.

Advisory by default. This skill never writes to docs/design.md directly. It produces a proposed diff; the user commits.

Context-efficient design: heavy source extraction (Figma frame parsing, DOM snapshots, screenshot vision) runs in a sub-agent so raw source data stays out of the main thread. Main thread only sees the distilled observations and the proposed diff.

Sub-agent rule: dispatch a sub-agent when extraction involves multiple Figma frames, a full DOM snapshot, or vision analysis of a dense screenshot. Handle directly when the source is a single component file or a short existing diff.

Step 0: Route the Input

Detect from input shape, not a mode flag.