We gave AI 7 steps instead of 1 prompt and rebuilt our Luis Barragán tribute site. Here is how we reduce AI slop, and where it still shows up.
This video is sponsored by Mobbin.
Get 20% off a yearly Mobbin plan: https://mobbin.com/zerotoui (there is a free plan too).
Last week our first Barragán site looked like most AI websites. This time we did the research first, named the user and the task, gave Claude a style guide and the real content, and asked for 3 layouts with trade-offs. We used the Mobbin MCP to pull real website sections as references. Claude Opus 5.5 ran for 38 minutes. At API prices the run would have cost $8.59. Then we reviewed all 3 directions on camera, honestly (photos too late in one of them, and we still want more horizontal scroll).
Time stamps:
0:00 How to reduce AI slop in web design
1:22 Our website prompt: Luis Barragán content, photos and 1 font
3:59 How to connect the Mobbin MCP to Claude Code
7:12 7 steps to reduce AI slop: step 1, research
9:13 Step 2: name the task and the user
10:15 Step 3: give AI a style guide
11:08 Step 4: use real content instead of placeholders
12:06 Step 5: ask AI for 3 layouts with trade-offs
13:31 Step 6: test in the browser (mobile, keyboard, accessibility)
14:48 Step 7: subtract what isn’t needed
18:19 Claude Opus 5.5 run: 38 minutes, $8.59 at API prices
19:11 Free motion library: 02ui.com/motion
21:01 Direction 2 review: Agua (the blue one)
23:48 Direction 1 review
25:44 Direction 3 review
26:20 Next episode: our own take on Barragán
What you’ll see:
– The 7 steps we use to reduce AI slop: research, name the task, style guide, real content, 3 layouts, test, subtract
– How we connect the Mobbin MCP to Claude and use it for research
– How to ask AI for 3 layouts and the trade-off of each one
– Why the steps loop back on each other
– Our review of the 3 directions Claude built
The prompt: https://02ui.com/noslop
The motion library we used: https://02ui.com/motion
If you build something with these 7 steps, save your first index.html and your last one. Share the before and after in the comments. We want to see it.
→ 02UI channel: youtube.com/@zerotoui
Follow us on :
https://www.youtube.com/@zerotoui
https://www.instagram.com/zerotoui
@zerotoui
https://www.linkedin.com/company/zerotoui/
https://x.com/zerotoui
Lets connect :
https://www.linkedin.com/in/muratbayral/
https://www.linkedin.com/in/canhoskan/
Work with us:
https://www.miragraph.com/
https://www.linkedin.com/company/miragraph/
https://www.linkedin.com/company/zerotoui/
Recently added videos:
🔥 ChatGPT Dots first reaction: useful or overhyped?
🟠 We cloned 2 award winning sites with Sonnet 5.5 & Opus 5.5
🟠 The countdown trick I’ve used since I was a kid, now with Claude Opus 5.5
🟠 We blind tested Grok 4.7, Kimi K3 and GPT-6 for design
🟠 How to build a design system from scratch with Claude Code
🟠 I tried to break my Claude Max plan with Fable 5.1
🟠 Your own AI agent team on your own API key
🟠 I turned my blog into a museum you walk through
🟠 We built the same invoice app 2 ways with Claude Code
🔥 Claude Design vs Lovable: One Prompt, Same Brief
02UI website: https://02ui.com
Affiliate links: https://02ui.com/affiliate
02UI Lab teaches the full journey from first file to shipped product.
Join waiting list: https://02ui.com/lab
#webdesign #claudecode #mobbin