# Design Crit

Design Crit (design-crit) is a Claude Code skill that reviews a rendered web page or iOS app the way a senior product designer does: it captures real screenshots, grounds each note in a named principle or a measurement, and delivers a crit page with every note marked on the screen.

Skill · By Lior · Works with Claude Code · Updated 2026-10-21 · v0.1.0

## Install

```sh
npx skills add lior-pesoa/skills --skill design-crit
```

Source code: https://github.com/lior-pesoa/skills/tree/main/skills/design-crit

## What it does

- Captures your screens at phone and desktop widths in light and dark, or in the iOS Simulator at the largest text size, after lazy images and animations have settled.
- Measures contrast, tap targets, labels and text size from the live page instead of guessing from the picture.
- Runs a visual, an accessibility and a copy reviewer side by side, each citing a source: WCAG, Apple's guidelines, Nielsen Norman Group, research on cognitive biases.
- Cuts any note with no source, any note that would fit any screen, and any note that fights your own design docs, then keeps the best 8.
- Delivers a crit page: what's working, then Must fix, Should fix and Polish, each with the fix in values or exact text.

## When to use it

Use it before you ship a screen, after a redesign, or when something feels off and you can't say why. I built it to review my own apps. Its first two runs found a focus ring that disappears on my homepage and an onboarding screen in snips that loses all its choices at large text sizes.

## Example

You ask: /design-crit snips onboarding

It returns:

- [x] Captured Welcome and Rewind start in dark mode and at the largest text size
- [x] Must fix: at the largest text size the four choices disappear
- [x] Should fix: "not now" opens sign-up instead of skipping
- [x] 8 notes kept, 5 cut for no source or no evidence on screen
- [ ] Waiting on you: does saving upload the photos?

## How it works

1. Reads PRODUCT.md, DESIGN.md and your design tokens to learn what the screen is for and the direction you chose.
2. Captures the screens and runs the measurements.
3. Writes down what it sees first, before reading any code, so the numbers don't steer the eye.
4. Three reviewers write candidate notes; a director pass cuts, merges and ranks them.
5. Renders the crit page, then asks 2 to 4 questions tied to specific notes.

## Questions

### Is it just taste?

No. Every note cites a principle, a UX pattern, your own design docs or a measurement. A note with nothing behind it is cut, and a choice your design docs make is never flagged.

### Does it work on iOS apps?

Yes, in the iOS Simulator with Xcode: light and dark, and the largest Dynamic Type size. Web pages need Node 18 or later and Google Chrome.

### Will it change my code?

Only when you ask with `--fix`. It applies the Must and Should notes with the smallest change and captures the screen again to show before and after.

### Does it flag AI-looking design?

It checks for generic patterns, such as identical icon-card grids and default purple gradients, from dated, sourced lists. It says a screen reads generic, never that it was made by AI, and it never flags what your brief asks for.

## Related

- [Claude in Chrome: what it does and how I use it](https://www.liorpesoa.com/library/claude-in-chrome.md)
- [Impeccable](https://www.liorpesoa.com/library/impeccable.md)
- [Frontend Design](https://www.liorpesoa.com/library/frontend-design.md)

---

Page: https://www.liorpesoa.com/library/design-crit
Library: https://www.liorpesoa.com/library