Build a homepage from Figma in Cursor with MCP

A developer linked Figma to Cursor through MCP and used it to turn a design slice into homepage code.

Done with Cursor· Beginner

What they did
They set up a local Git repo, pushed it to GitHub, and opened the project in Cursor while using the free Pro trial. With Figma’s MCP connected, they copied the URL for the section they wanted from Figma Dev Mode and pasted it into a short Cursor request for HTML and CSS. Cursor then generated the code and marked it up so they could inspect it, keep it, or ask for another version.
How it went
One prompt gave them a thumbnail area with the right colours, layout, and button hover effects. It worked much better than Lovable’s attempt, but it still missed the font and font weights, probably because Rotis is not available as a free web font. They still needed more refinement after that.
Tips
This worked well for a focused section rather than an entire page at once. If you need strict visual accuracy, expect to clean up font choices and other details by hand.

Try it yourself with Cursor

I’m building [project name] from a Figma file. Use the Figma MCP connection to inspect the design section at [Figma URL] and generate the matching homepage code in HTML and CSS. Match spacing, layout, colours, and hover states as closely as you can, then show me the result and any code changes for review before I approve keeping them or trying another version. Stop and ask for my approval before you make any irreversible change, submit anything, or overwrite files I haven’t reviewed.

Fill in the [brackets]. Agents can make mistakes, so review anything before it is sent, paid or deleted.

Read the original on designphilosophy.substack.com ↗

1 more report of this

Get 3 agent uses like this every morning

With the day's top AI news. Free, and one click to unsubscribe.