Design department
Scores can be green while a screen still reads as assembled from defaults: the stock font, the gradient hero, three identical cards, a button that says Submit. FAT Design runs six lenses over what the visitor actually sees, names every weak decision, prices it by cost and writes the brief that fixes it.
Six lenses
Hunt for everything at once and the loudest flaw takes the whole pass. He sweeps the screen six times, records the evidence, and only then ranks what he found.
What the screen should do before anyone styles it. Styling cannot rescue a control that makes the wrong promise.
P0Delete wears the same button as Save, no confirm, irreversible
Every word in the interface, from the headline to the error message.
P1Primary button says "Get started": a mechanic, not an outcome
How the text is set, and whether the typeface's voice agrees with the words.
P2Heading is a browser-smeared faux bold
A look chosen on purpose, then space, colour and edges that keep to it.
P2Eleven font sizes and six greys: the menu was never written down
What it does under your hands: focus, targets, forms, feedback and access.
P0Validation error clears the whole form
Motion that explains a change. Everything else is instant.
P1Hero is blank on first paint behind an entrance animation
Method
A vibe cannot be briefed. "The hero feels weak" is a mood. "The subhead repeats the headline" is a ticket.
A 30-second smell test first: the stock font, the purple gradient, three identical cards, stacked glow, chatbot phrasing. One may be a choice. Several together with no shared reason is slop.
Every finding is written in the lens's vocabulary with its evidence attached, and traced to the user's goal, verified behaviour or a convention. Never to taste alone.
Each P0 and P1 becomes a three-line brief: the job, the change, the consequence. With the repo open he makes the change himself, editing rather than regenerating.
He re-runs the task that exposed the flaw, then the last mile: tab title, favicon, share preview, theme colour, and what happens when the connection drops mid-save.
Priorities
The predictable mistake is polishing the most visible flaw first. A weak shadow is obvious and cheap. A wiped form after a validation error is invisible in a screenshot and expensive.
| Priority | Means | Design examples |
|---|---|---|
| P0 | Fix before ship | Blocks the task or loses work, for everyone: a wiped form on error, a delete with no confirm, an action unreachable by keyboard |
| P1 | This pass | Wrong-action risk or clear trust erosion, met often: an ambiguous destructive label, no error recovery, invisible focus, a blank hero on first paint |
| P2 | Soon | Rough but the task completes: flat hierarchy, a typeface arguing with the words, weak call-to-action copy, border soup |
| P3 | Polish | Cosmetic drift: a heavy shadow, an odd gap, a stranded word in a headline |
On the case
Run /fat-design https://your-site.com, drop in a screenshot, or open the component in your repo and say "run FAT design on this". For a whole site, run /fat-audit as well: the design findings land on the same punch list.
Method informed by Matthew Blode's Taste Training. The checklists are our working notes; the course is the depth behind them.
Install
Inside Claude Code, run these two lines. Then point him at a site.
FAT Agent/plugin marketplace add spruikco/fat-agent-skill/plugin install fat-agent@fat-agent-marketplaceRun /fat-audit https://your-site.com, or just say "run FAT agent on my site".