Zero to PRD & Prototype

Go from zero to a published PRD in Notion + a working interactive prototype — powered by Claude Code.

What you get

1. Notion PRD — Written in your voice, with real user quotes and data from your research
2. Interactive prototype — Built with your Figma design system, deployed to Vercel
3. 5 spec files — Product, design, tech, structure, and tasks — powering both outputs

Prerequisites

1. Claude Code

# Install Claude Code CLI
npm install -g @anthropic/claude-code

# Verify it works
claude --version

You'll need an Anthropic API key or a Claude Pro/Team subscription.

2. Node.js (v18+)

# Check your version
node --version

# If you need to install/update (macOS):
brew install node

# Or use nvm
nvm install 18

3. Vercel account (for prototype deployment)

npm install -g vercel
vercel login

4. Your tool API keys (optional, guided during setup)

Claude will walk you through connecting whichever tools you use on first run. Supported integrations:

Tool	What it gives you
Figma	Pull design tokens and components directly from your design system
Notion	Publish PRDs as Notion pages and pull research docs
Slack	Pull research from conversations and feedback channels
Amplitude	Pull product analytics, funnel data, user behavior metrics
Hex	Pull data analysis, SQL queries, notebooks
Enterpret	Pull customer feedback insights and support ticket analysis
Granola	Pull meeting notes and interview transcripts

You don't need all of these — just the ones you use. Claude guides you through each one.

Quick start

Step 1: Clone this repo

git clone https://github.com/YOUR_USERNAME/zero-to-prd-and-prototype.git my-project
cd my-project

Step 2: Drop your research (optional)

Put interview transcripts, survey data, competitive screenshots, and any existing docs into the 1. Research/ folder. Or provide links during setup — Claude pulls directly from Notion, Slack, Figma, and other MCP sources.

Step 3: Run setup

claude

Then type:

/setup

Claude walks you through everything:

1. MCP connections — Guides you through connecting Figma, Notion, Slack, Amplitude, etc.
2. Research intake — Reads your files, pulls from connected tools, asks for anything missing
3. Design system — Pulls tokens from your Figma file
4. Writing voice — Analyzes your past PRDs to match your style
5. Product interview — 14 questions to build a complete PRD
6. Design spec — Maps your Figma tokens to the prototype
7. Tech spec — Stack, APIs, mock data
8. Structure — File architecture and component map
9. Tasks — Build order with milestones
10. Notion publish — PRD goes live as a Notion page
11. Build — Prototype built task by task

Step 4: Deploy

After the build completes:

cd "4. Prototype"
npx vercel --prod

Folder structure

my-project/
├── CLAUDE.md              # The engine — drives the entire workflow
├── .claude/commands/      # /plan and /new-component slash commands
├── .mcp.json              # Figma + Notion API config
├── 0. System/             # Persistent memory (carries across projects)
│   ├── user.md            # Your preferences and working style
│   ├── writing-voice.md   # Your writing style guide
│   ├── lessons.md         # Rules Claude learns from your corrections
│   └── knowledge.md       # Company context and terminology
├── 1. Research/           # Raw inputs (transcripts, data, docs)
├── 2. Product/            # PRD, tech spec, structure, tasks
├── 3. Design/             # Design tokens, design spec
└── 4. Prototype/          # Built prototype

After setup

Command	What it does
claude then /plan	Generate a plan for the next phase
claude then /new-component Button	Scaffold a new component
npm run dev	Run the prototype locally
npm run build	Verify production build
npx vercel --prod	Deploy to Vercel

How it improves over time

The 0. System/ folder carries forward across projects:

• lessons.md accumulates rules from your corrections — Claude stops making the same mistake twice
• user.md builds a profile of your preferences — Claude adapts to how you work
• knowledge.md stores company context — no re-explaining your product, customers, or terminology
• writing-voice.md captures your style — every PRD sounds like you wrote it

Copy this repo into a new folder for each project. Run /setup again. Each project gets better.

Troubleshooting

Figma: Empty tokens or "Could not read file"

You're probably using a top-level file URL. Open the file in Figma, select a specific component (button, card, etc.), and copy that URL.

Notion: "Could not create page" or 401

Your integration doesn't have access to the target page. In Notion: open the page → ... → Connections → add your integration.

Build: Module not found

cd "4. Prototype"
rm -rf node_modules package-lock.json
npm install

Context window: Claude loses track mid-build

Normal on large builds. Use /clear between tasks. The milestone-based build is designed for this — each task is a clean checkpoint.

Claude asks too many questions

Say "sounds good" or "your call" — Claude moves on when you trust its judgment.