Your project already has a button.
AI just wrote another one.
Reuses before it invents
Hand-rolled button? It names the one you already have.
Keeps type on the scale
No 13px sneaking into a 12 / 14 / 16 scale.
Checks the phone too
Every change rendered at 375px, overflow flagged.
Watches the weight
New dependencies and rerenders, measured on the route.
What lands on the PR.
A score, each finding against what the repository already has, two real screenshots per visual fix, and the patch.
Design review
0 critical · 3 serious · 0 minor
| 1. Apply button is off the button scale | app/pricing/page.tsx:52 | |
|---|---|---|
| Current | Fixed | |
 | → |  |
Fix: Increase the compact action to h-8, px-3 and text-sm.
plan.cta === "Apply" ? "h-5 px-2 text-[11px]" : "h-10 px-4 text-sm" → plan.cta === "Apply" ? "h-8 px-3 text-sm" : "h-10 px-4 text-sm"
| 2. Plan description hardcodes a colour instead of the muted token | app/pricing/page.tsx:45 | |
|---|---|---|
| Current | Fixed | |
 | → |  |
Fix: Use the existing muted-foreground design token.
className="mt-3 min-h-14 text-sm leading-6"
style={{ color: "#9a9a9a" }}
→ className="mt-3 min-h-14 text-sm leading-6 text-muted-foreground"| 3. Secondary action competes with the primary action | app/pricing/page.tsx:57 | |
|---|---|---|
| Current | Fixed | |
 | → |  |
Fix: Render Learn more as a bordered secondary action using existing surface tokens.
bg-black text-white → border border-black/10 bg-background text-foreground
👉 This review doesn't block the merge. Fixing these now avoids design-system drift.
💡 3 inline suggestions on changed files
Working well
- The pricing cards reuse the page's surface and spacing tokens instead of introducing their own.
Four steps, then it runs on its own.
1. Connect the 21st GitHub App
Install it on the organisation or account that owns the repositories. It asks to read code and to write pull request comments and checks, nothing else.
2. Turn reviews on per repository
Nothing runs until you flip a repository on. Turn it off again any time and the bot stops with the next pull request.
3. Open a pull request
The bot clones the head commit into an isolated sandbox, renders the changed components in a harness there and measures what it finds. It never needs your environment or keys.
4. Read the review, merge when you like
One sticky comment with the score, findings and proof, plus a check run named 21st design review. Push again and the same comment is updated in place. It never blocks the merge.
Reviews draw on your AI credits, the same balance 21st AI uses. No seats and nothing per repository: you pay the model cost of each review.
See plans