/
Design Bug Bot
Beta

Your project already has a button. AI just wrote another one.

Keeps the UI consistent

Finds the duplicate, names the component you already have and drafts the swap.

Keeps your type scale intact

Catches a stray size or font and gives the step from your scale instead.

Keeps the phone layout working

Catches overflow, broken stacking and hidden buttons, with before and after shots.

Keeps the site from getting slower

Measures what each change adds: dependencies, bytes, load order and rerenders.

What lands on the PR.

A score, the findings, two real screenshots each, and the patch.

21st-connectorbotcommented 4 minutes ago

Design reviewFinal design review score: 70 out of 100

0 critical · 3 serious · 0 minor

1. Apply button is off the button scale

CurrentFixed
current statefixed state

Fix: Increase the compact action to h-8, px-3 and text-sm.

Evidence

app/pricing/page.tsx:52

Compact action renders 20px tall next to the 40px primary.

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

CurrentFixed
current statefixed state

Fix: Use the existing muted-foreground design token.

Evidence

app/pricing/page.tsx:45

#9a9a9a against the token's #8b8b8b, one step off the scale.

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

CurrentFixed
current statefixed state

Fix: Render Learn more as a bordered secondary action using existing surface tokens.

Evidence

app/pricing/page.tsx:57

Two filled black actions in the same card, 12px apart.

bg-black text-whiteborder border-black/10 bg-background text-foreground

Three ways it runs.

Per repository, any mix of them.

Every pull request

One comment with the score, findings and patch, rewritten on every push. Never blocks the merge.

Every few commits on main

You pick how many, from 2 to 100. Fixes come back as one pull request.

On a schedule

Every few days, as often as you like. Whatever landed on main since the last review, from everyone or the contributors you pick.

Connect once. Reviews run automatically.

Connect GitHub
Install the app on the account that owns the repository.
Choose triggers
Enable pull request reviews, scheduled maintenance, or both.
Run a review
Start now from recent commits, or wait for the next trigger.
Fix the issues
Read the review here or on GitHub, then open a fix pull request.

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

Frequently asked questions.