Define design

Makes a design brief from your instructions. It puts your decisions, the agent's proposals and the open questions in separate lists.

Use: Before a new interface or a new visual identity.

Writes DESIGN.md from the approved brief. Values go in YAML and the rule for each value goes in text. Gaps go in the unresolved list.

Use: When the project needs a design file.

Reads source code, a running interface or screenshots. It records each value with its source and marks estimates as estimates.

Use: When the interface exists before its design file.

Sets the headline, body and label roles with size, weight and line height. Each role uses a real font file and a fallback.

Use: For text hierarchy and font changes.

Sets the surface, text, action and status roles. It checks the contrast of each pair and defines each color mode.

Use: For color selection, contrast and theme changes.

Sets width limits, spacing and breakpoints at the widths where the content fails. It does not use a list of devices.

Use: For viewport limits, breakpoints and content order.

Defines hover, focus, pressed, loading, error, success and disabled for each component. Each state has a trigger, a result and a recovery.

Use: For focus, loading, error, selection and motion.

Changes components, layouts and styles with the values in DESIGN.md. It reports the token for each change.

Use: When the interface must follow the design file.

Changes only the decisions that you name and the values that depend on them. All other decisions stay the same.

Use: When your design data or instructions change.

Exports tokens as CSS variables, DTCG JSON or a Tailwind v4 theme. If it cannot export a value, it stops and tells you why.

Use: When you connect DESIGN.md to your token source.

Finds broken token references, missing states and rules that disagree. It reports each problem. It does not fix problems without your approval.

Use: Before implementation and after each change to DESIGN.md.

Compares measured values from the running interface with DESIGN.md. It lists each difference. It never reports an unmeasured value as a pass.

Use: After an interface change.

Finds accessibility problems in the design file or the interface. It gives the WCAG criterion for each problem. It never calls a lint result full conformance.

Use: For contrast, keyboard use, labels, focus and zoom.

Adds design code checks from DESIGN.md to your repository and its continuous integration. A change with a color, size, font or effect that the design does not permit fails the build.

Use: When new code must stay inside the recorded design.