| name | ux-theme-gen |
| description | Generate platform-specific theme artifacts from DESIGN.md. Use when mockups or production code need consumable tokens derived from the canonical design contract. |
UX Theme Generation
Purpose
Transform the YAML front matter in /DESIGN.md into consumable theme artifacts that mockups and production code import directly. This eliminates hand-copied colour values and keeps every surface aligned with the declared contract.
When to Use
- Before generating any mockup (Phase 0 of
ux-engineer).
- When
developer needs production theme files aligned with DESIGN.md.
- After filling or updating DESIGN.md tokens.
- When a stale theme artifact is detected (its tokens don't match DESIGN.md).
Inputs
| Input | Required | Default |
|---|
/DESIGN.md | yes | — |
theme_output path (from front matter) | no | /mockups/.theme/ |
Contract Check (Must Run First)
Before generating any artifact:
- Read
/DESIGN.md front matter.
- If
status: placeholder → refuse with: "DESIGN.md is an unfilled placeholder. Run ux-engineer to fill it first."
- If any
"<unfilled>" sentinel remains in the token groups (colors, typography, rounded, spacing) → refuse and list the unfilled fields.
- Resolve
{colors.x} / style references. If a reference points to an unfilled or missing key → and report the broken reference.
