Common Mistakes With Vibe Coded Websites
In a Nutshell
AI-assisted website coding produces ubiquitous "slop" like purple gradients, distracting scroll-following lines, dumb hover effects that hide navigation, scroll jacking, and low-contrast text, eroding originality and user trust across YC startups. These trends arise because LLMs replicate popular designs easily, but founders must QA rigorously, prioritize inviting hovers that enhance clickability, ensure visual consistency, and craft opinionated hierarchies to stand out. Use AI to accelerate unique, conversion-focused designs—start with a deliberate color palette and brand system, not accept raw outputs.
These notes were generated by AI and may contain inaccuracies.
Common Mistakes With Vibe Coded Websites
It's easier than ever to design with AI tools, but that doesn't mean you should always accept all changes. Today, joined by Raphael Shad, one of the newest visiting partners at YC, co-founder of Kron (modern calendar tool sold to Notion), to look at the good, the bad, and the ugly of AI-assisted design and how to use these superpowers to stand out.
Raphael is thrilled to be back at YC helping the next generation of founders build iconic companies.
Topic is AI design trends: on the negative end, AI design slop; on the positive end, easier to build for anyone even if not a designer.
Common trends Raphael has seen:
- Dumb hover effects on startup landing pages, presumably AI-coded.
- Purple gradients everywhere on startup websites.
- Sections that fade in and fade out as you scroll.
These aren't inherently bad, but they're now ubiquitous, losing meaning, specialness, and originality.
In the old world, good websites established trends slowly; now LLMs train on popular examples (e.g., good site with purple gradient gets linked a lot), so next week all startups look the same.
This power is both good and bad if used right. Reviewing YC companies' websites built with AI coding tools to see what's used well and what to do differently.
new.ai: Solve your game testing with AI agents. Save countless hours of manual game QA by using AI agents performing end-to-end tests at scale.
Purple gradients jump out immediately, a common AI tell.
Scrolling: line following up and down, distracting—pay more attention to the line than content.
Hard for a human to implement pre-AI; LLMs good at SVG buildups/transforms, but just because easy doesn't mean good design or helps convert visitors to customers.
No one would code a following line from scratch; only done because easy, but adds no value, distracts.
"Everything in one place": hard to read, light text—improve contrast.
Cards: cool hover animations, tasteful use of AI powers—establishes brand, unique, creative, fun (e.g., multiplayer controllers with lightning). Reinforces points. Hard/expensive pre-AI, now simple.
Contrast to following line: this adds value.
Main navigation: on hover, items disappear/fade out instead of popping—anti-pattern. Doesn't invite clicks. Browser default hand cursor already signals clickable; just use white/bright purple + hand.
If adding CSS: make pop, one shade lighter/more active, glow—but don't make go away.
Rules of thumb for hover effects:
- Make clickable/inviting (Steve Jobs: make things "lickable" like Aqua interface).
- Hand cursor indicates clickable; don't go much beyond.
- Good for making UI feel alive.
- Increasingly used to reveal critical info/functionality—anti-pattern.
- Clean interfaces hide tools for content space, but want tools visible (bicycle for the mind).
- Hiding behind hover inefficient; hard to discover.
No hover on mobile; long press equivalent never caught on (hard to discover). Don't long press everywhere to find functionality.
Desktop: hunting via hover for disclosure arrows/dot-dot-dot menus inefficient.
Overall: nicely designed site. Easier than ever with AI—no excuse for low-quality design, especially YC apps.
Rosebud AI: Create games with AI.
Again: purple gradient, pinkish-purple accent—looks cool/modern in isolation, but sameness erodes brand/originality.
Live demo: prompt-to-game interaction, instantly playable 3D game in browser (old-school, walk/jump with arrows). Engaging.
Wonder if product code or AI-coded sandbox; doesn't say "play a game made with our product."
Top bar follows (anchors jumping vertically).
Under "modify games"—maybe modifiable game demo, but unclear (trips up usage).
Non-standard navigation confuses.
Red logo + purple accent not complementary. Emojis feel lazy (LLMs cobble standards, no IP).
More context needed: company name looks part of headline, not by logo. Value prop unclear.
H1 best practices: What is it? Who for? Why care? + CTA above fold for conversion.
Examples: light following cursor around edges—fun/playful because free/easy, but not worth week of coding.
Games created with Rosebud AI; remixing leads to conversion wall.
Get Crux: AI creative strategist to make ads that work.
Automatic fade-ins, scroll hijacking (hard to see on screen; detached + fixed header overlap—should smoothly transition).
Button chases around screen—distracting, hard to click; gets attention but not to product (makes want to talk to founders less).
Meteors shooting down—distracting, no value; easy so added, but not worth time pre-AI.
Hero: blurry poster image for video (keep all assets high-res/high-quality); video different/confusing.
Button still chases down page.
Just because easy/possible doesn't mean do it.
Lack of visual consistency: different visual language in sections (maybe different tool parts or vs. content).
Clear image + headline/subtext goes long way.
Halfway down: can't recall what they do (reminder: AI creative strategist for ads).
Visual style: vertical motion blur on color gradients in some images—overused, hard to read, rainbow-like; absent from hero.
Could reflect style in background for consistency.
Fade-ins: no advantage over native scroll motion; creates weird states (e.g., FAQ looks like one Q/A until fades in).
Timer-based fade-ins: scroll fast, miss content.
Here: fade in at bottom, but scroll jacking feels like molasses (JS hooks for animations).
Sphinx: Your last compliance hire.
More animations than 3 years ago—AI tools make easy.
Hierarchy issues: Logo (stylized Sphinx, top left, standard). H1/subtext good. But weird in-between fourth style adds fifth style total—complicates hierarchy, adds vertical space.
Pre-AI, designers/engineers didn't mix so many; LLMs dream up loose info hierarchy.
Be opinionated as human editor—don't accept all changes.
Right section: swaps around (star button → circle → round rectangle; auto-advances). Confusing button styles, movement.
Not even a button (hand fake; click anywhere advances). Feels like AI hallucination.
Hard to imagine human designing shifting buttons.
Menu: gaps as it goes away.
Right grid icons: hover swaps icons—cute/on-brand/original, but unnecessary (if point important, just put icon directly).
Icons should reveal essential information on hover, but non-essential ones can be omitted. Further down, 'Valued and trusted by' section has lines going everywhere, with a line following down the page. Scroll jacking locks the position to build animations. Questioning why capture attention here for animation instead of showing the built-out state. Animation distracts from text on the left, failing to communicate valuable information about the product.
Landing pages that build up and hold users in sections make it hard to gauge progress, unlike a physical book where you see halfway. Scroll indicators are crucial to grasp position on the page, but here it fails to show where you are.
Visually modern with orange accent color, black primary brand color, and following line mimicking product workflows with orange lines. Headline explains what it is and who it's for effectively. Great work, Sphinx.
Purple gradients appear. Menu morphs nicely, but dumb hover effects with vertical movement are distracting and shift the menu horizontally like a bug. Arrow moves vertically instead of right and feels like it goes backwards on hover. Black and white button hover to purple is fine. Interactive element has selection bug unlikely in hand-coded sites. One-shot landing pages from LLMs ship unnoticed bugs due to lack of attention to detail.
Dashboard uses red, green, blue, purple callouts, classic AI design tool output with darker icons on lighter backgrounds, often Google colors. Bento boxes with icon at top and text in 3x2 grid are common but non-original. Quotes, purple gradients, FAQs, more gradients.
Common patterns across sites reduce brand originality. AI tools free time for hard questions like what to make, for whom, and why valuable, but using them for AI slop wastes potential. Builders in 2026 must walk this fine line responsibly. Nothing inherently bad, but repetitive patterns make sites feel seen before, eroding credibility—visitors think 'they used AI, how good is the product?'
Use AI to build by any means, but evaluate output, use AI to improve originality, spend saved time on messaging and designing a wonderful product.
Scroll jacked again. '10x everything' feels made up, site clunky like molasses with excessive space and little information. Hero uses 100% vertical space, locking visually; avoid 'scroll down to see more' prompts. Better to peek hero image at top to entice scrolling. Top navigation disappears behind full background, unreadable over dynamic video despite adapting to static images.
Some elements clickable after chevron, but inconsistent—jumps up and down on its own timer, confusing. Nested ones work, others don't. Better label hidden, chevrons inconsistent, feels sloppy. Motion bits AI adds for free but wouldn't create manually. Hovers expand but nothing clickable, fade-ins, lacks useful information and clear messaging. Fit and finish plus meaty content missing, but visual style fresh like Lovable with grainy zoomed background; unclear background boxes.
Lots of purple gradients and same patterns. Animations for animation's sake because possible. Don't outsource thinking to LLMs—use as tools for brilliant ideas, novel designs, interactions to dazzle customers. Landing pages are customer acquisition channels.
QA everything; founders must ensure interactions work, fix quirks and bugs. Ensure site represents brand originality intentionally. Start with color palette and brand, feed into system, rather than tweaking AI output. AI enables incredible designs quickly—use to engage and convert better.
Thank you, Rafael, for perspective; thanks to submitters.
Keep Y Combinator in your library
Save the videos and channels worth coming back to, and find them again in one place.
