# 02 — Anti-AI-Slop: Why AI Websites Look the Same, and the Rules We Use to Avoid It **Research date:** 21 October 2026 **Sources:** - 925Studios, *AI Slop Web Design: Complete Guide* (19 Mar 2026) — - Gi Pyeong Lee, *Why Do All AI-Generated Websites Look the Same?* (27 Jul 2026) — - NxtFruit, *AI Slop Design* (8 Aug 2026) — - NN/g, *State of UX 2026* — - RemoteWorks, *Portfolio Design Trends 2026* — --- ## 1. The mechanism: distributional convergence LLMs predict the most statistically likely next token. Applied to design, that means the **most common layout on the internet**, not the best one. The result is an aesthetic monoculture: > "The same Inter font, the same purple-to-blue gradient, and the same rounded-corner card layout." — 925Studios NxtFruit calls the output *"technically fine but visually interchangeable."* The page is accessible, grammatical, responsive — and forgettable. This is not solved by asking for "a unique design." It is solved by **constraints, references, and rejection rules** applied before and after generation. Hallmark (Together AI's open-source design skill) does exactly this: it refuses default structures, imposes typography/colour/layout/motion rules, then runs a 57–65 point "slop test." --- ## 2. The tells — a field guide ### Structural tells - Hero: centred "Hi, I'm ___" + one-line subtitle + two pill buttons. - Three equal feature cards with generic icons. - Bento grid where every cell is a rounded card with the same radius. - "Trusted by" logo strip with no real relationship. - Testimonials with stock avatars and unverifiable quotes. - Skills as a wall of 40 identical pills with no evidence. - One long page containing bio, all projects, skills, contact and blog teasers. - Project "cards" that open a modal instead of a real page (bad for depth, SEO, sharing). - Footer with four link columns and a newsletter box nobody asked for. ### Visual tells - Inter / Geist / Poppins everywhere, one weight, no display face. - Purple → blue → pink gradients, especially on text. - Glassmorphism + blurred blobs + noise overlay. - Neon glow, dark mode `#0A0A0A` + `#7C3AED`. - Uniform `border-radius: 16px` on everything. - Pill-shaped tags and buttons on every element. - Emoji used as icons (🚀 ✨ 🔥). - 3D tilt on every card; cursor follower; particle canvas. - Generic "abstract tech" stock imagery or AI-generated hero art. - Icons from three different families mixed together. ### Copy tells - "Passionate developer crafting digital experiences." - "I don't just build websites — I build experiences." - "Turning ideas into reality." - "Seamless", "elevate", "unleash", "journey", "innovative", "cutting-edge". - Every project described as "a modern, responsive web app." - No numbers, dates, constraints, failures or decisions. - Perfectly parallel bullet lists with no specifics. - Overuse of em dashes and "not just X, but Y" constructions. *(Yes — including this one. Use sparingly, and only when true.)* ### Motion tells - Every section fades up on scroll. - Long preloader with a logo animation. - Parallax on everything. - Hover effects that move layout. - No `prefers-reduced-motion` support. ### Technical tells - No semantic landmarks; everything is a `div`. - Images without dimensions → layout shift. - Unoptimised PNGs (500KB+ logos). - No focus-visible styles; keyboard navigation broken. - Iframe previews that fail silently. - Placeholder links (`href="#"`). - No meta description / OG image / favicon. - "Built with Next.js" badge but no actual build. --- ## 3. Why it matters (not just aesthetics) - Poor design/content drives **38% of web visitors away** (Figma 2026, cited by 925Studios). - Human-written content outperformed AI-generated content **94.12%** of the time in the cited 2025 study. - NN/g: AI has moved **from hype to fatigue**; visitors penalise obvious AI theatre. - Hiring managers scan dozens of portfolios. Anything that slows the answer to *"what did this person actually build?"* loses. --- ## 4. The 12 rules of this redesign 1. **No default fonts.** Instrument Serif (display) + Archivo (body) + IBM Plex Mono (metadata). 2. **No gradient text, no glass, no glow, no blobs.** 3. **Square geometry.** Radius 0–2px. Hairline borders instead of shadows. 4. **One accent.** Vermilion `#C8452D`, used for links, focus, and one action per page. 5. **Warm paper, not pure white; warm ink, not pure black.** 6. **Asymmetry with a reason.** Editorial grid; not every row is 3 equal cards. 7. **Real content density.** Every project has a real page with context, constraints, stack, status and links. 8. **No fake social proof.** No testimonials, no client logos, no invented metrics. 9. **Motion is functional.** Max 320ms; reveal only the first viewport; honour reduced motion. 10. **Human copy.** First person, specific nouns, place names, dates, trade-offs, things that broke. 11. **Visible provenance.** Build links, source links, version numbers, last-updated dates. 12. **Craft in the details.** Baseline grid, hanging punctuation where possible, consistent caption style, correct `alt`, working `404`. --- ## 5. The Slop Test (run before shipping) ### First impression (5 seconds) - [ ] Can a stranger tell **who this is** and **what they build** without scrolling? - [ ] Does the page avoid purple/blue gradients, glass cards and particle backgrounds? - [ ] Is there at least one visual detail that could not be swapped into another portfolio unchanged? - [ ] Is the type pairing distinctive without hurting readability? ### Structure - [ ] Home has a maximum of 4–6 featured projects, not all of them. - [ ] There is a separate, complete work index. - [ ] Every project opens a real URL (shareable, back-button safe). - [ ] About, Work and Contact are separate pages with their own titles. - [ ] Navigation has ≤ 5 items and works without JavaScript. - [ ] Footer contains real contact information, not just links. ### Content - [ ] No sentence could apply to any other developer. - [ ] Every project states a problem, an approach, and an outcome/status. - [ ] Numbers are real and dated (projects shipped, year, versions). - [ ] At least one limitation or failure is documented. - [ ] No "passionate / seamless / elevate / unleash / journey". - [ ] Project pages say what the person actually did vs what the team/library did. ### Visual - [ ] Type scale is consistent; body line length 60–75ch. - [ ] Spacing follows a 4/8px scale; no random margins. - [ ] Border radius is consistent and small. - [ ] One icon family, one stroke weight. - [ ] Images have width/height, sensible compression, and meaningful alt text. - [ ] Dark mode is designed, not inverted. - [ ] Mobile layout is intentionally composed, not just stacked. ### Motion & interaction - [ ] No preloader. - [ ] No custom cursor. - [ ] Reduced motion disables transforms and smooth scrolling. - [ ] Focus is always visible; tab order is logical. - [ ] No hover-only information. - [ ] No layout shift on hover. ### Technical - [ ] Valid HTML; landmarks; one `h1` per page. - [ ] Meta title/description per page; OG image; favicon. - [ ] All internal links resolve; no `href="#"`. - [ ] Lighthouse: Performance ≥ 95, Accessibility ≥ 95, Best Practices ≥ 95, SEO ≥ 95 (mobile). - [ ] Works with JavaScript disabled for core content. - [ ] 404 page exists and is useful. --- ## 6. Human signals we will intentionally add These are hard to fake and therefore valuable: 1. **A real portrait** with a caption (place, year), not an AI avatar. 2. **A "Now" line** with current focus and local time. 3. **Project status labels** — Shipped / In progress / Prototype / Archived. 4. **A build log** on selected projects: what broke, what changed. 5. **Download links** with version, size, date and checksum where a release exists. 6. **Limits sections** for AI products (model, data, failure modes). 7. **A colophon** in the footer: typefaces, stack, how the site is built. 8. **Specific geography** — Kaushambi, Uttar Pradesh; IST timestamps. 9. **Hand-written project notes**, not generated marketing copy. 10. **A real email address** and working links. --- ## 7. Banned vocabulary (site-wide) `passionate`, `seamless`, `elevate`, `unleash`, `journey`, `cutting-edge`, `innovative`, `revolutionary`, `game-changing`, `next-level`, `digital experiences`, `turning ideas into reality`, `I don't just build X, I build Y`, `welcome to my portfolio`, `crafting`, `ninja`, `rockstar`, `guru`. Every use of "AI" must be attached to a specific capability, model or limitation — never as a personality trait. --- ## Seedha matlab AI slop ka matlab hai "statistically safest design" — Inter, purple gradient, rounded cards, fake testimonials. Isse bachne ka tareeka sirf "unique banao" nahi hai; **defaults ko explicitly ban karna** aur ek slop-test checklist har page pe chalana hai. Is site pe har project ka real page, real status, real writing aur ek hi accent colour hoga.