From a Figma design to a site the owner can edit

Why not export HTML from Figma

Export plugins turn every layer into a box. The result is deep div nesting, absolute positions copied from the canvas, generated class names, and text that is not a heading or a paragraph but a styled layer. It looks right in a browser. For everything else it is the worst case: Google has to dig for the content, AI assistants cannot find a sentence to quote, the page carries far more markup than it needs, and cmsspot sees boxes instead of fields.

The way that works

Figma has its own MCP server. It gives an AI assistant the design as data: frames, text, colours, spacing, fonts and image exports, without generating any HTML. Add it to Claude together with the cmsspot build guide, and Claude writes the pages from the design data, following the guide. Design from Figma, structure from cmsspot.

Step by step

1. Add the two servers to Claude

Add Figma's hosted MCP server, then the cmsspot build guide. In Claude Code:

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

The first command opens a Figma login the first time. Figma's own setup guide for other tools is at help.figma.com.

In Claude.ai or Claude Desktop, both are added as connectors. The cmsspot guide needs no login.

2. Select the frame and ask

Select the page frame in Figma, then ask Claude:

There is also a ready prompt in the guide server, figma_to_site, that says the same with the details filled in.

3. Check what came back

Claude runs the guide's check_page on every page before it hands them over. Look at the result once yourself: real headings, one stylesheet, images with alt text and sizes, no inline styles, and repeated cards written the same way so they can become a group in cmsspot.

4. Upload and connect

Upload the folder to any PHP host, connect it in cmsspot, point Pages at pages/, and the owner can edit from the first day. The design stays exactly as drawn, because the layout lives in the stylesheet, where the owner cannot reach it.

What to insist on

• Layout with flex or grid in CSS, not with positions from the canvas.
• Colours and spacing as a few rules in css/style.css, not inline styles on every element.
• Decorative images in img/, content images the owner will change in uploads/.
• A row of similar cards as one repeated block with identical markup.
• Titles and descriptions as plain variables at the top of each page.

Already have a built site?

The same guide server can convert an existing page toward the cmsspot structure, and a prompt, convert_site, walks Claude through a whole site. Read about building and converting with AI.