Skip to content
crocotaste
Install

AI design reviews on your pull requests

Every UI change gets checked against your tokens, your components, and your team's decisions

Install on GitHub Get your DESIGN.md
acme/storefront#482 · Add promo banner crocotaste · on-system
crocotasteOn-system

1 file · 42 tokens · 12 components · 9 decisions · 0 violations

crocotaste approved these changes.Nothing to snap at.

Reviews UI written by

  • Cursor
  • Claude Code
  • Copilot
  • Codex
  • your teammates

Agents ship fast, your system drifts

Four gates pass, none of them checks your design system

PR #479 · PricingCard.tsx, as the agent shipped it
Pro$24 a month

Everything in Free, plus unlimited projects and priority support.

Start freeGo pro
Summer sale · 20% off
  1. Hardcoded value. #4ade80 when you already have --color-success (tokens.css:18).
  2. Hand-rolled component. A raw <button> next to your <Button>: different radius, different green.
  3. Off-scale. 13px body text in a 12 / 14 type scale.
What PR #479 passed on its way to main
  • Lintpassed
  • Typespassed
  • Testspassed
  • Code reviewapproved
  • Design reviewnobody

The card merged with three things off-system, and every gate was right to pass it: none of them was asked about your tokens, your components, or your team's decisions.

Three steps to your first review

Two of them are done by GitHub and your own coding agent

  1. 1

    Install the GitHub App

    Pick the repos you want reviewed. We get read access to your code and can write exactly three things: pull request comments, checks, and one issue. Signing in adds one account read, your email addresses, because the same App is what you sign in with.

    Contents
    read
    Pull requests, checks, issues
    write

    Parsed references stay in memory for up to 30 minutes, never in storage.

  2. 2

    Your agent writes DESIGN.md

    We open one issue with instructions for whichever coding agent you already use. It reads your repo, writes a DESIGN.md with your tokens, components and conventions, and opens a pull request. You read it, fix what it got wrong, and merge.

    1. Issue #470 Generate your DESIGN.md
    2. agentPR #471 Add DESIGN.md · 42 tokens · 12 components
    3. mergedReviews cite it. Your agents read it.

    Skip this if you like. Without the file, reviews use the tokens and components we parse from your code, and the check says so.

  3. 3

    Every UI pull request gets reviewed

    The checks run first, each with the fix written, then an AI read against your DESIGN.md for what a regex can't judge. Each finding names the line it comes from. Clean PR, green check, approved.

    crocotaste#482 Promo banner · clean
    crocotaste#479 Pricing cards · 3 findings
    crocotaste#477 API retry · not UI
crocotasteViolationsrc/components/PricingCard.tsx:41

This is a hand-rolled button next to your <Button>. Your system has Button size="sm" variant="secondary" for this role.

Cited from src/components/Button.tsx:21 · DESIGN.md:58

- <button className="px-4 py-2 rounded-md bg-emerald-500 text-white">Go pro</button>
+ <Button size="sm" variant="secondary">Go pro</Button>
🤖 Prompt for your coding agent
In src/components/PricingCard.tsx around line 41:
Replace the raw <button> with the design-system <Button size="sm" variant="secondary"> from components/Button.tsx. Keep the label "Go pro". See DESIGN.md:58: "never hand-roll a control the library already has".

Every finding cites its source, or it doesn't exist

What's off, what your system has instead, and the line that says so

  • The fix is already written. A one-line fix arrives as a GitHub suggestion, so one click commits it.
  • Or hand it to your agent. Every finding carries a prompt you can paste into Cursor, Claude Code or Copilot, and the check publishes the same findings as JSON for agent loops.
  • Nothing gets posted twice. Fingerprints survive a force-push, so a push never re-posts a finding, and one you fixed closes itself.
  • Three AI findings per pull request, at most. We'd rather miss a nit than cry wolf.
  1. crocotasteViolationCampaignBanner.tsx:12

    Hand-rolled <button> where your Button component exists (src/components/Button.tsx:21)

    Cited from src/components/Button.tsx:21

  2. you

    @crocotaste ignore the campaign embed renders outside the app, it can't import Button

  3. crocotaste

    Dismissed on this pull request. To make it hold everywhere, add this to DESIGN.md under ## Decisions:

    ### Hand-rolled <button> where your Button component exists

the campaign embed renders outside the app, it can't import Button. Source: src/components/Button.tsx:21.
    🤖 Prompt for your coding agent
mergedPR #492 Record decision: Hand-rolled <button> where your Button component existsEvery review after this reads it. So does your agent.

Disagree once, and it's written down

One reply drafts the decision, your DESIGN.md holds it

  • Dismissed means dismissed on that pull request. On other ones it can come back, on purpose: a decision nobody wrote down isn't a decision yet.
  • There's nothing to keep in sync because we keep no design knowledge of our own. Your repo holds the only copy.
  • Your agents learn the same lesson since they read the same file, so they stop making the mistake you dismissed.

Never red, never silent

A green check means on-system, every other state names the next step

  • Our problems never block you. If the model hiccups, your balance hits zero or a commit goes stale, the check goes neutral and your pull request stays mergeable.
  • You always know what to do next. A neutral check says it on its face: re-run, top up, or nothing at all.
  • And it stays quiet. A push storm turns into one review, only new commits get another look, and a finding you fixed closes itself.
crocotasteOn-system
crocotaste3 findings · 2 violations · 1 drift
crocotasteCouldn't complete · @crocotaste review to re-run
crocotasteReviewing 6 files… ~60s
{ "state": "findings",
  "withheld": 0,
  "findings": [{
    "verdict": "VIOLATION",
    "path": "src/components/Banner.tsx",
    "line": 12,
    "citation": {
      "file": "tokens.css", "line": 18 },
    "fingerprint": "3f2a…" }] }
The same findings ride on the check as JSON, so an agent loop can pick them up and fix them with no person in the middle.

Start free, then size it to what you ship

One pull request is one review, which covers two AI reads of it

Free on install

3 reviews

No card, no plan to pick yet. Point it at one repo and watch.

Install on GitHub

Every plan is the whole product

  • Cited findings with the fix written
  • A prompt for your agent on every finding
  • The learning loop into DESIGN.md
  • JSON on every check for agent loops
  • As many repos and people as you like
  • Pushes on a reviewed PR, free

Run out and reviews pause with a neutral check. Never a charge for going over.

  • Starter$19a monthFor a solo dev shipping UI a few times a week25 reviews a month
  • Teammost teams$79a monthFor 5–15 engineers120 reviews a month
  • Business$249a monthFor 15–50 engineers, heavy agent volume400 reviews a month
  • Pack$25onceFor a busy month on any plan25 reviews, valid 12 months

Questions teams ask before installing

The short answers, with the permissions and the numbers in them

Does Crocotaste write to my repository?

No, and it can't. The GitHub App gets read-only access to your code, and write access only to pull request comments, checks and issues. DESIGN.md is written and edited by you or your own coding agent; all Crocotaste does is ask for it.

What if we don't have a design system?

You have more of one than you think. Reviews run on what the repo already holds (Tailwind config, token files, component exports) and the check says so. The onboarding issue hands your coding agent instructions to write a DESIGN.md from that same code, which makes the next review sharper and your agents better at the same time. If there is nothing at all to check against, the review is skipped, free, and the check points you at DESIGN.md rather than passing a change against nothing.

Will it flood our PRs with comments?

No. One summary comment, edited in place instead of a new one every push. At most 3 AI findings per pull request and at most 12 findings posted per push; the rest wait their turn. Dismiss a finding and it won't come back on that PR. Fix one and, once the review can see the line is gone, its comment says which commit fixed it and collapses.

Which coding agents does it work with?

All of them. It reviews the pull request, not the editor, so whatever wrote the code is beside the point. Every finding carries a prompt you can paste, and the check run emits JSON so an agent loop can pick the findings up on its own.

What counts as a review?

One pull request, one review, and that review covers two AI reads: the first, and one more after you push new UI lines. Pushes never spend a review. Asking for a third read with @crocotaste review or Re-run is one review, and an ask with nothing new to read is free. Drafts, backend-only PRs and anything we couldn't review cost you nothing. When a plan runs out, reviews pause with a neutral check until the next month or a top-up, and we never charge you for going over.

What counts as a UI change?

A file glob, and you can read the whole list in the docs: components, styles, design tokens, Tailwind config, stories. A backend-only PR is skipped with a neutral check and costs you nothing.

Is our code used for training?

No. Your diff goes to the model for that one review and is not kept; the parsed references sit in the worker's memory for up to 30 minutes, never in storage. What we keep is each finding we posted (message, suggestion and fingerprint, the same text already on your pull request) plus the counts we bill from. No file contents, no copy of your repository.

How does the trial work?

3 reviews free on install, no card. Point it at one repo and watch: a green check on a clean PR, one cited finding on a drifted one.

Install on one repo, open a pull request

Your first review lands in about a minute, 3 reviews free and no card

Install on GitHubOr get your DESIGN.md first