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.
npx skills add lior-pesoa/skills --skill design-critWhat 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
- ✓Captured Welcome and Rewind start in dark mode and at the largest text size
- ✓Must fix: at the largest text size the four choices disappear
- ✓Should fix: "not now" opens sign-up instead of skipping
- ✓8 notes kept, 5 cut for no source or no evidence on screen
- ○Waiting on you: does saving upload the photos?
How it works
- 01Reads PRODUCT.md, DESIGN.md and your design tokens to learn what the screen is for and the direction you chose.
- 02Captures the screens and runs the measurements.
- 03Writes down what it sees first, before reading any code, so the numbers don't steer the eye.
- 04Three reviewers write candidate notes; a director pass cuts, merges and ranks them.
- 05Renders 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.