critique-partner

A design critic that argues from your rules.

Point it at a URL. It looks at the page, grills you about what the page is for, then writes a critique where every issue quotes one of your own rules word for word, and loops until a script and a second critic can't knock it down. Built for Claude Code.

Get it on GitHub /crit https://your-site.com

What it does, step by step

You type one command. Everything after it either looks at the page, asks you, or checks the critique.

  1. Finds your rules

    It reads the rules you already wrote: taste.md, DESIGN.md, principles.md. No rules, no critique: it asks instead of reaching for generic advice.

  2. Looks before it asks

    Headless Chrome screenshots the page at phone and desktop width and measures fonts, colours, contrast, buttons above the fold, shadows, radii and overflow.

  3. Grills you

    One question at a time, each with its recommended answer: the page's one job, who's on it, how finished it is, what you want from the crit, what's settled.

  4. Critiques

    A fresh agent writes a verdict, a direct answer to your question and the one thing to fix first, then findings that each quote your rule and point at the page.

  5. Checks against a script

    A gate fails any quote that isn't word for word in the section it cites, and any page text or selector that isn't on the page.

  6. Gets a second opinion

    Another fresh agent tries to prove each serious finding wrong against the screenshots, checks severity and the verdict, and looks for what was missed.

  7. Loops

    The critic fixes only what the gate or the second critic flagged. Then both check again, three passes at most.

  8. Reports

    The verdict, the answer and what to fix first lead. The serious findings follow in a line each, then what it assumed or couldn't check.

  9. Keeps going with you

    Push back and it re-examines on evidence, not pressure. Fix the page, run it again, and round two shows what's fixed and what's new.

What a finding looks like

Every finding names the place, quotes the rule, separates what it saw from why it matters, and suggests a fix you're free to ignore.

### The hero copy sits over a full-bleed image
Where: 1280-fold.png, hero: "Spark is the powerful, AI-native workspace" (section.hero)
Rule: "No full-bleed hero images with text overlays." (taste.md ยง Density & spacing)
What's wrong: The image failed to load, so the white subhead sits on a white page.
A visitor deciding in seconds sees a slogan and two buttons, with nothing to judge the trial by.
Fix: Two grid cells: the copy in ink on one side, the image on the other.

Anything your rules don't cover is a judgment call: labelled, kept apart, three at most, and it never sets the verdict. Ask for rules only and you get none.

Why it holds up

Language models are confident critics and unreliable ones. In Google's UICrit study, 13% of zero-shot UI critiques held up. Three things keep this one honest.

The gate is a script

Models that correct themselves without outside feedback get worse. This loop runs on checks outside the model: your rule files, the captured page, and a deterministic gate with 55 test cases.

A second critic

Model judges favour their own work. The verifier never sees the first critic's reasoning, only its claims, and has to uphold each one before the loop stops.

Short and anchored

Longer critiques invent more problems. Findings are capped at eight and grouped by rule, and each points at page text or a selector the capture recorded.

On the test page, the loop took all three passes. The second critic caught five factual slips, among them a button placed on the wrong screenshot, a 56px headline reported as 48px, and a black background that wasn't there. Each was fixed before the critique was shown.

Install

You need Claude Code, Node 18 or later, and Playwright with Chromium.

npm i -g playwright && npx playwright install chromium
git clone https://github.com/bbulman/critique-partner.git
cd critique-partner
./install.sh

Open a new Claude Code session and run /crit on a page. Try the example first: a landing page built with thirteen planted violations of its own rules.

What it's built on

Each design choice answers a finding from the research on critique, human and machine.

  • Liz Lerman's Critical Response ProcessIt answers your question first, and opinions are opt-in.
  • Adam Connor and Aaron Irizarry, Discussing DesignEvery finding ties what it saw to the page's job.
  • Parkes et al. on the compliment sandwichWhat works is a list to protect, never padding around the problems.
  • Ed Catmull on Pixar's BraintrustThe diagnosis is the deliverable; the fix is a suggestion.
  • Huang et al. 2023Self-correction needs outside feedback, so the loop runs on a gate.
  • Self-RefineMost gains come early: three passes at most.
  • Zheng et al. 2023Judges favour their own output, so a fresh critic verifies.
  • CriticGPTLong critiques invent more problems: findings are capped.
  • UICritModels can't locate elements from screenshots, so findings point at the DOM.
  • Building effective agentsThe evaluator-optimizer loop, with ground truth at every step.