ux

ADD UX Command v{{VERSION}}

Iterate on UI/UX design for a feature before implementation begins. Produces a signed-off design artifact that gates /add:plan and /add:tdd-cycle. Prevents token burn from building the wrong UI.

Pre-Flight

1. Read .add/config.json to understand project context and maturity level
2. If spec-file argument is provided, read it. Otherwise, list specs in specs/ and ask which feature to design
3. Verify the spec exists and has a UI component (Q8 answered, or acceptance criteria mention UI states)
   • If no UI component is detectable, confirm with the human: "This spec doesn't appear to have a UI — do you still want to run a UX iteration?"
4. Check if a UI artifact already exists at specs/ux/{feature-slug}-ux.md
   • If it does, and it's marked Status: APPROVED, ask: "This feature already has a signed-off design. Start over or review the existing one?"

---

Phase 1: Design Source

Determine where the design will come from.

Step 1: Check for Figma MCP

Attempt to detect whether a Figma MCP tool is available in the current session.

If --figma argument was provided OR Figma MCP is available:

Figma integration detected.

Options:
  A) Provide a Figma file URL or frame ID to start from an existing design
  B) Skip Figma and generate wireframes from scratch

If the human provides a Figma link:

• Use the Figma MCP to read the frame(s)
• Summarize what was found: screen names, key components, flow structure
• Note: Figma MCP is read-only — changes happen in conversation, not in Figma itself
• Proceed to Phase 2 with the Figma content as the starting point

If no Figma MCP and no --figma argument:

• Skip Figma detection silently
• Proceed directly to wireframe generation in Phase 2

---

Phase 2: UX Iteration Loop

This phase is a conversation loop. Repeat until the human approves the design or explicitly exits.

Step 1: Understand the UI Requirements

Before generating anything, ask focused questions to understand what needs to be designed. Keep it tight — 3-5 questions max.