Y Combinator general partner Aaron Epstein was joined by Raphael Schaad, founder of Cron that was sold to Notion, to discuss common mistakes made with AI designed websites. They identified seven common mistakes vibe coders made with their websites that should be avoided.
Positive And Negatives
The podcast started out by acknowledging that being able to vibe code a website is a positive thing that doesn’t have to turn out poorly just because they’re not a designer. Then they started visiting vibe coded websites and encountering multiple issues that fit into the following seven categories.
1. Generic Design Trends
The first problem they highlighted is the trend of letting the AI decide the look and feel. A recent discussion on Twitter called attention to people who turn to AI and ask, “give me something modern” and what they end up getting is something generic. And that shouldn’t be surprising because if you leave the choices to an LLM you will 100% get the most common design choices.
The design may look modern in isolation, but it loses brand value because it lacks uniqueness, it feels familiar, generic, and unoriginal. One of the examples is a layout grid that resembles a bento-box (a neatly packed Japanese lunch), which they said looked fine but is also non-original.
Another example was the generic software dashboard, with the point being the generic aspect of it. This kind of error can slip in at any point, where something looks professional but is generic.
Aaron Epstein commented:
“Go back to the engineers tab here.
Now, if this is their product, one of the other things that stands out to me is this kind of dashboard that’s got, you know, it’s got like the red, green, blue, purple kind of callouts up here.
That’s one of the hallmark classic things that a lot of AI design tools will actually create.”
Screenshot Of Generic Software Dashboard
Raphael responded:
“Yeah, every fake dashboard looks basically like something like that.”
Aaron Epstein:
They’ve got the icons that are a darker version of the lighter background color. It’s usually like the Google colors, you know, it’s like red, yellow, green, blue.
Raphael Schaad:
“The Fisher-Price primary…”
Aaron Epstein:
“So that… we tend to see a lot.”
They cited five examples of generic design trends:
- Overusing purple gradients
- Repeating generic AI design patterns
- Using bento-box layouts without originality
- Generic visual elements like the example of the software dashboard
- Relying on standard icons or emoji-like elements
All of those design trends that LLMs lean on end up creating a visual experience that looks other AI-built sites.
Raphael explained:
“This all kind of started when I had like a late night thought and tweeted that I see a lot of dumb hover effects on landing pages of startups these days, presumably vibe coded. And so I was kind of curious to peel the layer back there.
It’s like, how did these, like what I thought were dumb effects, how did they make it into LLMs and why are they everywhere now?
A couple other trends that we then was kind of like purple gradients. All of a sudden, all startup websites had purple gradients everywhere. Or these sections that kind of like fade as you go in, as you scroll, and they fade in and fade out.”
Aaron noted that all of those design trends are not inherently bad. What makes them bad now is that LLMs are making them common, thereby draining them of any originality they used to have.
Raphael agreed with Aaron’s assessment, explaining how this happens:
“And one of the key things was when there was a good website kind of establishing a trend, it took a while in the old world for others to kind of like copy these trends.
But now with LLMs, if there’s a good website with a purple gradient, it makes it into the LLM because the LLM gets trained on like the good examples that get linked to a lot. And then all of a sudden, like the next week, all the startup websites look the same.”
2. Unexpected User Interaction Feedback
User interaction feedback is important because it eliminates uncertainty by acknowledging that a click did something. User interaction feedback signals that something is clickable. All of those things are a part of a design language that site visitors expect to see.
Unexpected interaction feedback is a poor user experience because it breaks the pattern that a user expects when they visit a website. It’s like walking through a lobby and bumping into a glass wall in the middle of the room. It’s not supposed to be there and is distracting and disorienting, a poor user experience.
The podcast recommended avoiding these seven interactions:
- Lines following the user down the page
- Cursor-following lights
- Superfluous background animation effects
- Automatic fade-ins
- Moving buttons or shifting UI elements
- Hover effects that move elements without a clear purpose
- Animations that draw more attention than the product
3. Broken or Confusing UX Patterns
These are mistakes where the page becomes harder to use because the interaction model is unclear.
- Scroll jacking
- Non-standard navigation
- Menus that jump or behave inconsistently
- Clickable-looking elements that do not behave clearly
- Buttons that move or auto-advance
- Hover-only interactions
- Hidden functionality behind hover
- Duplicate or awkward sticky header behavior
Scroll hijacking was one the most common issues they encountered, stopping four times to comment on yet another site that was hijacking the browser scrolling.
At one point, Raphael commented:
“But it still feels like going through molasses… Like hijacking the …actual native browser scrolling to do some fancy thing with JavaScript to actually have the hooks to do all these animations.”
Another instance of scroll hijacking was the by-product of an animation that was loading and preventing the user from progressing.
Aaron Epstein commented as he scrolled down a page:
“What happens when we go further down?
…Valued and trusted by, okay, we’ve got a bunch of lines going everywhere. All right, so we’ve got that line following you down the page pattern again.”
Screenshot: “And now we’re scroll-jacked”
At this point the page stopped responding because of all the animations going on and Raphael said:
And now we’re scroll-jacked.
We’re locked into this position here of the website in order to build up this animation.
And I wonder what it wants to tell me, like, why is it important to capture me here on this point to build out this animation, where is it just like showing it already in the build-out state?”
Aaron noted that the animation and the scroll jacking is distracting him from what the page is trying to communicate.
He observed:
“And I find the animation is getting all of my attention, rather than what it says all the way over here on the left side. So I’m not even noticing any of this.
And this is not, on the right side, it’s not giving me enough visual information to communicate something valuable about what they do or how the product works.
So I just kind of miss everything over here on the side.
The animation is too distracting.”
The core problem here is that the site stops behaving like users expect. That creates friction, confusion, and sometimes mistrust, but certainly confusion, which is the opposite of what a website should be doing: offering clarity and communicating.
4. Weak Messaging and Product Explanation
These are mistakes where the design looks impressive, but the visitor still does not understand the product.
- Unclear value proposition
- Missing or vague explanation of what the product does
- Not making clear who the product is for
- Not explaining why the audience should care
- Too little useful information above the fold
- Product demos or examples without enough context
I see this kind of thing a lot with B2B type sites where you read the content and nothing on the page connects with explaining what the product or service is, much less communicating why I should care. In the past it was human slop written by someone who is more concerned with sounding techie and advanced. But nowadays it’s AI slop where content lacks purpose and is prone to using ambiguous words that have more than one meaning or words that are basically just lazy because they don’t do any work, don’t accomplish anything, fail to move the ball down the field.
A landing page is a customer acquisition channel. If visitors cannot quickly understand the product and its value, the design has failed.
5. Poor Information Hierarchy And Structure
These are mistakes where the page has too many competing visual or textual elements. The key thing here is visual or text elements that are competing for the site visitor’s attention.
- Too many text styles
- Extra labels that do not add meaning
- Weak hierarchy between logo, headline, subhead, and supporting text
- Sections that feel visually overbuilt
- Decorative elements that add vertical space without improving clarity
AI can add structure that looks designed, but the structure may not help the reader process the page. Always be aware that AI tends to crank out content elements that look like their busy doing work but aren’t doing any work at all. And when I say work, I mean doing something purposeful, for a reason. Every word and visual element should do some work, accomplish something. This is something to be aware of when designing with AI.
6. Inconsistent Brand and Visual System
These are mistakes where the site lacks a unified identity. The site may contain attractive image assets, but they do not feel like they are a part of one coherent brand or visual style. These are hallmarks of an AI being prompted to do something modern or trendy or stylish but without having an established visual language or system in place.
- Inconsistent visual language across sections
- Colors that do not feel coordinated with the logo or brand
- Product visuals that do not match the landing page style
- Sections that look like they were generated separately
- Brand choices that feel inherited from AI defaults rather than intentional
7. Lack Of Experienced-Based Judgment and Over-Reliance on AI
This is the underlying issue behind each category of issue with poorly vibe-coded websites. AI lets anyone design a site and create image and text assets. But it needs firm direction by someone with experience and expertise. The quality of the output is entirely dependent on the quality of the prompt, what was input.
The problem isn’t that AI makes AI slop. A lack of experience, expertise is what leads to the slop.
Here are the issues that lead to poorly designed vibe-coded websites:
- Accepting all AI changes
- Outsourcing taste to the LLM
- Letting AI decide the brand direction
- Starting from AI output instead of brand strategy
- Spending saved time on more effects instead of clearer thinking
- Forgetting that the human is now the editor
The insight and takeaway from reviewing poorly vibe-coded websites is that AI removes technical friction but it doesn’t replace judgment that comes from experience and expertise. The person vibe coding a website still has to decide what best serves the site visitor and the business goal.
Watch the podcast: Common Mistakes With Vibe Coded Websites
Featured Image by Shutterstock/FabrikaSimf