Turn Any Figma Design Into a Real Website With Claude Code

Choose One Page or Frame

Start with a Figma design you want to turn into a real website. This can be:

- A landing page

- Business website

- Portfolio

- SaaS homepage

- Product page

- Dashboard

- Another web interface

For the first attempt, use one page or one main frame rather than an entire large product.

Check the Design First

Make sure the Figma frame contains the elements you actually want to build. Check:

Desktop layout

Navigation

Hero

Sections

Buttons

Images

Cards

Footer

Fonts

Colors

Spacing

If possible, keep the design organized with reusable components and sensible layer names.

NOTE

You do not need to manually convert the design into HTML or inspect every CSS value yourself. Figma's MCP integration gives Claude Code structured design context including components, variables, layout information, and selected frames.

Decide What You Are Building

Before opening Claude Code, know whether you want:

- Only this single page

- A homepage plus a few simple routes

- An existing website updated to match the Figma design

FOR THE EASIEST FIRST PROJECT

One Figma homepage → one responsive working homepage.

Install the Figma Plugin

Figma provides an official integration for Claude Code. The recommended setup is the Figma plugin, which includes the Figma MCP server and skills for common Figma-to-code workflows. In Claude Code, run:

claude plugin install figma@claude-plugins-official

Restart Claude Code if required. Then open:

/plugin

CLAUDE CODE

Go to the installed Figma plugin and complete the authorization flow. Figma recommends the remote MCP server for most users because it has the broadest feature support.

Open Your Project

Now open the website project you want Claude Code to work in. You can either:

- Start with a new frontend project

- Use an existing website

If you already have a project, ask Claude to inspect it first.

Inspect the Existing Project

Prompt — Inspect the Existing Project

Reviews the project (framework, routing, styling system, reusable components, fonts, design tokens, asset structure, responsive conventions, build command) without changing anything, and determines the best way to implement the Figma design while preserving the existing architecture — no framework replacement, no second styling system, no unnecessary packages, no unrelated changes. Finishes with a READY FOR FIGMA IMPLEMENTATION / NEEDS ATTENTION verdict.

Review this project before implementing a Figma design. Do not change anything yet. Identify: - framework and project type - routing - styling system - reusable components - existing fonts - existing design tokens - image/asset structure - responsive conventions - build command Determine the best way to implement the Figma design while preserving the existing project architecture. Do not: - replace the framework - introduce a second styling system unnecessarily - install packages unless genuinely required - modify unrelated functionality Finish with: Project status: READY FOR FIGMA IMPLEMENTATION / NEEDS ATTENTION

Select the Frame and Implement It

Open the Figma file and select the main frame you want to implement. Give Claude the selected design or the relevant Figma link/context through the connected Figma integration. Figma's Claude integration supports generating production code from selected Figma designs and is designed for close visual implementation rather than relying only on screenshots.

Main Implementation Prompt

Implements the selected Figma design as a real responsive website inside the existing project, matching layout, spacing, typography, colors, borders, shadows, image proportions, button/card styles, alignment and responsive behavior as closely as practical, reusing the project's own framework, routing, styling and components. Turns reusable Figma components into reusable code components and uses Figma variables/tokens where available. Forbids redesigning the file, inventing sections, unnecessary animations, a database, authentication, backend functionality, or fake business content. Runs the app and the production build, checks for runtime errors, never deploys automatically, and finishes with a COMPLETE / NEEDS REVIEW verdict plus a summary of the files/components changed.

Implement the selected Figma design as a real responsive website in this existing project. Use the Figma design as the source of truth for the visual implementation. Match as closely as practical: - overall layout - section order - spacing - content widths - typography - font sizes - font weights - colors - borders - border radius - shadows - image proportions - button styles - card proportions - alignment - responsive behavior Reuse the existing project's: - framework - routing - styling approach - components - utilities where appropriate. If the Figma design contains reusable components, translate them into reusable code components rather than duplicating markup. If design variables or tokens are available through Figma, use them consistently where practical. Requirements: - create clean maintainable code - use semantic HTML - preserve accessibility - make the layout responsive - use the actual design assets available from Figma where appropriate - preserve image aspect ratios - make buttons and navigation functional where destinations are provided Do not: - redesign the Figma file - invent new sections - change the visual direction - add unnecessary animations - add a database - add authentication - add backend functionality - replace missing business content with fake claims If something in the Figma design cannot be implemented exactly, choose the closest practical implementation and tell me what differs. After implementation: - run the app - run the production build - check for important runtime errors Do not deploy anything automatically. Finish with: Figma implementation: COMPLETE / NEEDS REVIEW Then summarize the main files/components created or changed.

Open the Result

Run the website and compare it directly with the original design.

Figma vs. Browser

Focus first on major differences:

- Hero height

- Page width

- Heading scale

- Section spacing

- Image placement

- Cards

- Colors

- Navigation

NOTE

Do not spend time fixing tiny 1–2 pixel differences first.

Compare Against the Figma Design

This is where the Figma integration becomes especially useful. Instead of telling Claude "Make it look closer," tell it exactly what to compare.

Prompt — Visual Comparison

Compares the current implementation against the original Figma design without redesigning anything, identifies the highest-impact differences in page proportions, section heights, container widths, typography, spacing, alignment, colors, borders, image sizing/cropping, button dimensions and card proportions, ignores visually meaningless nitpicks, lists the 5 most important differences first, then fixes them while preserving existing functionality and responsive behavior.

Compare the current website implementation against the original Figma design. Do not redesign anything. Identify the highest-impact visual differences in: - overall page proportions - section heights - container widths - typography - spacing - alignment - colors - borders - image sizing/cropping - button dimensions - card proportions Ignore tiny differences that are not visually meaningful. List the 5 most important differences first. Then fix those differences while preserving the existing functionality and responsive behavior.

Fix One Section if Needed

If the hero still looks wrong, use:

Fix the Hero Section

Compares only the hero implementation with its corresponding Figma frame and fixes headline size/line wrapping, text width, spacing, image position, hero height, and CTA size/alignment — without touching any other section.

Compare only the hero implementation with the corresponding Figma frame. Fix: - headline size and line wrapping - text width - spacing - image position - hero height - CTA size and alignment Do not modify other sections.

If the cards are wrong, use:

Fix the Card Section

Compares a card section against the Figma design and corrects only card dimensions, gaps, padding, border radius, typography, and image proportions — preserving existing content and functionality.

Compare this card section against the Figma design and correct only: - card dimensions - gaps - padding - border radius - typography - image proportions Preserve the content and functionality.

Check Mobile

A desktop Figma design does not automatically define every mobile decision. Ask Claude to adapt the design carefully.

Review Mobile & Tablet

Reviews the implemented website at common mobile and tablet widths, preserves the Figma design's visual direction, and fixes horizontal overflow, poor heading wrapping, cramped spacing, broken grids, awkward card stacking, image cropping, mobile navigation, and hard-to-tap buttons — without simply shrinking the desktop layout, so the mobile version feels intentionally designed.

Review the implemented website at common mobile and tablet widths. Preserve the visual direction of the Figma design. Fix: - horizontal overflow - poor heading wrapping - cramped spacing - broken grids - awkward card stacking - image cropping - mobile navigation - buttons that are difficult to tap Do not simply shrink the desktop layout. Make the mobile version feel intentionally designed.

Run the Final Audit

Final Production-Readiness Audit

Runs a final production-readiness audit comparing the website with the original Figma design: visual fidelity (layout, section order, typography, colors, spacing, card/component proportions, image usage), responsive design (desktop/tablet/mobile, no horizontal scrolling, usable navigation, tappable buttons, image proportions), code quality (reusable components, preserved architecture, no unnecessary dependencies or a second styling system), functionality (navigation, links, existing project functionality), and technical quality (production build succeeds, no important runtime errors, no broken assets) — without adding new features or deploying automatically. Finishes with a READY / NOT READY verdict.

Run a final production-readiness audit of the Figma implementation. Compare the website with the original Figma design and verify: Visual fidelity - layout closely follows the design - section order matches - typography is consistent - colors match - spacing is coherent - cards/components match the intended proportions - important images and assets are used correctly Responsive design - desktop works - tablet works - mobile works - no unintended horizontal scrolling exists - navigation remains usable - buttons remain easy to tap - images maintain appropriate proportions Code quality - reusable design elements are implemented as reusable components where appropriate - the existing project architecture was preserved - no unnecessary dependency or second styling system was introduced Functionality - navigation works - buttons and links work where destinations exist - existing project functionality still works Technical quality - production build succeeds - there are no important runtime errors - there are no broken assets Do not add new features during this audit. Do not deploy automatically. Finish with: Website status: READY / NOT READY If NOT READY, list only the important remaining differences or problems.

Use One Visually Strong Landing Page

For the first project, avoid:

- A 30-screen dashboard

- Complex authentication

- Charts

- Checkout

- Large applications

- Many Figma pages

Use a visually strong single landing page.

THE WORKFLOW

The complete workflow should feel this simple: Figma Design → Claude Code → Working Website → Compare → Fix → Done.