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.
Done withCursor
- 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.
1 more account of this
Source: designphilosophy.substack.com · Undated
Five of these in your inbox every morning
The best things people got an AI agent to do, each with the prompt to try it.
More like this
Keep coding agents running autonomously for long stretches
Cursor's write-up on scaling long-running autonomous coding.
Run a scheduled personal assistant that builds a task dashboard
A Rippling engineer's Cursor cron agent runs every two hours, reading Slack notes, GitHub PRs, Jira issues and mentions, deduplicating them and posting a dashboard.
Migrate 180 microservices to a new framework version
Brex built Cursor-based self-correcting agents that let one engineer migrate 180 microservices to a newer Micronaut version in about a month.
- Claude
Build a C compiler with a team of parallel agents
Anthropic's engineering write-up on tasking Opus 4.6 agent teams with building a C compiler.
Manage Canvas courses in plain English
The author built a Canvas LMS tool with Claude Code that lets educators list courses, find missing submissions, monitor forums, schedule announcements and export the gradebook.
Migrate an Electron app from Vue 2 to Vue 3
Kearney gave Devin repo access to migrate a production Electron app to Vue 3 and update npm packages, committing after every five components.