Design review tools compared
What each one checks against your design system, and when to pick it
| Tool | What it checks | Against your design system | Can block a merge |
|---|---|---|---|
| Crocotaste | Every UI change, against your DESIGN.md, tokens, components and decisions | Yes, and every finding cites its line in your system or is deleted | No, a finding never fails the check |
| AI code reviewers | |||
| CodeRabbit | All code: bugs, security and style | Only through guidelines you write | Yes, if you set its checks to error |
| GitHub Copilot code review | All code, guided by your instruction files and AGENTS.md | Only through instructions you write | No, it comments by default; approvals can count, in preview |
| Cursor Bugbot | Bugs, security and code quality | Only through rules you write, in BUGBOT.md or team rules | Configurable, neutral by default |
| Greptile | All code, with the whole repository as context | Only through custom rules | Posts a status check; blocking not documented |
| Graphite Agent | All code, in every pull request of the repos you connect | Only through custom rules | Not documented |
| Linters | |||
| Google's design.md lint | The DESIGN.md file itself: broken references, contrast, structure | It checks the file, not your code | Only on errors, such as broken references |
| @shadcn/lint | Raw colors, arbitrary values, inline styles and restyled components | Partly, from your Tailwind theme and the rules you configure | Yes, as a CI step |
| ESLint Tailwind plugins | Unknown and conflicting classes, plus class patterns you ban | Partly, through class patterns you restrict | Yes, as a CI step |
| Stylelint strict values | Raw values in the CSS properties you choose | Partly, by forcing variables | Yes, as a CI step |
| Visual testing | |||
| Chromatic | Storybook, Vitest, Playwright and Cypress snapshots against a baseline | No, it compares pixels, not rules | Configurable |
| Percy | Page and component screenshots against a baseline | No, it compares pixels, not rules | Configurable |
- Crocotaste
- What it checks
- Every UI change, against your DESIGN.md, tokens, components and decisions
- Against your design system
- Yes, and every finding cites its line in your system or is deleted
- Can block a merge
- No, a finding never fails the check
AI code reviewers
- CodeRabbit
- What it checks
- All code: bugs, security and style
- Against your design system
- Only through guidelines you write
- Can block a merge
- Yes, if you set its checks to error
- GitHub Copilot code review
- What it checks
- All code, guided by your instruction files and AGENTS.md
- Against your design system
- Only through instructions you write
- Can block a merge
- No, it comments by default; approvals can count, in preview
- Cursor Bugbot
- What it checks
- Bugs, security and code quality
- Against your design system
- Only through rules you write, in BUGBOT.md or team rules
- Can block a merge
- Configurable, neutral by default
- Greptile
- What it checks
- All code, with the whole repository as context
- Against your design system
- Only through custom rules
- Can block a merge
- Posts a status check; blocking not documented
- Graphite Agent
- What it checks
- All code, in every pull request of the repos you connect
- Against your design system
- Only through custom rules
- Can block a merge
- Not documented
Linters
- Google's design.md lint
- What it checks
- The DESIGN.md file itself: broken references, contrast, structure
- Against your design system
- It checks the file, not your code
- Can block a merge
- Only on errors, such as broken references
- @shadcn/lint
- What it checks
- Raw colors, arbitrary values, inline styles and restyled components
- Against your design system
- Partly, from your Tailwind theme and the rules you configure
- Can block a merge
- Yes, as a CI step
- ESLint Tailwind plugins
- What it checks
- Unknown and conflicting classes, plus class patterns you ban
- Against your design system
- Partly, through class patterns you restrict
- Can block a merge
- Yes, as a CI step
- Stylelint strict values
- What it checks
- Raw values in the CSS properties you choose
- Against your design system
- Partly, by forcing variables
- Can block a merge
- Yes, as a CI step
Visual testing
- Chromatic
- What it checks
- Storybook, Vitest, Playwright and Cypress snapshots against a baseline
- Against your design system
- No, it compares pixels, not rules
- Can block a merge
- Configurable
- Percy
- What it checks
- Page and component screenshots against a baseline
- Against your design system
- No, it compares pixels, not rules
- Can block a merge
- Configurable
AI code reviewers
Pick one to review all of your code: logic, security and style. A design rule reaches them only through the instructions you write, so run Crocotaste beside one for the UI.
CodeRabbit, GitHub Copilot code review, Cursor Bugbot, Greptile, Graphite Agent
Linters
The best first line for exact rules, like no raw hex or no arbitrary values, instant in the editor and in CI. They can't tell a hand-rolled button from your component or learn a team's decision, which is where a review starts.
Google's design.md lint, @shadcn/lint, ESLint Tailwind plugins, Stylelint strict values
Visual testing
Pick one to see what a change actually looks like across browsers and widths. They compare pixels to an approved baseline; Crocotaste checks the code against your rules and takes no screenshots.
Chromatic, Percy
Install on one repo, open a pull request
Your first review in about a minute, 3 free and no card
- 00:00 PR #1 opened by your agent
- 00:04 queued · UI files detected
- 00:19 read tokens.css, Button.tsx at base
- 00:41 checks done · AI read running
- 00:58 On-system · approved