How to Build a Website With Claude and Figma in 2 Hours

You can go from a Figma design to a live, deployed website in a single afternoon using Claude — no coding experience required. The workflow is simple: design in Figma, export or describe the design to Claude, generate the code, deploy on Vercel or Netlify. The whole thing costs $0 if you use free tiers.

People are posting "$5,000 website in 2 hours" clips on X, but most of them skip the actual steps. This guide fills that gap. Every prompt is included, every decision point is explained, and the tradeoffs are honest.

Why This Works Now (And Didn't a Year Ago)

A year ago, turning a design into code with AI meant pasting a screenshot and getting back a rough approximation that needed hours of cleanup. Today, Claude's 1M token context window means you can feed it an entire design system — colors, typography, spacing, component details — and get back production-quality code that matches your design closely on the first pass.

The key insight: the quality of what you get depends almost entirely on how well you describe the design. Vague descriptions produce vague websites. Specific, structured descriptions produce specific, polished websites.

What You Need

Three tools, all with free tiers:

Figma — for your design. Free tier works fine. If you don't have a design, grab a free template from Figma Community and customize it.

Claude — for code generation. Free tier gives you Sonnet, which handles this well. Pro ($20/mo) gives you Opus 4.7 for more complex sites.

Vercel or Netlify — for deployment. Both have free tiers. Connect your GitHub repo, push code, site goes live.

Step 1: Prepare Your Figma Design

Before involving Claude, get your Figma file organized. This step determines the quality of everything that follows.

Your design should have clearly defined pages (Home, About, Contact, etc.), consistent spacing and alignment, a visible color palette (note the exact hex values), identified fonts, and responsive breakpoints for desktop and mobile if possible.

Don't worry about pixel-perfection. Claude handles implementation details well. What matters is that your design communicates the structure, hierarchy, and visual style clearly.

Pro tip: Name your Figma layers meaningfully. "Hero Section," "Feature Cards," "Pricing Table" are much more useful to you when writing prompts than "Frame 247."

Step 2: Export Your Design Information

Claude can't read a Figma file directly, so you need to translate your design into information Claude can work with. You have three approaches, from easiest to most precise:

Approach A: Screenshot + description. Take full-page screenshots of each page in your design. Upload them to Claude along with a written description of the layout, colors, and interactions. This is the fastest approach and works surprisingly well.

Approach B: Figma Dev Mode export. If you have Figma's paid plan, use Dev Mode to export CSS values, spacing tokens, and component specifications. Feed these to Claude alongside screenshots for more precise output.

Approach C: Written design spec. Write out a detailed description of every section — header, hero, features, testimonials, footer — including colors, fonts, sizes, and layout. This takes longer but gives you the most control over the output. If you're building without a Figma design, this is your path.

Step 3: Write Your Initial Prompt

This is where most people go wrong. They write "build me a website that looks like this screenshot" and get generic output. Here's the prompt structure that consistently produces quality results:

The more specific you are about what the user sees, the better the output. Don't describe the code — describe the experience. If you need help sharpening this prompt before sending it, our free prompt optimizer can help structure it for better results.

Step 4: Review and Iterate

Claude's first output usually captures 60–80% of your design. The remaining 20–40% comes from iteration. This is the step where most "vibe coding" tutorials end, but it's where the real quality happens.

Review the output by checking three things: does the layout match your design? Do the colors and typography feel right? Does it look good on mobile?

Then iterate with specific feedback. Don't say "make it better." Say:

• "The hero section needs more vertical padding — add 120px top and bottom"
• "The feature cards should be in a 3-column grid on desktop, single column on mobile"
• "The CTA button should have a hover effect — darken the background by 10% and scale up slightly"
• "The footer links should be arranged in 4 columns: Product, Company, Resources, Legal"

Each round of feedback should address 3–5 specific issues. Three rounds typically gets you to 95% of your design.

Step 5: Add Real Content and Images

Replace placeholder text with your actual copy. Replace placeholder image divs with real images. If you need help writing website copy, Claude is excellent at this — feed it your brand description and ask for homepage copy that matches your tone.

For images, use free stock from Unsplash or Pexels, or generate custom images with an AI image tool. Drop the image files into your project's /public folder and update the src attributes.

Step 6: Deploy in One Click

If you used Next.js (recommended), deploying on Vercel takes 60 seconds:

1. Push your code to a GitHub repository
2. Go to vercel.com and sign in with GitHub
3. Click "Import Project" and select your repo
4. Vercel auto-detects Next.js and configures everything
5. Click "Deploy"

Your site is live with a .vercel.app URL. Connect a custom domain in Vercel's settings if you have one.

Netlify works almost identically — import from GitHub, auto-detect the framework, deploy. Both platforms handle SSL, CDN, and continuous deployment automatically. Every time you push to GitHub, your site updates.

Not sure which deployment platform to use? We wrote a full comparison: Where Do You Deploy After Vibe Coding?

Common Mistakes That Trip People Up

1. Giving Claude a screenshot with no written context. Screenshots help, but Claude needs written descriptions of colors, fonts, spacing, and layout to produce accurate code. The screenshot is a reference — the text is the instruction.

2. Trying to build everything in one prompt. A 6-page website with animations, forms, and a CMS is too much for one pass. Build page by page, section by section. Start with the homepage, get it right, then move to the next page.

3. Skipping mobile responsiveness. If you don't mention mobile in your prompt, Claude will build a desktop-only layout. Always include "mobile responsive" in your technical requirements and test the output at 375px width.

4. Not testing interactions. Click every button, fill out every form, scroll every page. AI-generated code often looks right but has broken links, non-functional forms, or missing hover states. Test before deploying.

5. Perfectionism before deployment. Ship at 90% and iterate. Your first deployment doesn't need to be perfect — it needs to be live. You can push updates in seconds.

Building for clients? Read our guide on 5 security mistakes every vibe coder makes before you deliver.

The Bottom Line

The Figma-to-Claude-to-deploy workflow is the fastest way to turn a design into a working website without writing code yourself. The quality depends on the specificity of your prompts, not on coding skill. Three rounds of iteration typically gets you from first draft to production-ready.

Start with a simple project — a portfolio or landing page — and work through the full cycle once. The second time will take half as long because you'll know exactly how to structure your prompts.

Not sure which AI tool is best for your workflow? Take our 60-second Model Picker Quiz to find out, or see the full State of AI Models comparison.

Disclosure: Some links in this article are affiliate links. We only recommend tools we've personally tested and use regularly. See our full disclosure policy.