Chromatic is the visual testing and review service from the maintainers of Storybook. It renders your components and pages in cloud browsers, compares each snapshot with an accepted baseline, and gives designers and product managers a place to approve intentional changes. Design Bug Bot, from 21st, is a GitHub App that reviews the UI code in a pull request against the components, tokens, spacing and type scale your repository already uses, then suggests fix code.
The real difference is how each tool learns what your UI is. Chromatic knows your components through Storybook stories and the Vitest, Playwright or Cypress tests you have written. Design Bug Bot reads the repository directly and picks changed pages and components from the diff. Use Chromatic to catch unintended visual changes across the states you maintain; add Design Bug Bot when you also want every pull request checked for design-system drift.
Disclosure: This comparison is published by 21st, which makes Design Bug Bot. It is based on official documentation and pricing pages checked on September 14, 2026. It is not a head-to-head benchmark: we have not run both tools on a common set of changes.
Chromatic and Design Bug Bot at a glance
| Chromatic | Design Bug Bot | |
|---|---|---|
| Review job | Visual, interaction and accessibility UI Tests, plus UI Review for intentional changes. UI Tests | Design review of changed UI code against your existing patterns |
| How it knows your UI | Stories, or archives captured during Vitest, Playwright and Cypress tests. Visual tests | The repository itself; changed pages and components are picked from the diff |
| Rendered evidence | Cloud-rendered snapshots compared with accepted baselines. Visual tests | Screenshots at desktop and mobile widths when an isolated render succeeds; code-backed findings when it does not |
| Components and tokens | Through what your stories render; Storybook MCP shares components and stories with agents. Chromatic AI | Checks reuse of existing components, tokens, spacing and type scale |
| What a reviewer acts on | A changed snapshot fails until it is accepted as the new baseline. Baselines | A finding with the file and line when available, plus suggested fix code |
| Merge gating | UI Tests, Storybook Publish and optional UI Review checks, which you can require. PR checks | Advisory: one updated comment and a GitHub check per reviewed commit |
| Git providers | GitHub, GitLab and Bitbucket. PR checks | GitHub only |
| Setup | Run Chromatic in CI against Storybook or your end-to-end tests. CI setup | Connect GitHub in 21st, choose repositories, enable pull request reviews |
| Pricing model | Billed snapshots per month. Chromatic pricing | 5 free successful reviews, then AI credits. Details |
What Chromatic does well
Chromatic is built around Storybook: each story already describes a component state, so it becomes a test without extra assertions. UI Tests cover visual tests, interaction tests and accessibility tests that run axe on each component, in parallel across the viewports and browsers you choose.
TurboSnap trims billed snapshots on large Storybooks. It reads your Git history and your Webpack or Vite dependency graph, captures only the stories affected by a change, and copies the rest from their baselines at 0.2 of a billed snapshot each.
Intentional changes get their own workflow. UI Review compares a branch with its merge base, lets you assign reviewers or default reviewers, and posts a UI Review status check that you can require in GitHub, GitLab or Bitbucket.
Storybook is not the only input. Chromatic captures archives during Vitest, Playwright and Cypress runs; its Playwright FAQ notes that these runs still include a build Storybook step and that TurboSnap does not apply to Playwright visual tests.
Chromatic also points Storybook at coding agents. It publishes Storybook MCP to a secure cloud endpoint, one server per branch, so agents can reference your components and stories while they write code. The setup guide requires Storybook 10.3 or later and React.
Stories versus the repository
Chromatic's coverage is the set of stories and tests you maintain, and a snapshot comparison answers one precise question: does this state look different from the accepted one?
That question does not cover a new ExportButton written from scratch while the repository already has a Button with the right variant, or a card with 18px padding where the spacing scale jumps from 16 to 20. Both can render cleanly, match their first snapshot, and still add another pattern to maintain.
Design Bug Bot starts from the code instead. It reviews the changed UI against the repository's own components, tokens, spacing and type scale, and looks for layout risks such as horizontal overflow, fixed widths and actions hidden on mobile, plus unnecessary dependencies. Each finding explains the problem, points to the file and line when available, and includes suggested fix code you can inspect, copy or hand to a coding agent.
It does not depend on stories: changed pages and components are picked from the diff and rendered in a React harness inside a disposable sandbox. When the render succeeds, the review can include screenshots and visual checks at desktop and mobile widths. When it cannot, you still get source-supported findings, labeled as code-backed recommendations.
What it does not do is Chromatic's core job: Design Bug Bot keeps no approved baselines, runs no cross-browser pixel regression and does not block merges. It works on GitHub only and is focused on React codebases.
When to use one, the other, or both
A new page with no story yet. A pull request adds a settings page that no story or test renders, so Chromatic has nothing new to compare until someone writes one. Design Bug Bot picks the page from the diff and reviews it against existing components in the same pull request.
A duplicate button that passes UI Tests. Every existing story is unchanged, so UI Tests pass, but the new button is a one-off beside the shared component. A reuse finding with fix code addresses that, provided the shared component supports what the new one needs.
A spacing-scale redesign. Changing a spacing token can shift hundreds of snapshots, and reviewing that is Chromatic's job: accept the changes in UI Review with your designers. Design Bug Bot can check that new code references the updated tokens, but it does not replace approving the visual diff.
UI written by agents. Storybook MCP gives an agent component context before it writes code, Design Bug Bot reviews the result in the pull request, and Chromatic's UI Tests catch what it broke elsewhere.
Chromatic pricing
As listed on Chromatic pricing on September 14, 2026: Free is $0 a month with 5,000 billed snapshots and Chrome only; Starter is $179 a month with 35,000 billed snapshots and adds Safari, Firefox and Edge; Pro is $399 a month with 85,000; Enterprise is custom. The billing docs count visual snapshots as tests × builds × browsers × modes, so each extra browser or mode multiplies usage.
Design Bug Bot is not billed by snapshot. New accounts get 5 successful reviews free, then reviews use AI credits from a subscription that includes AI. See the trial and billing details.
Pricing Chromatic alternatives for the snapshot job itself? Compare visual testing tools such as Argos or Percy; Design Bug Bot sits beside that layer rather than replacing it.
Evaluate both on one pull request
- Pick a pull request that adds a component with a close existing equivalent, and write down what a good review should catch.
- Run Chromatic as you normally would and note which changed files have no story or test covering them.
- Let Design Bug Bot review the same pull request, and check whether each suggested component or token fits the existing contract.
- Compare the work each output created: accepting snapshot diffs versus acting on findings. Keep a tool for the failures only it catches.
For the wider split between these approaches, read visual regression testing vs AI design review.
Frequently asked
- Does Design Bug Bot need Storybook stories the way Chromatic does?
- No. Chromatic's UI Tests build on your stories and on Vitest, Playwright or Cypress tests. Design Bug Bot works from the repository: it picks changed pages and components from the pull request diff and attempts an isolated render in a disposable sandbox. If the render fails, it still reports code-backed findings with suggested fix code.
- How much does Chromatic cost?
- As listed on Chromatic's pricing page on September 14, 2026, Free is $0 with 5,000 billed snapshots a month on Chrome, Starter is $179 a month with 35,000, Pro is $399 a month with 85,000, and Enterprise is custom. Chromatic counts visual snapshots as tests × builds × browsers × modes, so every added browser multiplies usage.
- Can Design Bug Bot replace Chromatic?
- Not for visual regression testing. Design Bug Bot keeps no approved baselines, runs no cross-browser pixel comparisons and does not block merges. If you rely on Chromatic's baselines and UI Review, keep them and treat Design Bug Bot as an addition for component reuse, token and layout questions in GitHub pull requests.
- How does Chromatic's Storybook MCP relate to Design Bug Bot?
- Chromatic publishes a Storybook MCP server so coding agents can reference your components and stories while they write code; its setup guide requires Storybook 10.3 or later and React. Design Bug Bot works after the code exists, reviewing the pull request against components already in your repository. One informs the agent, the other checks its output.