From Figma to a Working Prototype in 1 Hour: AI-Powered Rapid Prototyping

A first version without user feedback is money down the drain. A prototype built in an hour lets you show the product to real users today — not next quarter. The difference isn’t code quality; it’s how fast you test the hypothesis.

This article walks through a specific pipeline: a Figma mockup becomes a working prototype via AI code generators. No manual coding. Three tools, five steps, one hour.

What You Need Before Starting: The Minimum Kit

• A Figma mockup. At least 2–3 screens of the key flow. Pixel-perfect design isn’t required. A wireframe with the right structure and key elements is enough.
• Accounts. v0.dev (Vercel), bolt.new, claude.ai. Free tiers are sufficient for a first prototype.
• Understanding the flow. Which screens connect, what happens when a button is clicked, where data comes from. This matters more than polished mockups.

What you do NOT need:

• Development experience
• A configured environment (Node.js, npm, IDE)
• A Figma design system

Pipeline: From Mockup to Prototype in 5 Steps

Figma mockup
    │
    │  Step 1: Export + description
    ▼
Structured brief
    │
    │  Step 2: AI UI generation (v0)
    ▼
React/Next.js components
    │
    │  Step 3: App assembly (Bolt)
    ▼
Working app with routing
    │
    │  Step 4: Logic and data (Claude Artifacts)
    ▼
Interactive prototype
    │
    │  Step 5: Deploy
    ▼
URL for testing

Each step takes 10–15 minutes. Total time depends on the complexity of the mockup and the number of AI iterations.

Step 1: Export from Figma and Prepare the Brief

AI code generators work from text and images. The goal here is to turn a visual mockup into a structured description the AI can read without guessing.

Exporting Screenshots

Select each frame (screen) in Figma. Export: PNG, 2x resolution. File naming: 01-landing.png, 02-dashboard.png, 03-settings.png. The number order reflects the user flow.

Writing the Brief

The brief has three blocks for each screen:

Block 1: Structure. List all elements from top to bottom. Navigation, headings, cards, buttons, forms, footer. Indicate hierarchy: what’s inside what.

Block 2: Behavior. What happens on interaction. The “Create Project” button opens a modal. Clicking a card navigates to the detail page. The form submits data and shows a notification.

Block 3: Data. What data is displayed. The project list contains name, date, status, and the author’s avatar. The dashboard shows 4 metrics: revenue, users, conversion, churn.

Example brief for a landing page:

Screen: 01-landing.png

Structure:
- Header: logo left, navigation (Features, Pricing, Blog), "Get Started" button right
- Hero: H1 headline, subtitle, two buttons (primary "Start Free", secondary "Watch Demo")
- Features: 3-column grid, each card = icon + headline + description
- Social proof: logos of 5 companies in a row
- CTA: full-width block with headline and button
- Footer: 4 columns of links, copyright

Behavior:
- "Get Started" and "Start Free" link to /signup
- "Watch Demo" opens a modal with a video
- Header sticks on scroll

Data:
- Headline and text — placeholder, replace with real copy when available
- Company logos — placeholder images

Why the Brief Matters More Than the Screenshot

A screenshot gives the AI visual context. The brief gives it semantics. The model sees a rectangle with text and a button — that’s it. Without a brief, it can’t know this is a project card that links to /projects/:id and pulls data from an API. With one, you get better output on the first try. Fewer back-and-forth iterations.

Preparing Mock Data

Prepare a JSON data structure for each screen. Example for a dashboard:

{
  "metrics": [
    { "label": "Revenue", "value": "$12,450", "change": "+12.5%" },
    { "label": "Users", "value": "1,234", "change": "+8.1%" },
    { "label": "Conversion", "value": "3.2%", "change": "-0.4%" },
    { "label": "Churn", "value": "1.8%", "change": "+0.2%" }
  ],
  "recentTransactions": [
    { "customer": "Acme Corp", "amount": "$2,400", "status": "completed" },
    { "customer": "Globex Inc", "amount": "$1,800", "status": "pending" }
  ]
}

Pass mock data with the prompt. The AI uses real-looking values instead of “Lorem ipsum” and “Item 1, Item 2.” The prototype comes across as far more believable to testers and stakeholders.

Step 2: Generate UI Components in v0

v0 by Vercel generates React components on top of shadcn/ui and Tailwind CSS. The output is clean, typed React code you can drop straight into a Next.js app.

How to Submit a Request

Upload a screenshot of the screen and add a text prompt. A prompt format that consistently produces good results:

Recreate this UI as a React component.

Stack: React, TypeScript, Tailwind CSS, shadcn/ui.

Structure:
[paste the "Structure" block from the brief]

Requirements:
- Responsive: mobile-first, breakpoints sm/md/lg
- Use shadcn/ui components where possible (Button, Card, Input, Dialog)
- Mock data inline, no API calls
- Dark mode support via Tailwind dark: prefix

Iterations

The first result is rarely exactly right. Common problems and how to fix them:

Problem	Fix prompt
Wrong proportions	”Make the hero section taller, reduce padding on feature cards”
Missing component	”Add a testimonials section between Features and CTA”
Wrong grid	”Change features from 2 columns to 3 columns on desktop”
Poor typography	”Use text-4xl font-bold for H1, text-lg text-muted-foreground for subtitle”

Two or three iterations per screen is usually enough. v0 keeps context from earlier generations within the same chat, so you don’t have to re-explain structure every time.

Exporting the Code

When you’re happy with the component, click “Code” and copy it. v0 gives you one file per component. Save it locally or paste it straight into Bolt in the next step.

Repeat for each screen. Three screens — three components. They’re not wired together yet. That’s Step 3.

Step 3: Assemble the App in Bolt

Bolt.new by StackBlitz stands up a full application in the browser. Where v0 generates individual components, Bolt creates an entire project — routing, file structure, package.json, configuration, all of it.

Starting Prompt

Create a Next.js 14 app with App Router and the following pages:

1. Landing page (/)
2. Dashboard (/dashboard)
3. Settings (/settings)

Use Tailwind CSS and shadcn/ui.
Add a shared layout with sidebar navigation (Dashboard, Settings)
and top header with user avatar dropdown.

Here are the components for each page:
[paste component code from v0]

Connect pages with Next.js Link components.
Add loading states for page transitions.

What Bolt Does Automatically

• Creates a Next.js project file structure
• Configures Tailwind, shadcn/ui, TypeScript
• Distributes components across files
• Adds routing between pages
• Runs a dev server right in the browser

In 2–3 minutes, a working app with page navigation is running in the preview window.

Common Fixes

Bolt occasionally imports shadcn components wrong or mixes up App Router with Pages Router. When that happens:

Fix: use "use client" directive for components with useState/useEffect

Fix: import { Button } from "@/components/ui/button" —
use the correct shadcn/ui import paths

Add a mobile-responsive sidebar:
hamburger menu on mobile, fixed sidebar on desktop

At this point the app works, pages are linked, and navigation is clickable. Data is still static — hardcoded into the components — but that’s fine for now.

Step 4: Add Logic with Claude Artifacts

Claude Artifacts generates interactive React components that run standalone in the browser. It’s the right tool when you need to prototype actual behavior — forms with validation, filters, sorting, modals, state transitions.

When to Use Artifacts Instead of Bolt

Task	Tool
Full app with routing	Bolt
Individual interactive component	Claude Artifacts
Form with validation and states	Claude Artifacts
Dashboard with charts	Claude Artifacts
Prototype of one complex screen	Claude Artifacts

Prompt for an Interactive Component

Create a React dashboard component with the following functionality:

1. Four metric cards at the top: Revenue ($12,450), Users (1,234),
   Conversion (3.2%), Churn (1.8%).
   Each with an icon and a percentage change (green/red).

2. Chart (Recharts): line chart, 7-day data,
   Revenue/Users toggle.

3. Recent transactions table: 10 rows,
   columns: Customer, Amount, Status (badge), Date.
   Sort by clicking column headers.
   Filter by status (All, Completed, Pending, Failed).

4. All data — mock, generate realistic values.

Stack: React, TypeScript, Tailwind CSS, Recharts.
Style: dark theme, rounded cards, subtle shadows.

Claude generates a fully working component — state, event handlers, filtering, sorting. You can preview the artifact right inside the Claude interface without copying a single line.

Integrating into the Bolt Project

Copy the component code from Artifacts. Paste it into Bolt via a prompt:

Replace the Dashboard page content with this component:
[paste code]

Install recharts if not already installed.

Bolt will install the dependencies and embed the component into the existing project.

Iterative Refinement in Claude

The conversation context sticks around in Claude Artifacts. You can keep refining the component in the same thread:

Add to the dashboard:
- Date range picker above the chart (last 7/30/90 days)
- CSV export button for the table
- Skeleton loading when switching filters

Each message produces an updated version. Preview it in place, copy the final result.

Step 5: Deploy and Share

The prototype is built. Now you need a link — something you can send to users, investors, or the team without attaching a zip file.

Option 1: Deploy from Bolt (fastest)

Bolt is integrated with Netlify. Click “Deploy” in the interface. Bolt automatically:

1. Builds a production bundle
2. Deploys to Netlify
3. Gives you a URL like project-name.netlify.app

Time: 1–2 minutes. Netlify’s free tier fully covers prototypes.

Option 2: Vercel (for Next.js)

Export the project from Bolt (the “Download” button), push to a GitHub repository, and connect to Vercel. Every push auto-deploys. Better choice if the prototype is going to keep evolving.

Option 3: Cloudflare Pages

For static prototypes without server-side logic. Fast CDN, free tier with unlimited requests.

npx wrangler pages deploy dist/

Tool Comparison: v0 vs Bolt vs Claude Artifacts

Criterion	v0	Bolt	Claude Artifacts
Output type	Single component	Full application	Interactive component
Stack	React + shadcn/ui	Next.js / Vite / Astro	React (standalone)
Routing	No	Yes	No
Interactivity	Basic	Full	Full
Deploy	No	Netlify built-in	No (export needed)
Iterations	Within chat	Within project	Within conversation
Best for	UI components, design	Assembly into an app	Complex logic, forms

These tools don’t compete — they cover distinct stages. v0 handles visuals. Bolt assembles the project. Claude Artifacts wires in the behavior.

Common Mistakes and How to Avoid Them

Mistake 1: Generating the Entire App in One Prompt

AI generators do better with focused tasks. The prompt “create a full SaaS dashboard with authentication, billing, and analytics” gets you mediocre output. Break it into screens, generate each one separately, assemble in Bolt.

Mistake 2: Skipping the Brief

Uploading a screenshot and writing “recreate this” works maybe a third of the time. The rest of the time the AI misreads elements, treats decorative pieces as functional, and misses the connections between screens entirely. A brief fixes that.

Mistake 3: Endless Iterations

Cap yourself at 5 iterations per component. If you’re still not getting the right result after five tries, the problem is your prompt — not the AI. Start over from scratch with more context. For guidance on structuring that context well, see the context engineering guide.

Mistake 4: Trying to Build a Production-Ready Product

The prototype’s job is to test a hypothesis, collect feedback, and show a direction. Mock data, no auth, simplified validation — all of that is fine. Polishing toward production quality at this stage burns time that should go into finding out whether the idea is even worth building.

When AI Prototyping Isn’t the Right Fit

Complex business logic. Calculators with dozens of variables, workflow builders with branching paths, role-based permission systems. AI generators handle UI well but get confused fast by layered logic. Write that logic by hand and use AI only for the UI layer on top.

Real-time functionality. WebSocket connections, collaborative editing, live updates. AI generators don’t build server-side infrastructure. You can fake real-time with setInterval and mock data, but it’ll mislead testers into thinking the hard part is done.

Native mobile apps. v0 and Bolt generate web applications. For mobile prototypes, Figma with animations or a tool like FlutterFlow is the better call.

External service integrations. Stripe, SendGrid, OAuth. These need a backend and real configuration. In a prototype, replace them with stubs: the “Pay” button shows a “Payment successful” modal, the login form accepts anything.

Checklist: From Figma to Prototype in 1 Hour

□ Export screens from Figma (PNG, 2x)              — 5 min
□ Write a brief for each screen                    — 10 min
□ Generate components in v0 (2–3 iterations)       — 15 min
□ Assemble the app in Bolt                         — 10 min
□ Add interactivity (Claude Artifacts)             — 15 min
□ Deploy                                           — 5 min
                                          Total: ~60 min

What Comes After the Prototype

1. User testing. Send the link to 5–10 potential users. Collect feedback through Hotjar, screen recordings, or short interviews. You want to know: does the product actually solve the problem, and does the interface make sense to someone who didn’t design it?

2. Prototype iteration. Take the feedback, go back to the pipeline. Update a screen in Figma, regenerate the component in v0, push it into Bolt. Each cycle takes 20–30 minutes — the structure is already there, you’re just swapping parts.

3. Hand off to development. Once the hypothesis holds up, the code from Bolt is a legitimate starting point for the production app. Components built on shadcn/ui and Tailwind CSS slot right into a standard Next.js project. You’ll still need to add auth, a database, an API layer, and tests — but the UI foundation is already done.

One hour for a prototype instead of months of development. Validate the idea first, then build the product.

---

Need help with rapid prototyping and AI-powered development? I help startups build AI products and automate processes — belov.works.

FAQ

How much of the Bolt-generated code is actually usable in a production Next.js project?

The UI layer — components, layouts, Tailwind styles — transfers directly with minimal cleanup. What you will need to add: authentication (Bolt uses no-auth stubs), database connections (mock data needs to be replaced with real API calls), error handling, and test coverage. Plan for approximately 20–40% of the prototype code to carry over as-is; the rest serves as a detailed spec for the production implementation rather than production code itself.

Can this pipeline handle mobile-first designs from Figma, not just desktop layouts?

Yes, with one adjustment: include explicit mobile breakpoint instructions in your v0 prompt (sm/md/lg Tailwind breakpoints) and add mobile-first to the requirements block. v0 generates responsive components by default when told to, and Bolt preserves that responsiveness. The weak point is touch-specific interactions (swipe gestures, long-press) — those need manual implementation or a purpose-built tool like FlutterFlow for native mobile prototypes.

What happens to the prototype link after Netlify or Vercel free tier limits are hit?

Netlify’s free tier includes 100GB bandwidth and 300 build minutes per month — easily enough for user testing with 50–200 testers. If you hit limits, the simplest fix is to export the project from Bolt and redeploy to Cloudflare Pages, which has unlimited requests on the free tier. For longer-running prototypes that need to stay live for weeks, connect the Bolt project to a GitHub repo and deploy via Vercel — every push auto-deploys and the URL stays stable.