/prd-v04-visual-prototype-gate

name: prd-v04-visual-prototype-gate
description: >
  Generate visual prototype prompts from SCR- entries for Google Stitch (or equivalent UI generation tool).
  Triggers on: 'make a prototype', 'visualize screens', 'generate Stitch prompt', 'I need a visual demo',
  'prototype the workflow', 'show me what this looks like', 'get this to a demo', 'visual gate'.
  Consumes SCR- (Screen Flow Definition), PER- (Personas), UJ- (User Journeys), DES- (Design Components).
  Outputs Stitch prompt blocks per SCR- entry + Feedback Capture Template. No new SoT IDs created —
  this skill makes existing SCR- entries visual and routes feedback back to them.
context: fork
allowed-tools:
  - Read
  - Write
  - Edit
  - Glob
  - Grep

Visual Prototype Gate

Position in workflow: v0.4 Screen Flow Definition → **v0.4 Visual Prototype Gate** → v0.5 Red Team Review

Screens on paper are hypotheses. Screens rendered visually are testable. This skill converts SCR- entries into structured prompts for Google Stitch (or any UI generation tool), then captures feedback routed back to specific SoT IDs.

**Rule: No product advances past v0.4 without a visual prototype reviewed by at least one stakeholder.**

Consumes

• **SCR-\* entries** (from Screen Flow Definition) — Each SCR- becomes one Stitch prompt. 1:1 mapping, no exceptions.
• **PER-\* entries** (from Persona Definition) — User context shapes copy, complexity, and emotional framing per screen.
• **UJ-\* entries** (from User Journey Mapping) — Journey position determines each screen's emotional beat (uncertainty → clarity → confidence).
• **DES-\* entries** (from Screen Flow Definition) — Shared components referenced in prompts for visual consistency.
• **BR-\* business rules** — Constraints affecting visual layout (pricing tiers, role-based visibility, data rules).

Produces

• **Stitch Prompt Block per SCR-** — One structured prompt per screen, ready to paste into Stitch. Grouped by UJ- journey for context.
• **Prototype Context Brief** — Product context + design style preamble (pasted once into Stitch before screen prompts).
• **Feedback Capture Template** — Table mapping each prototype screen to its SCR- ID for structured review. See `assets/feedback-capture-template.md`.
• **No new SoT IDs** — This skill visualizes existing IDs. Feedback routes back to SCR-, DES-, or CFD- entries.

Step-by-Step Process

Step 1: Confirm Inputs Exist

Check that Screen Flow Definition is complete:

• [ ] At least 3 SCR- entries exist with Purpose, Key Elements, and Related IDs populated
• [ ] At least 1 UJ- journey references those screens
• [ ] Design style preference confirmed with user (or default: "Clean B2B SaaS, minimal, professional")

If SCR- entries are incomplete, stop and run `prd-v04-screen-flow-definition` first.

Step 2: Write the Prototype Context Brief

One block, written once per product. This is pasted into Stitch as the opening context before individual screen prompts.

PRODUCT CONTEXT
[2-3 sentences from PRD v0.1 Spark: what the product is, who uses it, what pain it solves]

PRIMARY USER
[From PER-001: role, context, technical comfort level]

DESIGN STYLE
[Confirmed aesthetic — e.g., "Clean B2B SaaS, dark sidebar, minimal. Color for status only."]

Step 3: Generate Per-Screen Prompts

For each SCR- entry, produce one Stitch prompt block. Follow this template:

SCREEN: [SCR-XXX] — [Screen Name]
Journey position: [UJ-XXX], Step [N] of [Total]
User goal: [From SCR- Purpose field]
Situation: [What just happened — derived from prior UJ- step]
Key UI elements: [From SCR- Key Elements, using specific UI/UX keywords]
  - [Element 1: be specific — "green 'Run' button, top right, disabled until selection made"]
  - [Element 2: reference DES-XXX if shared component]
  - [Element 3+]
Constraints: [BR-XXX rules affecting this screen — e.g., "free tier sees max 3 items"]
Emotional beat: [Derived from journey position — early=uncertainty, mid=engagement, end=confidence]
Layout: [UI surface type — full page, sidebar panel, modal, card grid, etc.]

**Stitch-specific guidance** (from research):

• Use UI/UX keywords: "navigation bar," "card layout," "call-to-action," not vague terms like "a button"
• One screen per Stitch generation for best results — do not combine multiple SCR- entries into one prompt
• Include adjectives for aesthetic: "minimal," "clean," "dark," "warm" — Stitch uses these for palette and typography
• Reference specific positions: "top-right," "below the header," "spanning full width"

Step 4: Identify the Money Shot

Select the single screen that communicates core product value fastest. This is typically the screen at the UJ- "Moment of Value" step. Mark it in the output. This frame gets screenshotted for any stakeholder deck, landing page, or pitch.

Step 5: Output Feedback Capture Template

Alongside prompts, output the feedback capture template (see `assets/feedback-capture-template.md`). This is the structured review artifact — reviewers annotate per-screen, feedback routes to specific IDs.

Stitch Workflow Notes

Google Stitch iterates best with incremental refinement: 1. Paste the Prototype Context Brief first 2. Generate one screen at a time using per-screen prompts 3. Refine each screen with targeted follow-ups ("Move the CTA to the right," "Change card layout to 2-column grid") 4. Export to Figma if design iteration continues beyond prototype stage

For non-Stitch tools, see `references/tool-adaptation-notes.md`.

Quality Gates (v0.4 → v0.5 Readiness)

Before proceeding to v0.5 Red Team Review:

• [ ] All SCR- entries have a corresponding visual prototype screen
• [ ] At least one stakeholder has reviewed the prototype
• [ ] Feedback Capture Template is completed with disposition for each item
• [ ] Money Shot identified and captured

Downstream Connections

| Consumer | What It Uses | |----------|--------------| | **v0.5 Red Team Review** | Visual prototype informs risk assessment —