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

Detailed References

• Feedback capture template: See assets/feedback-capture-template.md
• Tool adaptation notes: See references/tool-adaptation-notes.md
• Screen count guidelines: See references/screen-count-guidelines.md