Compare a page to its Figma design with design baselines

A design baseline is a design image, usually a Figma frame exported as a PNG, declared as a story's baseline. Every upload of that story is diffed against the design instead of against an earlier screenshot, so you (or your coding agent) can see exactly where the render differs from the design while you build it. Once the render matches, you accept it, and the accepted render becomes the story's normal regression baseline.

Set parameters.uiVerify.baselineImage on the story. The value is either a path to a PNG inside your built Storybook (serve it from a staticDirs folder) or a data:image/png;base64,... URI.

Remote URLs, absolute paths and .. are not accepted: the image has to ship inside the Storybook you upload, so the comparison never depends on a Figma link or a network fetch. Build and upload as usual with uiverify upload; there is no separate step to register the design.

• Scaled to your width. The design is resized to the render's width before diffing, so the only size difference left is height. Export the frame at 1x and build at the same canvas width for the most useful diff.
• Same diff as a regression. Changed pixels are highlighted in the diff overlay, and your agent can fetch the design and the render side by side, cropped to each region that differs, over MCP.
• It shows where, not why. The diff marks the pixels that differ. Working out that a heading is a size too large or a gap is 8px too wide is the reviewer's or the agent's job.
• It gates like any change. A story that does not match its design shows as changed and keeps the check red until you accept.

Add data-uiverify-ignore to the element: a background video, an autoplay animation, live or random data, a chart fed by real numbers. UI Verify blanks that element's box on both the design and the render, so it never counts toward the diff. The whole box is blanked, including its own size and position, so keep text you care about outside it and don't use it to hide static content that simply isn't built yet.

The accepted render becomes the story's baseline and the design steps aside: every later build is diffed against that render, like any other story. When the designer ships a new export and the image file changes, the new design takes over again, and the story is compared against it until you accept a render that matches. Design baselines follow the same per-branch rules as accepted screenshots, so declaring one on a feature branch does not change main.

Storybook projects, today. The declaration is a story parameter, so it needs nothing beyond the Storybook build you already upload. Playwright, Vitest and screenshot-upload projects don't support a declared design yet.

• Ship the design's font files with Storybook. Without the exact font, every line of text differs.
• Fix the page from the top down. A height difference near the top pushes every section below it, and the diff draws each one twice until it is fixed.
• Treat the percentage as a coarse signal. Blank space and ignored boxes dilute it, so a real wrap or offset can hide in a small number. Look at the regions, not just the total.
• Replace the mockup's placeholder copy with fixtures that match it, or ignore the region, when production shows real data there.