Shown·Partial·Cursor

Figma design to HTML

Cursor, connected to Figma's Dev Mode MCP, turned a selected Figma design into HTML and CSS from one prompt containing the design URL.

Resultrc_M8NHX8W2

One prompt produced the thumbnail section with accurate colours, layout and button hover states, and it beat the earlier Lovable attempt built from static images.

ShownPartial · Blog · Aug 5 · Last checked Oct 13, 2026

Overview

How it was set up

Figma Dev Mode MCP linked to Cursor on its free Pro trial. A local Git repo synced to GitHub was opened in Cursor, then the Figma selection URL was pasted into the prompt.

Worth knowing

It missed the font and font weights, likely because Rotis is not a free web font. More tweaking is still needed.

A prompt to start from

Using the Figma design at [Figma Dev Mode URL], build this component in HTML and CSS in this repository.

Written by Agentic Feats from the source. Not the author's exact prompt.

Sources 1

Originaldesignphilosophy.substack.com/p/getting-remarkable-results-quickly

History

Source published: 2025-08-05
Added to Agentic Feats: 2026-10-13
Pick: No
Markdown copy: /c/figma-design-to-html-cursor.md

More in coding

68 feats

Shown·Claude Code

Blog aggregator in one day

ResultA live blog aggregator pulling posts from Dev.to, AWS Community Builders, Bravo LT and RedMonk, built and deployed in a single day.

Blog · Jul 8

Shown·Replit Agent

Podcast website built with Replit

ResultA live MVP website for the podcast and newsletter went up after about 10 hours of struggling to load it on a custom URL.

Blog · Jan 9

Shown·Devin·Partial

Unanswered email tracker with Devin

ResultWithin one night Devin produced a working unanswered-emails interface using the Gmail API, after the author wrote the authentication code themselves.

Blog · Dec 11