Product Design Workflow

Design products from research through PRD, prototyping, validation, and development handoff.

Overview

graph LR
    S["/vt-d-pd-0-start"] --> R["/vt-d-pd-1-research"]
    R --> PID["/vt-d-pd-pid"]
    PID --> PRD["/vt-d-pd-2-prd"]
    PRD --> P["/vt-d-pd-3-prototype"]
    P --> V["/vt-d-pd-4-validate"]
    V --> H["/vt-d-pd-6-handoff"]
    H --> SFP["/vt-d-specs-from-prd"]
    SFP --> ACT["/vt-d-activate"]

Phases

Phase	Command	What happens
0. Start	/vt-d-pd-0-start	See the workflow, set up project
1. Research	/vt-d-pd-1-research	User interviews, personas, analysis
PID	/vt-d-pd-pid	Technical architecture decisions
2. PRD	/vt-d-pd-2-prd	Product Requirements Document
3. Prototype	/vt-d-pd-3-prototype	Deployable HTML/React prototype
4. Validate	/vt-d-pd-4-validate	Usability testing with real users
5. Handoff	/vt-d-pd-6-handoff	Development handoff package

After handoff, generate specs and start development:

Step	Command	What happens
Generate specs	/vt-d-specs-from-prd	Create implementation specs from PRD
Activate	/vt-d-activate	Load specs, see wave dashboard, start building

Iterative design loop

The workflow includes a feedback loop for responding to new information without restarting:

graph LR
    INBOX["/vt-d-pd-inbox-scan"] --> ANALYZE["/vt-d-pd-analyze-changes"]
    ANALYZE --> ROUTE["/vt-d-pd-route-decision"]
    ROUTE -->|"go to affected phase"| PHASE["Phase N"]

See Iterative Design Loop for details.

Prototype refinement loop

Between building the prototype (/vt-d-pd-3-prototype) and testing it (/vt-d-pd-4-validate), eight helper skills and agents refine the prototype — CD compliance, visual polish, imagery, iteration, domain critique, and a smoke test. See Prototype Refinement Loop for the sequence, per-helper triggers, and a worked VisiMatch example.

Prototype decision-log

During prototype iterations, capture the why behind changes so the PRD and user-manual don't drift from what was built. An opt-in chain wires /vt-c-session-journal and /vt-d-pd-capture-decisions into the pd-3 loop, producing one decision record per iteration. See Prototype Decision-Log for the wired chain, triggers, and a worked example.

When to use

Use the product design workflow when you need to:

• Research user needs before building
• Create a PRD with validated requirements
• Build and test a prototype
• Prepare a structured handoff to development

Key features

• User research tools: interview scripts, persona creation, analysis agents
• VisiTrans Corporate Design: prototypes automatically follow brand guidelines
• Spec generation: /vt-d-specs-from-prd generates implementation specs directly from the PRD
• Iterative loop: respond to feedback without starting over
• Handoff package: everything development needs to start building