← ClaudeAtlas

design-reviewlisted

Judge an interface the way a design engineer does — hierarchy, rhythm, type, states, and the empty/loading/error cases nobody built. Names what is wrong and why, not "make it pop". Auto-triggers on: "review this design", "does this look right", "improve the UI", "critique this", "the design feels off", "make this look better"
Univers42/claude-deal-with-the-devil · ★ 3 · Web & Frontend · score 69
Install: claude install-skill Univers42/claude-deal-with-the-devil
# Design review "It looks off" is a real observation with a findable cause. The cause is almost always one of five things, and none of them is taste. Find which, name it, and give the smallest change that fixes it. Pairs with `frontend` (how to build it) and `browser-testing` (see it running before judging it). ## 1. Hierarchy — can you find the one thing? Squint at it, or blur it. The most important element should still be the most prominent. If three things compete, the user reads none of them. - **One primary action per view.** Two primary buttons means neither is. - Emphasis comes from **size, weight and space** before colour. Colour is the weakest signal and the one people reach for first. - De-emphasise the secondary rather than shouting the primary. Most "make it pop" is really "quiet everything else". - Reading order should match importance. In a form, the label is not the hero. ## 2. Rhythm — is the spacing saying anything? Spacing communicates grouping. Wrong spacing is the most common cause of "off". - **Related things are closer than unrelated things.** A label 16px from its input and 8px from the *next* input is actively lying about the structure. - One spacing scale, used consistently. Values off the scale (13px, 27px) read as sloppy even when nobody can say why. - **Alignment: pick an edge and hold it.** Mixed left/centre within a block is the single most visible amateur tell. - Consistent gutters; consistent vertical rhythm between sections.