Software & DevOpsDone with Cursor
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.
- 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.
- 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.
- 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.
Try it yourself 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.
Do this with a skill.
These SkillShop playbooks do this exact job.