Prototype Lab Skill

Create three distinct HTML/CSS/JS prototype directions using the same mock data.

Runs at Phase 3 of WIZARD.md — before the Product Brief and the Technical Plan, not after.

Inputs

All prototypes must reflect BP v0.0.2 (personas, positioning, MVP scope, primary flow) and the research in knowledge-base/.

The Product Brief is NOT an input. It does not exist yet — Phase 4 derives it from the direction approved here. If you find yourself needing the Product Brief, the thing you actually need is missing from BP v0.0.2; go add it there.

Rules

• Three directions, genuinely distinct — not three shades of one idea. Without direction the model falls back on a few default looks; none of the three should rest on them: cream or beige background, italic accent words in headlines, numbered "01 / 02 / 03" section labels, monospace labels, pill-shaped buttons. If a first draft uses one, replace it and add it to this list.
• All three read the same file: prototype-lab/shared/mock-data.js. Not "equivalent data" — the same file. Phase 4.2 derives the Technical Plan's entities from it, so it needs one guaranteed shared source.
• Same core flows across all three, so the comparison is about design and not content.
• Each direction carries an explicit brand hypothesis: palette, typography, density, tone.
• Do not contaminate the production app with prototype code.

Output

After the user picks a direction, write docs/product/DESIGN-DIRECTION.md — tokens, typography scale, spacing, component inventory, screens, the flow as actually clicked, and what was rejected. That file is what Phase 4 reads.