21:14Jack Roberts · Tutorial
Every Level of Claude Fable 5 Websites Explained
Seven escalating techniques that take a Claude Code website from a 3-out-of-100 chatbot draft to a one-shot design worth stealing.
July 5thThe argument in one line.
AI-generated design looks like AI slop because most people prompt each page from scratch; locking a design system once in Claude Design, then generating every page, animation, and asset from that same system, is what produces consistent, non-generic results.
Read if. Skip if.
READ IF YOU ARE…
- Solo builders and agencies shipping websites with Claude who keep landing on the same generic-feeling layouts and color choices.
- Anyone building client sites who wants one reusable brand system instead of re-deciding design from scratch on every project.
- Vibe-coders comfortable pasting CLI commands and skill files into Claude who want a repeatable workflow from brand setup through a finished, animated site.
SKIP IF…
- You want a no-CLI, point-and-click design tool — this workflow leans on Claude Code and a terminal-based Higgsfield CLI setup.
- You need Claude Design explained from zero — the video assumes you already know how to open the tool and skips basic navigation.
The full version, fast.
Claude-generated design defaults to the same look because most people prompt individual pages instead of first locking a design system. The video builds one for a fictional burger brand inside Claude Design: an interview-driven brand setup connected via a skill to Higgsfield for on-brand logos and photography, a generated website built from those assets, an export-and-handover into Claude Code for deeper editing, a scroll-triggered 3D animation added through a downloaded skill plus code "sniped" from component libraries like 21st.dev, and finally the same locked system reused to generate an unrelated animated video. The actionable core: define the brand explicitly before generating anything, feed generated assets back into every subsequent build, and treat one standout animated element — not more page variations — as what makes a site feel designed rather than default.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:32
01 · The AI-Slop Problem
Jack names the pattern viewers already sense — every Claude design defaults to the same look — and frames the fix as building a design system before generating anything.
00:32 – 03:59
02 · Level 1: Building the Design System
Inside Claude Design, Claude interviews Jack about a fictional burger brand (product, vibe, hero items, clichés to avoid), then a Higgsfield skill generates a full on-brand asset pack of logos, textures, and hero photography from that interview.
03:59 – 06:35
03 · Level 2: Generating the Website
The generated brand assets are loaded into Claude Design along with a brand blurb, and Claude builds a full burger-restaurant website — colors, imagery, and copy all pulled from the same locked system.
06:35 – 09:34
04 · Level 3: The Handover to Claude Code
The Claude Design project is exported as a project archive and opened in Claude Code running locally, which unlocks deeper editing than the design tool alone. Jack also shows exporting a whole design system to share with a team.
09:34 – 14:12
05 · The Showstopping Feature and UI Sniping
A downloaded 3D-website skill adds a scroll-triggered animated hero section built from the Higgsfield assets. Jack then demonstrates "UI sniping" — grabbing polished component code from 21st.dev, Aceternity UI, and React Bits and having Claude install and reskin it for the burger brand.
14:12 – 17:55
06 · Level 4: Reusing the System for New Content
Jack switches to his own video-brand design system, uploads a style PDF, and has Claude generate an animated video sequence from a scripted sentence, refining the prompt and simplifying the output through iteration.
Lines worth screenshotting.
- Generic-looking AI design isn't a model limitation — it comes from prompting each page individually instead of running every output through one consistent design system.
- A design system is just a written set of brand rules the AI follows every time, which is what makes outputs replicable instead of one-off.
- Letting the AI interview you about the brand — product, vibe, hero items, clichés to avoid — before it designs anything produces sharper results than a single upfront prompt.
- Connecting a documented skill to an image/video generator, rather than prompting it ad hoc, produces richer on-brand asset packs (logos, textures, hero photography) in one pass.
- Feeding a design system's own generated assets back into the website build is what makes a first draft look finished instead of templated.
- Claude Code can do everything Claude Design can do, because Claude Design runs on Claude Code with extra scaffolding around it.
- Exporting a Claude Design project as an HTML or project archive and opening it in Claude Code unlocks editing depth the design tool alone doesn't offer.
- A design system itself can be exported and handed to a coding assistant with instructions to reference it on every future build, keeping a team's output consistent.
- One standout animated or interactive element — not another page of layout variations — is what makes an AI-built site feel designed instead of default.
- Browsing polished component libraries for an admired effect, then telling a coding assistant to install that exact code and reskin it for your brand, beats describing the effect in words.
- Screenshotting an admired design and asking the assistant to reproduce that specific look is a working fallback when a text description doesn't land.
- The same locked design system extends past websites — attaching it to a request for an animated video or slide deck keeps every output visually consistent with the brand.
- Refining a prompt through a back-and-forth with the assistant before generating tends to beat accepting the first draft of the ask.
- First-shot output should be treated as a starting point: the creator explicitly frames one-shot results as "only version one" that gets iterated further.
Lock the design system before you generate anything
SYSTEM BEFORE OUTPUT
AI-generated design looks generic because most people prompt pages from scratch instead of first defining a locked brand system that every later output pulls from.
01The AI-Slop Problem
- Generic-looking AI design isn't a model problem — it comes from prompting each page individually instead of running everything through one consistent set of rules.
- A design system is just a written set of rules the AI follows every time, which is what makes outputs replicable instead of one-off.
02Level 1: Building the Design System
- Before generating any page, define the brand basics explicitly: the product, the vibe, hero items, and what clichés to avoid — vague answers produce vague design.
- Connecting a video/image tool to the design system through a documented skill, rather than ad-hoc prompting, gets richer on-brand assets like logos and product photography in one pass.
- Once a design system exists, it can be reused across every future asset for that brand without re-deciding colors, fonts, or tone each time.
03Level 2: Generating the Website
- Feeding the design system's own generated assets — logos, photography, textures — back into the website build is what makes the first draft look finished rather than templated.
- The first generated version is a starting point, not the final output — expect to keep iterating rather than accepting the first shot.
04Level 3: The Handover to Claude Code
- Exporting a Claude Design project as an HTML or project archive and opening it in Claude Code unlocks deeper editing than the design tool alone allows.
- A design system itself can be exported and handed to a coding assistant with instructions to reference it on every future build, keeping a team's output consistent.
05The Showstopping Feature and UI Sniping
- A single standout animated or interactive element — not another page of variations — is what makes an AI-built site feel designed instead of default.
- Browsing component libraries for buttons, carousels, or shader effects, then handing the exact code to the coding assistant to install and reskin, is faster than describing an effect in words.
- Screenshotting an admired design and asking the assistant to reproduce that specific look works when a text description doesn't land.
06Level 4: Reusing the System for New Content
- The same locked design system extends beyond websites — attaching it to a request for an animated video or slide deck keeps every output visually consistent with the brand.
- Refining a prompt through a back-and-forth with the assistant before generating tends to produce a noticeably better result than the first draft of the ask.
- Cutting unnecessary text and keeping only supporting graphics reflects a real design principle: don't make the viewer work to understand what they're looking at.
Terms worth knowing.
- Claude Design
- A design-focused mode of Claude, built on Claude Code, for creating websites, slides, documents, and wireframes from a defined brand system.
- Design system (Claude Design)
- A locked set of brand rules — palette, imagery style, tone, product details — that Claude references on every future generation for that brand, instead of re-deciding design each time.
- Higgsfield
- An AI image and video generation platform connected to Claude Design through a CLI skill, used here to generate on-brand logos, textures, and hero photography in one pass.
- The Handover
- The workflow step of exporting a Claude Design project and opening it in Claude Code for deeper editing than the design tool alone supports.
- UI sniping
- Browsing component and animation libraries for an existing polished effect, then having a coding assistant install that exact code and restyle it to match your brand, instead of describing the effect from scratch.
- Claude Fable
- An Anthropic model available inside Claude Design, described in the video as the most powerful and capable option for generating output from a locked design system.
Things they pointed at.
08:17productClaude Code Masterclass (Jack Roberts' own course)
Lines you could clip.
00:00
“If you have ever felt that every Claude AI design looks exactly the same, you are not crazy.”
06:59
“Claude Code can do everything that Claude Design can do. Claude Design is using Claude Code. It's just got some extra systems around it.”
09:49
“I spent so many dollars and so much time. I had no mustache when I started, then my mustache was there. That's how much time I spent learning this stuff.”
16:53
“Don't make the user think. Don't make them exert too much cognitive energy in understanding what this looks like.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphoranalogystory
If you have ever felt that every Claude AI design looks exactly the same, you are not crazy. Most design looks like AI slop because they're not using the correct system. And in this video, I'm gonna show you the new Claw design system that makes beautiful designs, graphics, websites, anything you want, that don't look like AI sloth in five simple steps that you can do even if you're a complete beginner.
So if you haven't already, grab that beautiful coffee and let's dive straight in. Beautiful. So we're gonna be building in core design, and I'm gonna show you levels that you haven't seen before and incredible capabilities.
Now this is all about destroying that terrible AI stop feel. Everything looks identical.
We're not gonna do that. So the issue is that essentially every page that Call to Designing is from the same systems, same prompts. How do we actually stop that?
Well, we can do this first of all by building a very simple design system. That means that you're gonna get replicable designs that look beautiful every single time no matter what it is.
So the first thing that we're going to do is to shoot over to and on the bottom left hand side, you're gonna click on design. And then once you do that, you're gonna open up Claude Design.
Now the first thing that we need to do is build a design system. A design system is just a series of rules that our AI is going to follow. Now with Claw Design, we can build all these things, mobile app design, slides, document wireframe.
It doesn't really matter. Just to show you an example of something that you can do. You see this whole system here, I uploaded to Clor Design and as a result of that, I got this thing here.
And it basically took my exact style and created graphics for it in one prompt. It can do so many things. So to build a design system, you're gonna come down here and click design systems.
Then simply click on create design system, and we're gonna go ahead and click create here. Now once you click on create design, this system is gonna unlock incredible things for you because we can use this whatever we're building in the future.
It's very cool. We need to add a little bit of information. We can link in a GitHub repo and upload files.
But let's say you and I are working with a client. Let's say we work with a burger restaurant and we don't wanna have to produce all the assets manually. There is a very cool hack.
So the first thing you're gonna do is head over to this skill here, I'm and gonna put a link down below so you can literally just grab this and go. And effectively, what we're going to do is connect Claude over to Hicksfield. Hicksfield lets us design videos and images and, you know, Seed Dance 2.5 is coming out soon.
It is incredible. And what we're basically going to do is paste this into Claude like so. So basically, copy all of it like this, and then head over to Claude.
And this is the step that most people miss because they just give a command to design and wonder why it looks so generic. And all you're gonna do is come down here, paste this in, and hit enter. And what we're going to do is connect to Higgs Field via the CLI.
This whole skill here will just manage all of that stuff for you once you've got your account. Now, we have Claude interviewing us to make sure that we can get the very best design system.
So what's the product for business? Let's just go ahead and use Glado here. Hey.
So the product is a burger restaurant. We don't have a brand name. Let's call it Smashburger or something similar.
The vibe is fun, energetic. It is premium, high level burgers, and we don't have any hero products yet.
We can just kinda make five burgers up for the purpose of this. Anything to avoid? Yeah.
Just avoid all of the cliches. Now, once you've gone back and forth, you're gonna end up with a final system prompt. And to show you one that I did earlier, we have this one here, which is the smash and grab a burger co.
And effectively, what it will ask Claude to do is to research the palette. It's gonna look at parameters and cost. It's gonna generate once it comes back and confirms.
And effectively, what this will do is design an incredible design pack that we can then give so it has rich logos and images and everything that you need for the brand. Now if you don't have any graphics or logos, you don't need to add it, but that really helps you get the best out of this design system.
So the benefit here is that we decide once and we can reuse that system again and again without having to think about anything at all. Now we've done that, effectively, we need to go ahead in level two to go ahead and build inside it, is awesome. So we wanna go ahead and create a website from that system.
And as you can see, Clauda's actually created all of these images and all these files for me. So I can come and have a look at this. I've got a series of logos to choose from.
I've got action like the cheese balls of this big beautiful burger. I mean, look at how incredible this looks, which is why it's so cool to do the very best models.
And again, all of that is in the prompt, so you can just use it. Which is why in level two, what you want to do is come down and just add those files. So let's go down and just add them by clicking browse.
And then effectively, just literally grab all of the files that was created for you in step one. Or if you've got a brand that you're working with, you can just scrape those using Firecrawl or just upload them, and you'll be ready to rock and roll. And you're just gonna simply click into all of these folders, and again, it's gonna be completely dependent on the brand, but I've got ingredients.
It's even got texture packs for there. As you can see, black smoke, charred steel, the skill manages all of this stuff. And then finally, you're gonna copy here the brand.
The skill will give you this as well, which is an explainer of what you're trying to do. We're gonna come back over, paste it in there for the blurb, and once you've done that, you add any other notes, you're ready to continue, and you just click on continue to generation. Now this will take about five minutes, and I recommend that you use Claude Fable to do this.
It is the most powerful and capable model, and we love our powerful and capable models 100. Now once that's done, when you scroll down, you will see projects, design systems, templates.
I want you to click on the design systems, I'll show the one that I built earlier. And again, we can edit this one to to give different access. Click on this one here.
And now we can play around with this. So the SmashGrab Burger Co system, it explains everything, all the brand images that we uploaded.
And effectively, this is now a universal asset that we can share with everybody. And look at this, guys. How freaking cool is this?
It's got everything that we want. It is wonderful. And whenever you give it any feedback, it will go ahead and implement that.
So what we want to do initially is go ahead and give it a prompt to build a website. I said, hey, go ahead and build me a beautiful website utilizing the assets for the burger business, add scroll animations, do whatever it takes, and just make it look great.
And then look what Clore Design has done with all these assets. And again, we have enriched this using the images that we got from Hicksfield and this beautiful design thing. The entire color palette was built.
We've got all our different burgers here. And again, this is just the first iteration. We can do a million things from this.
We've got, you know, the pan, we've got the burger, we've the cheese, we've got everything we want all in one website when it come down. I'm getting very hungry looking at this, but you get the idea. But this is only version one, and we can take this significantly further.
Now level three is taking what we've built inside Claude Design and enabling us to level it up by bringing it over to Claude Code. And that may sound a little complicated, but it's actually just two button clicks and it unlocks a lot of really cool capabilities. And I'll show you why in a second.
So we call this the handover. So we're taking it from Claude Design over to Claude Code. And always remember that Claude Code can do everything that Claude Design can do.
Claude Design is using Claude Code. It's just got some extra systems around it. And when we take your design system into Claude Code, we can do a lot more with it.
So say for example, we have our beautiful website here and I wanna take it to a new level. I wanna add in more animations. What I can really do here is export it.
So if I come down and click on share, what I'd like you to do is come down here and do a project HTML for me. You can also publish this as an artifact if you want to share that with other people or copy the link. But let's click on this one here.
And you're gonna come down and do project archive and click on export. And then just save that in your downloads. Downloads.
Then come over to Claude Code, and I want you to open up a new tab and just basically say, hey. And basically, that prompt like, hey, I want you to familiarize yourself with this and open it up for me in a local host. Local host just being fancy speak for place where we can view a file on our computer.
And then just select that zip, click open, and then send it on its merry way. And then we actually have our website. Now the cool thing that we can do here is we can actually create a beautiful three d interactive website using the exact thing that we just built.
And you can also export your design system to share with the team. For example, I have a design system for my videos now, and I can share this really simply by creating one, coming down here, clicking on these three buttons, click on open in a new tab. Then once that opens up, you can literally click share.
And just like before, you can export it like so, project HTML, ZIP, or standalone. And again, you can do project archive, which is absolutely fine, and click on export.
And as you can see, the smash and grab design system. And then you can also come up to Claude and say, hey there, I just downloaded the smash and grab design system. It is the last thing I downloaded.
Please look at that when you are creating designs for me on this website. And by the way, if this all sounds like Spanish, I'll put a link down below for the full Claw Code Masterclass. It takes you from zero to hero.
It has stuff that I've never shared on YouTube. I get messages about this literally every single day. It will show you apps, websites, billing, everything, monetization.
I'll put a link down below. It's one of the best courses I have ever made, and it has stuff I don't share on YouTube. So I'll put a link down below there for you as well.
And that's really gonna help you elevate and take your designs in Claude to a brand new level. And as you can see, Claude has now got the website on the page, which is cool. But the thing about that no one really tells you about design here is that one shot is not enough.
It's all about iteration and adding the right elements. And we wanna have a show stopping feature to this website to take it to a completely new level. And I'm gonna show you other design system parts that you're definitely gonna need to make sure you know.
I'm gonna cover that shortly, but I have to show you how we can level it up. And we call this one moving piece. .
Think of it as something show stopping that just makes the website or the asset stand out and look fantastic. For example, I did the exact same thing on this website, which is all built using the exact same system. This beautiful show stopping scroll animation, it comes down, looks fantastic.
And that was one shot. And it's such a gorgeous website. And this has all been generated using fantastic assets and it looks great.
But the thing is, you can spend honestly, I did this. I spent so many dollars and so much time. I had no mustache when I started, then my mustache was there.
That's how much time I spent learning this stuff. So we can save a lot of time by using a skill. And I'll pop this link for you down below so you can literally just grab this and use this.
But effectively, it's a more it's a three d website skill. So literally come down, download this. The link will be down below in the description for you to grab.
And then all we're literally going to do, guys, is just upload this skill. And you're gonna give it a prompt like this. It says, hey, Thub.
Use the below skill. Ask me questions to create for me a beautiful three d animated video to embed in this website, and I'd like you to use the graphics and imagery and this brand style.
And what is really cool is that the the AI will actually ask you questions about what do want it to look like, how do you wanna edit it, all this really cool stuff so you can build out something beautiful. And by the way, don't know if I'm looking tanned or not. I just got back from Montenegro, huge AI conference, lots of boats, lots of green hills, Lots of no laptops, really.
So it's been cool to get away for a couple of days, but it's good to be back talking about design. I have so much really freaking cool content.
I'm super stoked to share with you. So limit it down below if you've ever been to Montenegro. I find it a really beautiful sea.
We had a good coffee, And that is the most important thing on the JR YouTube channel. And as you can see, it comes and asks us questions. Do want the design arc, the highest arc, the whatever it is?
And again, if you don't know, just ask what you want to do. So we're gonna be using Higgs Field on this one.
I've honestly found that that there's many ways you can do it, but it just seems to get better results for me. I have tried multiple on that. Scroll scrub hero, autoplay hero background, its own section.
Let's go with should we do its own section? I think that could be nice. This one's a scroll scrub hero.
Again, you can do any as you'd like. The top one, of course, would be something on a loop. So you can do one as you scroll and it, like, expands.
But the other option is it just sits there and basically doesn't do anything, and it kinda sits on a loop so that the first frame and the end frame are, like, identical, basically. So I'm gonna actually pick its own section, and then it's got a recommended clip length. Again, this is from, believe me, guys, a lot of, like, trial and error, so you don't have to make the same mistakes that I did down here.
So I recommend around 25. And then a little hack, we can actually do something called UI sniping, which is fine. Beautiful UI animations that look amazing.
Like, I gave you three little insiders right now. 20first.dev is cool.
You can basically search for buttons. They're not a sponsored video or anything like that, but I think these are freaking gorgeous. You basically find the one that you like, and what you can do is literally let's say we find a beautiful one, for example.
Say we came off this and we were on because if you come over here on the left hand side to most downloaded, you can see what is trending and what is popular. So classic button, for example. And this looks gorgeous.
Check this out. This carousel, overview carousel. Right?
Look at this. This is really nice. And you could do this for the burgers.
Right? So I could literally come down here, copy the code, go back over to Claude code, and just say, hey, go and install this, but replace the images with burgers. And then other ones that are great is shaders.
This is a really cool one. It's basically UI dot ascertainty. I can't even pronounce it.
I know how many coffees I need. But if you look at this, for example, you've probably seen this distortion shader everywhere, which is really cool. You know, that's just code.
And the cool thing is we can grab this code and just add it into our website or design system to look amazing. Then there's also reactbits.dev. It's a little bit of a new one.
It's kind of a bit more edgy, more sleek, more more more more kind of premium. But again, it's all about browsing, finding what you like, and then just literally yapping at Chloe.
And if you can't for some reason get it, what you can also do is just screenshot and just say, hey, I love this design. Can you go and grab it? And even grab the website and say, love this kind of design and vibe.
Can we create something a bit similar? But obviously, you've already got your design system, so this is just for inspiration. Beautiful.
Now Claude's done his fantastic amount of work. Let's come down. And if this is good, I think you should name your firstborn Claude after this.
Look at this, guys. Look at that. Look at the quality of that bird.
Do you want that? I don't need that right now. I'm gonna cut, so it's a bit difficult, but this is outrageous how it comes down here.
And by the way, you could have the whole thing coming down from the top to I've done I'll link this video here. On screen, go ahead. You have to check this video out if you haven't seen websites.
To build you wanna build stuff like this, it is crazy. The skill's down below so you can do it. That is amazing.
And as you can see at the bottom, look at this. Now we've got this. Imagine having this for your client like, oh, what burger do I want?
The getaway. The double cross. And obviously, are just like generic burgers we created, but you can see the difference.
Look how incredible this is. And then that leads us nicely onto step five with our design system. So for example, if we come back over now to Claude, you can see whenever we want to create something, we can either just very, very simply pick our design system.
And if you want more design system content on Claude design, let me know down below. I have a thousand idea. This is just scratching the surface.
Obviously, I've got, like, all the courses and stuff in the community, but I put a lot of really cool stuff I wanna show you on YouTube. So if you like this kind of content, feel free to subscribe and like. It lets me know that you like it, and it really helps out the channel.
So thank you so much for that. Now if I wanna go ahead and build something, let's say that I wanna go ahead and do, I don't know, why don't we do something like an animation? Because animation is goated.
Now, I could do an animation with the burger system, but maybe I wanna do something else. I can come down here on design system, actually clear selection. Now what's cool is I can just upload the PDF that I use.
So check this side, come down to plus, come down and click on attach file, and I've got the PDF here, which is the exact one that I've actually been using here. It's a p it's a HTML deck. I've all the design systems are cool.
But let's say I like this and I want some of this to go inside this video. So what I could do is come back over here and I could say something like, hey, that basically, animate this sentence. Core Design is exceptional.
It will enable you to build beautiful websites with three d animated videos and dynamic UI components.
And let's have those as three different sections. Alright. Cool.
And what I'm gonna do is actually just gonna change this a little bit. Hey. Could you just improve this prompt such that the output would be better?
And what I'm thinking here, generally speaking yeah. This is much better. Yeah.
Let's use that. Cool. Come down, get Fable five on it, and hit enter.
Now what's cool about this okay. So the file can't be attached. We need to come back ahead and just reattach this.
Okay. I just re uploaded it. Basically, if it's greater than 50 megabytes, it won't do it.
Hey. Go ahead and build it with this, please. Come down and send this off.
Now the cool thing is this is something that I'm using now. I've literally built up this design system and a style that I really like, gave it to my editor, and basically, he'll add in little bits of the transcript from the video and then just integrate that on there, which I think is so cool because it's beautiful. But it's like with most things, you want to get the design correct.
And, you know, the more time you can spend upfront making sure the design looks beautiful, the more advantageous that it actually is. Because if we can just get the initial design system correct, you can do anything you want to. Like with with Glido, our text to speech startup, for example, we spend a lot of time getting the files correct so that when we build presentations or we do anything in the app, basically, it's all pulling from the exact same design system for your brand.
Now it's come ahead. It's animated it. This is looking really cool.
It's piecing together, so let's see exactly what it comes up with. And as you can see, guys, now it's created something. So let's go ahead and actually check out what it's done.
I'm gonna come down and hit play. Now let's have a look at this. Websites that look designed, and look at this.
I think this is great. This is not so bad. Okay.
What we would do is emphasize the text a little bit, which is cool. Now this is really gorgeous. Yeah.
I'm impressed with this. So I like the minimalistic styles.
I think that looks really nice. So what I'd probably do is actually just reengineer this to say, hey, I only wanna see nice HL components. I don't need loads of text.
And I think little explainer tags would really add the value, but it shouldn't be something that the user has to squint at. Don't make the user think. Don't make them exert too much cognitive energy in understanding what this looks like.
Cut out the other bits and let's just simplify this down a little bit. I will be speaking over this, and these will just be nice graphics that support what what it is that I'm saying. So again, the idea here is that we are steering it.
We are giving it feedback. But this looks beautiful, and it can literally design so much cool stuff. Now once you click the link down below, the next thing that we need to do is go ahead and learn how to build beautiful websites just like this.
Come and join me. Learn how to take it to a completely new level. Grab that coffee, and I'll catch you on the other side.
The Hook
The bait, then the rug-pull.
Every Claude-designed page tends to land on the same fonts, palette, and layout, and Jack Roberts opens by naming that pattern directly. His fix isn't a new model — it's building one locked design system before generating anything at all.
Named ideas worth stealing.
00:32list
The Five-Level Claude Design Workflow
- Level 1: Build the design system (brand interview + Higgsfield asset pack)
- Level 2: Generate the website from that system
- Level 3: The handover — export into Claude Code for deeper editing
- The showstopping feature — one animated element via a skill + UI sniping
- Level 4: Reuse the same locked system for every other asset type
The video's structuring device: every later step reuses assets and rules created in Level 1, so the brand stays consistent across a website, a 3D animation, and unrelated video graphics.
Steal forany client website build or personal brand build where multiple assets need to look like they came from the same designer
12:07concept
UI Sniping
- 21st.dev
- Aceternity UI (ui.aceternity.com)
- React Bits (reactbits.dev)
Instead of describing a desired animation or component in a prompt, browse a component library for an existing polished example, copy its code, and tell the coding assistant to install and reskin that exact code for your brand.
Steal foradding a specific animated effect (carousel, distortion shader, hover state) without prompting it from scratch
How they asked for the click.
VERBAL ASK
08:17product
“if this all sounds like Spanish, I'll put a link down below for the full Claw Code Masterclass... It takes you from zero to hero.”
Soft mid-video pitch woven into the handover explanation, restated as a closing sign-off CTA at the very end rather than a hard sales break.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
