Anti-slop

The habits of generated UI to avoid, and what to do instead.

Type

AvoidInstead
Capitals or tracked-out textSentence case
Mono for numbers or labelsMono for code, paths and IDs only
Em dash for a pause or empty valueEnd the sentence, or write None

Layout

AvoidInstead
Middle dots between factsOne element per fact, with a gap
Eyebrow above a titleThe title alone
Bar on one edge of a cardThe wash between frame lines
Three equal icon cards for numbersOne frame with a stats strip
PillsCorners by role (4, 6, 10px); round means a person
A bordered or grey box inside a frameRow rules or a well
Two lines where neighbours meetOne shared line
A centred empty state in a big boxTop-left in the body, with the query
Tinted alert blocksA framed alert with a status icon and a title
A red destructive buttonFail edge and fail text
A second ink fillOne primary Button per view; what waits on a person is the soft InkSlot label
A grey input with no edgePaper with the control edge
Hue fills on sectionsHue in a label, a line or the selected row
Icons in colored tilesA kind badge
Status dotsThe status word
Dark ring around a filled markA flat fill
Art in empty statesTitle, one muted line, action

Behaviour

AvoidInstead
Pulse, ping, bounce, glow or a soft sweepA small turning arc
Prompt signs and block cursorsThe normal component
Arrow links and Learn moreLink text that names the place
Shimmering in-progress textStill text and the running status
Glass and blurPaper with the overlay's frame line and shadow
Small grey proseBody text in text-2
An icon on every labelIcons only for actions found by shape
Seamless, robust, effortlessThe mechanism or the number

Install

For your coding agent

GitHub

Please star me pookie

141

A new design system every week

Leave your email before you copy the prompt.