What you’ll be able to do

You’ve got a finished design in Figma. It’s good. Client’s signed off, spacing’s right, the fonts are exactly what you wanted. And now the annoying bit: getting it live without paying a developer or learning to code yourself.

This guide walks through one way to do that: Figma to Claude Code, Claude Code to GitHub, GitHub to Cloudflare Pages. By the end you’ll have a real, working site at a free address, built from your actual design, and a repeatable way to update it later when the client asks for “just one small change” (there’s always one).

You don’t need to learn to code. You do need a terminal window open and a willingness to type instructions in plain English. That’s it.

Before you start

Here’s the chain, laid out simply. Figma holds the design, same as always. Claude Code, which is Anthropic’s coding tool that runs in a terminal on your Mac or PC, reads that design and writes the actual website files: HTML, CSS, images. GitHub stores those files. Cloudflare Pages connects to GitHub and puts the site live, rebuilding it automatically every time the files change.

None of this replaces your design work. It just turns the finished design into something a browser can render.

The bit that makes this possible is Figma’s MCP server. MCP stands for Model Context Protocol, and in plain terms it lets a coding tool like Claude Code actually look at a frame in your Figma file: the layout, the spacing, the text, the colours, the components, the variables. It can even export the images. Without it, you’d be describing your design in words and hoping for the best. With it, Claude Code is looking at the real thing. Figma runs it as a hosted service (the “remote” server), which works on every Figma plan including the free one; there is also a version that runs inside the desktop app, but that needs a Dev or Full seat on a paid plan and is aimed at larger organisations, so this guide uses the remote one.

You’ll need a few accounts before any of this works, and the order matters less than just having them ready: GitHub (free), Cloudflare (free), a Claude plan with Claude Code access (paid), and your existing Figma account. Figma’s own setup page is the place to check if anything here has moved, because it does shift about: https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server.

Get set up

Right, in order.

First, GitHub. Sign up free, no card needed. This is just where your website’s files will live, as a repository.

Second, Cloudflare. Also free, also no card. This is what actually serves your site to the world.

Third, Claude Code. You’ll need a paid Claude plan or API credit; Claude Code doesn’t run on the free tier. Install it following Anthropic’s instructions, then open a terminal and log in.

Fourth, connect Claude Code to Figma. One line in your terminal:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Then start Claude Code, type /mcp, pick figma, and sign in to Figma in the browser window that opens. That’s the switch that lets Claude Code see into your design at all; you do it once. If you’d rather use Cursor or VS Code instead of Claude Code, they connect to the same server, and Figma’s page lists the exact steps for each. This guide sticks with Claude Code because that’s the most common path right now, but the underlying idea doesn’t change.

Try it yourself

Open Figma and find the frame you want to build first. Just one, ideally your homepage. Don’t hand over the whole file and hope for the best; one page or section per message is the rule here. Right-click the frame and choose Copy link to selection. That link is how Claude Code knows which frame you mean.

Switch to your terminal, into Claude Code, paste the link and say something like this:

Here is the homepage frame in Figma: <paste the link>. Build it as a static website: index.html, one CSS file, images exported from the frame into an images folder. Keep all text as real text, use the exact colours and fonts from the design, and make it work on a phone screen. Don't add anything that isn't in the design.

That last line matters more than it looks. Left to its own devices, an AI tool will sometimes add things: a footer you didn’t ask for, a nav item that seems logical but isn’t in your design. Tell it not to.

Claude Code will read the frame through Figma’s MCP server and start writing files. Let it work. When it’s done, you’ll have a folder with an index.html, a CSS file, and an images folder, sitting on your machine, doing nothing yet.

Next step is getting that onto GitHub. Claude Code can run git commands and the GitHub command line tool itself, once you’ve signed in through the terminal. Say:

Create a private GitHub repository called portfolio-site, commit these files and push them.

Private matters if there’s anything remotely client-confidential in there, which there usually is. Claude Code handles the git commands for you; you don’t need to know what a commit even is, really, though it helps.

Now Cloudflare. In the dashboard, go to Workers & Pages, then Create, then Pages, then Connect to Git, and pick the repository you just created. For a plain static site like this one, the build command stays empty and the output directory is just the folder your files are sitting in (often the root, so a single slash or the default setting works). Click through, and within a minute or two you’ll have a live address: something like portfolio-site.pages.dev.

That’s it. That’s the whole loop.

Later, when the client wants the hero section changed (they will), you go back to Figma, make the change, copy the link to that section again, and tell Claude Code:

I've changed the hero section in Figma: <paste the link>. Update the site to match and push the change.

Cloudflare picks up the new push automatically and rebuilds. No developer, no ticket, no waiting.

Check the result

Don’t just glance at it on your laptop and call it done. Open the pages.dev address on an actual phone. Not the browser’s device emulator, an actual phone in your actual hand. Things break in ways you won’t predict on a simulated viewport.

Then put the live site and the Figma frame side by side, literally, two windows, and go through them slowly. Spacing and font weight are the usual culprits when something’s off; they’re easy for a tool to get slightly wrong even when it’s reading the file directly.

Try selecting the text on the page with your cursor. If you can select it like normal text, good, that’s what you asked for. If you can’t, it’s been exported as an image instead of real text, and you’ll want to go back and ask Claude Code to redo that bit properly, because image text doesn’t scale, doesn’t get picked up by search, and looks wrong the second someone zooms in.

Worth running Lighthouse too. Right-click on the page, choose Inspect, find the Lighthouse tab in Chrome’s developer tools, and run it. It’ll give you a rough score on performance and accessibility. Don’t obsess over hitting 100 everywhere; a static site built this way is usually fast by default, since there’s no bloated framework sitting underneath it. But if accessibility flags something obvious, like missing alt text on images, that’s worth fixing before you call it finished.

“Close enough” here means: matches on a phone, text is selectable, spacing’s within a pixel or two of what you designed, and nothing’s been invented that wasn’t in the Figma file. Anything past that is polish.

If it doesn’t work

A few common snags, and they’re almost always one of these.

Claude Code says it can’t see the design at all. Usually means you’re not signed in to Figma inside Claude Code (type /mcp and check), or you pasted a link to the whole file rather than a Copy link to selection for one frame. Check both, in that order.

The page looks nothing like the frame, layout’s wrong, spacing’s off everywhere. This tends to happen with heavy use of components or auto-layout that the tool struggled to parse properly. Try building one section at a time rather than the whole frame in one go; it copes better with smaller, simpler asks.

Cloudflare’s showing an old version of the site even though you know you pushed changes. Go into the deployment list in the Cloudflare dashboard and check what actually landed. Sometimes the push hasn’t reached the production branch, and it’s sitting there waiting rather than deploying.

Now the privacy bit, because this matters more than it might seem in the moment. When Claude Code reads a client’s design through Figma’s MCP server, that design is going through Anthropic’s servers. If the client’s contract says their work stays confidential, check it, or just ask them, before you run any of this. Make the GitHub repository private if there’s any doubt at all; it costs nothing and takes one click. And never, under any circumstances, paste an API key or a password into the Figma file, the chat, or the repository. It sounds obvious written down like that, but it happens, usually buried in a comment or a placeholder someone forgot to remove.

Keep exploring

If you’d rather skip the terminal entirely, there’s a separate guide on this site, “How to get AI to build me a website with Lovable”, which builds a site through chat with no command line involved at all.

If you want the broader picture beyond just this Figma-first route, “How to get AI to build me a website” covers the wider landscape.

And if this has got you curious about writing actual code yourself, rather than having Claude Code do it, have a look at “How to get AI to write code”.

Sources and review notes

https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server (remote server on all plans; desktop server needs a Dev or Full seat on a paid plan; Copy link to selection) https://developers.figma.com/docs/figma-mcp-server/ https://code.claude.com/docs/en/mcp https://docs.github.com/en/get-started https://developers.cloudflare.com/pages/get-started/git-integration/

Review date: 2026-09-16