UI Verify

Figma to code

Build it to the Figma.
Prove it matches.

Set a Figma export as your story’s baseline. UI Verify shows exactly where your render differs from the design, and your coding agent fixes it until it matches.

Start for free Book a demo
pages/Pricing
Changed
Design (from Figma)
Lumen
New: Teams plan

Plans that grow with you

Get started
Talk to sales
ignored

Free

$0

Pro

$19

Teams

$49

Your render
Lumen
New: Teams plan

Plans that grow with you

Get started
Talk to sales
ignored

Free

$0

Pro

$19

Teams

$49

Diff
Lumen
New: Teams plan

Plans that grow with you

Get started
Talk to sales
ignored

Free

$0

Pro

$19

Teams

$49

How it works

From a frame in Figma to a page that matches it, and stays that way.

01

Export the frame from Figma

Select the frame and export it as a PNG at 1x. Or skip this step: with the Figma MCP connected, your agent pulls it straight from the link.

Lumen / Marketing site

Pricing

Lumen
New: Teams plan

Plans that grow with you

Get started
Talk to sales
ignored

Free

$0

Pro

$19

Teams

$49

1280 × 2140

Export

1x PNG
Export Pricing
02

Set it as the story's baseline

Drop the PNG into your Storybook assets and point the story at it with baselineImage. The story carries its own design, no IDs to look up.

Pricing.stories.tsx design/pricing.png
export const Pricing: Story = {
  parameters: {
    uiVerify: {
      // the Figma frame, exported as a 1x PNG
      baselineImage: "design/pricing.png",
    },
  },
};
03

Build and upload

Build Storybook and upload it with the uiverify CLI, the same command you already run in CI. UI Verify renders the story in a real browser and compares it to the design.

dev@lumen - zsh - 92×34
$ npx storybook build -o storybook-static
$ npx uiverify upload --static-dir ./storybook-static
Bundling Storybook…
Registering build…
Build uploaded: uiverify.ai/builds/…
Waiting for the build to render and diff…
Build finished: changed
04

See exactly where it differs

Every area where the render is off is highlighted and cropped side by side with the design: type that is too small, padding that is too wide, a card that sits a few pixels over.

pages/Pricing · hero
Design
New: Teams plan

Plans that grow with you

Get started
Talk to sales
Your render
New: Teams plan

Plans that grow with you

Get started
Talk to sales
05

Fix it and upload again

Your agent, or you, fixes what the diff points at and uploads again. Each round, the difference shrinks, until only anti-aliasing is left.

Pixels that differ from the design

Upload 1
4.8%
Upload 2
1.6%
Upload 3
0.4%
Upload 4
Matches
06

Accept, and it stays matched

When it matches, accept. The accepted render becomes the story's baseline, so every pull request after that is checked against it. A new export from the designer takes over again.

  1. The design is the baseline

    Changed

    Every upload of the story is compared to pricing.png until the render matches it.

  2. You accept the matching render

    Passed

    It becomes the baseline. Every pull request after that is checked against it.

  3. The designer updates the frame

    Changed

    A new export takes over again, and the page is checked against the new design.

UI Verify shows where. Your agent works out why.

UI Verify does not label what is wrong. It shows exactly where your render and the design differ. Your coding agent looks at those images with its own vision, decides what to change, and checks again.

UI Verify

  • Renders your story in a real browser
  • Diffs it against the design, pixel by pixel
  • Crops each area that differs so it can be read up close

Your agent

  • Pulls those crops as images over the UI Verify MCP
  • Looks at them and works out what is off
  • Changes the code and uploads again
dev@lumen - claude - 92×34
> /implement-figma-design figma.com/design/…/Pricing
⏺ figma - download_assets (MCP)
  ⎿  design/pricing.png · 1280×2140
⏺ Built the page as a story, uploaded it to UI Verify.
⏺ uiverify - render_diff_image (MCP)(which: "before_after")
  ⎿  [image] design | render, cropped to 2 regions
⏺ Looking at the crops: my headline is smaller,
  the buttons are padded wider, the cards sit
  further apart.
⏺ Update Pricing.tsx
  ⎿  font-size 48 → 56, padding 16 → 10, gap 24 → 12
⏺ Uploaded again. Hero matches, moving down the page.
✓ matches the design · left the accept to you

Good to know

Storybook today

Set parameters.uiVerify.baselineImage on any story. The PNG ships inside your Storybook build.

Dynamic content

Mark a video, an animation, or live data with data-uiverify-ignore and it is blanked on both images.

Fonts

Ship the design's font files with Storybook, or every line of text will differ.

Try it on your next page

Install the skill, hand your agent the Figma link, and let it close the gap.

just this skill
npx skills add uiverify/uiverify --skill implement-figma-design# then invoke it /implement-figma-design
What the skill does
Start for free Book a demo