Buoy is a design system linter. It finds your design tokens, then flags code that uses a raw value instead, such as a hex color where a CSS variable exists or a Tailwind arbitrary value where a theme class fits. Its core scanner is deterministic and open source, and its GitHub App posts a table mapping each flagged value to a token. Design Bug Bot is 21st's AI reviewer for React pull requests: it reviews changed UI against the components and tokens your repository already uses, and attempts to render it.
Use Buoy for fast, repeatable token and naming checks on every commit and in any CI; add Design Bug Bot when the question is whether new UI should reuse an existing component, or whether a layout holds up on mobile.
Disclosure: This comparison is published by 21st, which makes Design Bug Bot, and is based on official documentation checked on September 14, 2026: Buoy's site and its public source, CLI repository, npm package and GitHub Marketplace listing. It is not a head-to-head benchmark.
Buoy vs Design Bug Bot at a glance
| Area | Buoy | Design Bug Bot |
|---|---|---|
| Review job | Design drift: hardcoded values, naming drift, token coverage. README | Changed React UI: component reuse, tokens, spacing, layout risks. |
| How it decides | Deterministic matching of values to tokens; no LLMs in core detection. Buoy | AI review against your repository, with an attempted render. |
| On the pull request | An issues table (file, line, severity, fix) and a pass or fail check. GitHub App docs | One updated review comment, a check per reviewed commit, suggested fix code. |
| Rendered UI | Not described in its docs; the scanner reads source and token files. | Desktop and mobile screenshots when the render succeeds. |
| Where it runs | CLI, git hooks, any CI, GitHub App. CI page | GitHub App only. |
| Merge blocking | Exit codes and check runs against thresholds you set. | Advisory. |
| Frameworks | React, Vue, Svelte, Angular, Lit and others, plus server templates. README | React (Next.js, Vite and similar) with Tailwind or plain CSS. |
What Buoy does well
Cheap to run everywhere. The CLI is MIT licensed and published as @buoy-design/cli. Buoy's homepage says core detection is fully deterministic, with no LLMs, no API keys and no data leaving your machine. The drift check suits pre-commit hooks, can check only staged files, and exits with an error code, so it fits any CI, with JSON, JUnit XML or SARIF output.
Knows where tokens live. The README lists CSS variables, SCSS, Tailwind config, JSON and Style Dictionary as token sources. The token comparison docs describe normalizing color and size units and flagging near misses, such as a hex one digit off a token.
Treats Tailwind as a first-class case. It extracts theme tokens from tailwind.config.ts, supports Tailwind v4 CSS-first configuration, and maps a class like bg-[#3b82f6] to bg-primary. It also catches hardcoded values in styled-components, Emotion, inline styles and CSS modules. Tailwind page, hardcoded values page
Looks past single values. It flags naming drift such as ButtonNew beside ButtonV2, props typed differently across components, and class strings copied five or more times. Existing drift can be ignored with a required reason, so only new drift fails.
Explains each fix. The GitHub App table separates a verified match to an existing token from a suggested new token name. Pro adds AI summaries, coaching for young design systems, committable inline suggestions and custom review instructions.
Where Design Bug Bot differs
Token matching answers one question well: is this value part of the system? Now picture a React pull request where every value is a token, yet it builds a new dropdown instead of using your existing Select, and its toolbar scrolls sideways on a phone.
Design Bug Bot reviews at that level. It checks changed UI against the components your repository already has, looks for layout risks such as horizontal overflow, fixed widths and actions hidden on mobile, and flags unnecessary dependencies. Each finding explains the problem, points to the file and line when available, and includes suggested fix code you can hand to a coding agent.
It also attempts a render. Changed pages and components from the diff are rendered in a React harness in a disposable sandbox, so the review can include screenshots at desktop and mobile widths. When rendering fails, findings are still reported from source, labeled as code-backed recommendations.
The trade-offs are real. After the free reviews it uses AI credits, it runs only on GitHub, it focuses on React, and it is advisory, so it will not fail a build the way a Buoy check can. It does not replace a linter on every commit.
Using a token linter with a design reviewer
- Pre-commit plus pull request. Run Buoy's drift check on staged files in a git hook and in CI, failing on critical drift, so raw values rarely reach review. Design Bug Bot can then focus on component fit and layout.
- Tailwind full of arbitrary values. Scan the repository with Buoy, ignore legacy drift with a reason, and fail only on new drift, while Design Bug Bot reviews new feature work against the components you are consolidating toward.
- A young design system. Buoy's Pro builder mode points out repeated values that could become tokens; Design Bug Bot checks whether new screens reuse the components you have.
Buoy pricing
Listed on Buoy pricing on September 14, 2026: the CLI is free under the MIT license. Pro is free for life for early adopters until Buoy reaches 100 teams, then $25 per developer per month, or $20 billed annually, with no seat minimum; verified open-source projects are free. Design Bug Bot gives new accounts 5 successful reviews free, then uses AI credits (details).
Trying both on one pull request
- Run Buoy's drift check on your main branch and ignore existing drift with reasons.
- Open a pull request with a hardcoded color, a Tailwind arbitrary spacing value, a duplicate component built entirely from tokens, and a fixed-width container.
- Note which tool flagged what, whether each fix points to a token or component that exists, and which findings came with a screenshot.
Before enforcing tokens, run a design system consistency audit. For the habits that create drift, see Tailwind CSS mistakes that break your UI.
Frequently asked
- Does Buoy use AI to detect design drift?
- Not in its core scanner. Buoy's site describes drift detection as deterministic, with no LLMs or API keys, and the open-source CLI runs locally. AI appears on the Pro tier, for pull request summaries and coaching.
- Can Buoy and Design Bug Bot review the same pull request?
- Yes. Both install as GitHub Apps. Buoy posts an issues table and a pass or fail check for token drift, while Design Bug Bot updates one advisory review comment about component reuse and layout, so Buoy can hold the gate and Design Bug Bot the design review.
- How much does Buoy cost?
- On September 14, 2026, Buoy's pricing page listed the CLI as free and MIT licensed, and Pro as free for early adopters until 100 teams, then $25 per developer per month or $20 billed annually. Verified open-source projects are free.
- Is a design token linter enough on its own?
- Value-level checks cover a lot of drift, but a change built entirely from tokens can still duplicate an existing component or overflow on a phone. Design Bug Bot reviews that kind of React change against your components and, when the render succeeds, adds desktop and mobile screenshots.