Common Mistakes With Vibe Coded Websites

Just because you can doesn’t mean you should. That’s the through-line of this YC Design Review episode, where Aaron Epstein is joined by Raphael Schaad, the designer behind Cron (now Notion Calendar) and a YC Visiting Partner. Together they live-review six AI-coded startup websites, pulling apart the specific patterns that LLMs default to, and explaining why most of them hurt more than they help. The episode is a practical field guide to the emerging aesthetic of “AI design slop” and how to avoid it.

The AI design convergence problem

Raphael’s late-night tweet sparked this episode: he’d noticed that startup landing pages were suddenly flooded with the same purple gradients, the same fade-in-on-scroll effects, the same pointless hover animations. His diagnosis: when a good website establishes a trend, it used to take months for others to copy it. Now LLMs get trained on the good examples (the ones with many links), and within a week every new startup site looks identical.

The result isn’t that any single element is bad. Purple gradients aren’t inherently wrong. Fade-ins aren’t inherently wrong. The problem is ubiquity. When every site uses the same palette and the same animations, each one loses the originality and brand identity that founders presumably want. As Aaron puts it: if your customers look at your site and think “they probably just used AI to design this,” the next question is “are they vibe coding the actual product too?”

The six site reviews

Nunu.ai: the good and the gimmicky

A game testing platform with AI agents. First impression: purple gradients everywhere. A line follows the user down the page, which both reviewers find distracting rather than helpful. Key distinction: some AI-enabled effects add value, others don’t. The animated hover cards showing game concepts (multiplayer controllers, lightning connections) are genuinely good, they reinforce the product story and would have been expensive to build manually. But the following line? Nobody would have coded that from scratch. You’d only implement it because it was free.

The inverted hover effect on navigation (menu items fade out instead of popping) is a classic LLM design error. Browsers already provide a free hover effect (cursor turns to a hand). If you add CSS, make things more clickable, brighter, more inviting. Don’t make them disappear.

Rosebud AI: color clashes and emoji laziness

A game creation platform. Same purple gradient problem, plus a red logo combined with purple accents, a combination no human designer would choose. The use of emoji-style icons is a telltale sign: LLMs grab standard icons because they have no IP of their own. The company name appears to be part of the headline rather than a distinct brand element. The H1 misses the three essential above-the-fold elements: what is it, who is it for, and why should they care?

Positive note: the embedded playable game demo is engaging and clever. But the site doesn’t tell you it was made with their product, missing a conversion opportunity.

GetCrux: scroll-jacking and the chasing button

An AI creative strategist for ads. A floating CTA button literally chases the cursor around the screen. Raphael’s reaction: “Does it make you want to talk to the founders more or less?” Aaron: “It makes me distracted.” The site also has meteor animations shooting from the corners, scroll-jacking that makes the page feel like “scrolling through molasses,” and a blurry hero screenshot. Visual consistency breaks down between sections, likely because different parts were generated in separate sessions.

The fade-in pattern gets particular criticism. Raphael reloads the page and demonstrates: sections that haven’t faded in yet make the FAQ look like it only has one question. Fast scrollers miss content entirely because it hasn’t rendered yet.

A telling moment: halfway down the page, neither reviewer can recall what the company actually does. They have to scroll back to the top to check.

Sphinx: the hierarchy problem

A compliance tool. This site reveals an LLM-specific design pathology: too many typographic styles. The page has a logo, an H1, subtext, plus an extra label in a fourth style that adds a fifth level of hierarchy. Raphael notes this is something he increasingly sees LLMs do, they think it’s clever to add extra labels in extra styles, but it just complicates the information hierarchy without adding value.

The animation section is the most damaging example. Multiple button styles (star, circle, rounded rectangle) shift and reorient on each click, while auto-advancing on a timer. Some elements are clickable, some aren’t, and the buttons don’t stay consistent.

“It feels like the visual manifestation of LLM hallucinations.”

The scroll-jacking locks users into a position to watch an animation build out. But the animation captures all attention while the actual explanatory text sits ignored on the left side.

Build0: the bento box pattern

Custom internal apps with AI. Purple gradients, bento box layouts (icon on top, text below, in a 3x2 grid), and a fake dashboard with red/green/blue/purple callouts, classic AI-generated design artifacts. One-shotting a landing page means bugs slip through: the reviewers find selection glitches that no hand-coder would have missed. LLMs produce things that “sometimes work” but never get the QA pass a human-built page would.

Zarna: style over substance

An AI for private capital markets. Heavy scroll-jacking, aggressive “10x everything” claims that feel made up, and so little information that the reviewers feel lost. The full-viewport hero section with a “scroll down to see more” indicator draws specific criticism: of course users know how to scroll. Better to let the next section peek above the fold, creating natural curiosity.

The dynamic video background breaks the navigation bar contrast. The site is smart enough to adapt text color for static backgrounds but fails when video plays behind the menu. Clickable and non-clickable elements are inconsistently styled. Overall verdict: the visual style in isolation is actually fresh, but the interaction layer is half-broken.

The design principles behind the critique

Across all six reviews, a consistent set of principles emerges:

The “would you build this from scratch?” test. If you wouldn’t spend a week hand-coding an effect, it’s probably not worth including just because AI made it free. The line following you down the page, the meteor animations, the chasing button, none of these pass the test.

Hover effects should invite, not reveal. Steve Jobs wanted to make interfaces “lickable.” Hover should make things feel clickable and alive. Two anti-patterns: making things fade away on hover (inverted affordance) and hiding critical functionality behind hover (undiscoverable on mobile, inefficient on desktop).

Scroll-jacking breaks the reading contract. Users lose sense of where they are on the page. Content gets missed by fast scrollers. The native browser scroll is a contract between the page and the reader; hijacking it for animation locks users in “molasses.”

The H1 must answer three questions above the fold. What is it? Who is it for? Why should they care? Plus a call to action. If those four things aren’t visible without scrolling, conversion suffers.

Visual consistency signals craftsmanship. When different sections look like different websites, it suggests they were generated in separate sessions with no unifying design system. LLMs default to generic patterns (bento boxes, Google-colored dashboards, emoji icons) that make everything look the same across companies.

Closing Notes

Raphael summarizes the paradox: he would have killed for AI design tools when building his first website. They’re genuinely the most powerful creation tools ever available. But the same tools that eliminate technical friction also eliminate the natural cost filter that used to prevent bad ideas from making it to production. The founder’s job has shifted from “can I build this?” to “should I build this?”

A few principles worth internalizing:

• Start from brand, not from output. Define your color palette, your visual language, your messaging before prompting. Then use AI to execute, not to decide.
• QA everything. One-shotting a landing page means bugs and inconsistencies that hand-coders would catch. The human in the loop has to actually loop.
• Your landing page is a customer acquisition channel, not art. Every element should serve conversion. If it doesn’t help visitors understand what you do and why they should care, it’s noise.
• Sameness is a credibility tax. If your site looks like every other AI-coded site, customers will assume your product is equally generic. The time AI saved you in execution should be reinvested in originality.