Use this when a PM or product person wants to build a working prototype using AI coding tools (Bolt, Lovable, v0, Replit, Cursor, Claude Code). This isn't a tutorial for any single tool -- it's the methodology that works across all of them. Helps you go from idea to interactive prototype without writing code by hand.

Related skills: Start with /ai-product-spec to spec the feature before building. Use /tool-recommend for help choosing which tool to use. See /observability-plan for instrumenting analytics after the prototype works.

Before you start

Three principles that save hours:

1. AI is powerful, but it's not magic. The more precise you are about what you want to build, the better the results. "I want an AI-powered app" produces garbage. "I want a paid meeting scheduler with an editable details page and a preview feature" produces something useful.
2. Break things into pieces. Trying to build everything at once confuses the AI and makes debugging painful. Start with a core feature, test it, then layer on.
3. You're still the decision-maker. AI makes the building faster. It doesn't replace thinking about what to build or why.

Process

Step 1: Gather visual references

Before opening any AI tool, collect screenshots of products or UI patterns you want to reference:

• Screenshot the key screens from a product that does something similar to what you want
• Capture specific UI patterns you like (navigation, forms, cards, layouts)
• For AI-powered features: Screenshot examples of good AI output from similar products (how they display AI-generated content, confidence indicators, regenerate buttons, correction UX)
• Save these as image files -- you'll upload them as input

Why screenshots first: AI coding tools produce dramatically better results when they have visual references. A screenshot communicates layout, style, and interaction patterns faster than any text description.

Step 2: Choose your tool

Tool	Best for	Limitations	Market signal
Bolt	Full-stack web apps, rapid iteration	Can struggle with complex state management	Frequently cited in vibe coding discussions
Lovable	Polished UI, design-forward prototypes	Less flexibility for backend logic	#1 top reviewed product overall on Product Hunt
v0	UI components, React-based interfaces	Focused on frontend; limited backend
Replit	Full-stack with hosting, collaborative	Can be slower for UI-heavy work	Trending on Product Hunt
Cursor	Code-heavy projects, existing codebases	Requires more technical comfort	770 reviews, 5.0 rating; top community debate: "Cursor or Claude Code?"
Claude Code	Complex logic, multi-file projects, plan mode	Terminal-based; no visual preview built in	287 reviews, 5.0 rating; parallel agents via worktrees
Gumloop	AI workflow prototyping, prompt chaining, multi-model experiments	Early-stage reliability; not for production systems
Windsurf	Agentic IDE, natural language prompts, code generation	Requires IDE comfort	4.7 rating, agentic IDE category
Base44	No-code apps via natural language for business users	Limited customization for complex logic	4.5 rating, non-technical builder
Warp	Terminal-based agent execution, local and cloud	Developer-only	4.8 rating, agent platform

First question: Amplifier or Builder?

• If the prototype builder is a developer -- Cursor, Claude Code, Windsurf, or Warp (amplifiers that make developers faster)
• If the prototype builder is NOT a developer (PM, designer, founder) -- Lovable, v0, bolt.new, Replit, or Base44 (builders that let non-developers ship)
• If you need both -- Use a builder for the UI/flow, then hand off to a developer with an amplifier for backend/integration work

Decision criteria:

• UI-forward prototype, no backend: Bolt, Lovable, or v0
• Full-stack with database/auth: Bolt or Replit
• Working in an existing codebase: Cursor or Claude Code
• Complex multi-file logic or AI orchestration: Claude Code
• Non-technical stakeholder driving the prototype: Lovable, v0, or Base44
• AI workflow prototyping (prompt chains, multi-model): Gumloop -- visual canvas for chaining prompts across ChatGPT, Gemini, and other LLMs at $37/mo. Good for testing AI workflows before committing to production infrastructure.

If unsure, start with Bolt or Lovable for UI-forward prototypes. Use Cursor or Claude Code if you need more control or are working with existing code.

Note: The AI coding tool landscape shifts fast. Check knowledge/ai-market-landscape-reference.md for current rankings and community sentiment before committing -- a tool's strengths six months ago may not match today.

The AI/no-code convergence: AI generation is eating no-code from below. Traditional no-code platforms (Bubble, Retool, FlutterFlow) use drag-and-drop to build apps without code. AI-led builders (Rork, Repaint, Noah AI) skip the canvas entirely -- you describe what you want, and the tool generates it. The practical question for prototyping: describe-and-deploy vs. drag-and-drop vs. prompt-to-code. If the builder is non-technical and needs speed, AI-led builders are worth evaluating alongside vibe coding tools. If the builder needs database schema control and complex logic, full-stack no-code platforms still have an edge. See /tool-recommend for the full no-code cluster breakdown.

Step 3: Prompt for a plan, not code

Upload your screenshots and write a clear prompt. The critical rule: ask for a plan before any code.

If you already have an AI product spec (from /ai-product-spec), paste the overview, model requirements, and scope sections into your prompt. This gives the AI tool the architectural context it needs.

Example prompt structure:

Create a [type of app] that [core function]. It should allow [user type] to [key actions].

Here's a screenshot of a similar product for reference [attach image].

Don't write any code yet -- just create a plan for how you'd build this, including:
- What screens/pages are needed
- What the data model looks like
- What the key interactions are

For AI-powered features, also include:

This app uses AI to [describe AI capability]. The AI takes [input type] and produces [output type].
When the AI output is wrong, the user should be able to [correction mechanism].

Why plan first: Code is harder to undo than plans. If the AI generates 500 lines of wrong code, you're debugging. If it generates a wrong plan, you just say "change X."

Step 4: Review and refine the plan

Read the AI-generated plan carefully:

• Are the screens/pages right?
• Is the data model sensible?
• Are the interactions what you intended?
• Is anything missing or over-engineered?

Revise the plan until you're satisfied. Typical refinements:

• "Remove the admin dashboard -- I don't need that yet"
• "The payment flow should happen before the booking confirmation, not after"
• "Add a preview step between editing and publishing"

For AI features, also check:

• Does the plan account for AI processing time? (loading states, streaming)
• What happens when the AI output is wrong or empty?
• Can the user correct, dismiss, or regenerate AI output?
• Is the AI call happening at the right point in the user flow?

Do not ask it to code until the plan looks right.

Step 5: Build in phases

Break the plan into 3-5 phases. Build one phase at a time:

Phase	Scope	Review before next?
1	Core feature only (the one thing this must do)	Yes -- test it works
2	Primary supporting feature	Yes -- test integration
3	UI polish, match design references	Yes -- visual review
4	Secondary features (edit, settings, admin)	Yes -- test edge cases
5	Integration (payments, auth, external APIs)	Yes -- test end-to-end

For AI-powered features: Get the UI and data flow working with mock/hardcoded AI responses first. Once the screens, navigation, and data model work correctly, swap in real AI API calls. This prevents debugging AI quality issues and UI bugs at the same time.

Prompt for each phase individually:

Now implement Phase 1 from the plan: [describe the core feature].
Match the visual style of the reference screenshot I uploaded.

Step 6: Match design to references

After the core functionality works, align the UI with your visual references:

Make the interface match the reference screenshot I uploaded earlier.
Keep the current functionality but adjust the layout, spacing, and visual style.

Iterate on specific elements:

• "Make the header match the reference -- same color, same navigation layout"
• "The card component should have rounded corners and a subtle shadow like the reference"
• "Use a cleaner font -- something like the reference site"

Step 7: Add features incrementally

For each new feature, follow the same pattern:

1. Take a screenshot of a reference for that feature (if applicable)
2. Upload it and describe what you want
3. Ask the AI to add it to the existing prototype
4. Test before moving to the next feature

Common additions:

• Edit functionality ("Add an edit option when the user clicks the ... button")
• Payment integration ("Add a payment page where users select a time slot and pay")
• Preview mode ("Create a preview section that lets users review before confirming")

Step 8: Debug, test, and instrument

When something doesn't work, describe the problem clearly:

• "The pricing section doesn't appear on the booking page -- it should show after the user selects a time slot"
• "The edit button opens but the form fields are empty -- they should be pre-filled with existing data"
• "Fix the error that appears when I click Submit without filling in the email field"

Debugging AI features specifically: When AI output quality is poor, the fix is usually the prompt, not the code. Test your prompt in the model provider's playground or chat interface first. Once the prompt produces good output in isolation, wire it into the prototype. Common AI debugging moves:

• Add more context to the system prompt (examples of good output, constraints)
• Change the output format (ask for JSON instead of free text, or vice versa)
• Try a more capable model
• Add input preprocessing (clean or structure the input before sending to the model)

After the prototype works:

• User testing: Put it in front of real users. Watch what they do, not what they say.
• Analytics: Add basic tracking (page views, button clicks, funnel completion) using PostHog, Mixpanel, or a simple event logger.
• Iterate: Use what you learn to refine. This is a prototype, not a final product.

Common pitfalls

Pitfall	Fix
Asking the AI to build everything at once	Break into phases. One feature at a time.
Not providing visual references	Screenshots are worth 1,000 words of description
Jumping to code before reviewing the plan	Always plan first, code second
Trying to fix bugs by adding more features	Fix the bug first, then move on
Over-specifying every pixel	Get the functionality right, then polish the UI
Not testing between phases	Review after every phase. Problems compound.
Building AI features and UI simultaneously	Get UI working with mock data first, then wire in AI
Debugging AI output quality in the prototype	Test prompts in a playground first, then integrate
No way for users to correct AI mistakes	Always include edit, dismiss, or regenerate controls

Output location

This skill produces guidance and a prototyping plan in the conversation. The actual prototype is built in the chosen AI coding tool.

Create a meeting cost calculator web app. A user pastes or types in meeting details
(attendee count, duration in minutes, average seniority level), and the app calculates
the estimated dollar cost of the meeting. It shows a results card with the total cost,
cost per minute, and a shareable link.

Here are three reference screenshots [attach all three].

Don't write any code yet -- create a plan including:
- What screens are needed
- What the data model / calculation logic looks like
- What the key interactions are
- How the share link works

Now implement Phase 1: the input form only.
Three fields: number of attendees (number input), meeting duration in minutes (number input),
average seniority (dropdown: Junior / Mid / Senior / Director+).
Use salary benchmarks: Junior $80K, Mid $120K, Senior $160K, Director+ $220K.
Calculate loaded cost at 1.3x salary.
Match the clean, minimal layout from the Calendly screenshot I uploaded.
No results card yet -- just the form and a Calculate button.