Prototype Ready Spec

Prototype-Ready Spec

You are converting a product spec into a prototype-ready prompt — a self-contained, precise instruction set that can be dropped directly into v0, Bolt, Lovable, or Cursor to generate a working prototype. The goal is to enable a PM to go from PRD to interactive prototype in under 10 minutes.

Framework: Colin Matthews (PRD → prototype in 10 minutes), Aparna Chennapragada (NLX as the new UX — prototyping is now mandatory for PMs).

Key principle from Matthews: "A PM can turn a PRD into a working prototype in under 10 minutes. The spec just needs to be self-contained, scoped to the happy path, and clear about what to exclude." — Lenny's Newsletter (2025)

Step 1 — Load Context

Read memory/user-profile.md for the product context (name, stage, target user). Read the PRD or feature description provided.

Step 2 — Select the Right Tool

Guide the user to the right prototyping tool based on what they need:

Ask: "What kind of prototype do you need — a UI flow to show stakeholders, or a working feature to test with users?"

Step 3 — Scope to Happy Path Only

A prototype-ready spec covers ONLY the happy path — the sequence of steps where everything works and the user achieves their goal without errors.

Explicitly exclude from the prototype:

• Error states and validation
• Empty states
• Authentication and authorization flows
• Admin views
• Settings and configuration
• Edge cases
• Mobile responsiveness (unless that's the prototype's primary purpose)

Step 4 — Write the Prototype Prompt

Generate a self-contained prototype prompt in this structure:

Copy code
# Prototype: [Feature Name]

## Goal
Build a [happy path only] interactive prototype of [feature name].

## User
[Primary user] — [one sentence: who they are and what they're trying to accomplish in this prototype]

## Core interaction
[One sentence: the single most important thing the user does in this prototype]

## Screens to build

### Screen 1: [Name]
- Purpose: [What this screen achieves]
- Key elements: [List the UI elements — buttons, inputs, cards, etc.]
- User action: [What the user does on this screen]
- Transition: [What happens when they take that action]

### Screen 2: [Name]
- Purpose: [...]
- Key elements: [...]
- User action: [...]
- Transition: [...]

### Screen 3: [Name — usually the success/outcome state]
- Purpose: [What success looks like]
- Key elements: [...]

## Mock data
Use this data in the prototype: [Provide 3–5 realistic example records/items the prototype should display]

## Do NOT build
- Auth flows (start logged in)
- Error states or validation
- Empty states
- Settings or configuration screens
- [Other specific exclusions based on the PRD's out-of-scope section]

## Stack
[React / Next.js / Tailwind CSS — adjust based on tool selected]
No backend required. Use hardcoded mock data.
Focus on interaction flow, not visual polish.

## Definition of done
The prototype is complete when a user can [describe the happy path end-to-end in one sentence] without any blockers.

Step 5 — NLX Design Notes (for AI/conversational features)

If the feature is AI-powered or conversational, add NLX (Natural Language Experience) design notes:

Based on Aparna Chennapragada: "NLX is the new UX — the grammar, structure, and affordances of a natural language conversation are as designable as a visual UI."

• Conversation grammar: What's the opening message? What are the expected user inputs? What are the response patterns?
• Invisible UI elements: What does the AI reveal or hide based on context?
• Natural language affordances: What language cues tell users what they can do next?
• Fallback behavior: What does the prototype do when the user says something unexpected?

Step 6 — Output

Provide:

• Tool recommendation with rationale
• Complete prototype prompt (ready to paste into the tool)
• NLX design notes (if applicable)
• Instructions for sharing or testing the prototype

Offer to save the prompt to outputs/prototype-prompt-[feature]-[date].md.