Step01
Set Up Your Workspace for Real-Time Feedback
Arrange the terminal, editor, and live preview side by side. Start from a dedicated prototype directory so you can read the plan, inspect changes, and see the result without losing context.
IntermediateDesign
Use Claude Code to Rapidly Build Interactive Prototypes from Ideas
Turn a spoken product idea into a working prototype by pairing plan mode with repository context, a live preview, and browser checks the agent can run without handing every validation step back to you.
Source episode · 10:52
How Notion Designs with AI: Brian Lovin's Prototype Playground and Claude Code Workflowswith Claire Vo
Brian creates a podcast player prototype with Monologue and Claude Code, reads the plan, relies on shared and local Claude context, and teaches the agent to lint and test the browser interaction itself.
Before you start
What you need
- A local Next.js prototype workspace
- Claude Code and a code editor
- A live browser preview
- Optional dictation and browser automation tools
What you’ll make
A working podcast detail prototype with video, audio, episode metadata, and a confetti interaction on play.
Tools used
- ClaudeVisitClaude
Anthropic AI assistant
- CursorVisitCursor
AI-first code editor
Step by step
The workflow
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
5 steps
Step02
Dictate Your Prompt for Speed
Speak or type the product idea in concrete UI and behavior terms. Name the page, required content, interactions, and one memorable detail rather than dictating the implementation.
Dictation is useful when the idea is easier to describe aloud, but the value comes from concrete behavior and context.
Step03
Plan Before Generating Code
Switch Claude Code to plan mode. Read the proposed files, dependencies, component structure, and validation approach before allowing edits. Correct anything that conflicts with the repository or expands the scope.
Example prompt
Plan a podcast episode detail prototype in this repository. Include a video player, audio player, title, description, and confetti when either player starts. First inspect the repository instructions and existing patterns. List the files to create or change, dependencies, component structure, interaction state, and browser checks. Do not write code yet.
Reading the plan is a critical step. With a little development knowledge, you can catch logical errors early and save significant debugging time.
Step04
Provide the Detailed Prompt
After the plan is sound, give the full request and let the agent implement it inside the assigned directory. Keep shared repository rules in CLAUDE.md and user specific paths or boundaries in an uncommitted local file.
Example prompt
Build a prototype in the How I AI directory for a podcast episode detail page. Include a video player, audio player, episode title, description, and confetti when play begins. Follow the approved plan and the repository instructions.
Step05
Execute and Review
Have the agent run lint and type checks, launch the prototype, open it with browser tooling, click play, inspect console errors, and confirm the media controls and confetti. Review the working result and code together.
What good looks like
- The plan fits the repository structure and stack.
- The prototype runs locally without type or lint errors.
- Video and audio controls work in the browser.
- The play interaction produces the requested confetti effect.
Build your next product with ChatPRD
Turn an idea into a PRD, user stories, and a plan.
After the steps
Runbook notes
How to recover when the loop fails and where human judgment helps.
Recover
If it goes sideways
- The plan ignores repository conventions
- Add shared stack and structure rules plus a local file that identifies the user workspace and protected directories.
- The plan adds unnecessary files or dependencies
- Edit the plan before execution and ask for the smallest structure that satisfies the interaction.
- The agent asks you to test every change manually
- Give it lint, typecheck, and browser tools plus explicit instructions to exercise the interaction and inspect errors itself.
Keep building
Related workflows
intermediateDesignClaudeCodex+1
Create a Production-Ready Design System Using Claude and Codex
Use a hybrid AI workflow to bridge design and development. Generate high-level design concepts and tokens with Claude, then use Codex for robust implementation of the technical components in your codebase.
Open
advancedEngineeringDevin
Scale Code Quality with an Automated 'Land PR' AI Workflow
Implement a QA loop for AI-generated code using Devin. This playbook combines automated code reviews with an agent-recorded video walkthrough for visual verification, ensuring high-quality merges at scale.
Open
advancedOperationsDevin
Automate Business Health Checks with a 'Watchdog' AI Agent Playbook
Build a reusable 'Watchdog' playbook in Devin to automatically monitor customer accounts. The agent proactively checks for errors, synthesizes a prioritized list of critical issues, and saves you time.
Open
Start shipping
better products.
Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
Free to start
No credit card
SOC 2 certified
Enterprise ready