prd-ux

PRD to UX Translation

Translate product requirements into UX foundations through 6 forced designer mindset passes. Each pass asks 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.

The Iron Law

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

Output Location

Write UX spec to same directory as source PRD:

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

Always write to file for persistence and mockup tool handoff.

The 6 Passes

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

Pass 1: User Intent & Mental Model

Mindset: "What does the user think is happening?"

Force:

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

Output: Primary intent, likely misconceptions, UX principles to reinforce.

Pass 2: Information Architecture

Mindset: "What exists, and how is it organized?"

Force:

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

Output: Concept list, grouped structure, navigation hierarchy.

Pass 3: Affordances & Action Clarity

Mindset: "What actions are obvious without explanation?"

Force:

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

Output: Action-signal mapping, affordance rules.

Pass 4: Cognitive Load & Decision Minimization

Mindset: "Where will the user hesitate?"

Identify:

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

Apply:

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

Output: Friction points table, defaults list.

Pass 5: State Design & Feedback

Mindset: "How does the system talk back?"

For EACH major element, enumerate:

• Empty
• Loading
• Success
• Partial
• Error

For each state: What does user see, understand, and can do?

Output: State matrix for each element/screen.

Pass 6: Flow Integrity Check

Mindset: "Does this feel inevitable?"

Check:

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

Output: Flow risks table, visibility decisions, UX constraints.

THEN: Visual Specifications

Only after all 6 passes, create:

• Screen layouts
• Component specifications
• Design system
• Interaction specifications
• Responsive breakpoints

Red Flags - STOP and Restart

Additional Resources

Reference Files

For detailed techniques and patterns:

• references/pass-enhancements.md — Advanced techniques for each pass
• references/state-choreography.md — Transition design, feedback patterns
• references/affordance-patterns.md — Z-index, touch targets, component consolidation
• references/failure-modes.md — Error mapping, recovery paths

Example Files

Working examples in examples/:

• complete-ux-spec.md — Full 6-pass example for a task manager

Quick Reference

Pass Output Summary

State Design Quick Matrix

Success Feedback Pattern

Action → Success indicator → Hold 300-500ms → Proceed

Users must SEE success before UI transitions.