Skip to content
agentusehub
Sign in+ Submit
Software & DevOpsAny

Build a homepage from Figma designs via MCP

The author connected Figma to Cursor over MCP to build a new homepage for a font archive, with great results after Lovable disappointed.

Read the experience
Time saved
Not reported
Setup time
Not reported
Running cost
Not reported
Cost range
Not reported

Use case overview

The author connected Figma to Cursor over MCP to build a new homepage for a font archive, with great results after Lovable disappointed.

Read the original report ↗

Reported experience

  1. What they did

    The author made a local Git repository synced to GitHub and opened it in Cursor on its free Pro trial, with Figma's MCP connected. In Figma Dev Mode they selected the design section to build and copied its URL. They pasted that URL into a simple Cursor prompt asking for HTML and CSS. Cursor highlighted the code it generated so they could review it and keep or regenerate it.

  2. How it went

    One prompt produced the thumbnail section with accurate colours, layout and button hover states, far better than Lovable's output. It missed the font and font weights, likely because Rotis isn't a free web font. More tweaking was still needed.

  3. Worth knowing

    The author skipped Claude Code because it needed a $17/month Pro plan. Cursor's free Pro trial was enough to get started.

Example prompts

Try with Cursor
Connect to my Figma file via MCP for [project name] and build a working homepage from the design, matching layout, spacing, and components as closely as possible. Show me the rendered result so I can compare it to the Figma design before we call it done.

Related use cases

Software & DevOps

Port a Chrome extension to Safari

The author had ChatGPT take the Session Buddy extension source from Chrome, port it to Safari and install it, taking about 20 minutes.

ChatGPT