HomeVideos

Common Mistakes With Vibe Coded Websites

Now Playing

Common Mistakes With Vibe Coded Websites

Transcript

1097 segments

0:00

It's easier than ever to design with AI

0:02

tools, but that doesn't mean you should

0:04

always accept all changes. [music] So

0:07

today, I'll be joined by Raphael Shod to

0:09

look at the good, the bad, and the ugly

0:12

of AI assisted design and sort through

0:14

how to use these superpowers to stand

0:17

out. Welcome to another design review.

0:27

All right. Today I am thrilled to be

0:28

joined by Raphael Shad, one of the

0:31

newest visiting partners here at YC. And

0:33

Raphael was the co-founder of Kron, a

0:36

modern calendar tool, which you sold to

0:38

Notion a while back and are also one of

0:42

the top designers that I know and have

0:44

worked with. So, uh, Rafael, it's an

0:46

honor to have you here and it's an honor

0:47

to work together now at YC. Yeah, super

0:49

fun to be now back in uh in in YC uh and

0:53

helping founders, next generation of

0:55

founders build iconic companies.

0:56

>> Well, um you're the perfect person to

0:58

have on here because uh the topic that

1:00

we're going to be talking about today is

1:02

AI design trends. On the negative end,

1:04

there's the AI design slop and on the

1:06

positive end, there's a lot of AI uh

1:08

design trends that that now are easier

1:11

to build for anybody even if they're not

1:13

a designer. So, what are some of the

1:15

common things that you've seen recently?

1:17

a lot of the AI top AI design trends

1:19

that are standing out that that you'd

1:21

want to call out for the audience before

1:22

we jump into some sites.

1:23

>> Yeah, sure. Um, this all kind of started

1:25

when I had like a late night thought and

1:27

tweeted that I see a lot of dumb hover

1:30

effects on landing pages of startups

1:32

these days presumably white coded. And

1:34

so I was kind of like curious to peel

1:36

the the the layer back there. It's like

1:38

how did these like what I thought were

1:40

dumb effects um how did they make it

1:42

into LLMs and why are they everywhere?

1:44

Now, a couple other trends that we then

1:46

identified was kind of like purple

1:47

gradients and all of a sudden all

1:49

startup websites um had purple gradients

1:51

everywhere or these sections that can

1:53

like fade as you go in as you scroll and

1:56

they fade in and fade out.

1:57

>> Yeah. And it's not so much that those

1:59

inherently are bad. It's not purple

2:01

gradients are bad. Nobody should ever

2:02

use them. It's that now they're just so

2:05

ubiquitous everywhere that they kind of

2:08

uh lose all meaning and specialness and

2:10

originality.

2:11

>> Totally. And one of the key things was

2:13

when there was a good website kind of

2:15

establishing a trend, it took a while um

2:17

in the old world uh for others to kind

2:19

of like copy these trends. But now with

2:21

LLMs, if there's a good website with a

2:23

purple gradient, it makes it into the

2:25

LLM because the LLM gets trained on like

2:27

the good examples that get linked to a

2:29

lot. Um and then all of a sudden, like

2:30

the next week, all the startup websites

2:32

look the same.

2:33

>> Yes. And so this is both good and bad if

2:37

this power is used in the right ways.

2:40

So, we've got a bunch of YC companies

2:42

that have submitted their websites that

2:44

were all built with AI coding tools. So,

2:46

this should give us good grounds to

2:48

figure out uh ways that they have been

2:50

used really, really well and things that

2:52

we would do differently if we were

2:54

designing it ourselves. So, let's uh

2:56

let's dive into some of those.

2:57

>> Let's have a look.

2:57

>> All right. Okay. First up, we've got

2:59

new.ai.

3:01

Solve your game testing with AI agents.

3:04

Save countless hours of manual game QA

3:06

by using AI agents performing end-to-end

3:08

tests at scale.

3:10

>> Purple gradients.

3:11

>> The first thing that jumps out. It's a

3:12

very purple site. Um, which, you know,

3:14

we were just talking about that's one of

3:16

the most common things that you see. So,

3:18

it's interesting like prelooked

3:21

at this and gone like, "Wow, this looks

3:22

really nice." And now I look at it and

3:24

I'm like, "They used AI to design this."

3:27

Maybe they didn't, but like that's what

3:29

it screams to me. Okay. So, one thing

3:30

that's interesting is we as you start

3:32

scrolling here, we've got this line

3:34

that's following us up and down. Um, and

3:37

it's interesting because I actually find

3:39

this this line to be a little

3:40

distracting. Um, I'm paying more

3:42

attention to the line than I am the the

3:44

things that I think that it wants me to

3:46

pay attention to.

3:47

>> It's it's almost like something that

3:49

it's kind of like probably hard to

3:50

implement for a human. And you would

3:52

have never thought to actually code this

3:55

up um before AI. Um, and just because we

3:59

now can, just because LM are kind of

4:01

good at these type of like SVG, you

4:03

know, buildups or transforms, doesn't

4:05

mean that it's actually a good design

4:06

and helps you convert potential, you

4:08

know, visitors into into customers,

4:10

basically.

4:11

>> Yeah. Yeah. I don't know anybody that's

4:13

like, we need a line that goes through

4:14

here. Let's start coding that from

4:16

scratch. Like, you would only implement

4:17

something like this because it was so

4:19

easy to do.

4:20

>> Um, but I don't think it actually adds

4:22

value. If anything, I think it distracts

4:23

from the rest of the page. Um,

4:26

I I can't recall anything from these

4:30

sections based on this. Um, okay. So,

4:33

now we're down to everything in one

4:35

place. You I find this hard to read.

4:38

It's uh it's it's very light. Um, maybe

4:41

I'm just old. Um,

4:42

>> yep. Contrast could be improved there a

4:45

little bit. So, these cards are

4:46

interesting, right? Where

4:46

>> this is cool.

4:47

>> Um, this is actually pretty good. Uh

4:49

this is uh probably something that would

4:51

have been maybe too expensive to do or

4:53

only like the very best or like website

4:54

designers would have kind of got gotten

4:56

to the lengths of of doing something

4:58

like that these hover animations for the

4:59

cards. But AI is so simple to do and

5:02

this is actually like a pretty tasteful

5:04

um way of using leveraging so like the

5:07

powers of LLM uh to to build more

5:09

compelling websites.

5:10

>> Yeah. What's cool about it is it feels

5:12

like it helps establish the brand and

5:16

it's unique and it's creative and it's

5:18

fun. Um, and it it's actually trying to,

5:22

you know, multiplayer like two

5:23

controllers with lightning connecting

5:25

them. Um, and it actually helps

5:27

reinforce the points that I think that

5:29

they're trying to make here. Um, and

5:31

this is a great example of, you know,

5:32

where the line that was following you

5:34

down the page didn't add much value.

5:36

This is this would have been really hard

5:38

to do. And now, um, you kind of get it

5:40

for free.

5:42

>> Um, you don't have to go from scratch

5:44

building a lot of this stuff.

5:46

>> One of the things I want to try out is,

5:47

um, up here. Um, so we here have the

5:51

main navigation. One of the things that

5:53

jumps out here is that as you hover, you

5:55

generally kind of want to make things

5:56

pop, but here it actually kind of

5:59

disappears. So instead of inviting to

6:01

click to talk to them, um, it kind of

6:03

like goes into the background. Same

6:05

here. it kind of fades out as you

6:06

activate one of these menu points. Um,

6:09

this is something that I think a

6:10

designer would almost never choose to

6:12

do. And now uh and the default of

6:14

browsers also doesn't work that way. And

6:16

now lens just somehow decided that

6:18

that's a good uh hover kind of like

6:20

effect. Um, but it makes no sense. Um,

6:24

think about it that way. Like the

6:25

browser already has like a built-in

6:27

hover effect for free even without CSS.

6:29

It turns the cursor into a hand, right?

6:31

So that already indicates like I can

6:33

click here. So just leaving it white in

6:35

this case or just kind of like the the

6:37

bright purple and then having the hand

6:39

already tells me like I can click on

6:40

this thing. So if you want to add a CSS

6:43

effect then you know make it maybe like

6:45

a little pop. Maybe make it like one

6:47

shade lighter um or more active or add

6:49

like a little you know a little uh um

6:51

glow around it but don't make it go

6:53

away.

6:54

>> Yeah. Do you have any rules of thumb

6:56

when you know you're designing something

6:58

and you're trying to come up with hover

6:59

effects? Like what are your goals when

7:01

you were trying to come up with the

7:02

right hover?

7:03

>> Yeah, make it sort of like clickable. Um

7:05

Steve Jobs famously said you know he

7:06

wanted to make things lickable with the

7:08

Aqua interface back in the day. I think

7:10

you know make things you know clickable

7:11

kind of like inviting to to click stick

7:14

to sort of like pretty standard again

7:16

kind of I think the hand indicates that

7:17

something is clickable and so I wouldn't

7:19

go much beyond that. Another thing that

7:21

I see hover being used um is a lot to

7:24

kind of like reveal additional

7:25

information. So, not just kind of like a

7:27

hover effect to make the UI more feel

7:29

alive. Like hover is great to kind of

7:31

make UIs feel more alive, right? Um, but

7:34

I see it increasingly used to kind of

7:36

like uh disclose additional critical

7:38

information or functionality. And I

7:40

don't think that's the best use for

7:41

hover. This whole trend uh that maybe

7:43

like kind of like Mac OS kind of started

7:45

to over the years get more and more into

7:47

kind of like very clean interfaces, get

7:49

the functionality and the tools and the

7:50

buttons all out of the way so there's

7:52

all this space for content. I don't want

7:54

to have my computer to be just like all

7:56

content. I actually want it to be, you

7:58

know, a bicycle for the mind, the tool.

8:00

Uh, and so, um, revealing additional

8:03

functionality only on hover and you have

8:05

to go hunt for what the tool can

8:07

actually do, I think is kind of like an

8:09

anti-attern.

8:10

>> Yeah. Not to mention that, you know,

8:11

there isn't a concept of hover on mobile

8:13

as well. So,

8:14

>> and long press, which is kind of the

8:16

equivalent of of hover, um, uh, never

8:19

really catch caught on on mobile

8:21

>> probably because it's so hard to

8:22

discover. Yeah. You you don't want to

8:24

sit there long pressing all the time to

8:26

try to figure out if there is any

8:27

additional

8:28

>> think of a desktop desktop interface a

8:30

tool where you have to hover around

8:31

everywhere to discover where this stuff

8:33

actually lives. You know the disclosure

8:35

arrows or like hiding something or

8:37

getting to a dot dot dot kind of menu to

8:39

get to extra functionality. If that's

8:41

all hidden behind hover then, you know,

8:42

you're just not as efficiently

8:44

communicating the functionality of your

8:45

software.

8:46

>> Yeah. Overall, I think this is um a very

8:49

nicely designed site. I think it's

8:50

easier than ever using AI design tools

8:53

and LMS to get a professional looking

8:56

site. There's almost no excuse for not

8:57

having it now. Yeah. And especially as

8:59

we're reviewing YC applications, if you

9:02

look at a demo and that demo uh does not

9:05

have a base level of quality design, it

9:08

seems like the person just didn't even

9:09

try

9:10

>> because it's so easy to do it now. So,

9:12

Noo-Noo, um really cool site and uh some

9:15

some really interesting uh applications

9:17

of using AI here. So, well done. All

9:19

right, next up we got Rosebud AI. Create

9:22

games with AI. And and once again, like

9:24

you start to see the trend here. We've

9:26

got the purple gradient again. We've got

9:28

a very similar um kind of pinkish purple

9:30

accent color up here. Um and that's why

9:33

like in isolation with one of these,

9:35

like it looks cool, it looks modern,

9:37

everything, but you know, one after the

9:39

other, they all start to kind of look

9:40

the same, and it takes away a lot of the

9:43

core brand and originality and things

9:45

like that that I think most founders

9:46

want for their site.

9:47

>> So, let's dig in here. This is the first

9:49

time we're looking at these live.

9:51

>> Yeah.

9:51

>> Um, so rose by AI, create games of AI.

9:55

And there's a prompt to to to prompt to

9:58

game kind of interaction, I would

10:00

assume.

10:01

>> Um,

10:02

>> that's cool. There's something you can

10:03

instantly play.

10:04

>> Yeah,

10:06

>> let's try it.

10:06

>> Whoa. It's like a 3D game in the

10:09

browser. That's cool.

10:10

>> There's person walking around.

10:13

>> Can I use the arrows?

10:16

>> There we go. Oh, wd. We have a old

10:20

school game here. [laughter]

10:24

>> You can jump.

10:25

>> All right, let's uh escape out of this.

10:28

Um, but cool. Definitely kind of like

10:30

engaging. Um, I wonder whether this is

10:33

actually their like product code running

10:35

on the website here or this is like

10:38

bitecoded

10:39

>> sandbox environment. Um,

10:41

>> yeah, I would assume that this is the

10:42

type of thing you can create with their

10:43

product. But um that's an interesting

10:45

point is that they don't really tell us,

10:47

>> you know, it doesn't say like play a

10:49

game made with our product right now. Um

10:52

it's interesting. Is this following us?

10:54

This top bar.

10:54

>> Yeah. These are just anchors jumping

10:56

vertically around.

10:57

>> Yeah. So what's interesting is I didn't

10:59

realize this at the time, but when we

11:00

went to that one we were just playing

11:02

that was under modify games. And so what

11:05

I wonder is if this is a game that has

11:08

already been created that we can modify

11:10

in real time and that's what they're

11:12

trying to show off rather than the

11:13

creation part.

11:14

>> Yeah. So maybe kind of like a thing to

11:16

take away here is that using this non

11:18

kind of like non-standard navigation um

11:21

is tripping us off a little bit um on

11:24

how to use this website. Another thing

11:26

that kind of jumped out here at the top

11:28

is like I don't think anyone would think

11:30

of combining a red logo with purple as

11:33

an accent color necessarily. Um it's not

11:37

necessarily complimentary. Uh and uh and

11:40

I guess whenever I see the use of

11:42

emojis, even though they're not the

11:43

system emojis, I feel like it's a little

11:46

lazy. And so I feel like LLMs kind of

11:48

take the easy path because they don't

11:50

have any IP really themselves. They're

11:52

just like big models kind of cobbling

11:54

things together. They use like these

11:56

standard icons everywhere and it's just

11:58

immediately kind of like a tell.

11:59

>> Yeah, I think we could just use more

12:01

context up here too. And and you know

12:03

the the name of the company is is here.

12:06

It looks like it's almost part of the

12:08

headline rather than I would expect it

12:10

to be up here by the logo.

12:11

>> Yeah. And then the value prop kind of

12:13

being more clear. Um you know uh uh

12:16

create games with AI something

12:17

something. So it's kind of like what's

12:18

important for the H1 is typically kind

12:21

of you know what is it? Who is it for?

12:24

and to what end? Why should that person

12:26

that it's for care? Um, and if those

12:29

three things plus a call to action um

12:32

are not kind of above the fault, then

12:34

it's a harder time to convert uh convert

12:36

visitors.

12:37

>> Yeah. Um okay, we've got some I guess

12:40

examples of games. Yep. So games created

12:43

with Rosebud AI. Um okay, this is

12:46

interest. So there's another effect

12:47

here. You can see the light following my

12:49

cursor um around the edges. And yeah,

12:52

this is the kind of thing where, you

12:53

know, you're like, "Hey, it costs

12:55

nothing to do this." Then maybe you're

12:57

like, "Yeah, sure. Let's throw it in.

12:58

It's fun and it's playful." Um, but if

13:00

you had to spend a week coding this and,

13:02

you know, getting it to work, right?

13:04

You'd be like, "That's not worth it."

13:05

Okay. So, we've got a lot of a lot of

13:07

game examples. And it looks like maybe

13:08

this is just the rest of the site here.

13:10

Okay. And then we hit a footer. There's

13:11

a

13:12

>> like remixing.

13:13

>> Oh, yeah. Okay.

13:15

>> Some some of the some of the um projects

13:17

you can remix and then it kind of puts

13:19

up the conversion wall. Okay. Um, that

13:23

would go beyond like landing page.

13:25

>> Very cool. Awesome. Well done, Rosebud.

13:28

Okay. So, next up we've got Get Crux.

13:31

And one of the first things that I

13:32

noticed here was kind of the fade in. It

13:35

was this automatic fade in. Um. Oh, and

13:38

another thing that I noticed is my

13:39

scroll is hijacked here.

13:41

>> Yeah, it's maybe a little hard to um to

13:43

see on screen. Uh, but there's certainly

13:46

some scroll jacking logic going on. Um,

13:50

and there's also like a state where you

13:52

see both the detached and the fixed uh

13:55

header menu all like both at the same

13:57

time like right right around here. Yeah.

13:59

Um, so typically kind of like they

14:00

should just smoothly I like the sticky

14:03

header. Um, but it's just like smoothly

14:04

transition one to another and here you

14:06

see sort of like that you know they're

14:07

clearly two distinct menus that just

14:10

happen to kind of be the same.

14:12

>> I'm sorry I'm so distracted by the

14:14

button that's chasing me [laughter]

14:16

around the screen here. Um,

14:20

yeah. There's I almost feel like it's

14:22

hard to get the button to click on it

14:23

because it's constantly moving.

14:25

>> Does it make you want to talk to the

14:26

founders more or less?

14:28

>> It makes me distracted. I would say I'm

14:31

not paying attention to what they do.

14:32

I'm just uh I'm like, why is this button

14:35

following me around? Um, it definitely

14:37

got my attention, I would say. Um, one

14:40

of the other things that I noticed first

14:41

too is is almost these like meteors that

14:44

are, you know, shooting down from the

14:46

angles. cuz you can kind of see him over

14:47

there.

14:48

>> Um, that's another kind of thing where

14:50

like it doesn't feel like it actually

14:52

adds a lot of value to the product. And

14:54

again, if you had to build that from

14:56

scratch, like it would never be worth

14:57

your time. Um, but you it's so easy to

15:00

do it that people are like, "Yeah, let's

15:01

throw that in. It looks cool." Um, but I

15:03

actually find it a little distracting.

15:05

Um, I don't think it adds value to the

15:07

the product here.

15:08

>> Then the hero screenshot here is um I

15:11

guess a poster image for a video. Um

15:14

uh and it goes into what looks like a

15:17

completely different video. Yeah, that

15:18

was confusing.

15:18

>> And the poster image is just very blurry

15:21

here. Um I don't know whether this is

15:22

like an artifact of like uh using using

15:24

AI or not. Um uh but just as a general

15:27

design principle, I think all all your

15:29

assets should be, you know, high-res,

15:31

high quality. Um and this just looks

15:33

like something very blur blurry.

15:35

>> Yeah. And again, back on the button,

15:36

too, because I still see even when we're

15:38

down here, it's like still chasing us

15:39

around. You know, this is another

15:41

example of the type of thing that you

15:43

would only do because it's easy. But

15:46

just because something is easy doesn't

15:48

mean it's worth doing. There's a lot of

15:50

things that are now at your fingertips

15:51

with AI that, you know, anything

15:53

imaginable is possible. Just because

15:55

something is possible doesn't mean you

15:57

should say yes to it. Here we're kind of

15:58

like hitting a little bit on on just a

16:00

lack of visual uh consistency. Like this

16:04

looks like an entirely different visual

16:06

language than anything we've sort of

16:08

seen seen above. Um,

16:10

>> where do you think that comes from?

16:12

>> Yeah, I wonder. Um, maybe different

16:15

sections of the website being made by

16:19

like different parts of the tool. Um,

16:21

maybe it's also just kind of like a

16:23

function of like this here looking very

16:24

different um than like the website

16:27

content. Yeah. Sometimes just like a

16:29

clear image with a little bit of text,

16:32

maybe a headline and then some subtext

16:34

um goes a long way.

16:35

>> Yeah.

16:37

And I gotta say, we're like halfway down

16:38

the page right now. And um if you asked

16:40

me what they did, I would not be able to

16:42

tell you. Let's go back up to the top

16:44

and re remind ourselves. AI creative

16:47

strategist to make ads that work. Ads

16:50

that. Okay. So, it's something to make

16:52

ads. It seems like

16:53

>> it's interesting. They they do kind of

16:55

have like a visual um like style to it

16:59

with a lot of these uh it's almost like

17:01

a a vertical motion blur or something on

17:03

a color gradient that we see in some of

17:05

these images. um like these right here

17:08

and we saw the same thing in these here

17:10

and these here um and these here. Um but

17:14

it's it's constrained to some of these

17:16

elements and it feels like you know it's

17:17

maybe a little overused here because

17:19

it's hard to read these and this feels

17:20

like more like a rainbow rather than

17:22

calling the attention to it. But up here

17:25

does not have that style at all, which

17:27

was maybe, you know, the point that you

17:28

were making earlier. And I could see

17:29

something where the background here is

17:31

more reflective of this type of style.

17:33

And then that might carry it through all

17:35

the way through the rest of the page.

17:36

>> Yeah, let me quickly reload the page and

17:38

try something. So, we see all these

17:41

sections kind of like fading in. Um, and

17:43

here again, it's just like fading in.

17:47

And one of the things that I noticed, I

17:49

just don't see the advantage of having

17:52

these things not just right there as I

17:54

scroll because scrolling already like is

17:56

the motion. Why does it have to like

17:57

also then can like fade in? Um, and one

18:00

of the things that you get is these

18:02

weird um, for example here, right? We

18:04

say we're here to answer all your

18:06

questions and then there's one question

18:08

and we we we break here earlier and I

18:10

was like, wow, that's a lame FAQ if

18:12

there's only like one Q and one A,

18:15

right? Um, but then I was like, "Aha, it

18:18

just hasn't come in yet." Um, and so not

18:22

a fan of that pattern.

18:23

>> Yeah. What bothers me with the fadeins a

18:25

lot of time, and I'm not sure if this

18:27

does it or not, is when they're on a a

18:29

timer, sometimes I'm scrolling really

18:31

quickly and I'll get all the way past

18:33

the section as it's starting to fade in

18:36

up at the top and I miss the content

18:37

altogether. So, I'm curious to try that

18:40

here. Um, and see how they did this. So

18:42

like if I'm just kind of zooming down um

18:45

so these seem to fade in

18:48

um at least when it's at the bottom of

18:50

the page um

18:51

>> but it still feels like going through

18:52

molasses because it's all scroll checked

18:55

like hijacking the sort of like actual

18:58

native browser scrolling um to do some

19:00

fancy thing with JavaScript to actually

19:02

have the hooks to do all these

19:03

animations.

19:04

>> Yeah.

19:05

>> All right.

19:06

>> Super interesting. Very creative. Uh so

19:09

well done get crux. Okay. Okay, next we

19:12

got Sphinx, your last compliance hire.

19:15

All right, we've got some animation

19:17

thing going on here. Um, I think one of

19:19

the trends that we've seen so far is

19:21

just like way more animation these days

19:24

than there were, you know, three years

19:25

ago probably because these AI design

19:28

tools make it so easy to do this.

19:29

>> Yeah, let's quickly talk about hierarchy

19:31

here. Um, so we start with um a logo

19:34

type, kind of a stylized version of the

19:36

name of the company, Sphinx, right?

19:38

That's cool. Top left, pretty standard.

19:40

But then we have the H1 is also good and

19:44

the subtext. But also we have like this

19:47

kind of like weird in between like

19:50

fourth style, right? Um not something

19:53

that I typically ever saw designers or

19:56

engineers kind of come up with their own

19:58

landing pages. is only something kind of

20:00

like these many many styles mixed is

20:02

something that I increasingly see kind

20:04

of LLM do because like somehow the LLM

20:06

thought it's clever to have like an

20:08

extra label here in an extra style meets

20:10

thinks but we already have the company

20:13

name we already have you know three

20:15

different styles basically if you count

20:17

count this here it's like four styles

20:19

this just adds a fifth um complicating

20:21

the hierarchy not really adding it adds

20:23

a bunch of vertical space like we could

20:25

just like move the H1 a little bit up

20:26

and then you know that value didn't

20:28

trust it um logos would already be like

20:30

a little higher. Um so this is something

20:32

that I increasingly see kind of like

20:33

LLM's dream up that just isn't really

20:35

tight information hierarchy and graphic

20:39

design.

20:39

>> Yeah, I I think I going through these I

20:41

I keep coming back to the concept of

20:43

like it's easy to do anything. You

20:46

really have to be um opinionated as the

20:50

human that's in the loop in designing

20:51

these around what you think is the right

20:54

thing. Not just kind of saying yes,

20:55

accept all changes.

20:56

>> Yeah. You're now the editor suggestion.

20:58

Yes. Yes. And and another thing that I'm

21:00

noticing happening here is this section

21:02

on the right, it just keeps swapping

21:05

around. Um if we watch this animation

21:08

here for a second, this button over

21:10

here, the big star kind of button. Uh

21:13

yeah, like moves around and and now it's

21:15

a circle button. I think that's a

21:17

button. Yeah, I guess that's clickable.

21:19

Um and then it's going to come back over

21:21

to the left side and it's going to be a

21:23

big round rectangle kind of button. And

21:25

so we have a lot of different button

21:26

styles. I'm not sure why things are

21:28

moving like this. Um, and it's very

21:30

confusing.

21:31

>> It's actually not a button. Like, yes,

21:32

it shows the hand, but that's a head

21:34

fake.

21:35

>> Yeah, I guess if you click it, it

21:37

doesn't really Well, I guess it's kind

21:38

of like a next button,

21:40

>> but then also on auto advance.

21:42

>> Yeah, this is very confusing to me. I'm

21:43

not sure what it's showing. And And I

21:45

can't tell what's happening in this

21:46

animation either. It seems to be some

21:48

kind of workflow.

21:49

>> Um,

21:50

>> actually, you can just click anywhere

21:51

and it it it advances. So, it's not even

21:53

like this button or the whole thing is a

21:56

click target.

21:56

>> Yeah.

21:57

>> This is again one of those things where

21:59

it's hard for me to imagine a human just

22:00

being like, "Let's have three different

22:03

style buttons that every time you click

22:04

it, they all reorient and shift and you

22:07

know, it's it feels like the type of

22:09

thing that uh an AI design tool would

22:11

have suggested and you would have said,

22:12

"Sure, that seems cool."

22:13

>> Yeah, it feels like the visual

22:15

manifestation of LM hallucinations.

22:18

[laughter]

22:19

Um, let's go a look at the menu here.

22:21

Um,

22:23

all right.

22:25

Pretty standard stuff. I never like when

22:27

like the menus can like go go away like

22:29

in between. Yeah.

22:30

>> Like there's the gap and then sometimes

22:32

goes away.

22:32

>> What's happening on the right side of a

22:34

couple of those? There were two of those

22:35

and there's there's kind of a grid on

22:37

the right. Yeah. With an icon.

22:39

>> Is that interactive or anything or is

22:41

that

22:42

>> Nope. It's just something the LM thought

22:44

was cute.

22:45

>> How about if you hover over on Yeah.

22:46

Okay. So, it's just giving a different

22:48

icon.

22:48

>> Icon. Now, the icons are actually kind

22:50

of cute. Um, this seems somewhat

22:54

original and on brand here. Um, I would

22:57

just never thought to to do this little

22:59

little uh like if if you want to make a

23:01

point that on board is like four circles

23:05

in the square arranged in that way. Like

23:07

if that was important, which it doesn't

23:09

seem like it, like you probably just put

23:11

the icon here kind of back to the like

23:13

why reveal stuff as you hover that is

23:15

essential, but it's probably

23:16

non-essential. So, I can probably just

23:17

like leave it out.

23:21

What happens when we go further down?

23:24

Valued and trusted by. Okay, we got a

23:27

bunch of lines going everywhere.

23:31

>> All right, so we've got that line

23:32

following you down the page pattern

23:34

again.

23:34

>> And now we're scroll jacked. We're

23:35

locked into this uh position here of the

23:39

website in order to build up this

23:41

animation.

23:42

>> Mhm.

23:42

>> Um and I wonder

23:45

what it wants to tell me. like why is it

23:47

important to capture me here on this

23:48

point to like build out this animation

23:51

versus it's just like showing it already

23:53

built in the in the built out state

23:55

>> and I find the animation is getting all

23:57

of my attention rather than what it says

23:59

all the way over here on the left side

24:01

so I'm not even noticing any of this and

24:04

this is not on the right side it's not

24:05

giving me enough visual information to

24:07

communicate something valuable about

24:09

what they do or how the product works so

24:11

I just kind of miss everything over here

24:13

on the side the animation is too

24:15

distracting Yeah.

24:20

>> Outcomes.

24:20

>> It's also with these with these landing

24:22

pages that kind of like build up and

24:24

then keep you in a in a section for a

24:26

little while. It's really hard to know

24:27

when you're like how far into the book

24:30

you you have read. Yeah.

24:31

>> Right. Like if you have a physical book,

24:33

you're kind of like, oh, halfway

24:34

through. here. It's kind of like I don't

24:36

know, maybe it feels like we're halfway

24:38

through, but maybe, you know, it's gonna

24:40

keep me for another 15 seconds on some

24:42

some like really rich buildout um of a

24:45

of a landing page. So, the scroll

24:47

indicator um uh is is a really important

24:51

tool, I think, kind of like to get a a

24:53

grasp on sort of like the you know, the

24:56

landing page. And here it's it's um it's

24:58

completely failing me kind of like where

25:00

am I in the website?

25:02

>> All right. Overall, like visually, I I

25:04

think it looks nice. Um, it looks

25:06

modern. There's a theme that they're,

25:08

you know, you've got the orange accent

25:10

color. You've got the black as kind of

25:12

your primary brand color. Um, you've got

25:15

the line that's kind of following you

25:16

down. And, and my hunch is that that is,

25:19

uh, sort of reproducing what the product

25:21

looks like because we keep seeing all

25:22

these workflows with orange lines in the

25:24

product itself. And I think that's what

25:26

they're trying to communicate here. Um,

25:28

and so, you know, that makes sense to

25:30

me. their headline up at the top. I

25:33

think uh does a great job of explaining

25:34

what it is and who it's for. Um so I

25:36

think they really nailed that. Awesome.

25:38

Sphinx, great work. Next up, we got

25:40

build zero. Let's take a look here. Uh

25:42

build custom internal apps with AI. Um

25:46

so right off the bat, we got some purple

25:47

gradients.

25:48

>> Yeah, there there we go again. Um and uh

25:51

let's see here. So the menu nicely

25:53

morphs. Oo, and then my pet peeve um

25:57

dumb hover effects. Um just doesn't add

26:00

anything. this vertical movement is just

26:02

distracting and not cool. Uh it pushes

26:06

also there's another thing where um

26:08

because of the effect it kind of like

26:11

>> horizontally shifts the whole menu which

26:13

kind of just seems like a bug. Um and

26:15

then here's another like effect um kind

26:17

of like the arrow has to move somehow

26:21

vertically. Why? Um

26:23

>> the arrow at least should go to the

26:24

right also. It feels like when you're

26:25

hovering

26:26

>> it goes like backwards. Um this hover

26:28

effect here I don't mind. You know, it's

26:29

like it's a black and white button and

26:31

then it turns into the primary brand

26:33

color. In this case, kind of purple.

26:35

Like that's not a bad hover effect here.

26:37

This here pretty bad.

26:38

>> Um then what else have we got? Uh we got

26:42

a little like interactive element here.

26:44

Can click through it. Ooh.

26:46

>> Okay. There seems to be some like bug

26:47

with the selection here. Yeah.

26:49

>> Um if this was handcoded, like no way

26:53

someone would have not noticed it. I

26:54

almost wonder like if you just oneshot

26:56

landing pages um do you actually go and

26:59

really like use it with the same

27:02

attention detail as you feel if you had

27:04

like built it um from scratch and then

27:07

because you don't um you just ship uh

27:10

things that are that you wouldn't have

27:12

um because you don't even notice the the

27:14

little bugs that the LLM made.

27:16

>> Um go back to the engineers tab here.

27:19

Now, if this is their product, one of

27:21

the other things that stands out to me

27:22

is this kind of dashboard. Um, that's

27:25

got, you know, it's got like the red,

27:28

green, blue, purple kind of callouts up

27:31

here. That's one of the hallmark classic

27:33

things that a lot of, uh, AI design

27:35

tools will will actually create. Um,

27:38

>> yeah, every fake dashboard looks

27:40

basically like like something like that.

27:42

>> They've got the icons that are a darker

27:44

version of the lighter background color.

27:46

Um it's it's usually like the Google

27:48

colors, you know, it's like red, yellow,

27:51

green, blue prize primary.

27:54

>> Yep. Yep. So that that that we tend to

27:56

see a lot. Um ideas to working apps in

28:00

minutes transform.

28:01

>> Yeah. And these like kind of like bento

28:03

bento boxes um is is not a bad pattern.

28:07

Um but it's also very non-original. Um

28:10

and so this LMS often times kind of come

28:13

up with these just like icon at the top.

28:15

Uh and then a bit of text and you know u

28:18

in this case kind of like a 3x two um

28:21

that that's yeah quite common.

28:24

>> Yeah.

28:25

>> Uh we've got some quotes. We got the

28:28

purple gradient.

28:30

We've got some frequently asked

28:31

questions

28:33

and then more gradients.

28:34

>> Yeah. you know, we're I don't know, a

28:37

few into reviewing these now and and I

28:39

think we just keep seeing a lot of these

28:41

common patterns. Um, which I think just

28:43

highlights how ubiquitous they've become

28:45

and how um it it almost like takes away

28:48

from the brand and originality that I

28:51

think most of these companies want to

28:52

create.

28:53

>> Um, when it it has elements that every

28:55

other site and every other product has

28:57

too.

28:58

>> Yeah. Look, I think the really cool

28:59

thing about AI tools is that it kind of

29:02

frees you from having to kind of like,

29:05

you know,

29:06

fiddle with like the technical details

29:08

so it can really work on the hard hard

29:10

kind of questions of your offering, of

29:12

your product, of your company such as

29:13

like what are we making for whom, why is

29:16

this valuable to them, right? And that's

29:18

the cool aspect. But if you then can

29:20

like just use it um to create uh what we

29:23

sometimes call like AI AI slop, I think

29:26

this idea of having sort of like you

29:27

know all this power that you should use

29:29

responsively um gets a little bit

29:32

wasted. And so that's the fine line to

29:34

walk I feel for for builders in 2026.

29:36

>> Yeah, there's there's nothing inherently

29:38

bad about this. You know, it's just that

29:40

we've been through a few and we've seen

29:42

this before. You know, that that's kind

29:43

of what it feels like is I've seen this

29:44

before. And for any anybody else in the

29:47

audience, like you lose a little bit of

29:49

credibility, I think, you know, when

29:50

your customers are are viewing your

29:52

product and they're saying like, "H,

29:54

this looks like a bunch of other things

29:55

I've seen. They probably just use AI to

29:57

build this and design it." If that's the

29:59

case, like how good is the actual

30:01

product, you know? Um, or are they vibe

30:03

coding that too?

30:04

>> Use AI to build this by any means. Um

30:06

but just kind of like you know really

30:08

then evaluate the output and uh use AI

30:11

to make it even better and more original

30:13

and spend the time that you saved

30:15

oneshotting it or whatever um to then

30:18

really think about your messaging and um

30:20

and you know designing a wonderful

30:22

product that you can then showcase etc.

30:24

>> Yep. That's great advice. Awesome. Build

30:25

zero. Thank you.

30:26

>> Thank you.

30:27

>> All right. Next up we got Zarna AI

30:29

associates for private capital markets.

30:32

Oh we're scrolljacked again.

30:36

Oh yeah,

30:38

>> it's 10x everything. All the things.

30:40

>> Unlocked irr

30:43

this this site. Yeah, it feels like I'm

30:44

in molasses. It just feels so clunky to

30:47

use. Not to mention there just isn't a

30:49

lot of like information. Um I feel like

30:52

I have like even this is deal volume 10x

30:55

like uh

30:57

>> this all everything 10x just feels made

30:59

up. Um and it feels like there's just so

31:01

much space. It feels like I have to

31:03

scroll through this molasses forever to

31:05

get to anything that helps me understand

31:06

what this is.

31:07

>> Yeah. One of the things I personally

31:08

like, if we go to the top, um, right now

31:11

the, uh, sort of background here uses

31:14

100% of the vertical space.

31:16

>> Um, which kind of like almost like vis

31:18

visually kind of locks me in and then

31:20

there's like nothing more.

31:22

>> Um, and I hate when when people can like

31:25

put like scroll down to see more because

31:27

like of course we're on a website. Of

31:28

course I know how to scroll down. So,

31:30

one of the things that I personally kind

31:31

of like um to interrupt the visual um a

31:34

little bit is kind of like to start a

31:36

landing page like maybe like like this.

31:38

You know, now I have kind of like

31:40

something here at the top. Um but I know

31:42

there's like more good stuff down here.

31:44

The good stuff better be good because

31:45

close better deals faster doesn't, you

31:47

know, tell me much, but maybe there's

31:49

like, you know, like 10 pixels of like

31:51

an awesome hero image kind like peeking

31:53

up or something like that. That would be

31:55

cool. And then I immediately without any

31:57

indicators like know and want to can

31:59

like scroll down and discover it, right?

32:01

>> Yeah. Well, we've stopped at the perfect

32:03

point here because you cannot see

32:04

anything in the top navigation bar.

32:07

>> Yep. It's uh you better know what's in

32:09

the background and if there's a dynamic

32:11

background such as a video playing which

32:12

might have all sorts of bright colors.

32:14

Um all of a sudden your bright menu

32:16

isn't uh readable anymore.

32:18

>> Okay, so this is interesting.

32:19

>> So here it picked it up. So it's smart,

32:21

but it's not smart when there's video

32:23

behind it.

32:23

>> Ah, you're right. That is the the

32:25

nuance,

32:27

huh?

32:30

Okay, these I can't click on. I would

32:33

have expected that I could click on any

32:34

of these.

32:36

>> Maybe the chevron.

32:38

>> Oh, I don't know what just happened.

32:43

Okay, now I can click on those. Yeah,

32:45

some of it is clickable and some of it

32:47

is not, it appears. And also, it's like

32:49

jumping me up and down on the screen.

32:52

Um, it seems to just be moving on its

32:55

own timer and not letting me do

32:57

anything, which is confusing. Um, and

32:59

again, this is one of those things where

33:01

it feels like you wouldn't intentionally

33:02

design it to work this way. Instead, you

33:05

just it created a component and you went

33:07

and it does sometimes work.

33:10

>> Only on those nested ones. If you try

33:12

the other ones, it doesn't do anything.

33:14

>> Yeah. And this better label here is um

33:16

super super hidden. There's sometimes a

33:18

chevron, sometimes not. Um, yeah, this

33:22

feels maybe like a little bit sloppy.

33:24

[laughter]

33:26

>> Yeah, one agentic layer generate an

33:29

investment memo.

33:32

Um, yeah, even the little bits of motion

33:34

here is the kind of thing that like AI

33:36

will just give you that for free and

33:38

you're like, "Yeah, okay. Let's go with

33:39

that." But you would never create

33:41

yourself. Um, yeah. I can't even tell

33:43

what I'm supposed to do with any of

33:45

this. It hovers and expands a little

33:47

bit, but like nothing is clickable.

33:51

We got some fadeins.

33:54

This just feels like it's lacking a lot

33:56

of like useful information presented in

33:59

the right ways. Um

34:01

and at least not purple though. Got a

34:04

lot of blue.

34:04

>> Yeah. Yeah. Yeah. Fit and finish as well

34:07

as kind of like meaty content.

34:09

>> Yeah.

34:09

>> Um like clear messaging is maybe lacking

34:11

a little bit. Um the visual style if I

34:15

didn't have to scroll through it um is

34:17

actually kind of fresh. Yeah. Yeah. Like

34:19

it it reminds me of uh lovable or or

34:22

things like that that kind of have that

34:23

like grainy zoomed in kind of picture in

34:25

the background.

34:26

>> Not not sure what these boxes um here

34:28

represent uh in the background.

34:31

>> Yeah. Some weird artifact.

34:33

>> All right, Zarna. Thank you. Okay. Well,

34:36

thank you everybody for submitting your

34:37

sites and uh Rafael, we we've seen a

34:39

bunch of them now. What are some of your

34:40

takeaways here?

34:41

>> Yeah, I think definitely lots of purple

34:43

gradients. Um, and in general kind of

34:45

like a lot of kind of like the same the

34:47

same patterns. You know, we see

34:48

animations kind of like for animation

34:50

sake just because it's uh it's possible

34:52

now. I would have killed to have these

34:54

kind of like AI superpowers when I built

34:56

my first website. So I think it's

34:58

wonderful that we have them, but you are

35:00

still kind of like responsible to not

35:02

outsource your thinking to LLMs um and

35:04

actually just use them as tools to get

35:06

your brilliant ideas, designs

35:10

um novel maybe kind of like interactions

35:13

um out on the web um to dazzle your

35:15

customers and uh and I think that's what

35:17

a landing page should do in the end.

35:18

It's kind of like a customer acquisition

35:19

channel, right? This is not your

35:21

product. This is not a web site as in

35:24

kind of like a cool thing on the web.

35:26

there's space for that as well, but

35:28

these are like startup landing pages and

35:31

they're basically customer acquisition

35:32

channels. So, and that's how I would

35:34

really um use these tools.

35:36

>> I totally agree with all of those.

35:38

Couple others I would add. You know, one

35:39

I think it's really important that uh

35:41

you QA everything. It's very easy to

35:43

create something, but we went through

35:45

and we found, you know, some quirks or

35:46

bugs or things like that here or there

35:48

or things that were confusing.

35:50

ultimately you know you the founder you

35:51

the human need to be the one that goes

35:53

through and make sure that um you know

35:55

the interactions and and everything else

35:57

um work right. The other one is um you

36:01

know it it's important that your site

36:03

and your brand they come through as the

36:07

thing that you want to represent your

36:08

company and that originality and

36:11

something that feels different and it's

36:12

very easy using the same tools that

36:15

everybody else is using to end up in the

36:17

same place. you have to be intentional

36:19

about ending up in a different place.

36:21

And so, um, rather than start from what

36:24

does the AI spit out and then let's

36:27

tweak that, I would start from, you

36:29

know, what color palette do we want to

36:30

use and what is our brand and and how

36:33

can we feed that into the system and use

36:35

that to make sure we end up at an end

36:37

goal that represents us rather than just

36:40

going with, you know, whatever uh the AI

36:43

spits out there. We've seen a lot of

36:44

people do that and I think you know like

36:46

you said one of the most powerful tools

36:48

ever to create incredible designs and do

36:50

things that would have been impossible

36:52

or taken forever that you can do just

36:54

like this. And so um to use that for

36:57

ways that that actually help you move

36:59

the lever uh upward and make the sites

37:02

more engaging and convert better is one

37:04

of the most powerful things that you can

37:06

do.

37:06

>> Yeah.

37:07

>> Well, thank you so much for joining uh

37:09

Raphael. It's been uh amazing to get

37:10

your perspective on all of these and uh

37:12

thank you to everybody that submitted

37:14

websites and we will see you on the next

37:16

design review.

Interactive Summary

This video discusses the pros and cons of AI-assisted design in website development. While AI tools make it easier than ever to create professional-looking websites, they can also lead to generic, unoriginal designs if not used thoughtfully. Common pitfalls include overuse of purple gradients, distracting animations, and confusing user interfaces. The speakers emphasize the importance of human oversight in the design process, ensuring that AI-generated designs are original, functional, and effectively communicate the brand's message. They advise founders to use AI as a tool to enhance their own creative ideas rather than outsourcing their thinking to algorithms.

Suggested questions

5 ready-made prompts