Double Diamond case studyMulti-agent designSolo build
Design Critique Agent: teaching an agent to cite its sources
An AI design reviewer that evaluates interface screenshots against perceptual psychology, established usability heuristics, personal design standards, and accessibility compliance — surfacing what a senior designer would catch in a 30-minute critique, in under a minute.
01
Discover
Most designers don't get enough critique. Senior review time is scarce, peer feedback depends heavily on who's in the room, and junior designers can go weeks shipping work without a structured second opinion. Design critique today happens in a few recognizable formats, each with a structural weakness:
Live design review
+ Rich, contextual, catches intent-level issues
− Scarce, scheduled, gatekept by seniority
Async Slack/Figma comments
+ Low friction
− Inconsistent depth, no shared framework
Self-critique before shipping
+ Always available
− No second opinion, blind to your own habits
Formal heuristic evaluation
+ Structured, repeatable
− Time-consuming to run manually, rarely done outside enterprise UX teams
Nothing in this list gives a fast, structured, multi-framework critique on a single frame, on demand, without scheduling a human.
Existing AI design tools tend to give a single undifferentiated list of suggestions — improve contrast, simplify this, add a CTA — with no indication of which framework produced the suggestion or how seriously to take it. That opacity makes the output hard to trust or act on. The strongest critiques I've personally received always cited a named principle: "this violates Hick's Law," "this breaks WCAG contrast minimums." Naming the principle is what makes a critique arguable. You can push back on a named principle in a way you can't push back on "this feels off."
Key insight
A critique is only useful if you can tell why it was raised and how seriously to take it.
That became the spine of the project. Every finding needs a named source, a severity, and a location. Anything the agent produces that can't carry all three gets cut, regardless of how plausible it sounds.
02
Define
Designers and design candidates need a fast, structured way to stress-test a screen against established usability and accessibility principles, and against personal or brand standards, with enough transparency in the output to trust, argue with, or learn from it.
Solo & early-career designers
Without ready access to senior review, using it as a pre-flight check before sharing work.
Hiring managers & recruiters
Evaluating a candidate's process — this is a portfolio piece demonstrating critique literacy, beyond just visual taste.
Me, specifically
Using it on my own Framer screens before publishing, and as a worked example of the suite's broader thesis: agent as design colleague.
01
Cite the source
Every finding names its origin: a specific law, heuristic, house rule, or WCAG criterion. No generic "this could be better."
02
Separate judgment from compliance
Subjective, scored findings stay visually and structurally distinct from binary findings. Conflating them implies a false equivalence between "I think this is suboptimal" and "this fails a spec."
03
State the limits of a static frame
No claims about real focus order, DOM semantics, or interaction timing from a screenshot. Same scope discipline as AccessWatch's WCAG caveat.
04
Severity has to be defensible, not vibes-based
A scoring rubric is defined before any frame is evaluated, not invented per-frame.
In scope (v1)- Static image input — no Figma account required
- Four-layer evaluation: Laws of UX, Nielsen's Heuristics, House Rules, WCAG
- Two-panel output: Design Judgment (severity-scored) and Accessibility Compliance (pass/fail)
- A fixed house-rule set: my own design opinions, stated explicitly as opinion
Out of scope (v1)- Live Figma connection via MCP — parked for v2, the auth/setup overhead would kill casual portfolio engagement
- User-editable house rules — would dilute the point-of-view framing that makes the layer worth including
- Behavioral/time-based laws — Doherty Threshold, Flow, Peak-End Rule, Zeigarnik Effect need data a static frame can't provide
Panel 1 is ordered from most evidence-based to most personal — Laws of UX first, House Rules last — so the critique earns credibility before it gets subjective. WCAG sits in its own panel because it isn't a judgment call: scoring a contrast failure for "severity" the same way as a Gestalt grouping note would misrepresent how fixed that requirement actually is.
Panel 1 — Design Judgment
Severity-scored: Critical / Moderate / Minor
Laws of UX, Nielsen's Heuristics, House Rules — each finding cites the exact named principle.
Panel 2 — Accessibility Compliance
Pass / fail against WCAG 2.2, visually inferred
Color contrast, touch target size, focus visibility, color-only meaning, alt-text inference, heading hierarchy, reflow risk.
03
Develop
Four output structures were considered before settling on the final shape:
Option A
Single unified list, no panels
Simpler to build and skim, but collapsing a contrast-ratio failure and a Hick's Law observation into one Critical/Moderate/Minor list treats an objective spec failure and a defensible opinion as the same kind of thing. Rejected.
Option B
Conversational critique, like a Slack thread
Reads more naturally, but it's harder to scan, harder to act on as a checklist, and buries the framework attribution inside prose. Rejected in favor of structured output.
Option C
Score-only output, e.g. "72/100 design health"
A punchy headline metric, but one number erases the transparency the whole project is built around. Rejected — a summary count per severity tier sits above the panels instead.
Option D
Two-panel, source-attributed, severity-plus-pass/fail
ChosenSlower to build. It's also the only version where every finding stands on its own and the judgment/compliance distinction holds.
Two decisions broke on first assumption and had to be rebuilt — the same "Assumed → What broke → Changed to" discipline used throughout this suite:
Assumed
Severity could be derived from which layer flagged a finding
WCAG findings Critical, Laws of UX findings Minor, and so on.
What broke
Layer and severity are different axes
A Hick's Law violation that makes a checkout flow unusable matters more than a Moderate house-rule type-scale nitpick.
Changed to
Severity scored per finding, based on user impact
Does this block or confuse a task, or is it a polish note — judged independently of which layer raised it.
Assumed
House rules could carry the same neutral tone as Nielsen or WCAG
Presented as a citable standard alongside the others.
What broke
House rules are opinion, not a citable standard
Presenting them as equally authoritative would be the same overclaiming AccessWatch's WCAG scope caveat was written to avoid.
Changed to
Every House Rules finding labeled "House Rule (opinion)"
Distinct from "Heuristic" or "Law" — the agent argues for its opinions but never passes them off as consensus.
What a finding actually looks like, end to end:
[Design Judgment Panel]
Severity: Moderate
Source: Laws of UX — Hick's Law
Location: [cropped region, top nav]
Finding: 9 primary nav items presented with equal visual weight,
likely inflating decision time for first-time users.
Suggested direction: Group into 3–4 categories, or visually
demote secondary items.
[Accessibility Compliance Panel]
Status: Fail
Criterion: WCAG 1.4.3 — Contrast (Minimum)
Location: [cropped region, secondary button]
Finding: Estimated contrast ratio ~2.8:1 against background,
below the 4.5:1 minimum for normal text.
04
Deliver
Following the same approach as AccessWatch's validation section: real methodologies matched to real questions, nothing claimed that hasn't actually run yet.
First-click testing
Severity ranking trust
Does a viewer's eye land first on the finding the agent ranked most severe?
Comprehension testing
Critical vs. Moderate clarity
5–8 non-specialist designers — can someone explain the difference after seeing two or three examples, without being told?
Expert review
Disagreement as data
Show output to senior designers and ask directly: does this catch what you'd have caught, and does it ever catch something you'd disagree with?
A/B testing
Panel separation
Single list vs. two panels — do viewers correctly sort findings into "fixable fact" and "design opinion"?
⚠ What's not solved yet
A static frame means no real interaction, focus-order, or timing data — stated as a limitation, not hidden. House Rules are fixed to my own taste, which makes this a strong personal portfolio piece but not yet a general-purpose tool for other designers — a deliberate scope cut for v1, not an oversight. Severity scoring is rubric-guided but ultimately judged by the model; there's no ground-truth dataset of correct severities to check it against yet.
05
Reflection
An LLM critiquing a screenshot can produce something that sounds like expert design feedback for almost any input, regardless of whether the underlying observation holds up. Most of the work on this project went into resisting that — the two-panel split, the per-finding source attribution, the explicit "House Rule (opinion)" label all exist to make the output show its reasoning instead of just sounding confident. Citing the source, separating fact from opinion, and naming what's out of scope turned out to matter more than the model call itself.
Multi-agent architecturePrompt designDeterministic vs. model-inferred reasoningSeverity scoring methodologyAccessibility compliance (WCAG)Source-attribution UXScope disciplineDouble Diamond process