Implement a Figma design

Build a page from its Figma design and converge the render until it matches.

FigmaDesign to codeMCP

What it does

Your agent builds the page as a Storybook story (or a Vitest browser-mode test) with the Figma export as its baseline, then fixes it one section at a time until UI Verify's diff shows it matches the design. It stops before accepting, so you decide when to lock it in.

Run it when you have a Figma frame (or an exported PNG) for a new page and want the code to match it.

Gets the design as a 1x PNG from the Figma MCP, or asks you for an export.
Converges one section per upload, top down, so every fix is checked where it was made.
Measures UI Verify's own render of the story, never a screenshot of its own page.

Install and run

just this skill

npx skills add uiverify/uiverify --skill implement-figma-design

# then invoke it
/implement-figma-design

Or install the whole bundle

terminal

npx skills add uiverify/uiverify

One command, any agent - Cursor, Codex, Copilot, Claude Code. Run npx skills update to pull the latest.

View on GitHub

More skills

Factory

Say what you want. Get a merge-ready PR.

Design

A design that survived two critics, before you write a line.

Built by the team behind UI Verify

Automate this skill end to end

UI Verify captures every screen on every pull request and lets an AI judge, or your agent, review the diffs. See how it works.

See how UI Verify works