🎯 Learning Objectives
After completing this issue, you will master:
- How to directly hand over Product Requirements Document (PRD) to Claude Code to generate a runnable prototype
- How PMs can drive Agents to complete the entire process from design to deployment without writing code
- Efficient Prompt Templates for Prototype Iteration
- Best Practices for Rapid Idea Validation
📖 Core Concepts Explained
13.1 A New Paradigm for PMs Using Claude Code
Traditional Process (2-4 Weeks):
PM writes PRD → Designer creates prototype → Frontend scheduling →
Development → Integration testing → Delivery
Claude Code Process (20 Minutes):
PM pastes PRD → Claude generates runnable prototype →
PM experiences directly in browser → Verbal feedback and adjustments → Completion
Key Shifts:
❌ PM does not need to learn React / Vue / CSS
✅ PM needs to learn how to clearly describe what they want
✅ PM needs to learn how to iterate with Claude Code
13.2 Factors for PRD to Prototype Conversion
| PRD Quality |
Prototype Output |
Iteration Rounds |
| Vague description ("Create an admin backend") |
Generic template, requires extensive modifications |
10+ rounds |
| With feature list |
Basically usable prototype |
5-8 rounds |
| With features + user stories + data structure |
Highly matches requirements |
2-3 rounds |
| Complete PRD + competitor screenshots |
Almost no modifications needed |
0-1 rounds |
13.3 PM-Friendly Instruction Template
A good PM → Claude instruction includes:
┌─────────────────────────────────────────────┐
│ 1. Project Overview (one sentence describing what it does) │
│ 2. Core User Stories (3-5 As...I want...) │
│ 3. Page List (Homepage, List page, Detail page...) │
│ 4. Data Entities (User, Order, Product...) │
│ 5. Technical Preferences (React? Vue? Don't care?) │
│ 6. Style Preferences (Dark theme? Similar to Notion?) │
└─────────────────────────────────────────────┘
💻 Simulating Claude TUI Interaction
Scenario: 20 Minutes from PRD to Runnable Prototype
> I am a product manager, please help me turn the following PRD into a runnable prototype:
## Project: Team OKR Tracking Tool
## Core Features:
1. Managers can create quarterly OKRs
2. Each Objective has multiple Key Results
3. Team members can update KR progress (0-100%)
4. Homepage dashboard displays overall completion rate
## Data Entities: Team, Objective, KeyResult
## Style: Similar to Linear, modern dark theme
╭─ Claude ─────────────────────────────────────────────╮
│ │
│ Received your PRD! I will generate a complete runnable prototype for you. │
│ │
│ 🏗️ Technical Solution: │
│ - Frontend: Next.js 14 + Tailwind CSS │
│ - Data: Local JSON Server (for rapid prototyping) │
│ - Deployment: Local localhost:3000 │
│ │
│ ⚙️ Tool: Bash │
│ $ npx create-next-app@latest okr-tracker \ │
│ --typescript --tailwind --app --no-eslint │
│ ✅ Project creation complete │
│ │
│ 📁 Creating the following pages: │
│ ⚙️ Tool: Write → app/page.tsx (Dashboard) │
│ ⚙️ Tool: Write → app/okr/page.tsx (OKR List) │
│ ⚙️ Tool: Write → app/okr/new/page.tsx (Create OKR) │
│ ⚙️ Tool: Write → app/components/Dashboard.tsx │
│ ⚙️ Tool: Write → app/components/OKRCard.tsx │
│ ⚙️ Tool: Write → app/components/ProgressBar.tsx │
│ ⚙️ Tool: Write → lib/types.ts (Data type definition) │
│ ⚙️ Tool: Write → lib/mock-data.ts (Mock data) │
│ │
│ ⚙️ Tool: Bash │
│ $ npm run dev │
│ ✅ Started: http://localhost:3000 │
│ │
│ 🎉 Prototype is ready! You can experience it directly in your browser. │
│ Includes: │
│ - Dashboard: Overall progress visualization (Donut chart) │
│ - OKR List: Grouped by quarter, expand to view KRs │
│ - Progress Update: Drag slider to update KR completion rate │
│ - Dark Theme: Modern UI in Linear style │
│ │
╰──────────────────────────────────────────────────────╯
Scenario: PM Iterates Prototype Using Conversational Language
> The progress bar on the dashboard is too small, can it be changed to a large donut chart?
Also, team avatars are not displayed, please add them.
╭─ Claude ─────────────────────────────────────────────╮
│ │
│ Okay, two adjustments: │
│ │
│ 1️⃣ Change progress bar → Large Donut Chart (SVG Donut Chart) │
│ ⚙️ Tool: Edit → app/components/Dashboard.tsx │
│ Replace ProgressBar component with DonutChart │
│ Size: 200x200px, gradient fill │
│ │
│ 2️⃣ Add team member avatars │
│ ⚙️ Tool: Edit → app/components/OKRCard.tsx │
│ Add Avatar component, using initial letter avatars │
│ │
│ ⚙️ Tool: Bash → $ npm run dev │
│ ✅ Refresh browser to see the effect │
│ │
╰──────────────────────────────────────────────────────╯
💻 Code Demo: Common PM Quick Commands
# ✅ Generate prototype directly from PRD file
claude "Read docs/prd.md, generate a runnable prototype in the browser"
# ✅ Screenshot-driven: Upload competitor screenshot
claude "Create a page similar to this screenshot" --image competitor.png
# ✅ Quickly add interactivity
claude "Add search functionality and pagination to the list page"
# ✅ Quickly generate demo data
claude "Generate 50 realistic-looking test data entries,
including username, company, creation date"
# ✅ One-click deploy to Vercel
claude "Deploy the project to Vercel, generate a shareable URL"
🔧 Tools Involved
| Tool |
PM's Use Case |
Description |
Bash |
Project creation and deployment |
Execute npx, npm commands |
Write |
Generate pages and components |
Create React/Vue files |
Edit |
Iterative modification |
Adjust UI based on PM feedback |
Read |
Read PRD |
Parse requirements document |
Bash |
Run dev server |
Start local preview |
📝 Key Takeaways from This Issue
- PMs don't need to write code; clearly describing requirements is the core skill.
- The more detailed the PRD, the higher the prototype's matching degree, and the fewer iteration rounds.
- Use conversational instructions to iterate prototypes, as naturally as talking to a designer.
- Competitor screenshots + feature descriptions = most efficient prototype generation input.
- Claude Code reduces the time from PM → Runnable Prototype from weeks to minutes.
🔗 References