iamyashwanthreddy/Anti-slop-website-design

Anti-slop web design

Most AI-built sites look alike because the model fills every open decision with the most statistically common answer: Inter, an indigo-to-purple gradient, rounded-2xl cards with soft shadows, a centered hero with a pill badge, three feature cards with Lucide icons. Each choice is fine alone. Together they read as "nobody decided anything," and visitors pick up on that immediately.

People who design for a living don't avoid these things because a rule says so. They avoid them because they start from the subject (the business, the content, the audience) and every choice follows from that. Your job is to work the same way. The ban list below is a backstop, not the method.

The process

1. Write a design brief before any code

Spend a few sentences on this, either in your reasoning or shown to the user if the scope is large. Fill in:

• Subject: what is it, who is it for, what do they need to do on the page?
• Character: three adjectives that are specific to this subject. "Modern, clean, sleek" describes everything, so it doesn't count. Something like "dusty, warm, slightly nerdy" for a used-bookshop, or "clinical, calm, exact" for a lab.
• A real-world reference: a physical or historical design tradition the page borrows from. Examples: a train timetable, a 1970s Swiss poster, a seed packet, a museum wall label, a hardware catalog, a newspaper front page, a zine, a restaurant menu, a field notebook, an old software manual, a record sleeve. Pick from the subject, don't default to the same one every time.
• Palette: 3–5 actual hex values, and where they come from (the product's material, the brand, a photo, the reference above).
• Niche and type: name the niche (bakery, law firm, dev tool, gym, wedding…), then pick fonts from that niche's row in references/fonts-by-niche.md, choosing the option that matches your three adjectives. Write one line on why it fits ("Alfa Slab One: it looks like the painted sign on a brewery wall"). If you can't write that line, you haven't chosen yet.
• One signature detail: a single memorable move that belongs to this site only. For example, prices set like a handwritten chalkboard, section numbers in the margin like a legal document, a ruled grid like graph paper, a photo used full-bleed and uncropped.

If the user already gave you a brand, colors, fonts or a reference, those win. Build the brief around them.

2. Build from the content outward

• Use real content when you have it. When you don't, write plausible, specific placeholder copy for this subject (real-sounding product names, real-feeling numbers, a believable address), not generic marketing filler.
• Let the content decide the layout. A menu wants columns and dotted leaders. A portfolio wants big images and little chrome. A docs site wants a sidebar and dense text. Don't pour every subject into the same landing-page template.
• Vary section structure. Real sites have one long text section, one dense table, one image that breaks the grid. They don't repeat "heading + subheading + 3 cards" eight times.

3. Audit before you hand it over

Check your output against references/slop-catalog.md (read it the first time you use this skill in a session; it's the full list with reasons and alternatives). If the project is on disk and Node is available, also run the scanner:

node <skill-path>/scripts/slop-check.js <file-or-folder>

It flags common tells (gradients, glow shadows, overused fonts, sparkle emojis, buzzword copy) with file and line. Not every hit is wrong. A gradient in a weather map or a font the user explicitly requested is fine. Fix each hit or keep it on purpose with a reason.

The short ban list

These are the strongest tells. Avoid them unless the user asks for them or the brand really requires them. The catalog has the full list.

Color

• Purple / violet / indigo / blue / pink gradients, on backgrounds, buttons, borders or text
• Gradient text (background-clip: text) on headings
• Neon accents (electric cyan, magenta, acid lime) on near-black backgrounds
• Blurred colored "orbs", aurora or mesh-gradient blobs behind the hero
• Tailwind's default palette used as-is (indigo-600, slate-900, violet-500) as the brand colors

Surfaces and effects

• Colored glow shadows (box-shadow: 0 0 40px rgba(139,92,246,.5)) and shadow-2xl on everything
• Glassmorphism: backdrop-blur with translucent white fills and border-white/10
• Every element in its own rounded card, with the same big radius (rounded-2xl/3xl) everywhere
• Dot or grid background patterns with a radial fade mask
• Animated gradient borders, shimmer sweeps, "beam" lines, spotlight-follows-cursor
• Every card lifting on hover (translateY(-4px) + bigger shadow)

Typography

• Inter, Poppins, Montserrat, Plus Jakarta Sans, DM Sans, Outfit, Sora, Manrope, Space Grotesk, Geist, or Instrument Serif picked by reflex. They're good fonts. The problem is choosing them without a reason.
• Any font that doesn't fit the niche, or the niche's obvious cliché (see references/fonts-by-niche.md)
• A hero headline with one word in gradient or in italic serif ("Build faster")
• A tiny uppercase wide-tracked "eyebrow" label above every section heading
• Everything centered

Layout

• The template: sticky nav → centered hero with a "✨ New" pill → two buttons → "Trusted by" grayscale logos → 3-up feature cards with icons in rounded squares → stats band → testimonial cards with 5 stars → 3-tier pricing with a highlighted middle → FAQ accordion → gradient CTA banner → 4-column footer
• Bento grids as the default way to show features
• A tilted, perspective-transformed fake dashboard screenshot

Content and copy

• Emojis as icons or bullets (🚀 ✨ ⚡ 💡 🔥), and the sparkles icon for anything "AI"
• "Unlock the power of", "Supercharge", "Elevate", "Seamless", "Effortless", "Revolutionize", "Next-generation", "all-in-one platform", "built for the future", "take X to the next level"
• Tricolon slogans: "Fast. Simple. Powerful."
• Invented stats (10k+ users, 99.9% uptime) and fake testimonials ("Sarah J., CEO at TechCorp")

Motion

• Fade-up-on-scroll on every element, staggered
• Floating/bobbing elements, typewriter headlines, count-up numbers

What to do instead

Color. Start from neutrals, but give them a temperature (warm paper #f4efe6, cool gray #e8eaec, ink #1b1a17) instead of pure #fff and Tailwind slate. Add one accent and use it sparingly, for links, the primary action and one or two highlights. Draw it from the subject: terracotta for a ceramics studio, signal orange for a transit app, bottle green for a pharmacy. Use flat fills. If a gradient really belongs (a sky, a heat map), make it subtle and tied to meaning.

Typography. Choose fonts by niche, never at random or by habit. Ask what this business would plausibly have printed on its sign, menu, label or letterhead, and find the type that matches. A brewery and a law firm should never share a typeface by accident. Read references/fonts-by-niche.md before picking. It covers about 40 niches with several options each, the clichés AI reaches for in each niche (Orbitron for gaming, Playfair for luxury, Bebas + Montserrat for gyms), and fonts for non-Latin scripts such as Hindi and Tamil. The system font stack (system-ui, -apple-system, "Segoe UI", sans-serif) is a legitimate choice for tools and dashboards. One family is often enough. Two at most. Build hierarchy with size, weight and spacing, and left-align body text at a readable measure (~60–75 characters).

Surfaces. Separate things with whitespace, rules (1px solid in a darker neutral) and background shifts rather than shadows. If you use a shadow, make it small, neutral and offset like real light (0 1px 2px rgb(0 0 0 / .08)). Choose a radius on purpose: 0 for editorial or industrial, 2–6px for most UI, fully round only for pills and avatars. Not everything needs a container.

Layout. Use asymmetry: a wide text column with a narrow aside, an image that breaks out of the grid, a left-aligned hero. Let density match the content. Pricing can be a plain table. Features can be a list with sentences instead of cards. Leave sections out that the subject doesn't need. A bakery site doesn't need a stats band.

Interaction. Underline links. Hover states change color or underline, not position. Give buttons a clear pressed/focus state. Use motion only where it explains something (a menu opening, a state change), and respect prefers-reduced-motion.

Imagery. Real photos of the actual thing beat any illustration. Without them, use honest placeholders (a neutral box labeled "photo: storefront, morning light") over stock 3D blobs, isometric people or AI art. Simple diagrams, maps, product shots and type-only compositions all read as human.

Copy. Say concretely what the thing does, in the plain words the owner would use at a counter. "Fresh sourdough every morning from 7, closed Mondays" beats "Experience artisanal excellence." Leave out a stat rather than invent one.

Don't swap one cliché for another

When a default is banned, the next-most-common answer becomes the new default: Space Grotesk instead of Inter, teal instead of purple, "brutalist" with a thick black border and yellow highlight on every site. If two different subjects you design end up looking similar, you're working from a template, not a brief. Go back to step 1 and let the subject push harder.

When the user wants the "slop" look

Some users want the glossy SaaS look, or a brand really is purple with gradients. Follow explicit instructions and brand guidelines. They override this skill. You can still apply the restraint where it's free: one gradient instead of five, real copy instead of buzzwords, a deliberate font pairing.