Building AI Websites That Don't Look AI-Generated
Distilled from a 67-min masterclass (YT 2Gda_ZvV1V4, transcript at ~/clawd/knowledge/webdesign-video-2Gda_ZvV1V4/transcript.txt). Core thesis: AI sites look like slop because people start from a blank canvas. Fix: extract a real brand's design system first, merge it with a proven layout structure, then layer design fundamentals on top.
The key insight
Separate brand from structure — they come from different sources:
- Brand kit (colors/type/radii/shadows): extract from a reference site's screenshots or a pre-built kit (Get Design has 71 brand kits as
design.md)
- Page structure: a Dribbble screenshot that fits the BUSINESS TYPE (don't copy Stripe's software-company layout for a service business)
- Merge both in Claude Design: brand system + structure screenshot → hi-fi multi-page prototype → hand off to Claude Code ("copy it pixel for pixel", Next.js + Tailwind)
Workflow (17 steps, condensed)
- Pick style reference (screenshots) + structure reference (Dribbble: search "[niche] website")
- Claude Design > Design Systems > upload screenshots or design.md > publish
- Generate hi-fi prototype: name the pages, "use the brand design system for branding, use the attached screenshot for page structure"
- Hand off to Claude Code; CLAUDE.md persona: "You are a senior UI designer and front end developer. You build premium, modern, elegant interfaces."
- Layout: 6 decisions = direction, column ratio (60/40, 70/30 beats equal), container width, section rhythm, padding, alignment. Generous padding, applied consistently to ALL sections
- Typography: 3 distinct font families (heading dark/bold/large, body lighter, caption in accent color); gradient on key heading words; roomy line-height
- Imagery: Pixabay (royalty-free) + Freepik illustrations + Lucide icons. Never leave placeholders
- "Expensive" backgrounds = LAYERS: solid + radial gradient + subtle noise/dot texture + grid + color blobs + frosted glass. "People won't see the noise, but it fills out the page"
- Shadows = elevation (3D leap off the page); border radius identical everywhere (from the kit)
- Hover/focus states with 300ms transitions (never instant): buttons scale +10% + shadow, nav links get left-to-right underline, inputs get ring + ring offset, cards lift
- Nav: sticky + frosted glass; mobile hamburger with slide-out
- Dark/light toggle (optionally default by user timezone)
- Motion: scroll-triggered pop-ins with STAGGERED delays (never simultaneous), logo marquee, count-up numbers, shimmer, floating elements. Prompt lever: "10x the amount of animations on this page", then dial back to taste
- 3D hero: remix a Spline community scene, transparent bg, brand colors, export embed (caveat: ~5MB, hurts page speed)
- AI video: Higgs Field MCP (
http://mcp.higgsfield.ai, Seedance 2.0) — video bg also costs load speed
- Responsive: "optimize for desktop, tablet and mobile" + verify in DevTools device emulation. Mobile first: 70% of traffic
- Deploy: push to GitHub (private) > Vercel import > custom domain
Anti-patterns (what screams "AI-generated")
| Anti-pattern |
Fix |
| Blank-canvas start, no design system |
Extract real brand kit first |
| Wrong structure for business type |
Dribbble reference matching the niche |
| Single accent color + black/white |
Full palette from the kit |
| Instant color-swap on hover / no states |
300ms transitions everywhere |
| Flat single-color backgrounds |
Layered: gradient + noise + grid + blobs |
| All text same weight/size |
3-tier type hierarchy, 3 families |
| Tight padding, no breathing room |
Generous consistent padding |
| Static dead page |
Staggered scroll animations |
| Wall of text on about pages |
Break with imagery |
| Desktop-only |
Mobile first (70% of traffic) |
| Mixed border radii / shadows |
One kit, reused everywhere |
Tools quick reference
Claude Design (brand extraction + hi-fi prototypes) · Get Design (71 free brand kits) · Dribbble (structure) · Next.js + Tailwind + ShadCN · fonts.google.com · Pixabay / Freepik / Lucide · Spline (3D) · Higgs Field MCP (video) · GitHub + Vercel + Namecheap
House rules override video defaults where they conflict: image gen = nano-banana via fal.ai (never FLUX), 3D = fal.ai Hunyuan3D-2 first, design stack per feedback_design_stack_for_weblyfe (21st.dev + ui-ux-pro-max + Framer Motion/GSAP).
Heuristics worth quoting
- "As long as you know what is possible to be built, Claude Code can design it and build it for you. You're the boss and it's the employee."
- Ring vs border: ring sits OUTSIDE the element; ring offset = white gap between border and ring
- Full-width dark sections must bleed to the edges — a cut-off dark background "just wouldn't look good"
1---2name: building-ai-websites-that-dont-look-ai3description: Use when building or reviewing a website with AI (Claude Design/Claude Code/Next.js) and it risks looking generic or "AI-generated" - flat backgrounds, no hover states, inconsistent spacing, dead static pages, single accent color, wall-of-text sections4---56# Building AI Websites That Don't Look AI-Generated78Distilled from a 67-min masterclass (YT 2Gda_ZvV1V4, transcript at `~/clawd/knowledge/webdesign-video-2Gda_ZvV1V4/transcript.txt`). Core thesis: AI sites look like slop because people start from a blank canvas. Fix: **extract a real brand's design system first, merge it with a proven layout structure, then layer design fundamentals on top.**910## The key insight1112Separate **brand** from **structure** — they come from different sources:13- Brand kit (colors/type/radii/shadows): extract from a reference site's screenshots or a pre-built kit (Get Design has 71 brand kits as `design.md`)14- Page structure: a Dribbble screenshot that fits the BUSINESS TYPE (don't copy Stripe's software-company layout for a service business)15- Merge both in Claude Design: brand system + structure screenshot → hi-fi multi-page prototype → hand off to Claude Code ("copy it pixel for pixel", Next.js + Tailwind)1617## Workflow (17 steps, condensed)18191. Pick style reference (screenshots) + structure reference (Dribbble: search "[niche] website")202. Claude Design > Design Systems > upload screenshots or design.md > publish213. Generate hi-fi prototype: name the pages, "use the brand design system for branding, use the attached screenshot for page structure"224. Hand off to Claude Code; CLAUDE.md persona: "You are a senior UI designer and front end developer. You build premium, modern, elegant interfaces."235. Layout: 6 decisions = direction, column ratio (60/40, 70/30 beats equal), container width, section rhythm, padding, alignment. Generous padding, applied consistently to ALL sections246. Typography: 3 distinct font families (heading dark/bold/large, body lighter, caption in accent color); gradient on key heading words; roomy line-height257. Imagery: Pixabay (royalty-free) + Freepik illustrations + Lucide icons. Never leave placeholders268. "Expensive" backgrounds = LAYERS: solid + radial gradient + subtle noise/dot texture + grid + color blobs + frosted glass. "People won't see the noise, but it fills out the page"279. Shadows = elevation (3D leap off the page); border radius identical everywhere (from the kit)2810. Hover/focus states with **300ms transitions** (never instant): buttons scale +10% + shadow, nav links get left-to-right underline, inputs get ring + ring offset, cards lift2911. Nav: sticky + frosted glass; mobile hamburger with slide-out3012. Dark/light toggle (optionally default by user timezone)3113. Motion: scroll-triggered pop-ins with STAGGERED delays (never simultaneous), logo marquee, count-up numbers, shimmer, floating elements. Prompt lever: "10x the amount of animations on this page", then dial back to taste3214. 3D hero: remix a Spline community scene, transparent bg, brand colors, export embed (caveat: ~5MB, hurts page speed)3315. AI video: Higgs Field MCP (`http://mcp.higgsfield.ai`, Seedance 2.0) — video bg also costs load speed3416. Responsive: "optimize for desktop, tablet and mobile" + verify in DevTools device emulation. **Mobile first: 70% of traffic**3517. Deploy: push to GitHub (private) > Vercel import > custom domain3637## Anti-patterns (what screams "AI-generated")3839| Anti-pattern | Fix |40|---|---|41| Blank-canvas start, no design system | Extract real brand kit first |42| Wrong structure for business type | Dribbble reference matching the niche |43| Single accent color + black/white | Full palette from the kit |44| Instant color-swap on hover / no states | 300ms transitions everywhere |45| Flat single-color backgrounds | Layered: gradient + noise + grid + blobs |46| All text same weight/size | 3-tier type hierarchy, 3 families |47| Tight padding, no breathing room | Generous consistent padding |48| Static dead page | Staggered scroll animations |49| Wall of text on about pages | Break with imagery |50| Desktop-only | Mobile first (70% of traffic) |51| Mixed border radii / shadows | One kit, reused everywhere |5253## Tools quick reference5455Claude Design (brand extraction + hi-fi prototypes) · Get Design (71 free brand kits) · Dribbble (structure) · Next.js + Tailwind + ShadCN · fonts.google.com · Pixabay / Freepik / Lucide · Spline (3D) · Higgs Field MCP (video) · GitHub + Vercel + Namecheap5657House rules override video defaults where they conflict: image gen = nano-banana via fal.ai (never FLUX), 3D = fal.ai Hunyuan3D-2 first, design stack per `feedback_design_stack_for_weblyfe` (21st.dev + ui-ux-pro-max + Framer Motion/GSAP).5859## Heuristics worth quoting6061- "As long as you know what is possible to be built, Claude Code can design it and build it for you. You're the boss and it's the employee."62- Ring vs border: ring sits OUTSIDE the element; ring offset = white gap between border and ring63- Full-width dark sections must bleed to the edges — a cut-off dark background "just wouldn't look good"
S3YED