Claude Code produces bad websites by default not because the model is weak, but because it lacks design skills and references, and feeding it the right inputs (screenshots, installed design skills, real components, scraped data, and extracted design blueprints) closes that gap almost completely.
Who This Is For
Read if. Skip if.
READ IF YOU ARE…
You use Claude Code (or a similar AI coding tool) to build websites and are frustrated that the output looks generic.
You want a concrete, ordered set of techniques to escalate design quality rather than vague prompting advice.
You are comfortable installing GitHub repos as skills and using external tools (scrapers, image generators, component libraries) alongside your AI coding workflow.
SKIP IF…
You are looking for a no-code website builder; this assumes you are already driving Claude Code directly.
You want backend or functionality guidance; this is entirely about visual design quality, not app logic.
TL;DR
The full version, fast.
Most Claude Code websites look generic because the model is missing design skills and references, not because the user prompted it wrong. The video lays out seven escalating levels: plain prompting (grab and go), adding screenshots and mood-board references, installing GitHub design-skill repos that codify real design rules, generating on-brand images and video with OpenArt and feeding them back via MCP, copying pre-built polished components from libraries like 21st.dev instead of having Claude build them from scratch, scraping real brand and competitive data with Firecrawl so decisions are evidenced, and finally design extraction, pointing Claude at a site you admire to pull a full design blueprint and rebuilding from that blueprint. Each level compounds on the last, and a one-shot rebuild using the full stack with Claude Fable 5 is dramatically better than the Level 1 attempt.
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.
Cold open: 95% of Claude Code websites are complete garbage because Claude lacks design skills and references, not because of user error.
00:48 – 01:28
02 · The seven levels explained
Overview of the seven-level system on the companion presentation site, each level worth more than the last, quality climbing on a bar chart.
01:28 – 02:30
03 · Level One: Grab and Go
Prompting Claude like a plain chatbot to build a website about yellow iPhones. Design quality about 3/100, floating iPhone, generic AI-website feel, built with Opus.
02:30 – 04:34
04 · Level Two: Screenshots and References
Feeding Claude screenshots and reference sites (Godly, Land-book, Awwwards, Dribbble) as mood-board input instead of just describing intent. Quality rises to about 10/100.
04:34 – 07:23
05 · Level Three: Design Skills
Installing GitHub-hosted design-skill repos (UI UX Pro Max, Anthropic frontend-design, shadcn/ui, GSAP) that codify expert design rules for Claude to follow.
07:23 – 08:43
06 · The Level Three result
Live result: Apple-logo styling, centered color palette, bento-box layout, directionally much better but still not perfect.
08:43 – 10:01
07 · Level Four: Image and video generation
Introduces OpenArt for on-brand image and video generation, connected to Claude via MCP so assets generate programmatically.
08:54 – 11:11
08 · Building assets in OpenArt
Live demo generating a yellow iPhone product image in OpenArt (Nano Banana 2 model), picking aspect ratio and resolution, then dropping the asset into Claude.
10:54 – 12:02
09 · Creating video from a frame
Using OpenArt's frame-to-video tool (Seedance 2.0) to animate a static product shot into a rotating product video with matching start and end frames.
12:35 – 14:40
10 · Level Five: UI sniping
Copying pre-built polished components from 21st.dev, Magic UI, CodePen, and Mobbin and dropping the code straight into Claude rather than building from scratch.
14:40 – 14:47
11 · Transition to data
Pivot line: a beautiful website that does not convert is like a Ferrari with no engine.
14:47 – 15:14
12 · Level Six: Finding the data
Introduces Firecrawl for scraping brand identity and competitive data so design decisions are evidenced rather than guessed.
15:14 – 17:25
13 · Research prompts with Firecrawl
Live example prompt: research the 10 best and 10 worst roofing-business websites, identify what winners share, and produce a scoring matrix and blueprint prompt.
17:25 – 18:28
14 · Level Seven: Design extraction
The strongest method: extracting a full design blueprint (typography, color, motion rules) from an admired site such as Google's Antigravity via a custom Claude skill.
18:28 – 19:53
15 · Extracting a site's identity
Explains why this matters: most people and Claude cannot articulate what makes design good, but a blueprint extraction can codify it.
19:53 – 20:32
16 · Rebuilding with Fable 5
Switches to Claude Fable 5, attaches the design-blueprint-extractor skill, and points it at a target site to build a new phone-sales website from the extracted blueprint.
20:32 – 21:14
17 · The final one-shot result
Reveals the finished site: dynamic color-changing orb, cohesive typography, night-and-day quality difference from Level 1, achieved in a single shot.
Atomic Insights
Lines worth screenshotting.
A website built by just asking Claude to make it look nice scores about 3 out of 100 on design quality, the equivalent of telling a designer to renovate a room with no direction.
Feeding Claude screenshots and reference designs from sites like Godly, Land-book, and Awwwards roughly triples design quality over plain prompting because showing beats telling.
GitHub-hosted design skill repos work like handing Claude a rulebook written by design experts; the UI UX Pro Max skill alone ships 67 UI styles and 161 color palettes.
Connecting an image generator to Claude via MCP means you describe the asset once and Claude programmatically generates and places all the images a site needs.
UI sniping, copying a pre-built, already-polished component from a library like 21st.dev and dropping its code straight into Claude, skips reinventing design elements that already exist and work.
A beautiful website that does not convert is like a Ferrari with no engine: looks great, does nothing, which is why real competitive and brand data via tools like Firecrawl has to inform the design, not just aesthetics.
Design extraction, pulling a full typography, color, and motion blueprint from a site you admire and rebuilding from that blueprint, produced the single biggest jump in design quality of all seven levels, more than the first four levels combined.
The underlying AI model (Claude Sonnet, Opus, or Fable 5) is a multiplier on these techniques, not a substitute for them; the same seven-level system applies regardless of which model is doing the building.
Takeaway
Seven inputs that turn generic AI websites into stolen-blueprint quality.
WHAT TO LEARN
Claude's design output improves in compounding steps as you feed it references, codified design skills, generated assets, pre-built components, real competitive data, and finally a full extracted design blueprint from a site you admire.
Plain chatbot prompting for a website caps out around 3% design quality; the model has no reference for what good looks like without more input.
Providing screenshots and reference sites (Godly, Land-book, Awwwards, Dribbble) roughly triples design quality because showing an example works better than describing intent in words.
Installing GitHub-hosted design-skill repositories gives an AI coding tool codified expert design rules it does not have by default, similar to handing a talented but untrained artist a technique manual.
Connecting an image or video generator via MCP lets you describe an asset once and have it generated and placed programmatically, instead of manually sourcing every image.
Copying already-polished UI components from public libraries skips reinventing elements that already look good and already work, rather than asking an AI to design them from zero.
A good-looking site that does not convert is worthless commercially, so real brand and competitive data scraped via tools like Firecrawl needs to inform design choices, not just aesthetic taste.
The single biggest design-quality jump comes from extracting a full blueprint (typography, color rules, motion principles) from an existing site you admire and rebuilding from that blueprint rather than a fresh brief.
These techniques are model-agnostic: the underlying AI (Claude Sonnet, Opus, or Fable 5) is a multiplier on the system, not a replacement for it.
Glossary
Terms worth knowing.
UI sniping
Copying an already-built, polished UI component (a button, animation, or widget) from a public component library and dropping its exact code into your own project instead of asking an AI to build it from scratch.
Design extraction
Having an AI analyze an existing website's typography, color palette, spacing, and motion principles to produce a reusable design blueprint that can guide building a different site in the same visual language.
Design skill (Claude skill)
A GitHub repository packaging design rules, examples, and constraints that Claude can download and follow, effectively giving it expert-level design judgment it did not have by default.
MCP
Model Context Protocol, a standard that lets an AI coding assistant like Claude call out to external tools such as an image generator or a web scraper directly during a coding session.
Firecrawl
A web-scraping tool that can extract a website's brand identity (colors, fonts) or run structured competitive research across multiple sites.
“95% of them are complete garbage. And that's not your fault. It's because Claude doesn't have the correct skills or knowledge. That's like having Mozart with no piano.”
sharp, quotable framing of the core thesis with a strong metaphor→ TikTok hook↗ Tweet quote
14:47
“A beautiful website that does not actually turn viewers into buyers, it is like having a Ferrari with no engine.”
“This is night and day. It's chalk and cheese. It's ebony and ivory.”
triple-metaphor punchline landing the before/after reveal→ newsletter pull-quote↗ Tweet quote
The Script
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.
17px
metaphoranalogy
00:00Claude Code builds beautiful websites. However, 95% of them are complete garbage. And that's not your fault.
00:07It's because Claude doesn't have the correct skills or knowledge. That's like having Mozart with no piano.
00:14So in this video, I'll cover the seven levels of building beautiful, cold code websites. How to make them look stunning, how to make them look amazing every time, the huge mistakes that you need to avoid, and exactly how to progress to the next level so you get a simple replicable system that can build you beautiful websites even if you have never touched this before.
00:34And if you're new, my name is Jack. I built and saw my latex startup with a gargantillion amount of customers, and now I'm building my own AI startups and I share here the stuff that actually works.
00:44So if you haven't already, grab that beautiful coffee and let's dive straight in. So let's go through every single level of ClawCode websites. You need to progress to the top and when you reach level seven in this video, you're gonna be able to build ClawCode websites like nobody else.
00:59It's definitely gonna be worth your time investment. I'm gonna share stuff that you've probably never seen before. Now, here's the thing.
01:04Most websites themselves don't look great, especially ones built with Claude if they don't use and pass the systems that I show you inside this video. I've built so many of them. I've sold them.
01:13This is the stuff that's working right now. Now, we got seven levels. Each is worth more than the last.
01:19They they get better. The further they go up. So the stronger principles, they just keep compounding.
01:24But we have to start with the foundations. And what is that? The foundation is level one, which effectively is what we call the grab and go.
01:31Basically, this user heads over to Claude and he treats it like a chatbot. So let's say something like, hey there Claude, I want you to build for me a simple website or just a nice looking website that's cool about iPhones that are yellow.
01:43Build me one of those websites. Okay? They just come over, they yap, they say, Claude, build me a website, please.
01:47And the issue with this is that it's basically using Claude like a chatbot. The design quality is like three out of a 100. This is just like grabbing a designer to renovate one of your rooms in your house and saying, hey, make the room look nice.
02:00And most people use Claude this way, but that's completely okay because this is only level one. And just like that, we get the very first website. As you can see, it's got a floating iPhone.
02:09Not too much happening in terms of creativity. It's very, very kind of simple. You can see it's kind of classic AI website design feel to it.
02:15It's done it. It's basic. It would kind of do the job, but it's probably the most basic thing possible.
02:20And this is done purely with Opus 4.8. Fable five is even stronger, but this is a very, very basic first draft. But we can radically improve the quality of this by moving on to level two, and this is how you solve level one.
02:33You solve level two by giving it screenshots and references. Imagine, for example, having a designer. But instead of saying, hey, make it look nice.
02:40Instead, we get a beautiful sheet of paper and we say, hey, I saw this apartment across the street and I love what they did here with the garden. Could we replicate that? And here's a few other examples.
02:50Effectively, what we do here is the level two user of Claude code websites are providing screenshots and references to help Claude make that design way better. They're gonna show, not tell.
03:01I'm gonna say an image speaks a thousand words. Well, it's certainly true when it comes to cool coat design as well. Must be honest.
03:07Now your design quality of this level is about 10 out of a 100. But where do you see how much of a difference this action makes?
03:13So if you come down here and look at this, there's a few different websites you can go ahead and check here. Let's pull them We got Gardly, Landbook, Awards, and Dribbble. I'm gonna put a link for everything I cover in this video down below in the description so you can use assets.
03:23So look, you got gardly.io, which is fantastic. And look at this.
03:26Like, let's say I held up these gorgeous websites. You can pick one from here. You've got Landmark, which is fantastic.
03:31We can search and find different beautiful examples, beautiful videos.
03:35These are websites that already look amazing. And we've got these award winning websites.
03:41These are fantastic resources. If you want a grab and go, find me something like this. Look, if I get if I grab Glido and, like, dashboard.
03:48Okay? And I switch for dashboards. Now I'm gonna get all these beautiful references of dashboards.
03:52That's how freaking cool this is. So for example, I might really like the look of Halo Lab. Right?
03:56I can click on this and I can mood board and get inspiration. So I can copy the image, come back over to Claude like so, and we come down to the chat and drop that one in there. Beautiful.
04:05And again, you can find different ideas, different things that you like, and it, you know, it looks really cool. Grab inspiration and drop a mood board. Then you can say to Claude, for example, hey, I'd like you to update the website using this image as a reference style for how I'd like the website to look.
04:18And as you can see, what Claude's done now is actually looked at the reference image and started to build it on there. Now, you'd never give this website. Of course, you wouldn't.
04:25But the idea here is that people at level two are now starting to bring in and use images to actually influence the design architecture of their websites. And that takes on to one of the biggest upgrades that you're gonna have in the early levels and it is gonna be a game changer for you and that is what we call design skills.
04:43So if you think about our design, right, we've got him in a room, which is fantastic. We have given him images to help explain, hey, this is the kind of thing that I want to, and we've even given him reference designs. Skills comes down to how good is the artist himself.
04:59Oh, is he eating crayons in the corner or is he creating arts of work, you know, works of art that will be in museums for decades? And you're gonna see just how much difference skills mean. Now, if you've done them, skills are think of them as prepackaged sets of instructions that have been designed by basically design nerds or experts or teams that instruct our wonderful Mozart how to play the piano.
05:20It's kind of explained this is exactly how you create great design. This is what a website should look like. This is what a website should not look like.
05:27It explains all this difference. So we have the raw intelligence plus these really cool instructions.
05:32Now what skills do we need to look at? Things like this. Again, I'm gonna put a link down below for all of these.
05:36So for example, let's open these up and I'll show you what they look like. So front end design, we've got this one. Now, if you're not familiar, essentially, these are managed on a place called GitHub.
05:46GitHub is basically just fancy speak for place we store files. And a lot of design nerds or people who care about design have sat down and said, look, let's actually iterate, find out what works and codified it into a skill. And look at this, almost a 100,000 stars.
06:00Doesn't necessarily mean it's amazing, but it's really good. The UI UX Pro Max skill is freaking awesome. Look at this.
06:05Goes through loads of stuff. It has loads of example stuff. 67 UI styles, a 161 color palettes, font pairings, loads of stuff that make design amazing.
06:13And all you're gonna do is come down, click on this code button, click on copy, head over to the cool code and say, hey, I want you to go ahead, check out the skill, then download it and add it to your skills. We're gonna be using this when we build websites. Okay?
06:24And all you can do is literally drop in your app, come back over, and let's check out another one here. And essentially, you can get on all the different design skills. Get to check it out to make sure it's good and decent.
06:32Here's another great one of all. This is Shadowing UI. This is a really cool system.
06:36And when you do that, Clone will actually go over to that repository, grab the information, and turn it into a skill that you can later activate via Clone Code. Then for example, if we run the test again, I can say, hey there, I'd like you to use all the best skills and design principles to build me a beautiful website selling yellow iPhones.
06:53And I might just say, make sure that using all relevant skills that I've given you for building beautiful design. Okay. Which is great.
06:59And one other skill I'm gonna give up is one called power design. I did a lot of deep research on like what makes design amazing. This is for slides, but it applies to websites as well.
07:07So I'm just gonna copy this and give it in here as well and drop this one in. And then for good measure, why don't you go ahead and also give it a little bit of a screenshot so you can get a good idea of what great design looks like. There we go.
07:17Copy this bad boy like so. Come down, click copy, and then drop that into chat and send Claude on its way. And then just like that, we now have the website from level three.
07:26Now immediately, you can tell the difference between this and what we had in level one. We've even got the Apple logo. We've the centralized color palette down there.
07:33We've got a phone that looks a little more like a phone. It's floating up and down. It could be a lot better.
07:37I'd want a lot more in here. There's some stuff I would definitely change. But you can see directionally, it's going the right direction.
07:43It's even got this thing here from the Apple website, which is exactly the thing we're looking for. And that's going the website. You get a it says step up and it's got this bento box style.
07:50Step in the right direction, but not perfect. But this, I do think it looks called Daybreak, Canary, Sunshine, Honey, and Amber. Different shades yellow.
07:56Bridge, rock, and roll, and we can buy our photos there. And that takes us nicely onto Level 4 where things seriously start to take up a step in terms of quality. But if all of this sounds like I'm speaking Spanish, I'm gonna put a link down below for the full Hermes AgenTik masterclass and the full ClawCode AgenTik masterclass.
08:12It takes you through everything from foundation setup. If you've never used Claw before, this is the most comprehensive system that I've ever built for this topic.
08:20I I show you website stuff I've never shown anywhere else. We're gonna set everything up, power systems, memory design systems, and even monetization. I'll put a link down below because you can grab that as well as the full Claude code and Hermes operating system.
08:32Just a link down below so you can go ahead and grab that. Now it's important to bear in mind that when we really wanna take a website to a new level, we have to think about things more than text and graphics. We have to think about image and video.
08:45And the best way to think about it in this instance is it's giving our wonderful artist tools. It's giving them the ability to add new things into an environment that they just simply did not have before. And one of the tools that's caught my eye recently is Open Art.
08:56Now, let me show you a couple of things we can do here. So obviously, we can generate things like images. Right?
09:00So let's say in our website environment, we actually want to go ahead and create an iPhone. So I'll explain why we're using OpenR in a second, but let me just go ahead and build something. So you're come down here to model, click on Nano Banana two.
09:12Let's come down here, and I'm gonna say something like a beautiful yellow iPhone. Okay? That's cool.
09:17And then let's just pick actually the ratios. So the ratio, I'm gonna go down here guys. Let's get a little bit of a wide shot.
09:22Let's do 21 by nine. Let's just grab this one here and we're gonna put that in two k. No need for four k.
09:28Come down here. Now I've gone ahead and clicked two separate images I wanna create. Usually, you wanna do two to four.
09:34Now you can build images directly in the editor itself. You can also connect Claude code to image generated via MCP, which is a real unlock for level four because essentially you can be things like, hey, go build me this website and generate for me beautiful images that will slot in and be relevant.
09:49And what Claude will do programmatically once you connect it is build out all those images for you. So you just say it once and you get the programmatic creation of all these incredible assets. So now we have this.
10:00One thing I might do is a little adjustments actually, as I think I'm gonna probably remove it and get a white background. So let's go ahead and just adjust this. And then we can play around with it, get ones that we like, and you can literally copy image and drop it.
10:10Now one of the things about very good websites, I've got a couple examples that we've built in previous videos that just shows you how epic this can be. I mean, look at the this is the kind of thing you can build with image and video with CallCode websites. Again, we have this one here.
10:23I'm just gonna mute this one because it's got a bit of background noise. We have this rocket website which was done with Fable five, and we have this one here as well which is done with the model that we use. Funny story, but I just went for dinner.
10:34And in the literal hour that I was away from my desktop, I came back. Fable five I was like, where's my phone right now? I was like, literally, it's crazy.
10:40So I'm gonna show you Fable five as well integrated in this. These principles apply regardless of the model. The model is just a a multiplier.
10:48It's an accelerant to it. Just like this rocket that's accelerating quickly into space. Now one of the reasons that I really like Open Art specifically as I wanna draw attention on video because when you look at these websites, right, sometimes, okay, it's gonna be a video like I've done loads of animated videos on websites just like this for example.
11:05So let's say for example we really like the look of this iframe. Well check this out. On the left hand side, if you come over to video, what we could do is actually create a video with this iPhone in it.
11:14Now if I come over to the homepage on OpenArt, you can see this really cool interface. We can pick anything we want to, replace the background, edit video, lip sync, VFX, Smart Shot, motion sync, whatever we wanna do. I'm gonna go ahead and click on video, which is really cool.
11:26And let's say that I actually wanna go ahead and pick a great model. Let's listen to Kling. Let's go ahead and choose Seed Dance two point o.
11:32And then for the start frame, let's go ahead and grab this one like so, and just say, this is a product shot. Please rotate this phone for the video. Alright.
11:40Very, very freaking cool. Come down. We're gonna have the enhanced prompt on, and then let's get a couple different variations.
11:46And again, you can put the outputs down here and the right dimensions that you want to. So we're gonna want this to be 16 by nine. You can pick the duration and also the size.
11:52And since I also want this to end on the same thing, let's actually have this one here as the end frame also, which is great, and then click on generate. And look at this guys. It's now complete.
12:01Now if I just hover over this, for example, Literally perfect. Like the fact that it lands in the exact same location, I know sounds really obvious, but you would not believe usually how much faff free that takes.
12:16It is chief faff activity, I'm telling you. And we got two versions of it. It did it flawlessly, and this could all be done directly with Claude for anything that we're building.
12:23So then Open iT itself has got some really cool stuff. You can direct loads of models, shoot ones, user interface is freaking beautiful, and here's a good sort of comparison for the brands that you may be familiar with in terms of what you can get in terms of image generation. Very cool.
12:36Now, this takes us very nicely onto level five, which is a hack that most people don't know, and it is gonna seriously level up the quality of any website. And this is called UI sniping.
12:48So the the way that I want you to think about this, okay, is imagine we have our designer or here we've got a a jeweler, and he can go into any design environment ever, any building he wants to. And he can literally say, hey, I love the look of that fireplace.
13:00And he could just pick up the fireplace and copy and paste it in your environment. It is an exact copy of a certain thing. And essentially, there are these libraries on the internet that have built these these sort of lines of code that are like basically publicly available and they share them online for others to use, which means that we don't need to reengineer the wheel.
13:19We don't need to reengineer this Velvet design asset or this jar or this thing on the table. We can literally component, copy and paste, and it's freaking beautiful. So let's open and check them out.
13:28We've got 20first.dev, Copan, Magic UI, and Marvin. Very, very, very freaking cool.
13:33So 20first.dev, essentially, you can come down and find all of these gorgeous things. So let's come down and have a look at latest components.
13:40What I always recommend that you do, by the way, is you come on left hand side. You're looking for essentially, if you come down to featured, these are usually some of the best ones. So you see this toolbar, very cool.
13:50Side button, very cool. You can search for anything that you want to. These balloons are very cool.
13:54Say for example, you wanna let's have a party and you want these balloons to pop up, we could do that. CodePen is excellent. There's so many places you can go to CodePen.
14:02Got Magic UI. Again, so many great design libraries and also Marvin. Again, I'll put all the links so you can go ahead and grab them and start having a wonderful design.
14:10I love this website. This is really fresh. But let's say, as for instance, you wanna come over, you can grab this one, launch balloons.
14:15All I'm gonna do, literally, is come down to copy code and head over to Claude. So we can come back over to Claude and say, hey there, I'd like you to integrate this balloons feature at the bottom of the page. Integrate this exactly.
14:26And then literally come down and just give it the actual URL itself, and then Claude can actually integrate that into the website. Guys, and look at this. It's just added in those balloons, scroll up, and it must escape.
14:35I think that is a really cool feature. But the truth is, as cool as it is, none of it means anything if you don't have level six down. And that is data.
14:43Now websites exist for a reason. Right? They exist to create a customer or to educate somebody on a specific thing.
14:50Usually because we want them to take some kind of action. So a beautiful website that does not actually turn viewers into buyers, it is like having a Ferrari with no engine. Looks freaking amazing on the front of the house, but doesn't really do anything.
15:04Okay? So the idea here is that we wanna be able to actually find the data. And the cool news is that all the data to create a website that wins and converts is already out there.
15:13You just need to know how to find it. Now to do this, I use a tool called Firecrawl, is the best scraper I've found for getting information from the internet. It is literally ridiculous.
15:23It'll grab for you logos, typography, anything you could possibly imagine. Why is that relevant?
15:27Well, I'll give you an example. Hey there. I'd like to go ahead to apple.com and use my Firecrawl integration.
15:33Let's go ahead and grab me the brand identity and then just upgrade this website in accordance with that. And literally, Firecrawl can go ahead and extract brand identities from anything, meaning that you can understand the color scheme and the different fonts that are used by a specific website.
15:48But what's even cool than that is the kind of prompt that you can give it when you connect it with Claude. So for example, I could say, hey there, I am launching a roofing business in Leeds in The UK. What I would love you to do is go online and find for me the 10 most successful roofing businesses in London.
16:04And I want you to find for me 10 ones that are not doing very well. And I want you to do for me comprehensive research in terms of what do the winners have that the losers do not. What do they have in common?
16:15What is the order of their website that they will have an image and then a CTA? What is the CTA? How are they so successful?
16:21And you also need to come up with a scoring matrix to determine what a great website is and isn't. The output I would like from you at the end of this is a clear blueprint that I can pass to another model to actually create for me a winning formula for this website.
16:37Everything must be evidenced. And if required, I also want you to cross validate this with a different model. Make sure that you use the Fire Crawl MCP to do that research.
16:47Now, I've done full videos on this breaking down this exact process. I'll put a link on screen if you wanna go very deep on this. But literally, you just say this thing to Claude and it uses it and it brings data, guys.
16:58And I'm telling you right now, having had businesses that I think we had like 50,000 unique visitors every single month. It was very cool.
17:04We you literally need to understand what converts, what doesn't. And level six websites are the ones that are actually using external data, not copying, but looking at external data to build those websites out. And actually guys, I'm just gonna head into Glideon to copy this for you and add this to this resource pack.
17:20So if you do wanna get a prompt like that, you can as well. I'm gonna include that in the resources for you. And this takes us on to the strongest level.
17:26Now, I'm telling you, I built so many websites. They call me Doctor Website in this town. Tell you now, the best strategy that I have found to actually create gorgeous websites to convert is to do something called design extraction.
17:39Let me explain exactly what that is. So think of it like this. Imagine our designer, okay, has found or we have found a perfect website or in this case, a building or a room that we like in our analogy, okay?
17:51And not only, okay, do we have the tools, the skills, the foresight, the imagery, but we can actually talk to the original creator. We can talk to the architect of it. So essentially, what this means is that Claude doesn't always understand what great design is.
18:06And sometimes we don't even understand what great design is. We can't articulate them. We, you know, not everybody has the vocabulary to explain, you know, I want ample white space.
18:16Or there should be a golden ratio between this tech. Like, there's you can codify these rules, but it's sometimes it's more difficult for you to explain. So for example, if you landed on a website like let's use as an example.
18:28Check out this website. So if I open this up, in my view, this is a brilliant website, genuinely. It's one page, one thought, which is really nice.
18:36It's it got interactivity, but it doesn't distract. Just scroll down, there's animations, there's video.
18:42It's really crisp. It's clear. You have these things floating around.
18:46You have the text coming down. You have anti gravity two point o here. This is a beautiful, gorgeous website.
18:51But maybe you like this website. You think, know, I've got a tech product. Obviously, I don't wanna copy anything, but I I like this vibe.
18:59Like, how do I get a model to understand what this is? Well, the idea is that we can actually ask Claude to extract the design identities. Like, what, you know, what are the type what's the typography?
19:09What's the colors? What are the general design rules? And I spent hours building this for this specific purpose and it gets crazy results.
19:16For example, even these websites here, this was built like like, I'd build it in various different ways, but this whole thing here and here was built in the same way. I mean, look at this. This is gorgeous.
19:26This is fantastic. You know, it's subtle. It's got subtleties.
19:29It just understands certain design principles. So to do this, I'm just gonna grab a skill from my community that I built specifically for this under every AI automation.
19:37And on the left hand side, I've got my building websites blueprint. I'm gonna come down and grab my design blueprint extractor. Now if you don't have this, the easiest way to do this is literally explain what I just explained to you to Claude saying, hey, I want you to be able to create a blueprint and verify this so that I can do anything I need to.
19:52And then to make this even more powerful, I'm gonna show what this looks like with Claude five. In other words, Fable five.
19:57I'm gonna come down here. Where is Fable? Come down to more models.
20:00It's not available. I need to restart my instance. Voila.
20:03Almost by magic, we should see Fable five, which is fantastic. And then you just attach the skill or just explain what you would like. And then there's basically a problem like, hey there, I'm gonna give you a website.
20:11I would like to basically understand the design and I'd like you to follow all the instructions in this file. Namely, go to this website, understand the typography, the design, and get a an extraction blueprint so that I can build a website that levels this up.
20:25And our website is gonna be on selling beautiful phones. And then we literally just grab the website, come back over, drop it in, and we're ready to go. And just so that, guys, this is what it's pulled together.
20:34And look at the difference compared to what we had earlier. This is night and day. It's chalk and cheese.
20:40It's ebony and ivory. It is crazy. It's given it a name.
20:43It's even managed to get this orb that is dynamically changing color, and it's got this beautiful text. This is fantastic. Five phones, no wrong answers.
20:51I mean, is ridiculous. This is actually insane. Look at the quality.
20:56And this is one shot. I haven't done anything else than the exact system I just showed you. And this is where we're at with it.
21:02Very, very, very, very impressive. Now this is just a fraction of what we can do with Fable five. So if you wanna learn exactly how to take your website to a new level, you need to check out this video where I'll show you exactly how to do that step by
The Hook
The bait, then the rug-pull.
Jack Roberts opens with the blunt claim that Claude Code websites usually look bad, not from user error, but from a missing-skills gap he compares to having Mozart with no piano. What follows is a seven-level system, each level stacking a new technique on the last, ending in a live one-shot rebuild that the host calls night-and-day better.
Frameworks
Named ideas worth stealing.
01:28list
The Seven Levels of Claude Code Websites
Level 1: Grab and Go, plain chatbot prompting
Level 2: Screenshots and References, mood-board inputs
Level 3: Design Skills, GitHub skill repos
Level 4: Image and Video Generation, OpenArt via MCP
Level 5: UI Sniping, copying pre-built components
Level 6: Data, Firecrawl brand and competitive research
Level 7: Design Extraction, full blueprint extraction and rebuild
An ordered, compounding system for escalating the design quality of AI-built websites, each level adding a new category of input Claude is missing by default.
Steal forAny AI-assisted website or landing-page build where the default output looks generic
CTA Breakdown
How they asked for the click.
VERBAL ASK
21:04next-video
“if you wanna learn exactly how to take your website to a new level, you need to check out this video”
soft next-video pointer plus description links to a paid all-systems bundle and free resource links, no hard sales pitch on screen
A 17-minute live showdown comparing one-shot website descriptions, award-winning site clones, and design DNA extraction -- making the upgrade case for Fable 5 while showing how to tame its token appetite.
A 14-minute walkthrough for wiring Andrej Karpathy's self-auditing LLM wiki into Hermes agent — so your AI can read your inbox, meetings, and expert research, not just you.
00:01
00:33
00:49
01:08
01:29
01:47
02:27
02:33
02:56
03:29
03:42
04:07
04:25
04:34
05:34
05:47
06:22
06:46
07:13
07:46
08:19
08:29
08:45
08:48
08:52
08:54
09:36
09:59
10:04
10:28
10:52
10:58
11:19
11:59
12:14
12:23
12:46
13:14
13:27
13:46
13:58
14:13
14:36
14:42
15:38
15:54
16:11
16:27
16:44
17:00
17:16
17:38
18:14
18:23
18:59
19:15
19:32
19:41
19:59
20:12
20:25
20:39
21:03
16:50
15:02
25:05
26:24
14:29
21:07