No AI Design Slop

No Design Slops: Pattern Library

This library combines the Impeccable slop catalog, the DesignCode anti-slop workflow, and the recurring principles in Meng's design skills. It is a heuristic inventory, not a blacklist.

Read only the sections relevant to the artifact. Mark each item as observed, absent, or unknown. Report or fix a pattern only when the artifact provides evidence and the pattern causes defaultness, incoherence, repetition, or harm.

Philosophy

Taste is contextual

A purple gradient can be right for one product and lazy for another. A single font can be expressive when size, width, weight, and spacing create hierarchy. Glass can explain a real layer. Overlap can create depth without covering content.

The failure is not the technique. The failure is reaching for it without a product reason, repeating it until everything has the same emphasis, or combining it with effects that tell different visual stories.

Start from a system, not an empty prompt

Before designing, gather the strongest available evidence:

• the existing site or app

• a local DESIGN.md, tokens, components, and brand assets

• screenshots or URLs chosen for a specific quality

• real product copy, states, and media

• the user's named constraints and preferred design skills

Extract principles from references, then transform them for the current product. A reference is a starting point, not permission to clone its identity.

Coherence beats decoration

Typography, layout, color, imagery, iconography, material, and motion should feel authored by the same point of view. One strong visual idea can carry a page. Five unrelated ideas create noise.

Subtract before replacing

When a choice has no job, remove it. Replacement is justified only when deletion loses meaning, state, action, hierarchy, or brand character. Cleanup should make the existing direction clearer, not erase it.

Learn the names of problems

Precise vocabulary produces precise corrections. Name selected state, optical alignment, tracking, text measure, nested cards, radial spotlight, clipping context, active state, or layout shift instead of asking to make a design "better."

1. Product and Direction

• The page has no clear product, audience, or primary job.

• The first viewport cannot explain what the product does.

• The visual style could belong to any startup with the copy swapped.

• The interface combines several unrelated style lanes without a hierarchy.

• A reference was copied literally instead of translated into a new identity.

• A named design system exists but the surface ignores it.

• New colors, fonts, radii, shadows, or spacing values appear outside the local system without a reason.

• The design follows the model's defaults even when they conflict with supplied references.

• The page has several focal points and no dominant one.

• The decoration communicates a different mood than the content or product.

• A section looks imported because it does not inherit the page's type, palette, shape, density, or motion.

• The design is polished locally but incoherent as a whole.

2. Composition, Layout, and Space

• Content overlaps accidentally, especially text, controls, and imagery at breakpoints.

• Intentional overlap lacks contrast, safe space, or a stable anchor.

• The selected navigation state is only an uneven border or arbitrary outline.

• Alignment changes from section to section without creating useful tension.

• Left, right, top, and bottom insets feel optically unbalanced.

• Related items are separated while unrelated items are crowded together.

• Headings sit closer to the previous section than to the content they introduce.

• The same spacing value is used everywhere, flattening the rhythm.

• Every section receives identical vertical padding regardless of content.

• One column extends far beyond its partner and leaves dead space.

• A scroller loses one gutter and feels clipped against the viewport.

• Body content touches the viewport edge.

• Text lines become too long to scan comfortably.

• Forced line breaks create awkward shapes or fail responsively.

• Content overflows its container or creates accidental horizontal scrolling.

• Tooltips, menus, or popovers are clipped by an ancestor's overflow.

• A long sentence is enlarged until it consumes the entire first viewport.

• Empty space is added as spectacle rather than to improve hierarchy.

• Dense product information is spread into oversized sparse sections.

• A dashboard is given marketing-page spacing that slows scanning.

• Desktop composition simply collapses into one long mobile stack with no re-prioritization.

• Sticky or fixed layers cover content, controls, or system UI.

3. Containers, Cards, and Shape

• Every paragraph, metric, feature, and action is placed in a card.

• Cards are nested inside cards without expressing a real hierarchy.

• A bento grid appears because it is fashionable, not because the content has varied importance.

• Identical icon-heading-description cards repeat until nothing stands out.

• Rounded rectangles become the default shape for every element.

• Small cards use extreme radii and become soft blobs.

• Pills are used for content that is not a compact status, tag, filter, or action.

• A thick accent stripe is attached to one side of a rounded card.

• A thin border and a broad diffuse shadow both try to define the same edge.

• Several borders, inner rings, highlights, and shadows wrap one surface.

• Containers are used where proximity, alignment, or a divider would be clearer.

• A modal contains a page-sized workflow, multiple columns, or deep scrolling.

• A border is added to every surface because the background hierarchy is weak.

• Corner radii drift between components that should belong to one family.

• Pricing cards use a different shape language from the rest of the page.

• A highlighted pricing tier relies on an arbitrary gradient or glow rather than a clear recommendation and content difference.

4. Typography and Hierarchy

• A tracked uppercase eyebrow sits above nearly every heading.

• An eyebrow has extreme letter spacing that consumes horizontal space.

• A hero pill repeats information already present in the headline or navigation.

• Tiny numbered labels imitate editorial structure without helping sequence or navigation.

• Heading, subheading, and body sizes are too similar to establish hierarchy.

• Display tracking is tightened until letterforms collide or lose shape.

• Body tracking is widened enough to break natural word shapes.

• Long body copy is set in all caps.

• Functional text is too small to read comfortably.

• Body text is tiny because the layout was designed before the content.

• Multi-line copy uses leading that is too tight for scanning.

• Centered paragraphs run longer than a short supporting statement.

• Justified text creates visible rivers of space on screen.

• Decorative italics are used as a shortcut to make a headline feel editorial.

• Gradient text reduces the clarity of headings or metrics.

• The same default font, weight, and width are used for every role.

• A popular AI-default font is used without contributing to the product's identity.

• Too many typefaces are added to manufacture hierarchy.

• Type roles change unpredictably between sections.

• Labels, captions, headings, and buttons repeat the same phrase.

• Tiny monospaced labels make ordinary content pretend to be technical.

• Buttons wrap to two lines because copy and sizing were not resolved together.

• Typographic punctuation, casing, or numeral styles are inconsistent.

• Line breaks isolate weak words or create accidental widows in focal copy.

5. Color, Lighting, and Material

• Purple-to-blue gradients appear across text, buttons, backgrounds, and decorative objects by default.

• Cyan accents on a dark surface imitate a generic futuristic product.

• Several accent colors compete without semantic or brand roles.

• Saturated radial lights float behind sections with no physical or narrative source.

• Gray surfaces clash with the hue or temperature of the primary accent.

• Glows appear on every active, hover, and featured state.

• Glass is used where no real foreground/background relationship exists.

• Blur, glow, gradient, border, shadow, and noise are stacked on one component.

• A warm cream surface is selected only because it signals generic tastefulness.

• Gradient text is used as the main source of emphasis.

• Gray text sits on a colored background and looks washed out.

• Text contrast fails at the actual rendered size and weight.

• Shadows are broad, muddy, and disconnected from an elevation model.

• White borders are applied uniformly instead of adapting to the surface.

• Decorative grid or repeating stripes cover a surface without supporting a canvas, map, measurement, or technical task.

• Texture is added uniformly and makes content less legible.

• Dark mode is treated as black plus neon instead of a complete tonal system.

• Light and dark sections switch without adapting imagery, borders, icons, and text roles.

• Selected, success, warning, and error colors are decorative rather than semantic.

• Color is the only way to communicate state.

6. Imagery, Illustration, and Icons

• A generic abstract illustration fills the hero because no visual concept was chosen.

• Hand-coded SVG scenery or mascots look like unfinished placeholders.

• Shapes assembled into pseudo-illustration have no relation to the product.

• Stock photography is used as product-specific evidence.

• Imagery is aesthetically pleasant but contextually wrong for the subject.

• Every image has a different lighting, crop, grade, or rendering style.

• A decorative dashboard, code window, browser frame, or device mockup does not show real product behavior.

• Product screenshots contradict the current interface or copy.

• Placeholder portraits, duplicated logos, or fake avatars imply adoption that is not proven.

• Image tags have missing, empty, broken, or placeholder sources.

• Huge icon containers outweigh the feature they introduce.

• A rounded-square icon tile sits above every feature heading.

• The default icon library is used without adapting stroke, weight, scale, or brand fit.

• Icons from several families are mixed without normalization.

• Brand marks are approximated with text or invented SVG paths when an official asset exists.

• Images are cropped without preserving the subject or safe area at responsive sizes.

• Decorative media consumes bandwidth or motion budget without adding meaning.

• Generated imagery is accepted without checking anatomy, text, logos, lighting, or context.

7. Components, States, and Interaction

• Several primary actions have equal emphasis.

• The primary action is visually weaker than a secondary decoration.

• Navigation, tabs, filters, or selections lack a clear active state.

• A random status pill appears without live data or user value.

• Static status uses a pulsing dot to pretend that data is live.

• Inputs, buttons, and links lack visible focus.

• Hover is the only way to reveal essential information.

• Hover effects move the target away from the pointer.

• Loading, empty, error, disabled, selected, and success states are missing where the flow requires them.

• State feedback is delayed or shown far from the action.

• Buttons use inconsistent heights, padding, corner radii, or icon alignment.

• Tap targets are too small or crowded.

• Controls look decorative because labels, roles, or affordances are unclear.

• A disabled control looks enabled or gives no explanation when context is needed.

• A destructive action resembles a routine action.

• Form validation appears only after submission when earlier feedback would help.

• Complex settings are forced into a modal instead of a stable workspace.

• Interaction patterns change between components that perform the same job.

8. Motion and Scroll

• Every element receives the same entrance animation.

• Motion exists to make a static composition feel more expensive.

• Several perpetual animations compete with reading and controls.

• A fake blinking cursor is attached to non-editable hero copy.

• An auto-scrolling marquee hides content and demands constant attention.

• Bounce or elastic easing is applied to ordinary interface state changes.

• Image hover defaults to scale or rotate with no product meaning.

• Hover motion causes nearby layout to shift.

• Width, height, margin, or padding animation causes layout work and jank.

• Scroll effects do not explain narrative, depth, chronology, or spatial movement.

• Smooth scrolling is added without checking keyboard, anchors, restoration, or reduced motion.

• Sticky storytelling traps the user for too long relative to the content.

• Content begins hidden and remains invisible when JavaScript or observers fail.

• Transitions block input or make the interface feel slow.

• Parallax changes readability or causes motion discomfort.

• Motion timing and easing vary without a system.

• The page lacks a complete static first frame.

• Reduced motion only shortens animation instead of presenting a stable final state.

9. Copy, Proof, and Page Structure

• The headline uses broad claims that could describe any product.

• Buzzwords replace a specific verb, object, or outcome.

• Copy repeats em-dashes, rebuttal fragments, or manufactured contrasts as a cadence template.

• Labels, helper text, and hints restate the same idea.

• Feature cards contain interchangeable heading-and-description filler.

• Section headings repeat the navigation or previous sentence.

• Tiny labels add ceremony without information.

• A page includes the default hero, logo wall, metrics, bento features, testimonials, FAQ, and CTA sequence regardless of the actual journey.

• A section exists only to make the page feel complete.

• Metrics are large and dramatic but unsupported or irrelevant.

• Testimonials, customers, ratings, awards, partnerships, or activity are invented.

• Fake dashboards and charts are presented as evidence.

• Logos imply customers or integrations without clarification.

• Pricing lacks a clear unit, cadence, included value, or plan distinction.

• The highlighted plan is emphasized visually but not substantively.

• Pricing language and component styling conflict with the rest of the product.

• Buttons use vague verbs when a specific action is available.

• Empty states contain marketing copy instead of helping the next action.

• Error messages describe failure without recovery.

• Success states celebrate without confirming what happened next.

10. Quality, Accessibility, and Production

• The page loads with uncaught errors or broken interactions.

• Important content remains at zero opacity because an animation did not initialize.

• Text, icons, and controls fail contrast requirements.

• Heading levels skip and weaken document structure.

• Controls lack accessible names, roles, or keyboard behavior.

• Focus is hidden under sticky layers or clipped containers.

• Reading order differs from visual order in a confusing way.

• Responsive layouts clip, overlap, overflow, or remove essential actions.

• Touch behavior is assumed from desktop hover behavior.

• Media has no static fallback or meaningful alternative.

• Animation ignores reduced-motion preferences.

• Large visual effects cause jank, battery drain, or delayed input.

• Layout shifts after fonts, images, or client state load.

• Real content breaks a component that only worked with short placeholders.

• Locale changes, long names, or large text break the layout.

• The interface contains dead links, placeholder copy, missing assets, or non-functional controls.

• Success is claimed from source code without checking the rendered surface.

• A visually polished state hides an incomplete or misleading product flow.

High-Signal Clusters

Do not count isolated matches. Look for clusters that expose one root cause:

• Generic AI SaaS: tracked eyebrow, oversized sentence headline, purple gradient, radial lights, glass cards, icon tiles, bento grid, vague copy.

• Card apocalypse: outer section card, nested feature cards, pill labels, redundant borders, independent shadows, extreme radii.

• Motion theater: hidden-at-rest content, identical reveals, marquee, pulsing statuses, scale-on-hover, smooth scroll, no reduced-motion path.

• Fake sophistication: monospaced micro-labels, decorative grid, fake dashboard, invented metrics, browser chrome, technical copy with no product evidence.

• Reference mismatch: imported section, wrong font, alien radii, new accents, unrelated imagery, inconsistent motion, layout density that breaks the surrounding system.

• Polish before truth: beautiful effects covering unclear product copy, weak actions, missing states, broken responsiveness, or unverified proof.

Fix the root cause once. Do not treat every repeated instance as a separate design idea.

Prompt Vocabulary

Use the exact problem name in follow-up prompts:

• "Replace the uneven outlined selected state with the navigation's existing active-state language."

• "Remove the tracked eyebrow; the heading already carries the hierarchy."

• "Remove the decorative radial lights and keep one product-led focal image."

• "Flatten the nested cards; use spacing and dividers to express grouping."

• "Adapt this pricing section to the page's existing type, radii, palette, and density."

• "Keep the overlap, but reserve a safe text area at mobile and tablet widths."

• "Replace the generic feature icon tiles with product screenshots or icons in flow."

• "Make the status static unless it reflects changing data."

• "Preserve the visual thesis and remove effects that repeat the same job."

Specific language keeps revisions surgical and prevents a broad style reset.