Skip to content

Podcast

How to Avoid AI Design Slop

Y Combinator Startup Podcast

Source ↗ ← All highlights
  • How AI Amplifies Design Trends
    • AI design tools propagate visible trends rapidly because models train on highly linked, successful examples.
    • Raphael Schaad notes purple gradients and hover effects spread fast via LLM training, making sites look identical rather than original. Transcript: Aaron Epstein Well, you’re the perfect person to have on here because the topic that we’re going to be talking about today is AI design trends. On the negative end, there’s the AI design slop. And on the positive end, there’s a lot of AI design trends that now are easier to build for anybody, even if they’re not a designer. So what are some of the common things that you’ve seen recently, a lot of the top AI design trends that are standing out that you’d want to call out for the audience before we jump into some Sites? Raphael Schaad Yeah, sure. This all kind of started when I had a late night thought and tweeted that I see a lot of dumb hover effects on landing pages of startups these days. Resumably wipe 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 identified was kind of like purple gradients. All of a sudden, all startup websites had purple gradients everywhere. Or these sections that can fade as you go in, as you scroll, and they fade in and fade out. Aaron Epstein Yeah. And it’s not so much that those inherently are bad. It’s not purple gradients are bad. Nobody should ever use them. It’s that now they’re just so ubiquitous everywhere that they kind of lose all meaning and specialness and originality. Raphael Schaad Totally. 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 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 the good examples that get linked to a lot. (Time 0:00:56)
  • Use Animation To Reinforce Not Distract
    • Use AI to build interactions that actually reinforce your message, not just flashy effects.
    • Raphael praises animated cards that visualize product concepts but criticizes decorative lines that distract from content. Transcript: Raphael Schaad Yeah. Aaron Epstein Yeah, I don’t know anybody that’s like, we need a line that goes through here. Let’s start coding that from scratch. You would only implement something like this because it was so easy to do. But I don’t think it actually adds value. If anything, I think it distracts from the rest of the page. I can’t recall anything from these sections based on this. Okay, so now we’re down to everything in one place. I find this hard to read. It’s very light. Raphael Schaad Maybe I’m just old. Yeah, contrast could be improved there a little bit. So these cards are interesting, right? This is cool. This is actually pretty good. This is probably something that would have been maybe too expensive to do, or only like the very best or like website designers would have kind of gotten to the lengths of doing something Like that. These hover animations for the cards. But AI is so simple to do. And this is actually like a pretty tasteful way of using leveraging. So like the powers of LLMs to build more compelling websites. Aaron Epstein Yeah. What’s cool about it is it feels like it helps establish the brand and it’s unique and it’s creative and it’s fun. And it’s actually trying to, you know, multiplayers like two controllers with lightning connecting them. And it actually helps reinforce the points that I think that they’re trying to make here. And this is a great example of, you know, where the line that was following you down the page didn’t add much value. This is, this would have been really hard to do. And now you kind of get it for free. (Time 0:04:11)
  • Design Hover Effects To Invite Clicks
    • Make hover effects invite clicks instead of hiding affordances.
    • Raphael recommends subtle pops or glows and notes browsers already show clickability via the pointer cursor, so don’t make items disappear on hover. Transcript: Raphael Schaad Of the things I want to try out is up here. So we here have the main navigation. One of the things that jumps out here is that as you hover you generally kind of want to make things pop but here it actually kind of disappears. So instead of inviting to click to talk to them it kind of like goes into the background. Same here it kind of fades out as you activate one of these menu points. This is something that I think a designer would almost never choose to do and now in the default of browsers also doesn’t work that way. And now LLN’s just somehow decided that that’s a good hover kind of like effect, but it makes no sense. Think (Time 0:05:46)
  • Don’t Hide Important Actions Behind Hover
    • Avoid hiding critical functionality behind hover; prefer visible, discoverable controls.
    • Raphael warns hover is fine for liveliness but not for revealing essential actions, especially since mobile lacks hover. Transcript: Raphael Schaad Make it sort of like clickable. Steve Jobs famously said, you know, he wanted to make things lickable with the Aqua interface back in the day. I think, you know, make things, you know, clickable, kind of like inviting to to click stick to sort of like pretty standard again kind of i think the hand indicates that something is Clickable and so i wouldn’t go much beyond that another thing that i see hover being used um is a lot to kind of like reveal additional information so not just kind of like a hover effect To make the ui more feel alive like hover is great to kind of make UIs feel more alive. Right. But I see it increasingly used to kind of like disclose additional critical information or functionality. And I don’t think that’s the best use for hover. This whole trend that maybe like kind of like macOS kind of started to over the years get more and more into kind of like very clean interfaces, get the functionality and the tools and The buttons all out of the way. So there’s all this space for content. (Time 0:07:03)
  • Rosebud AI Demo Was Fun But Ambiguous
    • Reviewing Rosebud AI, they enjoyed the playable in-browser demo but found unclear messaging and a mismatched purple-plus-red palette.
    • Aaron noted the site didn’t clarify whether the demo was built with the product, hurting immediate understanding. Transcript: Aaron Epstein Create games with AI. And once again, like you start to see the trend here, we’ve got the purple gradient again. We’ve got a very similar kind of pinkish purple accent color up here. And that’s why like in isolation with one of these, like it looks cool. It looks modern and everything. But you know, one after the other, they all start to kind of look the same and it takes away a lot of the core brand and originality and things like that, that I think most founders want for Their site. Raphael Schaad So let’s dig in here. This is the first time we’re looking at these live yep um so rosebud ai create games of ai and there’s a prompt to to prompt to game kind of interaction i would assume um that’s cool there’s Something you can instantly play yeah let’s try it whoa it’s like a 3d game in the browser. That’s cool. There’s a person walking around. Can I use the arrows? There we go. Oh, WASD. We have an old school gamer here. Old school. All right, you can jump. All right, let’s escape out of this. But cool, definitely kind of like engaging. I wonder whether this is actually their like product code running on the website here. I would assume that it is. Or this is like a vibe coded sandbox environment. Aaron Epstein Yeah, I would assume that this is the type of thing you can create with their product. But that’s an interesting point is that they don’t really tell us. It doesn’t say like play a game made with our product right now um it’s interesting is this following us yes yeah these are just anchors jumping vertically around yeah so what’s interesting Is i didn’t realize this at the time but when we went to that one we were just playing that was under modify games and so what i wonder is if this is a game that has already been created that Raphael Schaad We can modify in real time and that’s what they’re trying to show off rather than the creation part. Yeah. So maybe kind of like a thing to take away here is that using this non kind of like non-standard navigation is tripping us off a little bit on how to use this website. Another thing that kind of jumped out here at the top is like, I don’t think anyone would think of combining a red logo with purple as an accent color necessarily um it’s not necessarily Complimentary uh and uh and i guess whenever i see the use of emojis even though they’re not the system emojis i feel like it’s a little lazy and so i feel like llms kind of take the easy path Because they don’t have any ip really themselves they’re just like big models kind of cobbling things together. They use like these standard icons everywhere. And it’s just immediately kind of like a tell. Aaron Epstein Yeah, I think we could just use more context up here too. And, you know, the name of the company is here. (Time 0:09:22)
  • Scroll Hijacking Slows User Comprehension
    • Scroll-jacking and timed fade-ins routinely harm readability and discovery.
    • On Get Crux and others they found fade-ins, locked sections, and delayed content made pages feel like ‘molasses’ and obscured key information. Transcript: Aaron Epstein It was this automatic fade in. Oh, and another thing that I noticed is my scroll is hijacked here. Raphael Schaad Yeah, it’s maybe a little hard to see on screen, but there’s certainly some scroll jacking logic going on. And there’s also like a state where you see both the detached and the fixed header menu, like both at the same time, like right around here. So typically kind of like they should just smoothly, I like the sticky header, but it’s just like smoothly transition one to another. And here you see sort of like that, you know, there are clearly two distinct menus that just happen to kind to be the same. Aaron Epstein I’m sorry. I’m so distracted by the button that’s chasing me around the screen here. Yeah, I almost feel like it’s hard to get the button to click on it because it’s constantly moving. Raphael Schaad Does it make you want to talk to the founders more or less? Aaron Epstein It makes me distracted, I would say. I’m not paying attention to what they do. I’m just i’m like why is this button following me around um it definitely got my attention i would say um one of the other things that i noticed first too is almost these like meteors that Are you know shooting down from the angles you can kind of see them over there um that’s another kind of thing where like it doesn’t feel like it actually adds a lot of value to the product. And again, if you had to build that from scratch, it would never be worth your time. But it’s so easy to do it that people are like, yeah, let’s throw that in. It looks cool. But I actually find it a little distracting. I don’t think it adds value to the product here. Raphael Schaad And the hero screenshot here is, I guess, a poster image for a video. And it goes into what looks like a completely different video. Yeah, that was confusing. And the poster image is just very blurry here. I don’t know whether this is like an artifact of using AI or not, but just as a general design principle, I think all your assets should be high res, high quality. And this just looks like something very blurry. Yeah. Aaron Epstein And again, back on the button too, because I still see, even when we’re down here, it’s like still chasing us around. You know, this is another example of the type of thing that you would only do because it’s easy, but just because something is easy doesn’t mean it’s worth doing. There’s a lot of things that are now at your fingertips with AI that, you know, anything imaginable is possible. Just because something is possible doesn’t mean you should say yes to it. Raphael Schaad Here we’re kind of like hitting a little bit on just a lack of visual consistency. Like this looks like an entirely different visual language than anything we’ve sort of seen above. Aaron Epstein Where do you think that comes from? I wonder. Raphael Schaad Maybe different sections of the website being made by different parts of the tool. Maybe it’s also just kind of like a function of this here looking very different than the website content. Yeah, sometimes just like a clear image with a little bit of text maybe a headline and then some subtext um goes a long way yeah and i gotta say we’re like halfway down the page right now Aaron Epstein And um if you asked me what they did i would not be able to tell you let’s go back up to the top and remind ourselves ai creative strategist to make ads that work ads that okay so it’s something To make ads, it seems like. It’s interesting. They do kind of have like a visual style to it with a lot of these. It’s almost like a vertical motion blur or something on a color gradient that we see in some of these images, like these right here. And we saw the same thing in these here and these here and these here but it’s it’s constrained to some of these elements and it feels like you know it’s maybe a little overused here because It’s hard to read these and this feels like more like a rainbow rather than calling the attention to it but up here does not have that style at all which is maybe you know the point that you’re Making earlier and I could see something where the background here is more reflective of this type of style and then that might carry it through all the way through the rest of the page. Yeah. Let me quickly reload the page and try something. Raphael Schaad So we see all these sections kind of like fading in. And here again, it’s just like fading in. And one of the things that I noticed, I just don’t see the advantage of having these things not just right there as I scroll. Because scrolling already is the motion. Why does it have to also then fade in? And one of the things that you get is these weird, for example, here, right? We say, we’re here to answer all your questions. And then there’s one question. And we break here earlier. And I was like, wow, that’s a lame FAQ. Aaron Epstein If there’s only like one Q one a right um but then i was like aha it just hasn’t come in yet um and so not a fan of that pattern yeah what bothers me with the fade ins a lot of time and i’m not sure If this does it or not is when they’re on a timer sometimes i’m scrolling really quickly and I’ll get all the way past the section as it’s starting to fade in up at the top and I miss the content Altogether. (Time 0:13:35)
  • Be The Editor Of AI Output
    • Be the editor: don’t accept every AI suggestion uncritically.
    • Raphael urges founders to be opinionated about hierarchy, spacing, and button consistency instead of approving LM outputs wholesale. Transcript: Aaron Epstein Yeah, I think going through these, I keep coming back to the concept of like, it’s easy to do anything. You really have to be opinionated as the human that’s in the loop in designing these around what you think is the right thing, not just kind of saying yes, accept all changes. Yeah, you’re not the editor. Yes, yes. And another thing that I’m noticing happening here is this section on the right, it just keeps swapping around. If we watch this animation here for a second, this button over here, the big star kind of button, yeah, like moves around and now it’s a circle button. I think that’s a button. Yeah, I guess that’s clickable. And then it’s going to come back over to the left side and it’s going to be a big round rectangle kind of button. And so we have a lot of different button styles. I’m not sure why things are moving like this. Raphael Schaad And it’s very confusing. It’s actually not a button. Like, yes, it shows the hand, but that’s a head fake. Yeah, I guess it just moves to the next thing. It doesn’t really, well, I guess it’s kind of like a next button. Yeah. But then also on auto advance. Aaron Epstein Yeah, this is very confusing to me. I’m not sure what it’s showing. And I can’t tell what’s happening in this animation either. It seems to be some kind of workflow. Raphael Schaad Actually, you can just click anywhere and it advances. So it’s not even like this button or the whole thing is a click target. Yeah. Aaron Epstein This is again, one of those things where it’s hard for me to imagine a human just being like, let’s have three different style buttons that every time you click it, they all reorient and Shift. (Time 0:20:39)
  • Common LLM Patterns Make Sites Look Generic
    • Build Zero and other sites reused common LLM-generated patterns like bento boxes, fake dashboards, and purple gradients.
    • Raphael calls these patterns useful but non-original and warns they can erode brand credibility if overused. Transcript: Aaron Epstein So right off the bat, we got some purple gradients. Raphael Schaad Yeah, there we go again. And let’s see here. So the menu nicely morphs. Ooh, and then my pet peeve. Dumb hover effects. It just doesn’t add anything. This vertical movement is just distracting and not cool uh it pushes also there’s another thing where um because of the effect it kind of like horizontally shifts the whole menu which Kind of just seems like a bug um and then here’s another like effect um kind of like the arrow has to move somehow vertically why um the arrow at least should go to the right also. Yeah, it goes like backwards. This hover effect here, I don’t mind. You know, it’s like it’s a black and white button and then it turns into the primary brand color. In this case, kind of purple. Like that’s not a bad hover effect here. This here, pretty bad. Then what else do we got? We’ve got a little like interactive element here. Can click through it. Ooh. Okay. There seems to be some like bug with the selection here. Yeah. If this was hand coded, like no way someone would have not noticed it. I almost wonder like if you just one shot landing pages, do you actually go and really like use it with the same attention detail as you feel if had like built it from scratch. And then because you don’t, you just ship things that you wouldn’t have because you don’t even notice the little bugs that the LLM make. Go back to the engineers tab here. Aaron Epstein Now, if this is their product, one of the other things that stands out to me is this kind of dashboard um that’s got you know it’s got like the red green blue purple kind of call outs up here That’s one of the hallmark classic things that a lot of ai design tools will will actually create um yeah every fake dashboard looks basically like like something like they’ve got the Icons that are a darker version of the lighter background color. It’s usually like the Google colors. Raphael Schaad You know, it’s like red, yellow, green, blue. The Fisher Prize primary. Aaron Epstein Yep, yep, yep. So that we tend to see a lot. Ideas to working apps in minutes. Transformer Fisher. Raphael Schaad Yeah, and these kind of like bento boxes is not a bad pattern, but it’s also very non-original. And so this LLM’s oftentimes kind of come up with these, just like icon at the top and then a bit of text. And in this case, kind of like a three by two. That’s quite common. Yeah. We’ve got some quotes. Aaron Epstein We’ve got the purple gradient. We’ve got some frequently asked questions. And then more gradients. You know, we’re, I don’t know, a few into reviewing these now. And I think we just keep seeing a lot of these common patterns, which I think just highlights how ubiquitous they’ve become and how it almost takes away from the brand and originality That I think most of these companies want to create when it has elements that every other site and every other product has too. Raphael Schaad Yeah, look, I think the really cool thing about AI tools is that it kind of frees you from having to kind of like, you know, fiddle with like the technical details. So it can really work on the hard kind of questions of your offering of your product of your company, such as like, what are we making for whom? Why is this valuable to them? Right. And that’s the cool aspect. (Time 0:25:44)
  • Use AI To Focus On Strategy Not Defaults
    • Use AI to free time for higher-level decisions: messaging, product definition, and brand distinctiveness.
    • Raphael and Aaron recommend QAing outputs and feeding brand constraints (colors, voice) into tools to avoid generic results. Transcript: Raphael Schaad Yeah, I think definitely lots of purple gradients. And in general, kind of like a lot of kind of like the same patterns. You know, we see animations kind of like for animation sake, just because it’s possible now. I would have killed to have these kind of like AI superpowers when I built my first website. So I think it’s wonderful that we have them. But you are still kind of like responsible to outsource your thinking to LLMs and actually just use them as tools to get your brilliant ideas, designs, novel, maybe kind of like interactions Out on the web to dazzle your customers. And I think that’s what a landing page should do in the end. It’s kind of like a customer acquisition channel, right? This is not your product. This is not a website as in kind of like a cool thing on the web. There’s space for that as well. But these are like startup landing pages and they’re basically customer acquisition channels. So that’s how I would really use these tools. I totally agree with all of those. A couple others I would add. One, I think it’s really important that you QA everything. Aaron Epstein It’s very easy to create something, but we went through and we found some quirks or bugs or things like that here or there, things that were confusing. Ultimately, you know, you, the founder, you, the human need to be the one that goes through and make sure that, you know, the interactions and everything else work right. The other one is, you know, it’s important that your site and your brand, they come through as the thing that you want to represent your company and that originality and something that Feels different. And it’s very easy using the same tools that everybody else is using to end up in the same place. You have to be intentional about ending up in a different place. (Time 0:34:41)