The PM Prototyping Kit
Go from an idea to a clickable, shareable prototype in a day — with Claude Code
For: Product managers who want to turn an idea into something clickable without waiting weeks on the design and dev handoff.
This is the exact kit from the video — everything you need to run the whole product workflow with Claude Code, from a blank folder to a clickable prototype your team can open on their phone, with updates that come straight out of your feedback call.
The workflow in one line
Research a feature, turn it into user stories, build a clickable prototype, deploy a shareable link, then update it from the feedback call. All of it in about a day, and you don’t have to write the code yourself.
How to use the kit
- Run the Setup once (about 20 minutes): install Claude Code and the Vercel CLI, then connect Granola and your tracker.
- Open Claude Code in a new folder and drop in the Starter CLAUDE.md so it knows what you’re building.
- Work through The 5-step workflow — give Claude Code each instruction in order.
- Use the User-stories starter if you want a structure to hand it, or let it write the stories from its own research.
A few honest notes so it goes smoothly:
- What it builds is a prototype. It writes real code, but the production version is still your engineers’ build. The prototype’s job is to get everyone aligned on what to build, fast.
- The feedback loop needs a recorded call. Granola reads the call, but it can only work with what was actually said, so a good feedback conversation still matters.
- Full Granola transcripts need a paid Granola plan. Linear, Jira, and Figma connections are all optional.
Start with the setup, then the workflow. The first prototype is usually the one that changes how your whole team talks about the product.
Copy the tools
Grab any of these. No sign-up, no wall.
Setup — install & connect everything
Run these once (about 20 minutes). Installs Claude Code and the Vercel CLI, then connects Granola, Linear or Jira, and (optionally) Figma.
# PM Prototyping Kit — Setup (one-time, ~20 minutes)
# Run these in your terminal. Each block is optional except #1 and #2.
# ── 1) Install Claude Code ──
# macOS / Linux:
curl -fsSL https://claude.ai/install.sh | bash
# Windows (PowerShell):
# irm https://claude.ai/install.ps1 | iex
# Open a project folder and start it (first run opens your browser to log in):
mkdir my-prototype && cd my-prototype
claude
# Prefer VS Code? Install the "Claude Code" extension from the Marketplace,
# then run `claude` in the integrated terminal inside your project folder.
# ── 2) Vercel — deploy a shareable link ──
npm i -g vercel
vercel login # opens the browser to log in
# Later you can just tell Claude Code "deploy this with Vercel",
# or run `vercel` yourself for a preview / `vercel --prod` for a live link.
# ── 3) Granola — let Claude read your feedback calls ──
# Record your calls in Granola first. (Full transcripts need a paid Granola plan.)
claude mcp add granola --transport http https://mcp.granola.ai/mcp
# Then, inside Claude Code, run: /mcp → authenticate Granola
# ── 4) Linear — let Claude create/update tickets (optional) ──
claude mcp add --transport http linear-server https://mcp.linear.app/mcp
# ── 5) Jira / Confluence via Atlassian (optional — use instead of Linear) ──
claude mcp add --transport sse atlassian https://mcp.atlassian.com/v1/sse
# ── 6) Figma (optional power-up) — let Claude read your design system ──
# Needs a Dev or Full seat on a paid Figma plan.
claude plugin install figma@claude-plugins-official
# Claude can then read your design context (colors, spacing, components) so the
# prototype matches your look. It reads the design; it doesn't rebuild the file.
# ── Check what's connected, anytime ──
claude mcp list
The 5-step workflow
Open Claude Code in your project folder, then give it these five instructions in order — research, user stories, build, deploy, and update from your call.
# The PM prototyping loop — what to tell Claude Code, step by step.
# Open Claude Code in your project folder (run `claude`), then give it these five
# instructions in order. Replace [the feature] / [your product] with your own.
# ── 1. Research the feature ──
Spin up a few research agents in parallel to study how other products solve
[the feature] for [your product / audience]. Look at the patterns worth copying
and the common mistakes. Pull it all back into one short summary in research.md.
# ── 2. Turn it into user stories ──
Using research.md (and anything I've dropped into requirements/), write clear
user stories for [the feature]. Save them in user-stories.md, grouped by user
goal, short and testable. Ask me before inventing any scope.
# ── 3. Build a clickable prototype ──
Build a working, clickable web prototype from user-stories.md — real, navigable
screens I can click through, not a mockup. Keep the stack simple and the code
readable. This is a prototype to get feedback on, not production code.
# (Optional, if you connected Figma:)
# Use my Figma file [paste link] for the design system — match the colors,
# spacing, and components so it looks like our product.
# ── 4. Deploy & share ──
Deploy this with Vercel and give me the live link I can share with the team.
# ── 5. Update from the feedback call ──
# (After you present the prototype on a call recorded with Granola:)
Read my latest Granola call about [the feature]. Compare it against
user-stories.md, list the changes that came out of the conversation, then update
both the prototype and user-stories.md to match.
# (Optional, if you connected Linear/Jira:)
# Then push those changes to Linear / Jira as updated tickets.
Starter CLAUDE.md
Save this as CLAUDE.md in your prototype folder. Claude Code reads it automatically, so it knows what you're building and how to work.
# CLAUDE.md — project context for Claude Code
# Save this file as CLAUDE.md in your prototype folder. Claude Code reads it
# automatically every session, so it always knows what you're building.
## What this project is
A clickable PROTOTYPE for [the feature] in [your product]. Its job is to get
feedback fast. It is not production code — favor clarity and speed over polish.
## Who it's for / the goal
[Who uses this and what they're trying to get done.]
## How to work here
- Build real, navigable web screens I can click through and share.
- Keep the stack simple and the code readable (a PM may read it).
- When a requirement is unclear, ask me — don't invent scope.
- Keep these files in sync as the single source of truth:
- research.md → competitive / reference research
- requirements/ → any docs I drop in
- user-stories.md → the working user stories
- It should deploy to Vercel with one command.
## Design
[Paste your Figma link here if you have one, or describe the look: colors,
spacing, fonts. Keep it close to our real product.]
## Out of scope (don't build yet)
[Anything Claude should leave for later.]
User-stories starter
Drop this in your folder for structure, or let Claude fill it in from its research.
# User stories — [the feature]
# Drop this in your folder as user-stories.md, or let Claude fill it from research.md.
# One story per goal. Keep them short and testable.
## [User goal — e.g. "Sign in"]
- As a [user], I want to [do something], so that [outcome].
Acceptance:
- [ ] [what must be true]
- [ ] [an edge case]
## [Next user goal]
- As a [user], I want to [do something], so that [outcome].
Acceptance:
- [ ] ...
- [ ] ...
# Notes for Claude:
# - Group by user goal, not by screen.
# - Flag anything ambiguous instead of guessing.
# - Keep the list small for the first prototype — the goal is feedback, not coverage.
Want the next one first?
New tools like this go out in the newsletter, alongside the workflows and tools actually worth your time. 2x a week, no noise.
Free. Unsubscribe anytime.
Ready to go deeper?
Build With AI
Direct AI to build products for you — like having your own software engineer. No coding required.
Explore the guide — $139Want 1:1 help putting AI to work? See coaching options →