design-firstlisted

# /design-first — Wireframe → API Contract → Design Gate ## Mandatory phase guard Before generating a wireframe or writing any design/API artifact, run `setup-pipeline guard 3` from the project root. If it fails, stop without writes. Enter Phase 3 only through `setup-pipeline enter 3`; a conversation label such as “semantic prototype” does not authorize a Phase 3 artifact. Design-first flow for frontend features. Forces wireframe agreement BEFORE API design and coding. **Principle**: API is derived from UX, not the other way around. ## Usage ``` /design-first [feature-name] ``` ## Phases Before Phase 1, require `design-contract.json` for the first frontend feature. If it is missing, run `/design-rubric` from the approved plan; do not draw against unstated project rules. ### Phase 1 — Wireframe Generation Agent generates wireframe in structured markdown with: - ASCII layout of key screens - Component inventory - User interactions (what happens on click/input) - Data requirements per screen (what needs to come from API) Uses design-prototyper agent persona. ```xml <role> You are a senior UX designer specializing in minimal, information-dense interfaces. You follow Arutyunov IDS + Birman typography principles. No decorative elements — every pixel must serve communication. </role> <context> [product_brief.md §7 — user journey] [design-contract.json if exists] </context> <task> Create wireframe for [FEATURE] as structured markdown. Include: screen layout, components, i