Step 01
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.
Try this with your AI assistant
Download the skill for this workflow. Version 1.0.1.
Source episode · 10:52How Notion Designs with AI: Brian Lovin's Prototype Playground and Claude Code Workflows
with 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
The workflow
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
5 steps
Step 02
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.
Step 03
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.
Step 04
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.
Step 05
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.
Runbook notes
How to recover when the loop fails and where human judgment helps.
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.
Related workflows
intermediateDataMeta Muse
How to Use AI for Hobby Improvement and Data Analysis for Golf & Chess
Connect data from your hobbies (like golf scores or chess games) to an AI agent to get automated analysis, visual dashboards, and actionable coaching insights. Turn raw data into a story that helps you improve.
Open
beginnerPersonalMeta Muse
How to Create a Personalized Shopping Catalog from Your Instagram Saves Using AI
Turn your unstructured Instagram 'Saved' collection into a fun, personalized shopping catalog. This workflow uses an AI agent to organize your saves and present them in a nostalgic, engaging format like the SkyMall magazine.
Open
advancedContentMeta Muse
How to Revive an Old Blog or Digital Archive as a Personal AI Podcast
Resurrect your old digital content, like a forgotten blog from Blogger or Tumblr, by using an AI agent to find, consolidate, and transform it into a daily personal podcast. Reconnect with your past self in a new, listenable format.
Open
Start shipping better products.
Join 250,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
Free to start · 14-day Pro trial · SOC 2 Type II
