§ 01 · The Hook
The bait, then the rug-pull.
The website that drove 1.6 million visits last year cost $500 a month and broke a little every time it was touched. Two hours and a Claude conversation later, it was gone — replaced by something better, deployed live, with no monthly bill and no designer required.
Where the time goes.
00:00 – 01:01
01 · Hook / Before State
The cost-and-pain setup: $500/month Webflow template, 1.6M annual visitors, and the claim — replaced in two hours with Claude Design.
01:01 – 01:17
02 · What Is Claude Design
Navigates to claude.ai/design; shows Prototype / Slide Deck / Template / Other tabs; selects Company Website + High Fidelity.
01:17 – 01:45
03 · Start From Your Current Site or Codebase
Explains the context-loading step: paste a URL, drop a Figma file, attach a codebase, or describe your offer.
01:45 – 02:01
04 · Answering Claude's Clarifying Questions
Claude asks about the primary CTA, target audience, tone/vibe, and visual direction. She answers for Blotato.
02:01 – 02:29
05 · Chatting With the Claude Design Agent
First build takes 5-10 minutes; Claude shows its step-by-step plan executing in real time.
02:29 – 02:45
06 · Comparing the Light and Dark Drafts
Claude returns two themes side-by-side (cream/light vs. dark green). Cherry-pick elements from each via chat.
02:45 – 03:10
07 · Building Out the Pricing Page
Prompts Claude to build a pricing page; shows multi-prompt queuing while Claude is still thinking.
03:10 – 04:00
08 · Finding Color Inspiration on Dribbble
Screenshots a dark dashboard color palette from dribbble.com, drops it into Claude, tells it to match the theme.
04:00 – 04:15
09 · Applying a New Color Theme
Full dark green rebrand across hero and pricing page; CTA buttons now redirect to pricing.
04:15 – 04:47
10 · Two Ways to Edit Your Website
Left sidebar = broad site-wide chat; Edit button (upper right) = direct click-to-edit without burning tokens.
04:47 – 05:16
11 · Using Comments to Change Elements
Comment mode: click any element, type an instruction (rewrite, change color, insert icon, remove). Claude batches all queued comments.
05:16 – 06:03
12 · Using Edit Mode for Fast Tweaks
Direct inline editing — copy, font, size, color, alignment — zero token cost.
06:03 – 06:34
13 · Switching Models to Save Tokens
Settings icon (bottom left) to switch from Opus to Sonnet. Initial build = Opus; all iteration after = Sonnet.
06:34 – 07:19
14 · Adding Figma and Design Context
Import button: Figma file, Claude Design Capture bookmarklet (scrapes live web elements), design systems, skills.
07:19 – 08:19
15 · Previewing Full Screen and Mobile
Present button for full-screen preview; open in new tab; DevTools iPhone 12 Pro view to check mobile. Screenshot + describe issues to fix.
08:19 – 08:34
16 · Exporting Your Finished Website
Share menu: Download as ZIP. Rename the main landing page file to index.html before deploying.
08:34 – 09:19
17 · Deploying Live With Netlify in One Minute
Drag ZIP to app.netlify.com/drop. Password-protected URL appears immediately. Sign up for free Netlify account to remove password.
09:19 – 09:50
18 · Adding Your Custom Domain
Briefly shows Netlify domain management for connecting a custom business domain.
09:50 – 09:58
19 · Wrap Up
Subscribe CTA with channel branding overlay.
Visual structure at a glance.
Named ideas worth stealing.
01:45
list
Claude Design 5-Question Intake
- Primary CTA / #1 job of the page
- Target audience
- Tone and vibe
- Visual direction
- Existing brand assets to pull from
Before generating a single pixel, Claude Design asks five clarifying questions to scope the design brief.
Steal for Any client intake process or design brief template
04:15
model
Two-Track Editing System
- Chat sidebar (broad, site-wide, token-burning)
- Edit mode (precise, inline, zero-token)
Claude Design separates broad AI-powered changes from direct manual edits so you only spend tokens on things that genuinely need AI judgment.
Steal for Any AI-assisted creative tool pairing generative output with manual fine-tuning
06:03
concept
Model Tier Switching
Use the most capable model for the initial build; switch to a lighter model for all iteration. The context is already established.
Steal for Any Claude workflow with a large setup phase followed by iterative refinement
Lines you could clip.
00:02
"I replaced my entire $500 per month website with Claude Design in only two hours. Look how good this looks. It is incredible."
00:08
"This is not a prototype, guys. This is live getting thousands of website visitors right now."
05:38
"Edit lets you just edit it directly. So most importantly, you don't burn your tokens."
06:14
"It's way overkill after the initial build. You could safely switch to Claude Sonnet."
Things they pointed at.
How they asked for the click.
00:35
subscribe
"First, hit like, hit subscribe, and hit the notification bell so you don't miss my next tutorial."
Standard early-video subscribe ask placed at 35 seconds before content starts; repeated verbatim at outro.
Word for word.
HOOK opening / re-engagementCTA the pitch
00:00HOOKI replaced my entire $500 per month website with Claude Design in only two hours. Look how good this looks.
00:07HOOKIt is incredible. And this is not a prototype, guys. This is live getting thousands of website visitors right now.
00:14HOOKAnd just to be clear, last year, my website brought in 1,600,000 website visitors, but it cost me $500
00:27HOOKCTAHere's what my old website looked like just for reference. I purchased a $50 Webflow template and just edited the text and videos. The problem is every time I touch the design, it would get worse because I'm not a designer.
00:40CTABut now with Claude Design, you can just chat with it back and forth like I did here. And in just two hours, I replaced my entire website, got this deployed, and it's up and running. Now I'm gonna walk through exactly how to do the same thing.
00:53CTABut first, hit like, hit subscribe, and hit the notification bell so you don't miss my next tutorial. The first thing we're gonna start with is what is Claude design. Go over here to claude.ai/design.
01:05On the left hand side are your options for what to create, prototype, slide decks. You can start with the templates or you can just start with other. So I'm going to do company website
01:14and choose high fidelity. K. Click create.
01:17Now if you already have something to work with, like you have a design system in Figma or you have screenshots for what you want or you even have an existing code base or an existing Figma file, you can absolutely drop it in here and start with that context. But let's say we're creating our main company website's landing page, and here is my current website.
01:36If you don't even have a current website, that's totally okay. You can just describe what your products are, what your services and offers are.
01:44Plot Design will still go ahead and make you your website. The first thing Claude's going to ask is a bunch of clarifying questions. It's the number one job of our landing page that's going to be driving free trial sign ups for solopreneurs and small business owners.
01:57Select the answers to these questions that make sense for your business. Click continue in the bottom right corner. You can see a summary of the answers that you provided on the left hand side.
02:06And just like ChatGPT, just like normal Claude, this is where you're going to talk to the AI agents back and forth. You can see exactly what it's doing.
02:14Right? This is its step by step plan, and it's gonna go one by one implementing each step in the plan.
02:20So this initial phase building the entire thing for the first time is what's going to take the longest, probably five to ten minutes. Now here's our first draft, and what's really cool is Claude Design gave us two different versions.
02:32This first version is kind of light themed, cream colored. This second version is dark themed. Okay?
02:38And then you can scroll down here to see the entire website. So you can compare these two themes side by side and then choose the one that you like best. Or if you like certain things from a that you want included in b, you can also give Claude that feedback directly.
02:53And for my particular landing page, all of the buttons should redirect to the pricing page. And I'm gonna tell Claude to build out the pricing page similar to my old one. And then I'm gonna show you how you can edit and fine tune this website so that you can get it absolutely perfect to what you're looking for.
03:10Dripple.com is really nice just to browse inspiration, look for different color palettes you like, especially if you're not a visual person like me. I don't know what colors go well together.
03:19They'll search a term like dashboard. Say you really like how this dash dashboard looks in terms of the color of it. All you have to do is take a screenshot of it and then drop it into Claude.
03:28Even while it's thinking, you can tell it what you want it to do next. You can queue up additional prompts, and it will go ahead and do this after it's done with the previous prompt that we asked it to finish. But overall, this first draft already looks really good.
03:42I really like how it created this kind of, like, animated thing up here. I like this scroll bar over here. I like the list of the eight features.
03:50I would probably replace these with social media icons. Right? I've used my photo here.
03:56Here's the updated design. Remember, we fed in this kind of green looking dashboard here, and you can see that Claude updated the entire website to use this color theme. Here, you can see it also implemented the pricing page.
04:07So if I click one of these CTA buttons, it's gonna redirect me to the pricing page. What do you do if there are things you wanna change, but you don't wanna have to, like, type here? There's two different ways of editing this.
04:19On the left sidebar, you can treat this as a general chat. If you wanna describe something that's gonna be broadly applied to the entire site, then you wanna use the left hand side chat. However, if you want to just, like, tweak the wording of this or if you want to change, like, just this particular icon,
04:38um, it's easier to do it in the way I'm about to show you. Up here in the upper right corner, the two buttons I wanna point out to you are comments and edit. So comments allows you to choose an item on the website
04:50and tell Claude exactly what you wanted to do to change it. Let's say we choose this, and we're just gonna say rewrite this. So you could have it change the color.
05:00You could have it insert an image. You can have it put an icon here. You can have it update the copy.
05:06You can remove it altogether. On the left hand side, it's currently working, so it got our comment. What's really cool is you can just, like, go through the entire page and leave your comments, and Claude will iterate on them.
05:17Now if you know exactly what you wanna change, let's say I I wanna change, like, this headline, click edit. And then you can click on something on the page. You can edit the copy, but you can also change some of these things, like what font do you want.
05:30So let's say we want, like, a different font. Okay? So we can change that.
05:34The font size, the color, is it left aligned, the width, the height. Let's say we want to replace this word the with AI, and maybe you wanna capitalize content engine.
05:45Edit lets you just edit it directly. So more most importantly, you don't burn your tokens. And secondly, it's really much faster to do this for little tweaks instead of having to type it out on the left sidebar here.
05:58HOOKIf you are not on the Claude Max plan, you're watching out for your token consumption, go ahead and click the settings icon on the bottom left corner where you can change your model. For a lot of these tasks, um, you definitely don't need Opus 4.7. It's way
06:13HOOKoverkill after the initial build. The initial build took five to ten minutes just to get everything set up.
06:20HOOKAnd after this point, you know, it's gonna be pretty minor easy edits. So you could safely switch to Claude Sonnet 4.6. Now the last thing I'll point out before we talk about how do we deploy this and get this live are all the additional tools you have to add in context.
06:35Remember in the beginning, Claude asked if we wanted to drop design files or Figma files or anything like that. We kind of skipped that step. I'm assuming you don't necessarily have a lot of that.
06:45But for those of you who do or if you're in the middle of working on this and you end up seeing design and inspiration from other sources out there, it's never too late to add additional context. All you have to do is click this import button. K?
06:58And if you have a Figma file, for example, you can click this. If you wanna grab a certain web element from a website that you really like, go ahead and click this, and it's going to use Claude design capture capture to literally inspect that thing on the website that you like and recreate it to the best of its ability.
07:15If you have skills or design systems, you can also use them here. If you wanna see the full screen view, you can click up here in the upper right corner, click presents. And now we have this nice full screen view, or you can open it in a new tab by clicking.
07:30So you have the version you're working on and then the new tab here. So you can, like, really preview what the sites would look like. The designs are not necessarily mobile responsive.
07:39To check that real quick, you can right click this, click inspect. This should already be a phone, but if not, go ahead and click on it. And then you can see the phone view of this.
07:48So it depends on the website, but if it looks good to you, then great. If there's stuff here that looks kind of messed up to you on the phone or you feel like the font is too small here, what you can do is take a screenshot of this, drop it into Claude, make this more mobile responsive.
08:05And it will be able to analyze the image and understand what you mean by making it more mobile responsive. It's common things like your font is too small, you can't quite scroll, padding is all messed up, and you can't get certain buttons.
08:17So now let's talk about what do you do once you have a design you like. What do you do next? You have a couple options here.
08:23Click share in the upper right corner. You can download it as a ZIP, export as a PDF, PowerPoint, send it to Canva. You can export it as a standalone HTML file.
08:33Option we're going to talk about is downloading this project exactly as it is and then deploying the website live. And it literally only takes one minute. We need to rename
08:43the main landing page to index.html. The app we're using called Netlify just expects it to be called that. And you should see it up here renamed to index dot HTML.
08:54Go ahead and click share again. Download the project as a ZIP file, and then go to this website, app.netlify.com/drop. And then we're literally just gonna drag and drop our ZIP file.
09:05And this website has basically made it super, super easy for anyone nontechnical to be able to deploy their site. This is your unique URL.
09:14This is your password. So go ahead and copy the password, and let's open it up. Okay.
09:19Put in our password and boom. And this is our website. Now this is a publicly accessible link as long as you have the password.
09:26You can already share it with your team. You can share it with colleagues. You can get feedback.
09:30You can even share it with customers. You will need to sign up for a Netlify account so that you can remove the password and click sign up for free. Just go through this process, and then you'll be able to have access to the app you've just deployed.
09:43CTAIn Netlify, you can, of course, change the domain so that it's your own business domain, your own custom website domain. It's super easy with Netlify as well. If you enjoyed this video, hit like, hit subscribe, and hit the notification bell so you don't miss my next train.
— full transcript
§ 05 · For Joe
How to build and ship a website you actually own.
WHAT TO LEARN
Claude Design collapses the website production cycle from weeks of designer back-and-forth and a monthly SaaS bill into a single two-hour conversation — but only if you use its two editing modes correctly.
- The five clarifying questions Claude Design asks before generating anything — primary CTA, target audience, tone, visual direction, and existing brand assets — are the actual design brief; answer them specifically and your first draft requires far fewer revisions.
- Claude always returns two versions of the first draft so you can compare themes side-by-side and cherry-pick; chatting in elements from one theme into the other costs nothing but a short prompt.
- Use the left sidebar chat for site-wide changes (color theme, layout restructuring, new sections); use Edit mode for precise inline tweaks to copy, font, and color — Edit mode costs zero tokens.
- Dropping a screenshot from Dribbble or any design inspiration source directly into Claude gives it enough context to retheme your entire site without writing a color-spec prompt.
- You can queue additional prompts while Claude is still working on the previous one; doing this cuts total iteration time significantly on a long build.
- After the initial build, switch from the most capable model to a lighter one in the settings panel — the context is already established and the remaining edits do not require heavy reasoning.
- Claude Design Capture is a browser bookmarklet that lets Claude scrape and recreate any specific element from any live website, giving you a faster starting point than describing it from scratch.
- The final deployment step is a single drag-and-drop: rename the main HTML file to index.html, zip the project, and drop it on Netlify — the site is publicly accessible in under sixty seconds.
- The password Netlify applies to your first deploy is intentional — it gives you a shareable preview URL for team or client feedback before you go public.
- Switching away from a $500/month website platform to a Claude session that costs a few dollars in tokens only works if the resulting site is deployable static HTML; that constraint is also its advantage — no server to maintain, no plugin updates, no hosting dependency.
