---
title: "Figma design to HTML"
canonical: "https://agenticfeats.com/c/figma-design-to-html-cursor/"
agents: ["Cursor"]
evidence_grade: "A"
outcome: "partial"
job_type: "Coding"
roles: ["Design", "Developer"]
source_url: "https://designphilosophy.substack.com/p/getting-remarkable-results-quickly"
source_date: "2025-08-05"
published: "2026-10-13"
updated: "2026-10-13"
---

> From Agentic Feats: sourced examples of AI agents at work. Map of the site for agents: https://agenticfeats.com/llms.txt

# 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.

Result: 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.

## 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.

## Prompt

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

## Evidence note

Author describes the output with screenshots; no repo or live site linked

## Sources

- Original: https://designphilosophy.substack.com/p/getting-remarkable-results-quickly

## The receipt

- Agent: Cursor
- Evidence: Shown (grade A, artifact linked)
- Outcome: Partial
- Job type: Coding
- Roles: Design, Developer
- Source: Blog
- Published: 2025-08-05
- Added: 2026-10-13