A four-step redesign stack (design skills, Claude Design, reference libraries, AEO and SEO) that took an old Lovable site from 3/10 to live in an hour.
Posted
5 days ago
Duration
Format
Tutorial
educational
Views
10.7K
227 likes
57 · 43
Big Idea
The argument in one line.
AI-built websites stop looking like AI slop when you layer four things in order: design skills, a Claude Design brief, real reference sites, and an SEO and AEO pass.
Who This Is For
Read if. Skip if.
READ IF YOU ARE…
You shipped a site with Lovable or a similar AI builder and it looks obviously vibe coded.
You run a small business or agency and want a redesign live in a day without hiring a designer.
You already use Claude Code and want a repeatable process for design quality instead of one-off prompts.
You want ChatGPT and Claude to recommend your business, not just rank on Google.
SKIP IF…
You want scroll-driven video animation sites. The creator deliberately avoids them because they raise bounce rate.
You need a custom brand identity built from scratch. This process restyles an existing site and offer.
TL;DR
The full version, fast.
The creator took a neglected Lovable site scored 3/10 and rebuilt it to 10/10 in four steps. First, load free design skills such as Taste, UI UX Pro Max, Impeccable, Emil Kowalski's guide and Vercel's web design guidelines. Second, write a design brief in Claude Design before building. Third, connect a reference library like Mobbin so Claude borrows from professionally designed sites. Fourth, run an AEO and SEO pass. He packaged it all into one skill, reports visitors up 74% in 30 days, and a friend's company shipped its redesign the same day.
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.
Design skills stop the AI-slop look, Claude Design makes it match your brand, and reference sites make it look like a $100,000 build.
A reference library hooked into an MCP lets Claude borrow from hundreds of thousands of professionally designed sites in your niche.
Scroll-driven video animations look impressive but raise bounce rate, so the creator left them out on purpose.
AEO, answer engine optimization, is about getting ChatGPT and Claude to recommend your business when someone asks.
A full redesign run with the skill takes 30 to 60 minutes of research and generation.
The creator reports 74% more visitors and 46% more page views over 30 days after the redesign.
Skills are just prompt files you can drop into any Claude Code or Codex session.
Claude Design before Claude Code gives a clearly better result than skills alone.
Scoring the old site first (missing clear action, missing named proof, centered emoji layout) tells the model what to fix.
Going live is three moves: a private GitHub repo, a Vercel import, and two DNS records for root and www.
Takeaway
Layer design skills, brief, references, then SEO
WHAT TO LEARN
Each layer fixes a different problem: skills remove the slop, a brief adds your brand, references add polish, and the SEO pass makes it findable.
Free design skills give Claude rules that remove the obvious vibe-coded look, but on their own the result is still bland.
Writing a design brief in Claude Design before building makes the site match your brand and sections like pricing, FAQs and testimonials.
Connecting a reference library lets Claude blend the best parts of professionally designed sites in your niche, which was the biggest jump.
Skip scroll-controlled video animation, since it looks cool but pushes bounce rate up.
Finish with an AEO and SEO pass so search engines and AI assistants can read, cite and recommend the business.
Ship through a private GitHub repo and Vercel, then add root and www DNS records to go live.
Glossary
Terms worth knowing.
AEO
Answer Engine Optimization. Structuring a site so AI assistants like ChatGPT and Claude recommend and cite your business.
Skill file
A reusable prompt or markdown file that you load into a Claude Code or Codex session to give it a specific process.
Claude Design
A design tool from Anthropic used to produce a design brief or mockup before the site is built in Claude Code.
Mobbin
A paid library of roughly 600,000 real website and app designs that can be connected to Claude through an MCP.
llms.txt
A plain text or markdown file that gives AI models a clean summary of a site's content.
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
This was my website 30 days ago. I made it with Lovable in 2025 and I'll be honest, I just completely forgot about it. And then last month, I researched every AI design method there was and turned it from a 3 out of 10 into a 10 out of 10.
And if you look at the analytics here for the last 30 days, the visitors are up 74 % and the page views are up 46%. It took four steps to get it here and I put everything I learned into a single skill file which you can use to upgrade your website. Firstly, everything runs on Opus 5 .5.
It is the best designer model that has come out, bar none. Step one is adding in design skills made by great designers like Emil Kowalski. and the team at Vercel.
Step two is utilizing Claude Design to create a design brief before you build the website and then plugging it into Claude Code. And step three is using reference sites so that Claude Code can take inspiration from crazy websites that sometimes cost up to $100 ,000. And as a bonus, it also fixes your SEO and AEO.
So not only do you show up more on Google, but also ChachiBT and Claude will recommend your business more often. I also ran it on my mate's business and they put it live the exact same day. This skill is completely free.
Here's the exact step -by -step process you can take to do it for your own website. So the first thing is design skills. So if you know anything, a skill is basically just a prompt or a CloudMD file that you can kind of plug into any session that you're running.
It works with both Codex and Cloud. For this whole process, I used Opus 5 .5 just because it is right now, I personally think the best at design. But there's a bunch of different free skills that you can plug into this that take it from a nothing burger to something that's really impressive.
And if you see here, the five or six that I would recommend is the taste skill. The taste skill basically just has a... bunch of kind of references and guidelines that you need to follow to make it go from an AI sloppish website to something that's really good.
You've also got ones like this one here, UI UX pro max skill. This is kind of the first one that really popped off. I think back in the day, it was a big contributor.
I think it's not as good now, but it's still good to have these kind of frameworks for it around things like the pattern, the style, the colors, everything like that, and kind of take out any vibe coded slop stuff that Claude usually does sometimes. You've also got Awesome Design MD. This is just another framework.
These are all kind of different frameworks for different aspects that all work together to make everything work in tandem to make the best site possible. Then we've also got Impeccable. Impeccable is crazy.
There's like a gazillion skills in here that you can use. This also is another one. References, reference images, guidelines, everything like that.
And then we've got Emil Kowalski's skill. Emil Kowalski is an elite and he's a great designer and he's got a kind of reference guide that he uses that tells people how to design like he does.
And then the last one is the Vassell agent web design guideline skill this is directly from Vercel which are a massive company especially in the AI space they have a bunch of different skills that you can use this one is their specifically web design guideline skill and then the skill that I'm going to give you to the end is basically a collaboration of all of these and using them when needed to give you the best possible site so this is what the website looked like initially and then this is what happens when we jumped in with just the chord skills and nothing else I'd build this out which I actually quite like it's a nice website I think it's done quite well it's got everything in there that we need but it still looks a little bit bland it's still very like obviously vibe coded it doesn't look like anything that kind of sticks out then the second level is going to be using cloud design before you go into cloud code cloud code can reference cloud design which is great but cloud design is just ridiculous it's ridiculous how good it is at doing these designs the difference between a site that just goes straight in with just skills and going into a site with design and skills is nuts i've used it for every single site i've ever put out when i found it
And it's crazy. It's really, really good. So yeah, definitely use Claude Design before you do anything.
And after putting through Claude Design and the skills, let's put out this one here. And this one here is very, very, a lot better, I'd say. This is a lot more similar to my old website, but just done better.
It's got everything that I need. It looks a lot cleaner. It's got...
all the things i need like the things like the integrations it's got the pricing here it's got the testimonials it's got the faqs and then the third level is going to be reference libraries now there are a bunch out there there's three or four main ones there's some that are free some that are paid some that have kind of premium options the ones that i would recommend best is mobbin mobbin is paid but it is ridiculous basically what it has is just a reference of i think 600 000 different website designs and app designs hooked into an mcp so that when claude is trying to design something it can look into different websites that have been professionally done with you know ten thousand hundred thousand dollar budget and you can look into ones in the your niche of your competitors and use them to kind of build this reference to create a new one that's a mix between these really really well designed websites that cost you know a hundred thousand ten thousand dollars and using the skills that it has on hand to build something like that and this was the biggest jump for me the cloud skills made it not look like ai slop cloud design make it look like my brand but the reference sites made it look like a hundred thousand dollar website
I think the reference it got was Victor, which is a massive company and their website actually looks really great. So it's taken some aspects of that as well as some aspects of a couple of other companies. I think it took some from Vappy, it took some from retail and it kind of made this Frankenstein kind of thing, which doesn't sound great in theory, but it kind of meld them all together into a way that works best.
There's a few other ones that you can also use that are free or have freemium options. Like you've got recent design. This is a bunch of things, especially in terms of motion graphics and stuff like that.
There's also awards, which has a massive... library of sites that have actually won design awards and then lastly you've got 21st .dev this is one of the ogs so you can kind of use this and then if it's not working out maybe jump to modern but yeah these reference sites make a big difference in kind of looking at what your website looks like currently and looking like what it should look like based on these crazy designs it costs hundreds of thousand dollars that no one can be adding the reference library was really what kind of made it make or break this one just looks 10 times better and you can tell here that it's taken some inspiration from victor this is victor here and it definitely looks a little bit similar it's got some similarities to it but it's basically just taken all of the good aspects of this site and then melded it into the use case that i was looking for for my business specifically and this is the reference it took it took a couple from some others as well but yeah this is the new website that i went ahead and posted basically an hour after i started playing around with it and it looks fantastic and one thing that i purposefully left out that you've probably seen in other videos are the higgs field scroll animations turning your website into an interactive video that changes as you scroll
These are cool in theory, but in reality, it makes your bounce rate skyrocket. The fourth step is just a bit of an extra skill on top that does your AEO and your SEO for you. AEO is Answer Engine Optimization, and it's about getting called or chat to actually recommend your business when someone asks about it.
It took me four goes to get here, so I put everything I learned into a single skill file that you can point your website to and run it all at once. Just plug into Claude Code, give it your website, and it will go through, fix everything, score it, and then keep on reiterating until it's perfect. And then all you need to basically do is jump into Claude, grab the file, and then just drag it into Claude.
So I dropped the skill into Claude code and referenced my old. So I've got this loaded in now. I've set it to Opus 5.
I'm going to have it on high, and I'm going to send it off and basically see what it comes back. A full run usually takes an hour, so I ran it before filming. Here's what it came back.
The old one was a 3 out of 10, and the new one is a 10 out of 10. pulled out a bunch of different things like the proof, the product, the offer, some of the screenshots and testimonials and everything like that. It's then given basically a score for what it was missing.
It was missing a clear action. It was missing specific named proof. It looks AI generated with a bunch of things like emojis and everything centered.
It wasn't on brand. It didn't look great on iPhone. It was a bunch of things that it didn't really do.
But now it's been adjusted completely with the skill files, the reference libraries, the core design. And now it's got the new one, which looks a lot better. And this one is definitely a 10 out of 10.
It also has all the AI visibility stuff like the LLMs TXT or the markdown files for it as well and a robots TXT as well This is what it spat out. It's basically just a better version of exactly what we have I'm gonna go through each of these and basically update them and then push it to my live site It's got everything that I think it probably needs It's got a lot of things here that's taken from my current website and just basically put it into here and made it a lot right now This only exists on my laptop.
So let's set it and then the next steps from here is I'm gonna do three things I'm going to create a github repository i'm then going to copy the link for github put into cloud code and say can you push it to this i'm then going to open up the cell and put it up wide and then you can just basically just add a domain to the cell after that so first things first i'm going to create a repository i've got a github account here which i'm then going to create too i'm going to call this a website v4 make sure that it's set to private so that it's just yours you don't want to be going public and then you can basically just create it from there and then and once you've got that you can grab the url that it's going to give you cool it's got this url here you can either use hdps or ssh i'm going to use ssh but i'd probably recommend using hd best it's a little bit easier to set up and then plug it into claude and say hook this into the cool we've now got the repo here and then we can jump into the cell and hook it up to a specific repo so i'm going into the cell here i've set up an account you can get a free account and use it for a bunch of different things you can also get a paid account if you want some extra stuff but for this you basically just need that and then going to jump into the correct organization
i'm going to grab the repository this is it just here and then click mine's already hooked up so the actual project is behind cool and then this is the project inverse cell all i basically had to do from here is i put it up i jumped into domain and then i just added a new domain And that was it. I set up the CNAME records.
You can then go into your DNS provider and add the records that you need. You probably need to add two different domains. You need to add an ADA name that goes to your root and then also add a WWW CNAME, but it will give you everything that you need to add in there.
And then once you've got that, you can basically switch it over and you've got a new site running live and everything's basically ready to go. Now, this was my website, so I knew exactly what to tell it, but I also ran it on my mate C5s. This is C5's website before and they build AI receptionist for car dealerships.
So it's completely different of what, but this is their old website going through everything. It's got a lot of the stuff around things like FAQs. It's got their testimonials in here.
It's got all of their integrations. It's got their how it works. And I basically just took their website, plugged it into the cloud skill.
It gave it a 3 out of 10 from memory. And I said, cool, make it a 10 out of 10. And it's gone ahead and done all the steps that we just went.
And they liked it enough to put it on their actual domain on the same day. This is c5 .ai live right now. When you look at a website and you see that it's cleanly designed, you take them a lot more seriously.
And this is what they've definitely done here with this website. Looks 10 times better. They've got everything they need.
year it lays everything out very cleanly and it looks great so yeah they've done a great job here this looks great and the skill just really just works i think they tinkered with a few things on their side but it mainly was just a one shot with this skill took 30 to 60 minutes to do all the research and make everything it's crazy how much of a difference opus 5 .5 actually makes i tried this a little while ago with opus 5 and it did an okay job but opus 5 .5 has smashed out so that's my new site from a 3 out of 10 to a 10 out of 10 same business same info just one skill file difference and everything i learned about redesigning websites is in that one skill file the scorecard the design rules the feedback look and the aeo and seo stuff it's completely free in my school community you can grab the link in the description all you need to do is download it plug into cloud code and reference your website it'll fix everything for you and give you a brand new site
The Hook
The bait, then the rug-pull.
A forgotten Lovable site, a 3 out of 10 score, and a four-step stack that turned it around in an hour. Traffic is up 74% in 30 days.
Add Modern Creator as a preferred source and Google shows you more of our breakdowns in Search, Top Stories, and AI Overviews. It only changes what you see, and you can undo it in your Google settings anytime.
Add to Preferred SourcesOpens your Google source preferences with us pre-loaded. Tick the box and you're done.
A former WordPress builder walks through the 18 objections he hears about shipping client marketing sites with Astro, Claude and Cloudflare instead of a page builder.
A 29-minute walkthrough of wiring a coding agent to a data pipeline, a data warehouse, and a marketing API gateway so it can write ads, pull cross-platform data, and ship blog posts on its own.
A screen-recorded tour of 25 prompts, sites, and Claude Code skills, sorted easy to advanced, for anyone tired of interfaces that scream default AI design.
A HubSpot podcast interview that turns into a live Claude Code build session, wiring a Facebook ads agent, a Google Ads agent, an SEO agent, and a cold-email workflow into one voice-driven marketing stack.
A free, seven-command Claude Code skill pack that researches keywords, builds the site, writes the content, and audits the result until the score hits 100.
00:00
00:09
00:16
00:26
00:35
00:42
00:50
00:58
01:08
01:16
01:22
01:32
01:40
01:48
01:56
02:04
02:12
02:20
02:28
02:36
02:44
02:52
03:00
03:06
03:16
03:24
03:32
03:41
03:52
03:58
04:05
04:13
04:21
04:29
04:35
04:43
04:53
05:05
05:10
05:14
05:25
05:37
05:41
05:49
05:53
06:01
06:14
06:18
06:29
06:37
06:42
06:49
07:01
07:10
07:18
07:26
07:34
07:42
07:49
07:58
08:06
08:14
08:22
08:30
08:34
08:50
08:52
09:02
09:10
09:20
09:24
09:34
09:42
09:47
09:58
10:03
10:14
10:21
10:34
10:38
31:06
29:08
18:02
13:32
28:14
Video of the Day22:40