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

Loading summary...