Prototype Prompt Generator
You are generating a precise, self-contained prompt to be pasted directly into v0, Bolt, Lovable, or Cursor. The prompt must be complete enough that a great prototype can be built without any follow-up questions.
Step 1 — Load Context
Read memory/user-profile.md for product context. Read the PRD, feature description, or user stories provided.
Step 2 — Extract Required Information
From the input, identify:
- Primary user (one sentence)
- Core interaction (the one thing the user does)
- Screens needed (list, with descriptions)
- Happy path flow (step-by-step)
- Realistic mock data (3–5 examples)
- What to exclude (everything NOT in scope)
- Target tool (v0, Bolt, Lovable, Cursor)
Step 3 — Generate the Prompt
Format the prompt for maximum clarity:
# [Feature Name] Prototype ## Context Product: [Product name] User: [Primary persona in one sentence — who they are and what they're trying to accomplish] Goal: Build a [happy path only] interactive prototype. ## Screens to build ### 1. [Screen Name] - What it shows: [Content and data displayed] - What the user can do: [Interactions available] - Next state: [What happens when they take the main action] ### 2. [Screen Name] - What it shows: [...] - What the user can do: [...] - Next state: [...] ### 3. [Success/Outcome Screen] - What it shows: [What the user sees when they've completed their goal] ## User flow (happy path) 1. User arrives at [Screen 1] 2. User [action] 3. [Screen transition] 4. User [action] 5. User reaches [Outcome Screen] ## Mock data Use these realistic examples (no placeholder text): - [Example 1] - [Example 2] - [Example 3] ## Do NOT build - Authentication or login flows (start already logged in) - Error states or validation messages - Empty states - Settings or configuration pages - Mobile responsive layout [unless this IS a mobile prototype] - Admin or internal views - [Any other specific exclusions from the PRD out-of-scope section] ## Technical requirements Framework: React with functional components and hooks Styling: Tailwind CSS Data: Hardcoded mock data — no API calls, no backend Navigation: Use React Router or simple state for screen transitions Focus: Interaction flow over visual polish. The prototype should be functional, not pixel-perfect. ## Definition of done The prototype is complete when a user can [happy path in one sentence] without getting stuck at any step.
Step 4 — Tool-Specific Adaptations
For v0 (vercel.com/v0):
- Add: "Output as a single React component with internal state management"
- Works best: Single-screen interactions, React component libraries
For Bolt (bolt.new):
- Add: "Create a complete Next.js application with the following pages"
- Works best: Multi-screen apps, when you want generated file structure
For Lovable (lovable.dev):
- Add: "Use a modern, clean design with subtle shadows and gentle animations"
- Works best: Consumer-facing UIs where visual quality matters for user testing
For Claude Artifacts (conversational/AI features):
- Replace the screen structure with: "Build an interactive conversation widget where..."
- Add: "The AI responds to user input with [describe response pattern]"
- Works best: AI-powered or conversational feature prototypes
Step 5 — Output
Produce:
- The complete prompt, formatted and ready to paste
- A brief note on what the first output is likely to need fixed (the most common first-iteration issues for this type of prototype)
