Fable 5 for Web Design is Next Level!!! (3D, Interactive, Animated!)
149 segments
Fable 5 has dropped, the newest model
from Anthropic, and I want to test how
it goes for web design. On Twitter, I'm
already seeing people do some amazing
things, like have it play Pokémon from
start to end, finishing the game, or
playing Monopoly, or rebuilding Lovable
from scratch, or even building entire 3D
models and interactive websites like
this. For this video, I want to see how
it performs at building websites from
scratch, redesigning them, or making
them interactive and award-winning.
Let's find out. Here on Claude desktop,
I'm going to select Fable 5 and first
ask it to create a website about itself.
Here's the prompt. Design a website
that's interactive, award-winning, about
Fable 5. It did some thinking and about
13 minutes of tokens, and here's what it
came up with. This website, which
already has interactive elements, this
3D butterfly with little dots, really
great typography and color use, and it
tells you a little bit about Fable and
how it's different from the previous
models. But, a pretty cool website just
to talk about what Fable is already.
But, let's actually push it a little bit
further and see what it can create. This
time, I'm going to head over to Claude
Code, and I'm going to give it an actual
directory and ask it to create an
award-winning website using things like
3js and GSAP, and see if it can create
something truly immersive. After about
10 to 20 minutes, it came up with this
design here. Let's check it out. It has
this a nice load-in. They've created 3D
assets, animations that are subtle,
great typography with planets moving in
and out as I scroll up and down. And
this is probably one of the best-looking
websites I've actually generated from a
single prompt. So, this is pretty
impressive. For the next test, I want to
see if it can redesign a website. I've
got this website here called Type UI,
and I want it to be rebuilt from the
ground up. This is what it currently
looks like. Let's see what Fable 5 can
do when it comes to redesigning an
existing website. This took a lot
longer, and it's burned through quite a
few tokens. It took about 20 minutes,
but overall, it came out with this
design right here. A nice loading, it
has this really cool 3D effect with a
custom mouse cursor that's happening in
the background. Really good use of
typography and color, as well as
animation. Like these subtle things
where they just fade in when you're
viewing them.
I really like how they've done a new
visual representation of these design
skills that you can now use in agents.
And overall, I think this is a great
redesign compared to the more static
version that the website had previously.
Now, since we're on this page, one of
the things that you can do is use design
skills these days with agents. And so,
that's what I want to do. I want to have
a website that has this Pac-Man-like
design aesthetic and use the design
skill that is available here and plug
this straight into Babel and see how it
goes at understanding this design
language and creating something of a
Pac-Man design this time. Here, it's
pulled in the design skill, pulled in
3.js, and crafted this page right here.
And what you might not notice is that
it's built the entire Pac-Man game in 3D
that is playable inside of the web
browser. How cool is that? It's also
built out the rest of the page using the
design skill that I provided. So, all
up, a pretty good result for what I did
with a single prompt again. Next up, I
wanted to redesign a popular website. In
this case, I wanted to redesign the
Reddit webpage. So, I've got this prompt
here and I've got a screenshot of Reddit
which I'm going to attach and see how it
goes at redesigning this site. It did
some thinking, took a look at the
screenshot and the actual page, and put
together this design right here. For me,
this was a little bit too brown, so I
re-prompted it to create a lighter
version, and it came up with this design
as the final result. And overall, I
quite like this. It's a lot more
minimalistic, straight to the point, but
also a lot of the content is a lot more
readable and easier to view. I haven't
updated my portfolio in a while, so I'm
going to ask it to create an
award-winning portfolio for myself. And
after a couple of minutes of thinking,
it's come up with this design over here.
Not too bad. It's got some good
typography. It's got a hero section,
which actually allows me to showcase how
I do UI design, and a couple of other
things pulled from my actual portfolio
on the web. Finally, I've been seeing
some really cool websites generated by
AI models from this site called Motion
Sites, where they copy over a prompt.
And I want to test this out myself. So,
I'm going to copy the prompt here for
this website here called Vanguard, and
plug this into Fable to see if it can
recreate it. This one took a lot longer
at around 20 minutes, but after it was
done, it generated something pretty
amazing. Pretty much on par with what I
was seeing online with AI models
generating content with this animated
background, all the buttons looking
nice. Though it was just a landing page,
I see a lot of potential for building
websites with Fable in the future. So,
when it comes to web design, I think
Fable 5 is probably one of the best
models out there. It definitely did
better than things I've seen from Gemini
and even from ChatGPT. So, I'll be
really excited to see how it goes for
coding in the future as well. I want to
test it out in terms of things like
Claude code, as well as just plugging it
into VS Code, as well as Cursor, and and
just try coding with it daily. Let me
know what you guys think so far in the
comments below.
Ask follow-up questions or revisit key timestamps.
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.
Videos recently processed by our community