HomeVideos

Fable 5 for Web Design is Next Level!!! (3D, Interactive, Animated!)

Now Playing

Fable 5 for Web Design is Next Level!!! (3D, Interactive, Animated!)

Transcript

149 segments

0:00

Fable 5 has dropped, the newest model

0:02

from Anthropic, and I want to test how

0:04

it goes for web design. On Twitter, I'm

0:06

already seeing people do some amazing

0:07

things, like have it play Pokémon from

0:09

start to end, finishing the game, or

0:11

playing Monopoly, or rebuilding Lovable

0:13

from scratch, or even building entire 3D

0:16

models and interactive websites like

0:18

this. For this video, I want to see how

0:19

it performs at building websites from

0:21

scratch, redesigning them, or making

0:23

them interactive and award-winning.

0:25

Let's find out. Here on Claude desktop,

0:27

I'm going to select Fable 5 and first

0:29

ask it to create a website about itself.

0:31

Here's the prompt. Design a website

0:33

that's interactive, award-winning, about

0:35

Fable 5. It did some thinking and about

0:37

13 minutes of tokens, and here's what it

0:40

came up with. This website, which

0:42

already has interactive elements, this

0:44

3D butterfly with little dots, really

0:47

great typography and color use, and it

0:49

tells you a little bit about Fable and

0:51

how it's different from the previous

0:53

models. But, a pretty cool website just

0:55

to talk about what Fable is already.

0:58

But, let's actually push it a little bit

0:59

further and see what it can create. This

1:01

time, I'm going to head over to Claude

1:03

Code, and I'm going to give it an actual

1:05

directory and ask it to create an

1:07

award-winning website using things like

1:09

3js and GSAP, and see if it can create

1:11

something truly immersive. After about

1:14

10 to 20 minutes, it came up with this

1:16

design here. Let's check it out. It has

1:18

this a nice load-in. They've created 3D

1:20

assets, animations that are subtle,

1:22

great typography with planets moving in

1:25

and out as I scroll up and down. And

1:27

this is probably one of the best-looking

1:29

websites I've actually generated from a

1:31

single prompt. So, this is pretty

1:33

impressive. For the next test, I want to

1:35

see if it can redesign a website. I've

1:37

got this website here called Type UI,

1:39

and I want it to be rebuilt from the

1:41

ground up. This is what it currently

1:43

looks like. Let's see what Fable 5 can

1:45

do when it comes to redesigning an

1:46

existing website. This took a lot

1:48

longer, and it's burned through quite a

1:50

few tokens. It took about 20 minutes,

1:53

but overall, it came out with this

1:55

design right here. A nice loading, it

1:58

has this really cool 3D effect with a

2:00

custom mouse cursor that's happening in

2:02

the background. Really good use of

2:04

typography and color, as well as

2:06

animation. Like these subtle things

2:08

where they just fade in when you're

2:10

viewing them.

2:11

I really like how they've done a new

2:13

visual representation of these design

2:16

skills that you can now use in agents.

2:17

And overall, I think this is a great

2:20

redesign compared to the more static

2:22

version that the website had previously.

2:24

Now, since we're on this page, one of

2:26

the things that you can do is use design

2:28

skills these days with agents. And so,

2:30

that's what I want to do. I want to have

2:33

a website that has this Pac-Man-like

2:35

design aesthetic and use the design

2:38

skill that is available here and plug

2:40

this straight into Babel and see how it

2:43

goes at understanding this design

2:46

language and creating something of a

2:47

Pac-Man design this time. Here, it's

2:49

pulled in the design skill, pulled in

2:51

3.js, and crafted this page right here.

2:55

And what you might not notice is that

2:57

it's built the entire Pac-Man game in 3D

3:00

that is playable inside of the web

3:02

browser. How cool is that? It's also

3:04

built out the rest of the page using the

3:06

design skill that I provided. So, all

3:09

up, a pretty good result for what I did

3:11

with a single prompt again. Next up, I

3:13

wanted to redesign a popular website. In

3:16

this case, I wanted to redesign the

3:17

Reddit webpage. So, I've got this prompt

3:20

here and I've got a screenshot of Reddit

3:22

which I'm going to attach and see how it

3:24

goes at redesigning this site. It did

3:26

some thinking, took a look at the

3:27

screenshot and the actual page, and put

3:29

together this design right here. For me,

3:32

this was a little bit too brown, so I

3:34

re-prompted it to create a lighter

3:37

version, and it came up with this design

3:40

as the final result. And overall, I

3:43

quite like this. It's a lot more

3:45

minimalistic, straight to the point, but

3:47

also a lot of the content is a lot more

3:49

readable and easier to view. I haven't

3:51

updated my portfolio in a while, so I'm

3:53

going to ask it to create an

3:54

award-winning portfolio for myself. And

3:57

after a couple of minutes of thinking,

3:59

it's come up with this design over here.

4:02

Not too bad. It's got some good

4:03

typography. It's got a hero section,

4:05

which actually allows me to showcase how

4:08

I do UI design, and a couple of other

4:09

things pulled from my actual portfolio

4:11

on the web. Finally, I've been seeing

4:13

some really cool websites generated by

4:15

AI models from this site called Motion

4:18

Sites, where they copy over a prompt.

4:20

And I want to test this out myself. So,

4:22

I'm going to copy the prompt here for

4:23

this website here called Vanguard, and

4:26

plug this into Fable to see if it can

4:28

recreate it. This one took a lot longer

4:30

at around 20 minutes, but after it was

4:32

done, it generated something pretty

4:35

amazing. Pretty much on par with what I

4:37

was seeing online with AI models

4:39

generating content with this animated

4:41

background, all the buttons looking

4:43

nice. Though it was just a landing page,

4:45

I see a lot of potential for building

4:47

websites with Fable in the future. So,

4:49

when it comes to web design, I think

4:51

Fable 5 is probably one of the best

4:54

models out there. It definitely did

4:55

better than things I've seen from Gemini

4:57

and even from ChatGPT. So, I'll be

4:59

really excited to see how it goes for

5:01

coding in the future as well. I want to

5:03

test it out in terms of things like

5:05

Claude code, as well as just plugging it

5:07

into VS Code, as well as Cursor, and and

5:09

just try coding with it daily. Let me

5:11

know what you guys think so far in the

5:13

comments below.

Interactive Summary

This video explores the capabilities of Anthropic's new Fable 5 model in the context of web design and development. The creator tests the model's ability to create websites from scratch, redesign existing sites, incorporate interactive elements like 3D assets and games, and even recreate designs from prompts. Throughout the experiments, the creator demonstrates the model's proficiency in handling complex tasks like 3D animation, responsive design, and aesthetic improvements, ultimately concluding that Fable 5 is currently one of the best models for web design tasks.

Suggested questions

3 ready-made prompts