Common Mistakes With Vibe Coded Websites

This episode examines the good, bad, and ugly of AI-assisted web design, showing how tools like LLMs make professional-looking sites easier than ever—but also flood the web with homogenized clichés like purple gradients, distracting scroll animations, and counterproductive hover effects. The reviewer critiques specific AI-built sites where meaningless motion competes with content, hidden navigation hurts usability, and weak value propositions fail to explain the product. However, he acknowledges that AI now enables high-quality card hover interactions and polished visuals that were once reserved for elite designers, making poor design read as simple lack of effort. The core message is that while AI can generate anything, designers must stay opinionated, curate every change, and prioritize clarity, consistency, and user value over flashy but empty effects.

• ▶ 0:00 The host warns that while AI tools make design easier, you shouldn't always accept all changes; the episode explores the good, bad, and ugly of AI-assisted design.
• ▶ 1:24 Raphael calls out "dumb hover effects" on startup landing pages as a major AI design trend, along with purple gradients and sections that fade in and out on scroll.
• ▶ 2:12 The key mechanism behind AI homogenization: LLMs train on heavily linked, good examples, so a new trend (like purple gradients) gets copied by every startup within a week, losing all originality.
• ▶ 2:58 Reviewer opens the first site, new new.ai.
• ▶ 3:01 The site is pitched as an AI-powered game testing tool: “Solve your game testing with AI agents.”
• ▶ 3:08 Early visual note: the design uses purple gradients.
• ▶ 3:08 The site's dominant first impression is its purple gradients, immediately standing out to the speaker.
• ▶ 3:14 Purple is identified as one of the most common visual signatures of AI-generated web design, making it a cliché tell.
• ▶ 3:19 This creates a perception shift: what once looked "really nice" now reads as "they used AI to design this," even if AI wasn't actually used.
• ▶ 3:29 The scrolling line animation that follows the user is immediately noticeable and becomes the focal point of the page.
• ▶ 3:37 The line is distracting rather than helpful—it draws attention to itself and competes with actual page content.
• ▶ 4:06 The animation provides no conversion or user value; it exists only because AI made it easy to generate, not because it solves a design problem.
• ▶ 4:31 The speaker begins reviewing the "Everything in One Place" section.
• ▶ 4:37 They find this section hard to read because it is "very light" and contrast could be improved.
• ▶ 4:44 The card hover animations are surprisingly high quality, a level of design previously achievable only by top-tier, expensive web designers.
• ▶ 4:58 AI makes these sophisticated hover animations incredibly simple to produce, representing a tasteful use of LLMs to build compelling websites.
• ▶ 5:31 Unlike the earlier line animation that added little value, the card hover effect was previously hard to create but now is essentially "free" with AI, while reinforcing the brand's messaging.
• ▶ 5:52 On this site, hovering over a navigation item makes it disappear/fade out instead of becoming more prominent, which is the opposite of expected clickable behavior.
• ▶ 6:14 The AI tool "somehow decided" on this hover effect, but it's not the browser default; the built-in hand cursor already signals clickability without needing CSS.
• ▶ 6:40 The design implication is to make hovered elements more prominent (e.g., brighter or more visible), not less, to encourage clicking.
• ▶ 6:45 Use subtle hover effects like a slight lightening or glow instead of hiding or radically changing the element; keep it visible and intact.
• ▶ 7:03 The main goal of hover is to make an element feel clickable and inviting, sticking to standard interactions like the hand cursor rather than overdoing it.
• ▶ 8:11 Avoid hiding critical tools or information behind hover; since hover doesn't exist on mobile and long-press is undiscoverable, hidden functions make interfaces harder to use and less discoverable.
• ▶ 8:43 The site is "very nicely designed" ▶ 8:46 and shows interesting AI applications ▶ 9:15, though the design doesn't always communicate software functionality efficiently [8:43–8:45].
• ▶ 8:50 AI design tools and LLMs make it easy to create professional-looking sites; "there's almost no excuse for not having it now" [8:56–8:59].
• ▶ 8:59 This is crucial for YC applications: lacking base-level design signals "didn't even try" [9:02–9:07], since accessible tools make poor design read as lack of effort [9:09–9:12]; the speaker calls it a "really cool site" ▶ 9:14.
• ▶ 9:19 Rosebud AI follows the same repetitive purple-gradient visual trend as other AI sites, which looks modern but makes the brand feel samey and less distinctive.
• ▶ 10:33 The playable demo is fun, but it’s ambiguous whether it shows creation or just modification of an existing game, and the non-standard nav confuses visitors about the product’s purpose.
• ▶ 12:00 Above the fold, the page lacks a clear value prop and context; a red logo with purple accents and generic emoji-like icons further undercut the design, hurting conversion and originality.
• ▶ 13:38 Avoid scroll-jacking and distracting animations (chasing buttons, meteors, fade-ins) that compete with content; scroll should feel natural, and effects must add value, not just be easy to generate with AI.
• ▶ 15:58 Maintain visual consistency and high-quality assets: blurry posters, mismatched video thumbnails, and clashing section styles undermine trust; simpler, clear image-text combinations work better.
• ▶ 16:37 Make the value proposition immediately clear — the reviewer couldn't tell what the product did until halfway down the page, which is a critical failure.
• ▶ 19:11 Raphael transitions to reviewing Sphinx, a site tagged "your last compliance hire," focusing on its visual presentation.
• ▶ 19:16 He immediately notices the site opens with noticeable animation, calling out "some animation thing going on here."
• ▶ 19:20 He frames this as part of a broader trend: modern websites use far more animation than ~3 years ago, thanks to AI design tools making animation easier to add.
• ▶ 19:47 The hierarchy is weakened by an unnecessary extra label/style sitting between the H1 and subtext, creating a fourth or fifth visual style that complicates the structure.
• ▶ 20:00 This extra element is a recurring AI pattern—LLMs "dream up" clever additions like "Meet Sphinx" even when the logo and headline already exist, wasting vertical space.
• ▶ 20:48 The broader takeaway: with AI making it easy to do anything, human designers must stay opinionated and avoid passively accepting all AI-generated changes.
• ▶ 20:58 The right-side section constantly swaps between different button styles (star, circle, round rectangle) with no clear reason, causing confusion.
• ▶ 21:31 A hand cursor appears, but the element is "not a button"—clicking anywhere on the page advances the section, making the whole area a click target (a "head fake").
• ▶ 21:58 The inconsistent, shifting buttons feel like an AI design tool suggestion rather than a human choice, described as "the visual manifestation of LM hallucinations."

• ▶ 22:28 The menu has a usability flaw: it disappears between interactions, creating a gap that makes navigation feel less smooth.

• ▶ 22:42 The grid-like icons next to menu items are not interactive — they're purely decorative additions the AI language model "thought was cute."

• ▶ 22:49 Despite being non-functional, the icons are charming and on-brand, and the reviewer credits them as a small creative touch they wouldn't have thought to add.

• ▶ 23:04 The speaker critiques the hover-revealed icon design, questioning why it is hidden behind an interaction instead of just shown plainly.

• ▶ 23:09 Content falls into a binary: essential content should be visible by default, while non-essential content hidden by hover only adds unnecessary interaction burden.

• ▶ 23:16 The best solution for this likely non-essential icon is to simply leave it out—don't add hover-reveal interactions for content that doesn't genuinely need to exist.

• ▶ 23:25 The "Valued and trusted by" section appears cluttered, with "a bunch of lines going everywhere" rather than cleanly presenting social proof.
• ▶ 23:31 A recurring decorative line pattern follows the user down the page, adding to the visual noise as they scroll.
• ▶ 23:31 The combination of the persistent line and the section's extra lines creates competing visual elements, making the design feel messy instead of cohesive.
• ▶ 23:34 The scroll-triggered animation locks the user into a position and forces them to wait for the animation to build up, rather than showing the element in its final state.
• ▶ 23:55 The animation monopolizes all attention, causing users to ignore the text and messaging on the left side of the screen.
• ▶ 24:04 The animated right side lacks valuable visual information about the product, so the overall effect is pure distraction that obscures the page's actual message.
• ▶ 24:22 Long "build-up" sections on the page make it very hard to know how far into the landing page you actually are.
• ▶ 24:32 Unlike a physical book—where you can instantly see you're "halfway through"—the page gives no intuitive sense of remaining content.
• ▶ 24:47 The scroll indicator is supposed to provide a grasp of page length and structure, but here it is completely failing the user.
• ▶ 25:02 Overall visual impression is positive: the page "looks nice" and "looks modern," despite an earlier concern about user orientation at ▶ 25:00.
• ▶ 25:06 The design uses a cohesive brand theme with an orange accent color and black as the primary brand color, reinforcing a consistent identity.
• ▶ 25:14 The animated line motif is a clever design choice—it mirrors the orange lines used in the actual product workflows, effectively communicating what the product does; the headline also clearly explains what the product is and who it's for ▶ 25:30, leading to a final verdict of "Awesome, Sphinx. Great." ▶ 25:35.
• ▶ 25:55 Calls out "dumb hover effects" as a pet peeve, specifically vertical movement on hover being distracting and uncool.
• ▶ 26:06 Notes the hover effect causes the whole menu to shift horizontally, making it look like a bug rather than an intentional design choice.
• ▶ 26:29 Accepts a simple color transition on hover (black-and-white button turning purple) as a good hover effect, unlike the gimmicky movement effects.
• ▶ 26:35 Hover effect quality is inconsistent, with one instance "not bad" and another "pretty bad."
• ▶ 26:41 An obvious selection bug appears on an interactive element, which the reviewer says no hand-coder would have missed.
• ▶ 26:55 The reviewer worries that "one-shot" AI-generated landing pages skip thorough testing, shipping broken results.
• ▶ 27:27 AI-generated dashboards share a recognizable formula—icons in darker shades, "Google colors," bento-box grids, gradients, and generic copy—making sites feel unoriginal and generic.
• ▶ 28:58 AI tools are valuable for freeing builders from technical details, but the real work is focusing on what you're making, for whom, and why; avoid wasting that potential on "AI slop."
• ▶ 29:36 Generic AI-style design can make customers assume you just used AI, then question product quality—so evaluate the output thoroughly and use AI to make the product more original, not less.
• ▶ 30:33 The site is “scroll jacked” again, making navigation feel slow and clunky.
• ▶ 30:38 The copy overuses exaggerated claims like “10x everything” and “unlocked IRR,” which come across as made-up and untrustworthy.
• ▶ 31:00 Excessive empty space forces users to scroll “through molasses” without finding useful information, with only a brief positive note at ▶ 31:08 about the full-height background.
• ▶ 31:21 Explicit “scroll down” prompts are unnecessary and annoying, since users already know websites can be scrolled.
• ▶ 31:30 Instead, use a visual interruption at the top, like letting a few pixels of an awesome hero image peek up from the bottom edge to invite scrolling.
• ▶ 31:44 This teasing approach only works if the hidden content is genuinely compelling—vague headlines like “close better deals faster” don’t deliver enough value.
• ▶ 32:01 A dynamic video background can render the overlay navigation completely invisible, as the bright menu clashes with bright background elements.
• ▶ 32:21 The navigation is “smart” in its static state but fails to adapt when video sits behind it, making it “not smart enough” for changing backgrounds.
• ▶ 32:24 Overlay navigation must be tested for readability across all possible background states, not just a static hero image, due to unpredictable contrast from dynamic content.
• ▶ 32:46 Some elements are clickable and others are not, creating a disjointed and confusing experience.
• ▶ 32:54 The carousel auto-advances on its own timer, jumping the page up and down and leaving the user without control.
• ▶ 33:04 This behavior likely stems from an AI-generated component that wasn't refined, with hidden labels and inconsistent chevrons making the page feel "sloppy."
• ▶ 33:33 AI-generated motion (hover/expand, fade-ins) implies interactivity, but nothing is clickable, making the animation feel unintentional and purposeless.
• ▶ 33:42 The layout lacks useful information presented correctly, leaving the reviewer unsure what the page is asking the user to do.
• ▶ 34:00 The visual style is "fresh" and not purple, but shallow—relying on grainy, zoomed-in background images like Lovable, with confusing background elements that don't communicate clear meaning.
• ▶ 34:43 Many submissions share the same visual and structural patterns, like "lots of purple gradients," leading to a lack of differentiation.
• ▶ 34:50 Animations are often included "for animation's sake" just because AI tools make them possible, though Raphael values these "AI superpowers."
• ▶ 35:01 Use AI to execute and amplify your own ideas, not outsource thinking—so your landing page can "dazzle your customers."
• ▶ 35:18 The primary job of a startup landing page is to function as a customer acquisition channel.
• ▶ 35:20 It is not the product itself, nor just a "cool thing on the web"—though creative web experiences have their place.
• ▶ 35:28 For startup landing pages specifically, the goal is to get visitors to take a desired action, sign up, or move into the product.
• ▶ 35:35 The speaker agrees with previously made points about using these tools.
• ▶ 35:39 QA everything: easy to create, but review uncovered quirks/bugs that were confusing or didn't work as expected.
• ▶ 35:48 The founder/human is responsible for personally testing the product to ensure interactions work correctly — a non-negotiable step.
• ▶ 36:08 Originality is essential; because many people use the same AI tools, generic results are common.
• ▶ 36:17 Deliberate intention is required to stand out—it won't happen by accident.
• ▶ 36:22 Start from brand fundamentals first: define your color palette and identity, then feed those into the AI system.
• ▶ 36:43 Many people have used AI in similar ways, highlighting the gap between common usage and its true potential.
• ▶ 36:46 AI is described as one of the most powerful tools ever for design, enabling results that were once impossible or took forever to achieve almost effortlessly.
• ▶ 36:54 The real opportunity is to use AI to "move the lever upward" toward tangible improvements—making websites more engaging and better at converting visitors.
• ▶ 37:05 Raphael highlights the powerful creative potential of the tools and approaches discussed.
• ▶ 37:07 The host thanks Raphael for his valuable perspective across the reviewed websites.
• ▶ 37:16 The section wraps up by announcing the next design review and promising to see viewers then.

• ▶ 0:00 Opening, Guest, and AI Design Trends (0:00 - 2:57) - - Host introduces the episode and Raphael Shad, then discusses AI design trends like purple gradients and homogenization.
• ▶ 2:57 new new.ai Review and Hover Effects (2:57 - 9:19) - - Reviews new new.ai's design and discusses AI-driven hover effects, readability, and hidden-until-hover anti-patterns.
• ▶ 9:19 Rosebud AI Review (9:19 - 13:30) - - Critiques Rosebud AI's purple-gradient trend, gameplay demo ambiguity, and landing-page IP and visual issues.
• ▶ 13:30 Get Crocs Review (13:30 - 19:11) - - Critiques Get Crocs' scroll-jacking, fade-ins, inconsistent visuals, and unclear purpose.
• ▶ 19:11 Sphinx Landing Page Review (19:11 - 37:19) - - Examines Sphinx's mixed styles, broken hierarchy, confusing hover/menu behavior, and distracting animations.