Big Idea

The argument in one line.

Splitting website generation into a design step (ChatGPT writes the brief, renders a mockup screenshot, and extracts real images from it) and a build step (Claude clones that mockup into working code) fixes AI web design's two long-standing failures: fake placeholder images and inconsistent multi-page layouts.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You've tried AI website builders before and ended up with generic placeholder images instead of real, on-brand photography.
You want a repeatable process for turning one design idea into a live, multi-page site without opening Figma or Photoshop.
You're comfortable moving a prompt and a few files between two different AI tools to get a better result than either gives alone.

SKIP IF…

You need custom backend functionality — logins, bookings, payments — this workflow only produces a static front-end site.
You're already fluent in a no-code builder or hand-coding and don't need help with the design or image-generation step.

TL;DR

The full version, fast.

A creator builds a complete, on-brand website with AI in under fifteen minutes using two tools instead of one. ChatGPT Sol writes a design-agency brief, renders a screenshot mockup, and then extracts every image from that mockup as a high-res zip — solving the placeholder-image problem that plagues most AI builders. That screenshot and image set are uploaded to Claude Design, which clones the layout in real code, builds the remaining inner pages in the same style, layers in ambient animation, and swaps in a Higgsfield-animated hero video. One reusable prompt then rewrites every page's copy for a specific business before the static HTML is exported and deployed live.

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 →

Chapters

Where the time goes.

00:00 – 00:42

01 · The claim

The creator states that a new ChatGPT update ('Sol') produces sharper design screenshots, can extract real images from those screenshots, and understands visual design far better than before.

00:42 – 01:59

02 · Preview of the finished demo

Before walking through the steps, he shows the finished result: a design-agency site cloned from a ChatGPT mockup, animated with a Higgsfield hero video, and already live on a domain.

01:59 – 03:17

03 · Step 1: brief ChatGPT for a mockup, then extract its images

One prompt asks ChatGPT to write its own image-generation prompt and render a screenshot of a creative design-agency site; a follow-up prompt asks it to regenerate every image seen in that screenshot as a high-res zip file.

03:17 – 04:04

04 · Step 2: clone the mockup into a real coded site

The screenshot and image zip are uploaded to Claude Design, with the design system toggled off, and Claude rebuilds the exact layout in working code.

04:04 – 05:44

05 · Step 3: build out the inner pages

Claude is asked to generate About, Services, Insights, and Contact pages in the same style, replacing dead nav links and reusing the same approved image set.

05:44 – 06:52

06 · Step 4: layer in ambient animation

ChatGPT is asked to write an animation spec — drifting clouds, a crossing bird, parallax, explicit z-index rules — which is then pasted into Claude to implement.

06:52 – 08:34

07 · Step 5: animate the hero photo

The hero photo is sent to Higgsfield with a prompt describing a look-blink-look-away motion; the resulting video is dropped into Claude as the new hero background, and the disliked cloud effect is removed.

08:34 – 09:50

08 · Step 6: rewrite content for a real business

A single reused content prompt tells Claude the site now belongs to 'Wilson,' a New York modeling agency, and every page's copy is rewritten to match while the layout stays intact.

09:50 – 11:15

09 · Step 7: export the site and pick a host

The finished design is exported as standalone HTML from Claude Design, followed by a sponsor segment recommending Hostinger's Unlimited hosting plan.

11:15 – 13:36

10 · Step 8: deploy live and closing thoughts

The exported HTML is uploaded through Hostinger's file manager, renamed to index.html, and the site goes live; the video closes by arguing AI has overtaken manual tools like Figma and Photoshop for this kind of work.

Atomic Insights

Lines worth screenshotting.

ChatGPT can write its own image-generation prompt, render a screenshot of the resulting site, and then extract every image from that screenshot as a downloadable high-res zip.
Turning off a code tool's default design system before cloning a reference screenshot keeps the clone visually identical to the mockup instead of drifting toward the tool's own style.
Uploading the reference screenshot and its matching image zip in the same prompt is what lets an AI code tool place real photos instead of placeholder graphics.
One reused 'adjust the content around my business' prompt can rebrand every page of a finished template for a completely different business in a single pass.
A JPEG background with no alpha channel silently breaks transparency-dependent effects layered on top of it, like semi-opaque drifting clouds.
Naming a z-index requirement explicitly in an animation prompt keeps new decorative elements from covering existing text and buttons.
A static hero photo can be converted into a short looping video with a separate image-to-video tool, then dropped back in as the site's background.
AI-generated websites reuse the same handful of approved images across every new subpage unless a fresh batch of images is explicitly requested.
Static HTML exported from an AI design tool can be deployed to a live domain in minutes through a basic web host's file manager.
A static web host will not serve a homepage until the uploaded file is renamed to index.html — an easy step to miss.
Describing an animation with concrete parameters — opacity percentage, drift speed, timing interval — produces implementation closer to the request than vague creative direction.

Takeaway

A two-tool loop that fixes AI web design's placeholder-image problem

AI WORKFLOW

Chaining ChatGPT's design brain into Claude's code brain removes the two biggest blockers in AI website generation — fake images and multi-page inconsistency — and a single reusable prompt then re-skins the result for any business.

02Preview of the finished demo

A single one-line prompt is enough to get a decent first design pass out of ChatGPT — the images, animation, and multi-page build all happen in later, separate prompts.

03Step 1: brief ChatGPT for a mockup, then extract its images

Asking the model to first write its own image-generation prompt, then render a screenshot of the site, produces a far more specific mockup than describing the site directly in one shot.
Requesting every image seen in the mockup as a downloadable high-res zip solves AI web builders' most common weakness: placeholder or mismatched imagery.

04Step 2: clone the mockup into a real coded site

Turning off a code tool's built-in design system before cloning an existing screenshot keeps it from overriding the reference design with its own defaults.
Uploading both the screenshot and its matching image set in the same prompt is what lets the clone place real images instead of guessing at them.

05Step 3: build out the inner pages

Explicitly naming dead nav links and asking for those exact pages in the same design style is what turns a single landing page into a full site.
AI reuses the same approved image set across new pages by default — plan a follow-up image-generation prompt if a subpage needs different visuals.

06Step 4: layer in ambient animation

Describing an animation as a list of concrete effects — drift speed, opacity percentage, timing interval — gets implemented far more literally than vague creative direction.
Flagging z-index and layering explicitly in an animation prompt keeps new decorative elements from rendering on top of existing text and buttons.

07Step 5: animate the hero photo

A static hero photo can be turned into a short looping video with a separate image-to-video tool, then dropped back into the site as a background element.
Background image file format matters for effects layered on top of it — a JPEG with no alpha channel will block transparency-dependent animations from blending correctly.

08Step 6: rewrite content for a real business

A saved, reusable 'adjust the content around my business' prompt lets one AI-generated design get repointed at any business by swapping only the business details.
Rewriting content in one pass keeps every page's headline, subhead, and about copy consistent instead of editing page by page.

09Step 7: export the site and pick a host

Exporting as standalone HTML, not a project archive, is what makes an AI-generated design portable enough to drop directly into a basic web host's file manager.

10Step 8: deploy live and closing thoughts

The uploaded file has to be renamed to index.html for a static host to actually serve it as the homepage — an easy step to miss.

Glossary

Terms worth knowing.

Claude Design: Claude's built-in tool for generating and editing full coded websites from a prompt or a reference image, distinct from a plain chat conversation.
ChatGPT Sol: The ChatGPT update referenced throughout this video, described as generating sharper design screenshots and being able to extract real, high-resolution images from those screenshots.
Higgsfield: A third-party AI tool that turns a single static photo into a short looping video by animating things like blinking, head turns, and expressions.
Design system (in an AI code tool): A tool's own built-in set of default fonts, colors, and spacing rules; leaving it switched on can override the look of a reference design you're trying to clone.
z-index: The CSS property that controls which layer of overlapping page elements sits on top; getting it wrong makes new elements, like animated clouds, cover text that should stay visible.

Resources

Things they pointed at.

00:20toolChatGPT Sol

03:25toolClaude Design ↗

07:00toolHiggsfield

10:13productHostinger (affiliate link + coupon code DARRELL10) ↗

00:00linkEvernote prompt templates (design-brief prompt + content-rewrite prompt) ↗

Quotables

Lines you could clip.

00:32

“Images are really half the battle... but now with this new update, it'll actually read all of the images on the screenshots.”

names the exact bottleneck the whole video is built to solve→ TikTok hook↗ Tweet quote

09:15

“So now Claude has adjusted all the content on the website based off my business.”

clean before/after payoff moment→ IG reel cold open↗ Tweet quote

13:20

“AI can now make websites better than humans. And that's a scary thing to say.”

provocative closing claim that summarizes the video's thesis→ 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.

metaphor

00:00These websites were created using the new ChatGPT Soul updates. The layouts look great, high quality images, creative sections, and these were all made with one simple prompt. Now I don't really make YouTube videos every time like ChatGPT or Claude have an update.

00:13Many of the times, the websites don't really improve that much in design. But this time, Saul is different. In the official documentation of ChatGPT, it specifically says that Saul will actually build more complex websites and applications.

00:25It'll also take more accurate screenshots to website reaction. One of the biggest updates was now Slal can actually extract images it generates from screenshots. This means the website it generates, it can also generate each of the images in high quality so you can import it to any sort of AI builder.

00:39On top of that, they've improved visual and designing understanding. This means it can understand screenshots significantly better. As a result, they're gonna have more creative, stronger looking websites than ever before.

00:49Now to keep things very simple and straightforward, I went over to ChatGPT using the new Soul updates, and I asked it to create a really highly creative, award winning style, creative portfolio website, and this is what it created for me. Now I took this same design, and I went over to Claw Design, and I had it clone that original design.

01:06Now what I also did was I took the image of the woman right here, and I gave it to Higgs Field, and they animated the image for me. As a result, now we have this really unique, uh, landing page with this woman, you know, blinking. You know, it's creative.

01:19It looks cool. And then I took this. I downloaded it, and I put it on a domain.

01:23And now this website is now live on the Internet. So it's that fast and easy now to make a really high quality website using these new AI tools. Let me show you exactly what I did.

01:32Now, is where the new update really shines. So I just typed in a basic command like you guys have probably done a million times. I wanna create a highly creative design agency website with vertical and horizon text, high res images, creative and unique sections that beat the competition.

01:44Can you generate me a prompt for this? Then I want you to make a screenshot based off this prompt.

01:50Essentially, I'm just asking you to make me a screenshot of the actual website it's gonna generate. And this is exactly what it generated. So it generated this image here.

01:58It looks amazing. Now, what makes this update of Saul really good is in the next prompt right here, I said, now generate the images from this website. I need the images in high definition, and I want them exactly like on the websites.

02:10Give me these in a zip file. And you guys know that when you use these like vibe coding tools, images are really half the battle.

02:17But now with this new update, it'll actually read all of the images on the screenshots. So here are all the images. And as you can tell, they look really good.

02:27Now, obviously, I probably could have made more, but, uh, you know, just, you know it's a demo website. You know what? I'm not gonna sell it.

02:33You know? So so after it showed me all the images, I then asked it to give all the images in a zip folder. And then I went ahead and I download the folder.

02:41Now that we have images, now we can generate the website. Now in order to replicate that same design, there is a prompt, and I'll leave it in the video description. And here is the Evernotes, and it's really simple.

02:51I'll clone the screenshots to a website. Here, I'll go ahead and copy this prompt, and I'll head back over to Claude, and I will paste this in. Now if you are using Claude Design, I recommend to not have the design system on.

03:03This can definitely influence the design. So the first thing I wanna do is just go ahead and upload that file. So here, I'll click on the attach.

03:09I'll upload the screenshot. So here is the screenshots, and I'll go ahead and give you a quick look. So here is the screenshots.

03:15I'll go ahead and upload this. Okay. Then we'll also upload the images based off this original design because half the time, it does need the images.

03:24If you ever use Claude or something, you know it just gives you, like, placeholders or it doesn't give you, like, the proper images. So now I'll go ahead and upload those images. Here they are, the Obsidian website images.

03:34I'll just drag and drop it. And then I also wanna add a little bit more to this. I'll go ahead and update this to the Evernote.

03:39I attached the images in high quality in a zip folder. Place the images where they should be based off the screenshot I gave you. Next, I'll just make sure Fable five is, uh, selected.

03:48I am running low on credit, so I am almost being rate limited, but let's go ahead and run this prompt. And now it's finished. Uh, what's really cool is we can turn on and off this wheel spin.

03:57That's really cool. Now, uh, we scroll down. Here is the actual website.

04:01It looks fantastic, and it's identical to the original screenshots. Now there is some things that I do recommend if you actually wanna do this and you wanna take it, like, serious is the first thing is you need to actually instruct it to create additional pages based off this original design. These right here are just dead links.

04:16So if you click on the about us, the service, all these pages, they're just dead links. So now I wanted to create the about services and the insight and contact page. I want you to create an about us page, services, insight, and contact page using the same design style as on the home page.

04:30Keep the design consistent. Now what this is gonna do is it's going to generate all these pages for us, but it's also going to keep the initial design intact. Alright.

04:40So now it's making the insights page. And there you go. We got the fonts.

04:44We got everything consistent. Looks great. Now one thing to note here is that it's gonna be using the images that we gave it earlier.

04:50If you do want to add in more images, you can just go to ChatGPT and say, hey. I want you to give me more images based around this initial design just to make sure that the images are consistent with the website. Okay.

05:01And look at this section. Oh, I do like this, but notice here how it's using the same images. So that's just one thing to consider.

05:08And now it is making the contact page. And here is our contact page. I mean, overall, this is amazing.

05:14Right? These results are really good. So this is the insights page that I showed you earlier.

05:18The services page, here we go. It looks great. I love these designs.

05:22I mean, ugh. I love it. I mean, this is amazing.

05:24And then here we have the about us page. Done. Here we go.

05:28Looks fantastic. And then we have our work page, which is our essentially our home page. So I just basically have to say, regain this to the home page.

05:36So, basically, we just created this website in a matter of minutes. The website looks great, but there are some other tricks that I wanna show you. So let's head back over to ChatGPT.

05:44Now on the same tab where I was making the website, I'm now gonna ask it to create animations on the websites. Now I was working on the website in this tab, so I'm gonna, you know, keep it in this tab so it remembers the actual website and images. I wanna create animations on the websites.

05:57I want a small bird to fly across the home page, and I want black clouds to slowly move around the websites. But make sure the black clouds are behind the image of the woman and the text and the button.

06:06Adjust the z index properly for this. And after about a minute, it now generated this prompt. Now here you can see it at the z index.

06:13I think the black cloud should actually be higher, but we'll see what happens here. And this is the actual prompt right here. It's quite large, so I'm just gonna go ahead now and copy this prompt.

06:23Alright. So after running that prompt, you'll see that we have these black clouds right here, and they slowly hover. Now this image right here is a JPEG image.

06:30It's not a PNG. So if I want these clouds to go across the entire page, obviously, I would just make this a PNG file. And we are also missing the bird.

06:38Ah, there's the bird. Alright. So we have this black bird right here.

06:41He's flying across the screen. And obviously, these are just small little touch ups you can add. You can, you know, put like birthday cakes or you can put like Pokemon or, you know, whatever to jump across the screen.

06:52Okay. Now there's one more thing I wanna do. I now wanna animate this image.

06:55So what I'm gonna do here is I'm gonna go over to Higgs Field. Now you can use Higgs Field 11 Labs as well. And all I did here was I uploaded the image, and I generated a prompt in order to make the image move.

07:07To give you an example of what I typed in, I went over to ChatGPT. I gave them a screenshot of the actual landing page, and I said, I want you to give me a prompt to animate this image. I want the woman in the picture to look at me, then blink a few times, and then look back.

07:20It generated this prompt, and I gave this prompt to Higgs Field right here. And after that, it gave us this video. So you can see the woman opens up her eyes, and then, you know, she smiles, and then she looks back and blinks.

07:33Right? Pretty cool. So I'll just go ahead now and download this video.

07:37And then going back to the websites, I'll now take this video. I'll drag and drop it, and I'll just tell them to apply this to the homepage.

07:43I want you to add this video as my new landing page backgrounds. So there's the black clouds. Oh, there it goes.

07:49There's the woman. And what's really cool is, um, they actually know that's, uh, not to put it in the center of the page. So what they do is they replace the actual image with the video to keep the position consistent, which is really cool.

08:00And, you know, I I wanna get rid of these black clouds. You know? They're not working out for me now, so we gotta get rid of them.

08:05And it's gone. Just like South Park, and it's gone. So the clouds are gone.

08:08And overall, this is a really attractive looking landing page. Now if you wanna take this website and convert it to Elementor or WordPress or Gutenberg, I have a tutorial in the description that'll walk you through how to do that. You just download the HTML file.

08:20You connect, uh, WordPress with Claude, and then it'll build this website using Elementor in WordPress. It's really cool. Probably make an up to date video on that.

08:29But there's one last thing that we have to do before we actually put this on a live domain. We need to adjust the contents. Now in the video description, there is an Evernote, and I actually use this one from another video.

08:39You can see there's a lot of people viewing it right now. Uh, what we need to do is we need to actually tell Claude what kind of business we are, and it's gonna adjust the content around whatever we tell them. Right?

08:51So for example, I'll go ahead and paste this in. And the business name, we're gonna put that we are a modeling agency. Adjust the website content around my business.

08:58Here is my business info, and then here we have our info. I'll go ahead now and run this prompt. And what this will do is that it'll actually adjust all the content throughout all your pages based off the keywords in that prompt.

09:09And here we go. So now Claude has adjusted all the content on the website based off my business. So we can see all the text has changed.

09:16Wilson modeling agency. We're a New York modeling agency. Scrolling down, all the content has also changed.

09:23We have our models. Wilson saw something in me before I did. Oh, I like that.

09:29You know? It makes me feel like I have a heart. You know?

09:31Also, if you check out our pages, and then here is our about us page. It says, we build modeling careers founded in 2012. Wilson Agency is a dependent modeling agency in New York.

09:40Pretty cool. So next, let's deploy this website onto a live domain. Now I did mention earlier that you can actually take the same website, and then you can convert it into Elementor, Gutenberg, maybe even Divi.

09:51I'm not sure about that just yet. I've messed around with it, and it's not too friendly with HTML, but Elementor is.

09:58But let's just go ahead now and deploy this to a live domain. So over here, I'll click on share, and then here is our project HTML. I'll click on download.

10:06Here, it's saying project archive or standalone HTML. I wanna use the standalone HTML, and then click on export.

10:13Now while that's building, let me show you the recommended web host. Now in the video description, there is a link and a coupon code to hostinger.com. Now, obviously, this is the web host I recommend.

10:23Reasons why is because it's really cheap to get started with Hostinger. They give you a thirty day money back guarantee. So if you, you know, you build a website, it's not working out, no problem.

10:31You can always get your money back. Now they have a new plan called unlimited, where you can host unlimited websites on your hosting package for, like, less than $60 a year. It it is, like, dirt cheap, to be honest.

10:41So the one that I recommend to go with is the unlimited plan. So once you get here, click on choose plan, and I'll show you my coupon code. Next is the period.

10:48Now, honestly, the forty eight months sounds expensive, but four years of hosting for under $200, like, you're not gonna find a better deal than that. I currently pay about $80 a month for my web hosting.

10:59It's quite expensive. But I know many of you are just getting started out, so I would recommend to go with the twelve month plan. And we have a coupon code that'll save you even more money.

11:07So over here under have a coupon code, if you enter the coupon code at Darrell ten and click on apply, you're only gonna pay about $57 for a year of web hosting.

11:16So go ahead and check out. And once you do that, I'll show you how to take this website and put it on a live domain using Hostinger. So going back to our website, I now wanna download the HTML file.

11:26So right here, I'll click on download. Okay.

11:28So now I've downloaded that file, and I'll go back to Hostinger. And this is the h panel. So this is the back end.

11:33And all you gotta do is go over here to websites. And then over here, you'll just click add a website, and then select HTML website. And then you'll type in your domain name.

11:42Now I'm just gonna use a temporary domain for now, but, uh, you can just use one that you got because you got one for free. Why not? You know?

11:48Why the hell not? Here, click on use temporary domain, and then here's our dashboard. And all we're gonna do is go over here to our file manager, click on open, and then we'll double click the public HTML.

11:58So I'll double click. And then this file, we're just gonna delete it. We don't need it.

12:01So I'll click on delete. And then we're gonna take that file and then just drag and drop it. Drag and drop it just like that.

12:08Alright. So now it's uploading our website, and boom. There is the website.

12:12Now all we gotta do is rename this to index. So I'll right click, rename, and then we're just gonna rename this whoops.

12:19Whoops. There we go. One more one more time here.

12:22Here we go. Backspace, and then we're just going to rename this index. Index dot HTML, rename, and we're done.

12:30Now let's go back to our website over here, and let's open our new website. And here is our beautiful website. And look.

12:38We got the cute little birdie. Look at the birdie. It's so cute.

12:41Right? We have the woman here with the, uh, the video. We have the animations scrolling down.

12:46We have everything intact. Everything looks perfect. And the great part about HTML is that it's really fast.

12:51It's like bare bones. So it is actually fastest framework to use. So, uh, yeah, that is how you can create a website using ChatTPT and Claude.

13:00To be honest, every single year, AI gets better and better at designing websites. Do you guys remember, like, three years ago when I was making websites? They look like crap.

13:08Know, they're really generic. They were blocky. They didn't really look good.

13:11But the websites they're making today, I mean, AI can now make websites better than humans. And that's a scary thing to say. I don't think web design is dead.

13:18But if you're still using the old method of using Figma and you're using Photoshop, I mean, those tools are long gone now because AI is making things so much more easier. I hope you guys enjoyed this video. Let me know your thoughts about the new Chad GPT Soul updates in the comments below.

13:32My name is Daryl Wilson, and I will see all the party people later.

The Hook

The bait, then the rug-pull.

A creator sets out to prove one prompt is now enough to get a genuinely good-looking website out of ChatGPT — then shows the two-tool loop, ChatGPT Sol for design and images, Claude Design for the working code, that turns that one prompt into a live, animated, fully-branded site before the video ends.

Frameworks

Named ideas worth stealing.

00:42list

The two-tool AI website loop

Brief + mockup screenshot (ChatGPT Sol)
Extract real images (ChatGPT Sol)
Clone into working code (Claude Design)
Generate inner pages (Claude Design)
Layer in ambient animation (ChatGPT prompt to Claude Design)
Animate the hero photo (Higgsfield)
Rewrite content for the business (Claude Design)
Export + deploy (web host)

The video's implicit repeatable sequence for going from an idea to a live, branded website by using ChatGPT for design and copy, and Claude for actual code.

Steal forany one-person build of a client or personal site prototype

CTA Breakdown

How they asked for the click.

VERBAL ASK

10:13product

“There is a link and a coupon code to hostinger.com... enter the coupon code at Darrell ten.”

Sponsor read folded directly into the deploy step — the host recommendation doubles as the literal next click the viewer needs to make to put the finished site online.

MENTIONED ON CAMERA

03:25toolClaude Design ↗

10:13productHostinger (affiliate link + coupon code DARRELL10) ↗

00:00linkEvernote prompt templates (design-brief prompt + content-rewrite prompt) ↗

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.