Cursor prototypes a Rotis homepage from Figma

Phil Sayer used Cursor and Figma MCP to prototype a homepage for an online archive of the Rotis typeface. The result captured the design’s layout, colors and hover states, while missing the intended font and font weights.

The experiment followed a disappointing attempt to build the page from static mockups in another tool. Sayer instead connected Figma’s structured design information to Cursor. He created a local Git repository, synchronized it with GitHub and opened it in the editor.

In Figma Dev Mode, he selected the content to build, copied its URL and included it in a request for HTML and CSS. The MCP connection gave the agent more information about how the design was constructed than a screenshot alone. Cursor generated highlighted code changes that the author could inspect before keeping or regenerating them.

Sayer reports a promising first result after one prompt, with more tweaking still needed. He suggests the missing typography may have reflected the unavailable Rotis web font; that explanation is not independently established. The account does not claim a complete production site, accessibility audit or pixel-by-pixel match. It documents an inspected design-to-code prototype with a clear remaining limitation and a comparison to the author’s earlier approach.

Prompt
Suggested prompt (written by Agents In Use, not the author's)

Source: designphilosophy.substack.com · Phil Sayer