11:39Jack Roberts · Demo
Fable 5.1 vs ChatGPT: One-Shot Website Design Put to the Test
Five identical design briefs, one shot each, no retries — Fable 5.1 against ChatGPT 5.6 Sol, plus the exact stack behind the wins.
September 2ndThe argument in one line.
A website that sells isn't one polished homepage. It's a full mapped-out site built from a proven design reference, filled with AI-generated visuals in one consistent style, mobile-optimized, stripped of AI-sounding copy, and structured for search, all directed through Claude across seven repeatable steps.
Read if. Skip if.
READ IF YOU ARE…
- You build websites for clients or your own business and want a repeatable process instead of guessing at design.
- You already use Claude or another AI coding tool to build sites and want to close the gap between 'looks nice' and 'actually converts'.
- You've shipped an AI-built website that visitors bounce off of and suspect the copy or mobile experience is the problem.
- You want a checklist for auditing an existing site's structure, mobile behavior, copy, and SEO before a redesign.
SKIP IF…
- You're looking for a no-code drag-and-drop tutorial. Every step here routes through Claude and requires comfort typing instructions to an AI coding tool.
- You need frontend code walkthroughs. The video shows what to ask Claude for, not how the resulting code works.
The full version, fast.
Jack Roberts breaks a $10,000-quality website into seven skills he runs through Claude. First, copy the 'design DNA' of an award-winning reference site instead of guessing at good design, then use Relume to map a full site, not just a homepage, into a sitemap, wireframes, and style guide exported straight into Claude. Connect an AI image generator like Higgsfield through MCP so every image and logo shares one visual style, then build a scroll-stopping interactive tool, like an instant quote calculator, that rewards the visitor immediately. Mobile-optimize the build, since 60% of traffic is on phones, then strip AI-sounding copy patterns like empty superlatives and elevated verbs so it reads human. Finish with borrowed UI components and a Claude-built SEO keyword strategy before deploying through GitHub and Vercel.
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:33
01 · Hook: Websites That Actually Sell
Cold open stating the video's thesis: a beautiful AI-built site still needs the right skills to actually sell or get customers.
00:33 – 01:46
02 · Level 1: Finding the Standard
Find an award-winning, converting reference site in your niche (he uses Mintlify via refero.design) and hand its design DNA to Claude as a style source.
01:46 – 05:42
03 · Level 2: Mapping the Whole Site
Use Relume to turn a written brief into a full sitemap, wireframes, and style guide covering every page, not just the homepage, then export it into Claude along with the free Design Loop skill.
05:42 – 12:41
04 · Level 3: Scroll-Stoppers and On-Brand Imagery
Connect Higgsfield to Claude via MCP for consistent AI-generated images, video, and logos, then build a scroll-stopping interactive lead magnet (a roof quote calculator) using UI inspiration pulled from Savee.
12:41 – 14:53
05 · Level 4: Mobile Optimization
60% of traffic is mobile, so the build gets run through a battle-tested mobile-optimization repo via Claude and manually checked screen by screen.
14:53 – 18:30
06 · Level 5: De-Slopification
Identify the classic signs of AI writing (empty superlatives, elevated verbs, em-dash pile-ups) and rewrite the copy for instant, human-sounding clarity using a custom de-slopification tool.
18:30 – 20:30
07 · Level 6: Icons and UI Sniping
Grab standout UI components from libraries like Relume and 21st.dev ('UI sniping'), add credibility widgets, and finish the visual polish with icon packs like Flaticon.
20:30 – 22:56
08 · Level 7: SEO and Launch
Feed Claude a GitHub SEO skill plus target keywords to build a ranked content strategy, then deploy the finished site through GitHub and Vercel.
Lines worth screenshotting.
- A gold-standard reference site gives you a design DNA you can hand straight to Claude, instead of trying to describe good taste from scratch.
- A $10,000 website is never one landing page. It's a full site map: home, about, services, projects, blog, and contact, all built out before a single pixel gets polished.
- Relume can turn one written brief into a complete sitemap, wireframes, and style guide, then export straight into Claude as a starting point.
- Connecting an AI image generator like Higgsfield to Claude through MCP means a site's hero images, logos, and video backgrounds can all match one visual style automatically.
- An 'ounce in pre is worth a pound in post': time spent planning the site map before generating any page saves far more time than fixing pages after the fact.
- A scroll-stopping interactive tool, like a roof quote calculator that returns a price in seconds, converts better than a static contact form because it gives the visitor something back immediately.
- 60% of web traffic is mobile, so a site that only looks good on a 27-inch monitor is failing the majority of its visitors before they read a word.
- AI-written copy has fingerprints: three-item adjective flourishes, 'not just X, but Y' constructions, elevated verbs like 'leverage' and 'unparalleled', empty superlatives like 'most trusted', and em-dash pile-ups.
- Swapping 'we leverage industry-leading materials to deliver unparalleled protection' for 'we source materials from manufacturers who test for wind, hail, and sun' replaces AI-sounding claims with checkable specifics.
- People can smell an AI-written website from six miles away, and a mobile-broken, jargon-heavy page confirms the suspicion before anyone reads the copy.
- 'Don't make me think': visitors browse websites, they don't read them, so a page has to be understood at a glance or it loses the visitor's attention.
- 'UI sniping' means finding a component you like on a library like 21st.dev or Relume, copying its code, and asking Claude to drop it into your own site in your own style.
- A dedicated SEO skill fed a target keyword list and the site's structure can build a full content roadmap, ranking pages by search volume against difficulty before a single article gets written.
- The finished site deploys through a private GitHub repo connected to Vercel, so pushing new code updates the live site automatically.
Seven skills separate a pretty AI website from one that sells
DESIGN WORKFLOW
A site that converts is a mapped-out structure built in one visual style, optimized for mobile first, written to sound human, and backed by an SEO plan, not just a good-looking homepage.
02Level 1: Finding the Standard
- Pick a reference site that's already winning: gold-standard, award-winning, and actually converting customers in your niche, not just visually appealing.
- Hand that reference to Claude as a design DNA source instead of describing your taste from scratch, so the output matches a proven visual language.
03Level 2: Mapping the Whole Site
- A real site is a sitemap: home, about, services, projects, blog, and contact, mapped out before any page gets built or styled.
- Relume turns one written brief into a full sitemap, wireframes, and style guide you can reorder and edit before exporting to Claude.
- Planning the structure first saves far more rework than fixing pages after they're built, the same prevention-first logic as any other build.
04Level 3: Scroll-Stoppers and On-Brand Imagery
- Connect an AI image generator to Claude through MCP so every hero image, logo, and background shares one consistent visual style automatically.
- An interactive tool that gives visitors something back immediately, like an instant price quote, out-converts a static contact form.
- Borrow UI inspiration from sites like Savee for the look you want, then have Claude rebuild it as a working component in your own brand.
05Level 4: Mobile Optimization
- 60% of web traffic is mobile, so a site that only reads well on a desktop monitor is failing most of its visitors.
- Ask Claude to pull in a well-reviewed, battle-tested mobile-optimization repo rather than hand-tuning breakpoints from scratch.
- Manually scrolling through the mobile build yourself, on an actual phone, catches broken layouts that automated checks miss.
06Level 5: De-Slopification
- AI-written copy has recognizable fingerprints: three-item adjective flourishes, 'not just X, but Y' constructions, elevated verbs, and empty superlatives like 'most trusted'.
- Replacing a vague claim like 'we leverage industry-leading materials' with a specific, checkable detail makes copy sound human again.
- Visitors browse websites instead of reading them, so copy built for instant comprehension outperforms copy that requires effort to parse.
- People can spot an AI-written site almost instantly, so de-slopifying the copy matters as much as fixing mobile layout or page speed.
07Level 6: Icons and UI Sniping
- 'UI sniping' means copying the code of any component you like from a library like 21st.dev or Relume and asking Claude to add it to your own site.
- Small credibility widgets, like a hover card showing customer stats, add legitimacy signals that a plain logo row doesn't.
- Icon sets from services like Flaticon cost about $10 to $12 and instantly shift a site's visual tone toward a specific audience.
08Level 7: SEO and Launch
- A dedicated SEO skill can build a full keyword strategy from your target audience and intent, ranking terms by search volume against difficulty.
- Claude can push the finished code to a private GitHub repo and deploy it through Vercel, so the whole build-to-live pipeline runs from one conversation.
Terms worth knowing.
- MCP (Model Context Protocol)
- A connection standard that lets Claude talk directly to outside tools like an image generator, so it can create and place assets without the user manually copying files back and forth.
- Design DNA
- The recurring visual patterns of a reference website (layout, color, spacing, imagery style) extracted so they can be reapplied to a new site.
- De-slopification
- The process of rewriting AI-generated website copy to strip out generic patterns like empty superlatives and elevated verbs so it reads like it was written by a person.
- UI sniping
- Finding an existing UI component you like on a design library or reference site, copying its code, and asking an AI coding tool to add it to your own site.
- System 1 cognition
- Fast, automatic thinking that happens without conscious effort. Landing pages designed for it prioritize instant clarity over persuasive detail.
Things they pointed at.
01:00toolrefero.design
20:32toolClaude SEO (GitHub repo)
Lines you could clip.
14:54
“That is what I call the fight against the AI slop monster.”
18:10
“People can smell AI websites coming from six miles away.”
09:17
“There's many ways, as they say, to scan a cat.”
03:36
“An ounce in pre is worth a pound in post.”
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.
metaphoranalogy
Claude is the world's number one design agent for building beautiful websites. But just because your site looks pretty doesn't mean that it will sell or get customers. For that, you need to use the correct skills.
And in this video, I'll show you the most important ones across seven levels so you can build beautiful websites that are mobile optimized, sound like they've been written by a human, and have the correct structure without the need to be a design expert. So if you haven't already, grab that. beautiful coffee.
and let's dive straight in. So level one is finding the standard. Now, building a beautiful website isn't actually the hard part.
It's the other stuff around it. And I'm going to cover those seven skills here. And by the end of the video, you will know everything you need to know to build websites that do actually sell or just significantly level up your website, including all the psychological things that I've learned from doing this myself that you're not going to want to miss out.
So how do we find out what the standard is? Well, we need a great reference point. And one of the best resources that I found for this is going to be refero .design.
And I'm going to timestamp everything down below so you can go to any section you like to. But I encourage you to watch every bit because it's going to have stuff that you probably haven't seen before. So what I would encourage you to do at level one is effectively find a website in your niche that is...
gold standard that has won awards that is converting customers and if i come on to this section here the one that i'm going to be using this one is going to be mintlify which i think is a beautiful and gorgeous website as you can see it's got a nice background here it scrolls down it shows you now what this has done is given us the design dna the design blueprint such that we can actually understand what makes this design fantastic and when we give that to Claude we can build a version for ourselves.
So now we've found a great design and it would be awesome for us to have that. We're going to do something that most people never do and that's think about something beyond the homepage because to have a great website, what we need is a full structure.
So there's a couple of ways to do this. You can build the site in Claude. One of the cool tools that I've been using a lot recently is something called ReLume.
Now, ReLume is kind of like this really decent, it's built by designers. It's got loads of individual kind of like design knowledge baked into it, but it's very cool. Now with ReLume, we can actually get full site maps like this.
And this is what I want really. I want to get a bird's eye view of my website because if we're handing this over to a client or building ourselves, people aren't just going to stay on the homepage.
They're going to click into different things, right? We're going to need a wireframe that explains what everything looks like. We're going to want some idea about what does design look like, and we need to give it a brief.
And I found Relium to be the fastest way to get this up and running. You can do this in Cloud if you want to, but if you want to do it quicker, you might find this very helpful. So there's two ways we can do this.
Number one, with this skill at level two, is you can do export. So if you click on export, for example, what you can do is come over, click on a new project, and then effectively you can describe it. So I might say, hey there, I want you to build...
me a roofing company that is best in class using the below design principles. Then once you've done that, come down and literally just paste in that URL that you grab from this website right here.
And you can, if you want to, also just copy and paste all of this and just drop it in. Then once you've done that, you'll actually get a sitemap that's generated from Relume. And I think this is really cool.
Now, one of the reasons why this is really handy is we can actually move these sections up and down. So remember, an ounce in pre is worth a pound in post. So we're still going to make this look amazing.
But what's great is that we can actually think through. what does our site map look like? Well, about us page, a services page, projects, blog, contact us, everything.
We can look at the wireframes, which is fantastic. And then on the wireframe section, you can actually just see what all of those different things look like. We can move them around.
We can edit them in the left -hand side. It's really great to spend a few minutes going through and building out everything you want to. And of course, we've got the style guide based on everything that we gave.
We've got the colors. We've got things that we can change. If we don't like seller, we want to change something else.
We can do anything we want. So it gives. this all -in -one platform effectively to kind of build any website that we like then once you've got to a point where you're really happy with the wireframes what we can do is come over to top right and click on export and you can export this directly to Claude design but for the purpose of this I'm going to export it via html and then you want to come back over to Claude upload that zip file and say hey I want to go ahead and build for me a beautiful website using this link based on the zip file and all the design systems that we got from Reloom and what we can do is also grab this reference link so Claude's got access to the original and then you want to go ahead and grab this design loop skill it will be the second link in the description once you click on that link you will land on this page here which is where i keep all my free resources again it's 100 free you come in basically and then you'll see the video here you can literally grab it for free so people get a little bit confused just wanted to explain where that that is so you can come and grab it then now what this design loop does it helps us basically
basically inspire and get the style that we want to using some really cool techniques. All you're going to do is copy it all before. If you haven't, come back over to Claude, drop it in, and then let Claude work its magic.
And side note, by the way, you can actually do all this in Reloom if you wanted to. If you click on publish at the top left, it kind of functions as a full CRM system. So if you look at the one that I built earlier, for example, the Roofing Co website, you can see you can build everything.
So one of the big things that people struggle with is a CMS. So it's the exact same thing. You've got the brief it builds out for you, which is really awesome.
You get the full site map. here you get the wireframes as well which you can edit in a million different ways it's super intuitive and then you've got the designs that you can play around with then on top right when you're done with it you can actually publish it like so in a click and then you've got this continue and you can view it in a new window and have a great time doing it what is really cool just collect very quickly if you're doing it here if you click on for example library you can see the images you've got styling over here but if you click on this little settings here you can edit the pages like so so you can see the meta title meta description it's just it's an easy in the box way if you wanted to go ahead and do that but we're going to do now is come back up to claude and see what it built for us.
But Claude is not going to be able to get us a beautiful website that looks anything like this, unless we give it the ability to generate beautiful images with the latest models. How do we do that? Well, the one that we're going to be using here is Higgs field.
I use this all the time. All the images you see in my websites, presentations, I use this. The really cool thing about this is we can actually connect this to Claude so easily.
All you're going to do, and I'll put a link down below, so you can just click it and just grab. You can screenshot this. to or just grab the url and just give it the url i post down below now what we can do with this is build images in the best models best videos but effectively what's really cool about it once you screenshot this or copy the link you just let claude know hey i want you to connect to the higgs field cli so we can create beautiful images and videos here's the link just like that and it'll open you up in a new browser you sign in and then you're ready and able to make the magic happen and when i tell you that using Higgs field on websites isn't just about 3D animations.
You can literally build things that look spectacular, stuff that you wouldn't even really think. And I'll show you exactly what I mean in a minute. So then we have this.
beautiful website which again we built the structure this is the step that everyone misses guys building out the site map and the structure because one pages are cool but no one just buys a page right they need buttons to click on if you're selling this for a roofing company if you're selling this to any business at all they need to have this sort of stuff locked down which is great we got that structure we've got the best design system we've got the images and videos and then this is what we've got from that it's built as a logo which is awesome and again one of the great reasons why we bring in hicksville because we can just build the logos as we go if the client doesn't have it and you'll notice it also copies the exact style here with the green and the black which is what we wanted to be inspired by and we've got that which is awesome so then we can come down and have a look this is a nice thing we've got this beautiful animation we've got the companies that we're working with nice bit of animation here which is awesome and in fact what's really cool you can see as you're fresh that these animations pop up build the same thing
That's really crisp. And then we've got these different businesses we work with, Anthropic, Slack. Obviously, these are examples.
I don't know if Stripe is paying us to do the roofs. Well, at Richland, guys, they are. At Richland, we work with the best AI companies ever to give them the best roofs.
Don't you ever forget our roof abilities. Loved by your favorite companies. This is really crisp, guys.
The design on this is fantastic. And look at the adherence, by the way. Look at the adherence to some of the features here.
So if you can come down and see. Actually, as it scrolls down, look at the scrollability at the bottom of this. You see this?
I just love how it's kind of like done its own thing, but kind of understood why that looks good and why that's so crisp. I mean, it's just such a beautiful design. Then you can come back.
We've got this here. Find out what is actually wrong with your website. And then we've got all this stuff here.
But it doesn't just stop there. Now we've actually got... the website so we've got different pages and stuff that we can play around with so we can click on things like services and about us and build these pages out and it's just got the whole site map that's been developed now by using these tools now believe it or not this is just the foundation level three is where we take it to a new level now to reiterate we've got the site map we use relume to get basically one brief in we've got site maps wireframes which is cool now because if we ever want to build out the website we can do it in one location which is super handy These are human -made components.
They're not necessarily AI generated, which is awesome. And it's going to help us have a really consistent style with all the beautiful websites that we build out. Level three.
is the scroll stopper. You know, this is a classic example. I built this again using Higgs field video generation.
It's beautiful. It's a showstopper, but everyone thinks of just the website. But there's so many different ways that you can actually create attention, especially if you want to drive lots of conversions.
And these do convert. They are beautiful. But there's .
So for example, if you come over to a website that I'm in love with recently, which is Save with two E's, many E's, you can see these beautiful designs. But what's really cool is you can search for inspiration. So I could come down and like I've said before, I might say dashboard UI.
So let's say that we're building out a dashboard together, right? And we want some inspiration. You can look at Pinterest.
but everybody's on pinterest although pinterest is cool to be fair you can find beautiful things let's say i want to have a sign up form right maybe we want to add something interactive to our roofing website essentially so that they give their information but then what if we could have a beautiful you know get them a quote some kind of lead magnet well we can find beautiful designs that we're inspired by one such one that i found that looked amazing was this one but what's the problem with this jack the problem with this is this is not a component this is not a a UI thing that we can just grab.
We need to literally basically create this, but in the style for our own website. So all we're going to do is we're going to copy this image like so and head over to Claude. And just like before, you can do forward slash, you type in design loop, and essentially you're going to come down and say, hey there, I want you to make a roofing version of this.
And what I would like you to do is enable them to upload an image of the roof, answer a few questions, and then I want a beautiful Siri -like animation to play, and then actually show what the price is for them, and we can capture that information. Okay? Give it that prompt, drop it in, the image, and then let's go find a Siri -type animation.
And just like that, guys, I've got one here and that looks freaking gorgeous. I like that. I know what that is selling, but I want to buy that right now.
So I'm going to come down. I'm just going to download this as a kind of video overview suggestion for Claude to use. And just like this, guys, we now have a free quote for your roof, which is cool.
So we can upload an image if you want to. Got a postcode. We'll just check out what it looks like.
Click on get my price. And then here we go. We've got our animation.
It's checking pitch and tiles, pricing materials. almost there, having a look around. I mean, you can just see how fun this is, right?
Bam, 7 ,150 pounds. And then it's got some different things here for like reviews and you can book the free survey. So freaking cool.
I mean, when you have the right skills, you can pay the bills as they say. No one said, I'm not saying I'm a rapper just because I'm wearing this like funky jumper, but you get the idea. Now this didn't exist until we built it.
One of the reasons why this is so cool, by the way, is like at the bottom of the image, you can see a hole there. It's got white. Now, ideally these drops.
would have finished so it looks like a true blend in but it's kind of phased out a little bit so it just gives it that nice kind of beautiful blend and that's awesome i get my quote it's just some cool ai analysis which we can bake in the website i'm using various different like skills which are quite easy and then we can just add this to the website and by the way if this sounds like i'm speaking in design spanish i'm going to put a link down below for my full core code masterclass that will take you through foundations it will take you through building websites from zero to deploying them power features, memory systems, Hermes agent apps, building anything, monetizing this stuff.
And I'll also show you the full and beautiful Cloud Code operating system that has all the bells and whistles, the memory systems, the cost saving, the design OS, a million other different things that you definitely want to have a look at if you want to level up and get light years ahead of everybody else. It's not fair on your competitors.
I will say that much. It's not going to be fair on your competitors. So just bear that in mind.
Now we've got the scroll stoppers, which is awesome. But it doesn't just stop there. We can take this much further.
What does that look like at level four, Jack? Well, level four itself, and I'm going to show you all these things integrated into the website in a second once we've added a few of the other bells and whistles, and you'll see what I mean when I say that. Level four, realistically, is understanding that 60 % of traffic, at least, actually is on our phones.
I should have had my phone out earlier before I said that. A lot of people are on their phones. They're not necessarily always sat down at a desktop.
But yet, most content always focuses on... the screen. I'm guilty of that to be fair to some extent as well because it's just easy to show.
But what we need to do is mobile optimize our website. Now, how do you mobile optimize a website? Well, to be honest with you, there are loads of skills and I'll put a link down below in the post.
But honestly, you can head over to Claude and say, hey, I want you to mobile optimize this website. Go out and find for me the most proficient, well -reviewed repos that have been battle tested that will make sure that it follows all of the best mobile design principles. And I'll put a link down below for my favorite.
and essentially what you've done that call to go ahead and it'll mobile optimize it well how do we know that well we can just do this look at it this is really cool you can see how at every frame rate it makes a difference now believe it or not it did it did not look like this initially i had to do this but look at this guys you can come down and see that we need to just fix that a little bit as you can see it's not perfect but look at this It's a website you can actually use and understand on mobile.
And again, I can still scroll through these and it's added these different elements in. I think this is great that it's just, look at this guys, that's crazy. Because remember, most of your traffic is going to be on mobile.
And a lot of times you go to mobile, they've never optimized it for it. You can't even read the actual website itself. It's even got this nice hamburger thing in.
You must mobile optimize your website. In fact, most people, and when I did my last tech startup, which by the way, if you are new, I built and sold my last tech startup with like a gazillion customers. and now i'm building my own ai startup here and i was really big on seo and building out websites and honestly we'd start off with the mobile first and then work backwards to get to the actual full desktop version and there is no substitute but to actually going through the mobile yourself claude can do loads of checks using the repo that i'll share down below in the skills section but ultimately speaking you want to go through the website yourself and check it out and we've got this beautiful email address and we're having a great time but then that takes us on to the biggest problem of this video so far, and that is what I call .
I invite you to join me. I am good against AI slap, but I am one man and I would like a team. Now, what do we call the de -sloppification?
What do I mean by that? I mean that AI itself, if you ever look at it, has like a really standard way of presenting itself. It's so obvious that something's written by AI.
And as I showed you in my other videos, I built this copy system, which is really cool. And I encourage you to look at something like this because I built this inside my community because I got this question all the time. Effectively, you can just grab information from the best GitHub repos, which are...
the slopification. And it basically takes all the classic signs of AI writing, like Wikipedia, for example, and it just like runs it all through that. You can run it through GPT 5 .6 as well to make it sound way more human because most websites these days are written by Claude, hence why they all sound the same.
And you can just identify all these classic things that AI does. And then it's underpinned by some core psychology. One of the best psychological principles in building anything is this idea of don't make me think.
The idea essentially being that When people don't read websites, they browse them. What do I mean by that?
I mean, I need to be able to glance at it and understand what the website is about. You know, don't take anybody's time for granted. Don't just assume that, you know, you have to earn their time.
And if I have to invest a minute to understand what your website is about, it's too much. It's way too much. So general idea, use their system to cognition.
Don't make me think. So there's system one cognition. Just make it super easy.
You want to name the pain. And again, the other thing you want to do is run this through loads of key marketing and psychological and sales things. For example, the classic example I always give here, instead of get started, start free.
Instead of the fun way to learn AI, everyone uses AI. So at level five, you want to do a deslopification of everything. So my website system brings up some copy here.
So check this out. Again, it just runs through everything. So it's signs of AI writing.
Look at this. trusted, reliable, and built to last. Six nails per shingle, every shingle.
How cool is that? I mean, it's like, it's the same thing, but it's just giving a practical example. And these are just, you know, the rules and principles apply to this website.
Not just a roof, but peace of mind. Guys, how many, let me down below in the comment section, could tell that that was written by, if you saw that, you'd be like, dude, which AI person has written that? A written scope and a fixed number before anyone climbs the ladder.
Yeah, obviously, that just sounds so much better. Elevated verbs. Instead of we leverage industry -leading materials to deliver unparalleled protection, we source materials from manufacturers who test for wind, hail, and sun.
Leverage to deliver... It's like, it's awesome, guys. MT Superlatives, the area's most trusted roofing experts.
No, roofing and only roofing since 2001. M -Pileup, our team, trained, certified, and local is ready to help. 38 on the crew, factory trained for every material we install.
Which one, genuinely speaking, are you going to click on and be like, obviously that's better? Loved by 10 ,000 happy homeowners. Project names and photography of placeholders, swapping your own jobs before this goes live.
Yeah, okay. That one's just telling me that like I built placeholders. So that one's like not a good idea.
But you get the idea and you get this full breakdown, explaining everything, the principles, stuff like that. We have to de -AI slopify our entire website such that it actually just reads like a human wrote it. Because I will tell you this, that what people aren't telling you is the fact that .
Unless you unpin these issues, unless you make it non -mobile optimized, unless you make it mobile optimized and you're actually kind of like attacking the slop issue, which these skills do. But now we've solved some of the text, we move on to level six.
Now level six is an interesting one and it's icons. and showstoppers what do i mean by that now this is what i call ui sniping and i love ui sniping now ui sniping is the idea that we can find any ui component that we like and bring it over relume itself is building out a really cool freaking library of stuff that you can just go ahead and grab which is decent so cool advantage being it's built by designers another good example of this is 21st .dev where you can basically find different things like libraries backgrounds borders whatever it is find stuff that you like and you can basically bring them over obviously if you've got really super hands are going to do that as well i know that the guys over there are building out all that stuff which is really freaking cool if you've got the really mcp you can just ask it or if you're grabbing it from a different website like 21st .dev you can come down and literally just copy the code and say you want this for example this design which looks cool you just copy the code head over to claude and say hey add this to my website and i'm going to come back over the website you can see i added these things in here look at this booked in a week and look at this i hover over i can see these customers
4 ,000 angel roofs kept dry. And again, it's just nice little credibility because it's just like, how can you show that you're legitimate? Because that's one of the questions people have, right?
You can see I hover over and it's got that stuff here fully integrated into the website. You can move it in any direction that you like. And of course, you can also use icons.
I'm a really big fan of icons. There's different ones like icons eight, flat icon, icon scout, loads of different ones. Check them all out.
I think the one I'm using right now is flat icon. Again, like not sponsored by them or anything like that. I just tell you, like, I just think they're pretty cool.
Basically, you can - down and get like different styles so if you're doing a kind of new age cool vibe younger demographic like um i'd say millennial or like gen z or below you may want to use cool graphics and you can just like get loads of different styles they it only costs like 10 to 12 dollars to you know be on one of these websites and effectively once you're on there you can just use those icons uh based on the license that you've got again that i don't know these guys i'm not sponsored by these guys i'm just telling you like it's something you can do to just make it look a little bit kind of fresh and stuff if that if that fits to design and vibe.
But if not, you can just UI -stype and make it look amazing. But then that does bring us very nicely onto level seven.
Now, level seven is something that a lot of people miss, and that is the SEO -ification of your website. And then we have loads of different skills on GitHub. I like Claude SEO, it's quite nice.
You can see this one here. It's fairly well reviewed. It's got this, I think this guy's got a content creator as well, so shout out to this guy.
But effectively, SEO nerds, I call them nerds. I hope they don't mind. They would love SEO.
They basically codify it, and you can build that system to do stuff like this to really help you kind of like run through your website. So what we do is we head over to Claude, and then you'd say, hey, I I want you to go ahead and find for me the best SEO design strategies that exist on the internet.
And I want you to take a look at this SEO repo. And I want you to build a checklist and a strategy for my website. It's the things that I can rank for.
Here are some of the keywords that I want to rank for. Here's the kind of intent that I want to do. And I want you to question me on my customer so that we together can find out the long tail intention words, the short intention words.
And I want you to rank those based on... Basically, volume and also difficulty. And from that, we're going to build up an SEO strategy, a content roadmap, and we're going to find SEO suggestions for our own website.
And once you do that, you're going to find a page that looks a little bit something like this. This is an exercise I did recently for Glido, my speech -to -text startup. It's how I'm able to talk to things.
I mean, just look at the detail of this, guys. Like, speech -to -text, how many people search it, the demand index, how hard is it? And it just finds those nice...
um kind of sweet spot so again i've got 28 keywords that we should rank for long tail stuff like whisper flow alternative um every other it's just really really helpful and you can use this to build out a content strategy i mean this is just literally the stuff that i'm doing in my own tech startup right now and you can use ai to do this in any of your websites or systems And then to post it, you just need to basically tell Claude to upload this to GitHub in a private repo.
I've got full tutorials on the channel. I'll put links somewhere to show you the process. And then you can run the entire thing from Vercel.
Vercel hosts everything. It even hosts many of the websites that I show you on this channel. Super duper easy setup.
Explain to Claude and he will explain it to you step by step. But this does bring us on to a problem. And that's the fact that these design skills are handy and they do help us build beautiful websites that sell.
But the truth is, if you don't have your own design operating system, you're leaving way too many hours and productivity and value on the table, which is why the next thing that we need to do is learn how to set one of these up, which we're going to do in this video right now.
The Hook
The bait, then the rug-pull.
Jack Roberts opens with the gap between a website that looks good and one that actually sells, then spends the next twenty-two minutes closing it: seven Claude-driven skills, from copying a proven site's design DNA to stripping out the copy patterns that give AI-written pages away.
Named ideas worth stealing.
00:30list
The Seven Levels
- Level 1: Finding the Standard
- Level 2: Mapping the Whole Site
- Level 3: Scroll-Stoppers and On-Brand Imagery
- Level 4: Mobile Optimization
- Level 5: De-Slopification
- Level 6: Icons and UI Sniping
- Level 7: SEO and Launch
The video's full outline: seven ordered skills that turn a Claude-generated homepage into a complete, converting website.
Steal fora website build checklist or a client-facing audit framework
16:49list
Six Signs of AI Writing
- Three-item adjective flourish ("trusted, reliable, and built to last")
- "Not just X, but Y" constructions
- Elevated verbs ("leverage", "deliver", "unparalleled")
- Empty superlatives ("most trusted", "industry-leading")
- Em-dash pile-up
- Hollow proof (unsourced numbers, placeholder testimonials)
A checklist for spotting AI-sounding copy, shown as a before/after diff on a roofing company website: the flagged AI phrase struck through, replaced by a specific, checkable claim.
Steal forediting any AI-drafted copy before it ships
16:21concept
Don't Make Me Think
Visitors browse websites instead of reading them, so a page needs to be understood in a glance (System 1 cognition) rather than requiring effort to parse.
Steal forlanding page headline and hero clarity
18:33concept
UI Sniping
Find any UI component you like on a library like Relume or 21st.dev, copy its code, and tell Claude to add it to your own site in your own style.
Steal forfast visual polish on an existing site without designing components from scratch
How they asked for the click.
VERBAL ASK
12:12product
“I'll put a link down below for my full core code masterclass... and I'll also show you the full and beautiful Cloud Code operating system.”
Soft mid-video pitch for his own Claude Code course and 'design operating system', framed as the next step after these seven skills, with a second mention of channel tutorials near the end.
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.
