BrowserStack Percy is a visual testing platform. Its SDKs capture DOM snapshots during your Playwright, Cypress, Selenium or Storybook runs, Percy renders them in several browsers and widths, and each build is compared with a baseline build for your team to approve. Design Bug Bot, made by 21st, is a GitHub App that reviews changed React UI code against the components, tokens, spacing and type scale your repository already uses, and suggests fix code.
Percy answers "what changed on screen?" and Design Bug Bot answers "was this built the way the rest of the product is built?" Use Percy to catch unexpected visual changes across Chrome, Firefox, Edge and Safari; add Design Bug Bot when pull requests pass visual review but still introduce one-off buttons, off-scale spacing or new font sizes.
Disclosure: This guide is published by 21st, which makes Design Bug Bot. It relies on official Percy and 21st documentation checked on September 14, 2026. It is not a head-to-head benchmark, and nothing below rates either product's accuracy.
BrowserStack Percy vs Design Bug Bot at a glance
| Area | BrowserStack Percy | Design Bug Bot |
|---|---|---|
| Input | DOM snapshots taken by an SDK inside your tests. SDK workflow | The pull request diff and the repo's existing UI code |
| Rendering | Re-rendered in Percy's infrastructure with JavaScript disabled. SDK workflow | Changed pages and components in a sandbox at desktop and mobile widths, when the render succeeds |
| Browsers | Chrome, Firefox, Edge and Safari by default. Cross-browser | No cross-browser regression |
| Compared against | A base build chosen by the Git or Visual Git strategy. Baselines | Your components, tokens, spacing and type scale |
| AI review | Visual Review Agent on paid plans: summaries, noise filtering, bug tags, intent matching. Review agent | Explained findings with file and line when available |
| Coding agents | Alpha plugin that classifies changes and drives your agent to fix bugs. Plugin | Suggested fix code; can push a branch for a fix pull request |
| Merge signal | Approval turns the GitHub status green; approvals are optional by default. GitHub | Advisory check per reviewed commit; never blocks |
| Usage unit | Screenshots: one page or component in one browser at one width. Plans | Successful reviews, then AI credits. Details |
What Percy does well
Percy moves the browser matrix out of your test suite. The SDK serializes the page at snapshot time, including form values, CSSOM, accessible iframes and canvas elements, and Percy renders that DOM concurrently across browsers and widths in its own infrastructure. Percy SDK workflow
SDKs cover Playwright, Cypress, Selenium, Puppeteer and Storybook, among others, and a CLI path starts visual testing without an automation script. Percy documentation A Visual Test Integration Agent, in beta, can set Percy up from an AI-enabled IDE. Integration agent
Baselines follow your branching model. Git compares a feature branch with its base branch and suits build-level approvals; Visual Git keeps a per-branch baseline of the latest approved snapshots and suits snapshot-level approvals. Baseline management On GitHub, Percy updates the pull request summary when differences await review, and approving the build turns its status green. GitHub integration
On paid plans, the Visual Review Agent separates meaningful changes from minor pixel shifts, writes natural-language summaries, tags anomalies such as stretched images or overlapping text, and compares changes with the pull request description. Its docs note a 13,500px height limit and ask reviewers to check its output before approving. Visual Review Agent
An alpha plugin for Claude Code, Cursor, GitHub Copilot, OpenAI Codex and others labels each difference (expected, likely bug, unplanned change and more) and escalates ambiguous ones, while you confirm every approval and rejection. Its bug detection needs a paid plan with Visual Review Agent access. Visual testing plugin
Where Design Bug Bot differs
Percy's intent matching can tell you a new Export button fits a pull request titled "Add CSV export." A screenshot, even a well-summarized one, does not show whether that button is your existing Button or a lookalike written from scratch with its own padding and font size. That information lives in the code.
Design Bug Bot reads that code. It reviews changed UI against the repository's 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. Coverage comes from the diff: changed pages and components are picked from the pull request and rendered in a React harness, not from a snapshot list someone maintains.
A finding explains the problem, points to the file and line when available, and includes suggested fix code to inspect, copy or hand to a coding agent. When the sandbox render succeeds, the review can include desktop and mobile screenshots; when it cannot, findings are labeled as code-backed recommendations. Design Bug Bot
It does not keep approved baselines, render in multiple browsers, or notice that a screen outside the diff now looks different. It is advisory, React-focused and GitHub only, and it is not a general reviewer for logic, security or backend bugs.
Which to buy first, and when to run both
Cross-browser regressions are the pain. A shared header change breaks alignment only in Safari. Design Bug Bot does not render in multiple browsers, so buy Percy first.
The pull request matches its description and still duplicates a component. Percy shows the new Export button, and the review agent can mark it as matching the stated intent. Design Bug Bot can point out that the repo already has a Button with a compatible variant and suggest the swap. Both tools did their job on different evidence.
A redesign touches every snapshot. After a spacing and color refresh, most snapshots show expected differences, and the Percy work is approving a new baseline. Design Bug Bot asks a different question of the same pull request: which changed files introduced raw values instead of the new tokens.
A new page with no snapshot yet. Percy covers what your tests capture and counts screenshots per page, browser and width: two pages in two browsers at three widths is 12. A page added in this pull request has no baseline and may have no snapshot call. Design Bug Bot reviews it from the diff. If drift in new screens is your main problem and your regression suite is small, Design Bug Bot is a reasonable first purchase; add Percy as your set of approved screens grows.
Percy pricing
On September 14, 2026, Percy's plans and billing documentation listed a free plan with 5,000 screenshots a month, unlimited users and unlimited projects; paid plans include a fixed number of screenshots with overage charges. We found no paid Percy prices on the pages we checked, so confirm current plans on BrowserStack pricing.
Design Bug Bot gives new accounts 5 successful reviews free, then uses AI credits on a subscription that includes AI. See the trial and billing details.
Backtest on work Percy already approved
- Run Design Bug Bot's manual review of recent default-branch changes, and pick out the merges Percy already approved that added or changed components.
- Sort each finding: visible in Percy's diff, visible only in code (a duplicated component or a raw hex value), or not a real problem. The middle group is what Design Bug Bot adds.
- On a new pull request, turn on Percy's AI-powered build, let Design Bug Bot review the same commit, and compare both outputs for the same screen.
- Apply one suggested fix, let Percy rerun, approve the diff only if it is the change you intended, and note how many screenshots the round trip used.
For the wider field, see the AI UI design review tools comparison, or Applitools Eyes vs Design Bug Bot if Applitools is also on your list.
Frequently asked
- Does Percy's Visual Review Agent check design system consistency?
- Its documented job is reviewing visual differences: summaries, noise filtering, tags for anomalies and a check of changes against the pull request description. It works from screenshots compared with a base build. Design Bug Bot reviews whether the code reuses your existing components, tokens, spacing and type scale.
- Is BrowserStack Percy free?
- Percy's plans documentation lists a free plan with 5,000 screenshots a month, unlimited users and unlimited projects. A screenshot is one page or component in one browser at one width, so your browser and width choices decide how far that allowance goes.
- Can Design Bug Bot replace Percy?
- Not for visual regression. Design Bug Bot does not keep approved baselines or render in Chrome, Firefox, Edge and Safari. It reviews changed React UI code against your repository's conventions, with desktop and mobile screenshots when its sandbox render succeeds.
- Does Percy block pull requests from merging?
- Not by default. Approving a Percy build turns its GitHub status green, and teams can choose to require approvals before merging. Design Bug Bot's checks are always advisory and never block a merge.