prd-to-ux

Translate product requirements into UX foundations through 6 forced designer mindset passes. Each pass asks different questions that visual-first approaches skip.

Core principle: UX foundations come BEFORE visual specifications. Mental models, information architecture, and cognitive load analysis prevent "pretty but unusable" designs.

• Translating PRD/spec to mockup tool input (Google Stitch, Figma, etc.)
• Creating UX specifications from feature requirements
• Preparing design handoff documents
• Before any visual design work

Write the UX specification to a file in the same directory as the source PRD.

Naming convention:

• If PRD is feature-x.md → output feature-x-ux-spec.md
• If PRD is PRD.md → output UX-spec.md
• If PRD is requirements.md → output requirements-ux-spec.md

Pattern: {prd-basename}-ux-spec.md (or just UX-spec.md if PRD has generic name)

Do not output to conversation. Always write to file so the spec is persistent and can be passed to mockup tools.

```

NO VISUAL SPECS UNTIL ALL 6 PASSES COMPLETE

```

Not negotiable:

• Don't mention colors, typography, or spacing until Pass 6 is done
• Don't describe screen layouts until information architecture is explicit
• Don't design components until affordances are mapped

No exceptions for urgency:

• "I'm in a hurry" → Passes take 5 minutes; fixing bad UX takes days
• "Just give me screens" → Screens without foundations need rework
• "Skip the analysis" → Analysis IS the value; screens are just output
• "I know what I want" → Then passes will be fast; still do them

Skipping passes to "save time" produces specs that need redesign. The 6 passes ARE the shortcut.

Execute these IN ORDER. Each pass produces required outputs before the next begins.

```dot

digraph passes {

rankdir=TB;

node [shape=box];

p1 [label="Pass 1: Mental Model\n(What does user think?)"];

p2 [label="Pass 2: Information Architecture\n(What exists, how organized?)"];

p3 [label="Pass 3: Affordances\n(What's obvious without explanation?)"];

p4 [label="Pass 4: Cognitive Load\n(Where will user hesitate?)"];

p5 [label="Pass 5: State Design\n(How does system talk back?)"];

p6 [label="Pass 6: Flow Integrity\n(Does this feel inevitable?)"];

visual [label="THEN: Visual Specifications"];

p1 -> p2 -> p3 -> p4 -> p5 -> p6 -> visual;

}

```

---

Pass 1: User Intent & Mental Model Alignment

Designer mindset: "What does the user think is happening?"

Force these questions:

• What does the user believe this system does?
• What are they trying to accomplish in one sentence?
• What wrong mental models are likely?

Required output:

```markdown

Primary user intent: [One sentence]

Likely misconceptions:

• [Misconception 1]
• [Misconception 2]

UX principle to reinforce/correct: [Specific principle]

```

---

Pass 2: Information Architecture

Designer mindset: "What exists, and how is it organized?"

Force these actions:

1. Enumerate ALL concepts the user will encounter
2. Group into logical buckets
3. Classify each as: Primary / Secondary / Hidden (progressive)

Required output:

```markdown

All user-visible concepts:

• [Concept 1]
• [Concept 2]
• ...

Grouped structure:

[Group Name]

• [Concept]: [Primary/Secondary/Hidden]
• Rationale: [One sentence why this grouping]

[Group Name]

...

```

This is where most AI UX attempts fail. If you skip explicit IA, your visual specs will be disorganized.

---

Pass 3: Affordances & Action Clarity

Designer mindset: "What actions are obvious without explanation?"

Force explicit decisions:

• What is clickable?
• What looks editable?
• What looks like output (read-only)?
• What looks final vs in-progress?

Required output:

```markdown

| Action | Visual/Interaction Signal |

| -------- | ------------------------- |

| [Action] | [What makes it obvious] |

Affordance rules:

• If user sees X, they should assume Y
• ...

```

No visuals required—just clarity on what signals what.

---

Pass 4: Cognitive Load & Decision Minimization

Designer mindset: "Where will the user hesitate?"

Force identification of:

• Moments of choice (decisions required)
• Moments of uncertainty (unclear what to do)
• Moments of waiting (system processing)

Then apply:

• Collapse decisions (fewer choices)
• Delay complexity (progressive disclosure)
• Introduce defaults (reduce decision burden)

Required output:

```markdown

Friction points:

| Moment | Type | Simplification |

|--------|------|----------------|

| [Where] | Choice/Uncertainty/Waiting | [How to reduce] |

Defaults introduced:

• [Default 1]: [Rationale]

```

---

Pass 5: State Design & Feedback

Designer mindset: "How does the system talk back?"

Force enumeration of states for EACH major element:

• Empty
• Loading
• Success
• Partial (incomplete data)
• Error

For each state, answer:

• What does the user see?
• What do they understand?
• What can they do next?

Required output:

```markdown

[Element/Screen]

| State | User Sees | User Understands | User Can Do |

| ------- | --------- | ---------------- | ----------- |

| Empty | | | |

| Loading | | | |

| Success | | | |

| Partial | | | |

| Error | | | |

```

This prevents "dead UX"—screens with no feedback.

---

Pass 6: Flow Integrity Check

Designer mindset: "Does this feel inevitable?"

Final sanity check:

• Where could users get lost?
• Where would a first-time user fail?
• What must be visible vs can be implied?

Required output:

```markdown

Flow risks:

| Risk | Where | Mitigation |

|------|-------|------------|

| [Risk] | [Location] | [Guardrail/Nudge] |

Visibility decisions:

• Must be visible: [List]
• Can be implied: [List]

UX constraints: [Any hard rules for the visual phase]

```

---

Only after all 6 passes are complete, create:

• Screen layouts
• Component specifications
• Design system (colors, typography, spacing)
• Interaction specifications
• Responsive breakpoints

The 6 passes inform every visual decision.

If you catch yourself doing any of these, STOP and return to the passes:

| Violation | What You're Skipping |

| ------------------------------------------ | --------------------------------------------------------- |

| Describing colors/fonts | All foundational passes |

| "The main screen shows..." | Pass 1-2 (mental model, IA) |

| Designing components before actions mapped | Pass 3 (affordances) |

| No friction point analysis | Pass 4 (cognitive load) |

| States only in component specs | Pass 5 (holistic state design) |

| No "where could they fail?" | Pass 6 (flow integrity) |

| "User is in a hurry" | ALL passes — urgency is a trap |

| "Just this once, skip to visuals" | ALL passes — exceptions become habits |

| "The PRD is simple enough" | ALL passes — simple PRDs still need mental model analysis |

Merging passes: "I'll cover mental model while doing IA" → You won't. Separate passes force separate thinking.

Skipping to visuals: "The PRD is clear, I can design screens" → Baseline testing shows agents skip 4+ passes when allowed.

Implicit affordances: "Buttons are obviously clickable" → Map EVERY action explicitly. What's obvious to you isn't obvious to users.

Scattered state design: "I'll add states to each component" → Holistic state table in Pass 5 catches gaps.

```markdown

# UX Specification: [Product Name]

[Required content]

[Required content]

[Required content]

[Required content]

[Required content]

[Required content]

---

[Only after passes complete]

```