Design review

Skill Dragoon0x/studio/skills/design-review

Run a structured design critique on a screen, mockup, component, or Figma file. Use whenever the user asks for design review, design feedback, design critique, design check, or wants someone to look at a screen and say what's working and what isn't.From its SKILL.md

Install

npx -y skills add Dragoon0x/studio --skill design-review

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.1 KB, as published. Nobody here has run it

design-review

a structured pass over a single screen or flow. fast, opinionated, prioritized.

when to run this

before sharing work for broader review
after rapid iteration when you've stopped seeing it clearly
when something feels off but you can't name what

inputs

the design (file, screenshot, or detailed description)
the context: what is this screen for, who is the user, what action are they trying to take
the brand voice or design system if one exists

the critique pass

run the seven checks in order. don't skip ahead. notes for the user after each.

1. hierarchy

stand back. what's the first thing your eye lands on? is it the most important thing on this screen?

if yes: pass.
if no: name what's pulling attention. usually it's a color, a size mismatch, or a visual weight in the wrong place.

2. spacing

is the layout on a grid? 8px is the default. 4px is the half-step.

count distinct spacing values. more than 6 is a sign of drift.
check rhythm: do similar elements have similar spacing? if a card has 16px padding in one place and 14px in another, name it.

3. type

how many sizes and weights are in play?

look for a ramp. 12 / 14 / 16 / 20 / 28 / 40 is a reasonable scale.
flag near-duplicates (14 and 15 used interchangeably).
check line-height. body text usually wants 1.5; headlines 1.1-1.2.

4. color

how many distinct values? cluster near-duplicates.

check text contrast against background (WCAG AA: 4.5:1 for body, 3:1 for large text).
check that color is not the only signal for state (e.g. an error that's red but has no icon or text).

5. alignment

scan vertical edges. do columns line up? do baseline of headers align with adjacent content?

check optical centering. mathematical centering looks wrong when shapes are asymmetric.

6. density

is content fighting for attention, or does whitespace do work?

if everything is bold, nothing is.
if everything has a border, the borders stop functioning.

7. affordance

is it obvious what's interactive? do buttons look like buttons?

check hover and focus states if relevant.
check that destructive actions look different from default ones.

output shape

hierarchy:  [pass | concern | fail] — one sentence
spacing:    [pass | concern | fail] — values to fix
type:       [pass | concern | fail] — sizes to consolidate
color:      [pass | concern | fail] — duplicates and contrast issues
alignment:  [pass | concern | fail] — where it breaks
density:    [pass | concern | fail] — where to breathe
affordance: [pass | concern | fail] — what's unclear

top three to fix:
1. [most impactful change]
2. [second]
3. [third]

what this skill does not do

redesign. it critiques.
impose a different aesthetic. it works within the design's intent.
give vague feedback. every flag has a specific value or location.