A ship gate for design
A design can be technically fine — accessible, responsive, on-brand — and still read as machine-made. That failure has a small number of repeatable causes. Here they are.
Run the list. One “yes” means the page is not finished.
npx skills add systemonster/slop-check
Source on GitHub ↗
Before the checklist
This is the part people skip, and it is the part that decides whether the rest can work. A step skipped here comes back later as slop you cannot name.
The checklist
Phrased so that “yes” is the bad answer. Every rule is a default to break deliberately, not a law — breaking one on purpose, with a reason you can state, is design. Breaking one by reflex is slop.
Template hero?
Hero → features → pricing, assembled by default rather than because the content asked for it.
Stock-photo hero?
Photo, headline overlaid, two buttons. This is the pattern even when the photo is real and good. Either the image is the hero, or there is no hero image.
Three equal cards?
An equal-width three-card grid as the reflex answer to “explain the benefits”. Fine when the content is genuinely three peers; never as a default.
Same skeleton, different paint?
Put it beside the previous page. If the only differences are color and border-radius, it is the same page twice. What must differ: hero media type, the interactive module, the typeface pairing.
The default trio?
Purple-to-indigo gradient, Inter or Roboto as primary, uniform safe rounding. Present together, the page reads as generated no matter how well it is executed.
Gradient CTA?
A purple/indigo gradient button used as the default accent move.
Neutral sans everywhere?
All type flattened into quiet sans weights, with no hierarchy and no voice.
SaaS drift?
Generic SaaS polish applied when the brief called for editorial, cultural, luxury or sector work. A hair salon should not look like Stripe.
Ornamental scroll?
Scroll-linked motion that does not change comprehension, pacing, or the meaning of a section. Cut it.
Unfinished interactive element?
If only background-color changes on hover, the element is not finished. At least three things should move together — surface, position and shadow — and the shadow should be a softened version of the element’s own color, not neutral black.
Style without evidence?
“I think it looks better” is not evidence. Cite a measured value, a spec, or data. If you claim a reference does something, measure it — do not eyeball it.
Fabricated proof?
Testimonials, star ratings, client logos, “N happy customers”, award badges, suspiciously precise percentages. No source, no place on the page — including on demos and concept work.
When there is more than one page
Subjective arguments about sameness end quickly once you measure them.
Describe each page’s mobile first screen in six words. If two pages get the same six words, it is a template.
Desaturate the thumbnails and look again. Can you still tell them apart? This is where “you just changed the colors” gets caught.
When the opening moment ends, is the phone number, the booking button or the price on screen? A page that dazzles and then hides the job has not done the job.
The rules outlived the machinery that produced them. That is the whole argument for writing guardrails down separately from the system that generated them.
This list began as two tables in a design-intelligence project that had ingested about 2,600 Awwwards Site-of-the-Day winners. The project was retired. Measuring it on the way out was instructive: 73% of its generated design specs were too weak to use, and 38% of its stored reference screenshots turned out to be blank frames, preloaders, cookie walls, or captures of domains that had since expired.
Sections A–D were then rewritten against real client rejections. Rules 2, 4 and 10 each come from a specific moment when someone pointed at a screen and called it cheap.