How to reduce AI slop in web design: 7 steps we tested on a real site

Ask an AI model for a website in 1 line and you get the same website everyone else gets. We did exactly that for a Luis Barragán tribute site, and the result was generic enough that we filmed a second round to fix it.

For this post we checked the research behind each step we used on camera. Most of it held up. 1 step needs a correction: how we use design references. Seeing a single example makes designers copy it, flaws included, so the way you feed references to the AI matters as much as the references themselves. The full prompt we used is near the end, ready to copy.

Paid partnership. Mobbin sponsored this video. Sign up through mobbin.com/zerotoui and you get 20% off the yearly Pro plan for the first year. We also earn a commission when you buy through that link. It costs you nothing extra, and Mobbin has a free plan if you only want to try it. We use Mobbin every day in our own work, which is why we said yes to the deal.

Why AI websites all look the same

In 2024, Anil Doshi and Oliver Hauser published a study in Science Advances on AI and creative writing. Writers who got story ideas from a generative AI model wrote stories that readers rated as more creative, better written and more enjoyable. The biggest gain went to the less creative writers. The catch: the AI-assisted stories were more similar to each other. Each writer was better off, and the group as a whole produced a narrower range of work.

That is AI slop, measured. Each output looks fine on its own. Put 100 of them side by side and they converge. The model fills every gap in your brief with its most likely answer, and the most likely answer is the one everyone else gets too. Every step below is a way to fill those gaps yourself, before the model does.

How to use design references with AI without copying them

This is the correction. On camera we said you can take a navigation pattern from 1 site and a contact section from another and drop them in. That works, with a warning.

In 1991, David Jansson and Steven Smith showed engineers an example solution next to a design problem. The engineers' new designs kept the example's features, even when the text pointed out that those features were flawed. They called it design fixation: "blind, sometimes counterproductive adherence to a limited set of ideas" (summarised in Leahy et al.).

AI models fixate too. Give the model 1 screenshot and you get a copy of that screenshot. What worked for us in round 2: search for concrete layouts (we used the Mobbin MCP and described layouts, for example "one huge name filling the screen with a small caption in the corner", never style words like "minimal and elegant"). Pick 6 references, not 1. For each reference, write 1 line on the principle you take from it. The model gets the reasoning and has less to copy.

How to write a website prompt for AI: task, user and rules

"Build me a modern dashboard" tells the model nothing about who uses it. Write the task the way a product brief does. Who is the user? What did they come to do? What must they see first? Which action must be the easiest?

Then give the model rules. A type scale, a spacing scale, colour tones and a button hierarchy. If you don't have a design system yet, start with an open source one. The rules also catch problems you might not see. In the WebAIM Million 2025 report, low contrast text was on 79.1% of the top 1 million home pages, the most common accessibility error found. A style guide with checked colour pairs removes that error before the first line of code.

Why real content beats placeholder text

Placeholder text hides the problems. Everything looks clean until the client sends the real copy, with the 9 word project name and the photo that is portrait instead of landscape.

For the Barragán site we gave the model a content file with the real facts and told it to leave out anything we could not verify. Some of those facts we were not sure of on camera, so we checked them. Barragán studied civil engineering at the Escuela Libre de Ingenieros in Guadalajara and had no formal architecture degree. He won the Pritzker Prize in 1980. His house and studio in Mexico City, built in 1948, became a UNESCO World Heritage Site in 2004. Real content like this has real lengths, real accents (Barragán, Guadalajara, Cuadra San Cristóbal) and real gaps, and the layout has to survive all of it.

Why you should ask AI for 3 layouts instead of 1

With 1 layout you can only say yes or no. In 2010, Steven Dow and colleagues at Stanford tested this with designers making web banner ads. 1 group made prototypes in parallel and got feedback on several at once. The other group made them 1 after another. The parallel group won on every measure: click-through rates, time spent on the client's site, and ratings from the clients and from ad professionals. Their designs were also more varied. Nearly half of the serial group reported negative reactions to critique. No one in the parallel group did.

So we ask for 3 rough layouts with different structures, minimal styling, and the trade-off of each in 1 sentence. Example: tabs switch fast but leave less room for content. A grid is easy to scan but slow to switch. A single column reads well and gets hard to follow at 50 or 100 items.

How to test an AI-built website

Let the AI do the boring checks first. Ask it to open the page in a browser, walk the main journey, test it on mobile and with only a keyboard, and fix what it finds. Our run did this inside the same 38 minutes.

Don't stop at the automated pass. The WebAIM Million 2026 report found detected WCAG 2 failures on 95.9% of the top 1 million home pages, up from 94.8% in 2025, with an average of 56.1 errors per page. WebAIM also says that no automated tool detects every failure. After the AI pass, put real people in front of it. Jakob Nielsen's model says 5 users find about 85% of usability problems, and Nielsen recommends 3 rounds of 5 users across the project over 1 round of 15. That is the loop we described on camera: test, go back, fix, test again.

The 7 step protocol we use

1. Research. Write the subject's story into a content file. Run at least 8 layout searches for concrete sections. Pick 6 references. Write 1 line of principle for each.
2. Name the task. 1 paragraph: who the user is, what they came to do, what they see first, which action is easiest.
3. Set the rules. Type scale, spacing, colour tones, button hierarchy. Use an open source design system if you have none.
4. Use real content. Real names, long and short titles, real photos with credits. Tell the model to leave out anything not verified.
5. Ask for 3 layouts. Different structures, minimal styling, 1 sentence trade-off each.
6. Test. The AI walks the main journey in a browser, on mobile and with the keyboard, and fixes what it finds. Then 5 real people.
7. Subtract. Go through every element and ask whether it helps the user. Cut the rest. Repeat steps 5 to 7 as many times as you need.

Give the AI a time limit as well. We asked for 30 to 40 minutes, and it finished in 38. The motion in our 3 directions came from our free motion library.

The full website prompt we used (copy and paste)

This is the exact prompt we gave Claude Opus 5.5 in the video. It puts all 7 steps into 1 brief. To use it for your own subject, change the name, the content file, the photo folders, the font link and the earlier round it reads. It expects a content.md file, an images/ folder and the Mobbin MCP connected.

Build round 5 of the Luis Barragán tribute in a new folder: round-5/. Work end to end. Do not ask me questions. Do not stop for reversible steps.

WHY
We are filming this run for our YouTube channel. The video shows how easy it is to research a subject with the Mobbin MCP and turn that research into a finished site. So show your research clearly, step by step.

WHAT THIS SITE IS
This is not an architecture website. It is a storytelling website that honours Luis Barragán. Visitors must feel the experience, remember the journey they took, and leave knowing who Barragán was and what made him different from other architects: silence, solitude, light, water, walls treated as planes of colour, and landscape as a material. Tell his story through his key moments and works, in order, so each section builds on the last.
Design for that feeling: big typography, generous spacing, empty wall, type as the material. Anti-design is allowed where it makes the page calmer. Build slowly, as a masterpiece.

INPUTS (read all before you design)
- content.md: the only source of text and facts. Keep every quote and attribution exactly. Leave out every field marked "not verified".
- Photographs: use the project's images/ folder (one photo per work) and round-claude/images/ (14 more photos with credits in round-claude/NOTES.md). Give every work at least one photo. Look at each photo before you use it. images/04-las-arboledas.jpg shows the water spout and horse pool of Cuadra San Cristóbal, so never use it for Las Arboledas. A work with no correct photo gets an empty wall in one of its own signature colours. Credit for images/ files: "Photographer unknown. Source: web search."
- round-4/: the previous round. Read round-4/NOTES.md. Do not repeat its three directions.
- Font: https://www.collletttivo.it/typefaces/ribes

FONT (one family only)
Use only the font family above, for every piece of text: display, body, captions, credits, labels. Do not add a second family. Do not load Google Fonts or any other font service.
1. Find the family's web font files (woff2, or woff/otf) on the foundry's own site or its official repository.
2. Read the licence. Use the font only if the licence allows web use. If it does not, stop and tell me.
3. Copy the files into each direction's own fonts/ folder, with the licence file. Load them with @font-face.
4. Check that the font has every Spanish accent and every quote mark in content.md.
Build hierarchy inside the one family: size, weight, style, tracking, case and space. Make the size contrast large.

STEP 1 — MOBBIN RESEARCH (show your work)
Use the Mobbin MCP. Run at least 8 search_sections queries. Each query describes one concrete layout, never style words (for example "one huge name filling the screen with a small caption in the corner", not "minimal elegant hero"). Cover every section: opening, introduction, works, timeline, map, closing, plus ideas for scroll storytelling and motion.
Download the high-res image_url of the 6 strongest results into round-5/mobbin/.
For each reference, write one line: the principle you take, not the look.
Write round-5/mobbin/RESEARCH.md: every query, what came back, what you chose and why.

STEP 2 — STUDY
Run `hallmark study` in image mode on each downloaded reference. Hallmark is a skill, not a command-line tool: do its vision pass by hand, and add pixel measurements with a small script (round-4/tools/study.py is a working example). Write the design DNA of each into round-5/mobbin/DNA.md.

STEP 3 — THREE DIRECTIONS
Build three complete sites in round-5/a-*/, b-*/, c-*/.
- They differ on at least 3 of: palette, hierarchy method, layout system, motion, use of the font's weights and styles.
- Every direction names the Mobbin references that drive it.
- All 6 sections in each, in this story order: opening, introduction, 10 works with photos and credits, timeline, map, closing quote.
- Include a short passage on what made him different, built only from the "why it matters" and "defining features" fields.
- Map: every work gets an "Open in Google Maps" link (Spanish name + city, URL-encoded) with its current status beside it, plus one embedded Google map that moves to the work a visitor picks. Never type coordinates or addresses.

STEP 4 — MOTION (every section moves)
The site must not feel static. Every section has at least one animation that carries the story: the visitor scrolls and the story unfolds.
- Use 8 to 12 different animations per direction, chosen from https://02ui.com/motion. Read each page before you use it.
- Build them with official GSAP from a CDN: ScrollTrigger, SplitText, Flip and DrawSVG are all free. Pinned scenes, scrubbed timelines, horizontal walks and colour changes are welcome where they serve the story.
- Make at least one moment per direction that makes people stop: a scene they will remember.
- Keep the motion slow and deliberate, like walking through one of his houses. Use long, soft easing. No bounce or elastic easing. Never use the same fade-up on every element.
- With prefers-reduced-motion, show every element in its final state and keep pinned sections readable.

STEP 5 — SLOP GATE
Use the avoid-ai-design skill and run its scanner on each direction: node ~/.claude/skills/avoid-ai-design/scripts/detect.mjs <folder>. Fix every P0 and P1. The scanner reads index.html only, so put the focus-visible and prefers-reduced-motion rules inline in the head as well.
Banned: Inter, purple or blue gradients, centred hero with button, three-card grids, card-in-card, rounded-2xl shadows, glass effects, icons in rounded squares, uppercase tracked mono labels everywhere, 01/02/03 numbering as decoration, a cream ground not derived from a named Barragán colour.
Every colour must come from the signature colours in content.md. Name the source of each colour in the CSS.

STEP 6 — CRITIQUE
Screenshot each direction at 1440 and 375 px (round-4/tools/shoot.mjs works headless). Compare each against its Mobbin references. Check that every section moves and that no motion blocks reading. Do one round of fixes. Say what changed.

STEP 7 — DELIVER (all inside round-5/)
- round-5/index.html: the three directions side by side.
- round-5/NOTES.md: a table "design decision → Mobbin reference link → why", the font and its licence, the palette with sources, a contrast table, a motion table (animation → 02ui.com/motion page → section → why it serves the story), slop-gate results, critique fixes and image credits.

RULES
Plain HTML, CSS and JS. GSAP from a CDN is the only library. One font family, self-hosted. index.html opens with a double-click. Works on mobile. Text meets WCAG AA. Never use a photo of a different building. Write only inside round-5/. Never edit earlier rounds.

TIME
Aim for 40 minutes. Give a short status line every few minutes. If I send a message mid-run, apply it and keep working.

FINAL REPLY
Lead with the outcome: where to open it and the scanner result. Then one table of the three directions. Then every place you did not follow this brief, and why.

What we still don't know

After 2 rounds, we still found slop in all 3 directions. The photos came in too late in 1 of them, and none of them had the horizontal scroll we wanted. We never put them in the brief, so those misses are ours. Next round we'll build our own take on Barragán and put it next to the AI's. We want to see how much of the gap is the process and how much is taste.