Big Idea

The argument in one line.

Claude Design eliminates the designer requirement for solopreneurs: describe your product, answer five clarifying questions, and Claude returns two deployable website drafts you can fine-tune through chat — no code, no Figma skill, no monthly platform fee.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

A solopreneur or small business owner paying $100-$500/month for a website platform you rarely change.
Someone with an existing site, a Figma file, or just a description of an offer — Claude Design can start from any of these.
A creator who wants a professional, deployable landing page without hiring a designer or writing code.
Anyone already using Claude who wants to understand the new Design product and its token-saving editing modes.

SKIP IF…

You need a dynamic web app with user authentication, a database, or real-time features — Claude Design outputs static HTML.
You are comfortable with Webflow or Framer and the monthly cost does not bother you.

TL;DR

The full version, fast.

Claude Design (claude.ai/design) lets you describe a product, answer five clarifying questions about audience, tone, and visual direction, and receive two polished, deployable website drafts in roughly five to ten minutes. You then iterate through chat for broad changes or use the direct Edit and Comment modes for zero-token tweaks. Once satisfied, you export a ZIP, rename the main file to index.html, and drag it to Netlify — the site is live in under a minute. The key economic argument: a $50 Webflow template plus a $500/month hosting bill replaced by a Claude session that costs a few dollars in tokens.

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 – 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.

Atomic Insights

Lines worth screenshotting.

A $500/month website bill is a design-skill tax — Claude Design removes the skill requirement, which removes the bill.
Claude Design asks five clarifying questions before touching a pixel: primary CTA, target audience, tone, visual direction, and what to keep from your current site.
The first draft takes five to ten minutes; every subsequent edit is faster because Claude already has all the context.
Two editing paths exist by design: chat sidebar for site-wide changes, Edit mode for zero-token inline tweaks to copy, font, or color.
Queuing prompts while Claude is still thinking cuts total iteration time — you do not have to wait for one response before asking the next question.
Switching from Opus to Sonnet after the initial build cuts token costs dramatically; the heavy lifting is already done.
Dropping a screenshot of a Dribbble color palette into Claude is enough context for it to retheme your entire site.
Claude Design Capture is a browser bookmarklet that lets Claude scrape and recreate any live web element you point it at.
Static HTML exported from Claude Design deploys to Netlify via drag-and-drop in under sixty seconds.
Mobile responsiveness is iterative: screenshot the DevTools phone view, drop it into Claude, and describe the fix — same loop as desktop iteration.
Deploying on Netlify gives you a password-protected preview URL immediately, so you can share with clients before going public.
The old Webflow template was touched as little as possible because every edit made the design worse — AI-assisted iteration inverts that cost curve.
1.6 million annual visitors is proof that the quality of the underlying platform matters far less than the traffic system driving people to it.

Takeaway

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.

01Hook / Before State

A website driving 1.6 million annual visits does not need to be expensive or designer-built — the traffic system matters more than the platform hosting it.

02What Is Claude Design

Claude Design is accessed at claude.ai/design; start with the Prototype tab, choose Company Website, and select High Fidelity — not Wireframe — to get deployable output.

03Start From Your Current Site or Codebase

You do not need a Figma file or existing code to start — a URL to your current site or a plain-text description of your offer is enough for Claude to ground the design in real context.

04Answering Clarifying Questions

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.

05Chatting With the Claude Design Agent

The first generation takes five to ten minutes because Claude is building the full HTML, CSS, and component structure from scratch; every subsequent iteration is faster because the context is already loaded.

06Comparing Light and Dark Drafts

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.

07Building the Pricing Page

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.

08Dribbble for Color Inspiration

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.

10Two Ways to Edit

Use the left sidebar chat for site-wide changes; use Edit mode for precise inline tweaks to copy, font, and color — Edit mode costs zero tokens.

11Using Comments

Leave multiple comment annotations on different elements before clicking send — Claude processes all queued comments as a batch, saving time and context windows.

13Switching Models to Save Tokens

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.

14Adding Figma / Design Context

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.

15Previewing Full Screen + Mobile

Check mobile responsiveness in Chrome DevTools immediately after you like the desktop version; screenshot the phone view, drop it into Claude, and describe what looks wrong.

16Exporting Your Site

Before downloading the ZIP, rename the main landing page file to index.html inside Claude Design — Netlify and most static hosts expect that name for the root page.

17Deploying with Netlify

The final deployment step is a single drag-and-drop: zip the project and drop it on Netlify at app.netlify.com/drop — 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.

Glossary

Terms worth knowing.

Claude Design: A product from Anthropic (research preview at claude.ai/design) that uses Claude to generate, edit, and export production-ready website code through conversational prompts.
High fidelity prototype: A design output with real colors, real copy, and real layout — as opposed to a wireframe — that can be directly exported as deployable code.
Claude Design Capture: A browser bookmarklet provided by Claude Design that inspects any element on a live website and feeds its structure and styles into your Claude Design session for recreation.
Edit mode: A direct click-to-edit interface inside Claude Design for changing copy, font, size, color, and alignment without consuming Claude tokens.
Comment mode: An annotation interface inside Claude Design where you click any element and leave a written instruction; Claude processes all queued comments as a batch.
Netlify Drop: A free Netlify feature at app.netlify.com/drop that deploys any ZIP file, folder, or single HTML file by drag-and-drop, with no account required for the first deploy.

Resources

Things they pointed at.

01:02toolClaude Design ↗

03:10toolDribbble ↗

08:34toolNetlify Drop ↗

00:00productBlotato ↗

00:00linksabrina.dev ↗

Quotables

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.”

Numbers + visual proof + reaction — tight hook→ TikTok hook↗ Tweet quote

00:08

“This is not a prototype, guys. This is live getting thousands of website visitors right now.”

Addresses the #1 skepticism in one sentence→ IG reel cold open↗ Tweet quote

05:38

“Edit lets you just edit it directly. So most importantly, you don't burn your tokens.”

Practical money-saving tip delivered crisply→ newsletter pull-quote↗ Tweet quote

06:14

“It's way overkill after the initial build. You could safely switch to Claude Sonnet.”

Contrarian tip — most users default to the highest model for everything→ TikTok hook↗ 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.

I replaced my entire $500 per month website with Claude Design in only two hours. Look how good this looks.

It is incredible. And this is not a prototype, guys. This is live getting thousands of website visitors right now.

And just to be clear, last year, my website brought in 1,600,000 website visitors, but it cost me $500 per month.

And I didn't do anything fancy with it. It was just a static page. Here'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. But 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. But 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. On 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 and choose high fidelity.

K. Click create. Now 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. If 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.

Plot 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.

Select 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.

And 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.

Right? This is its step by step plan, and it's gonna go one by one implementing each step in the plan.

So 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.

This first version is kind of light themed, cream colored. This second version is dark themed. Okay?

And 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.

And 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.

Dripple.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.

They'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.

Even 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.

I 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.

I would probably replace these with social media icons. Right? I've used my photo here.

Here'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.

So 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.

On 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, um, 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 and 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. You could have it insert an image.

You can have it put an icon here. You can have it update the copy. You 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. Now 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. So let's say we want, like, a different font.

Okay? So we can change that. The 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. Edit 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. If 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 overkill after the initial build.

The initial build took five to ten minutes just to get everything set up. And 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. Remember 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. But 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? And 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.

If 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.

So 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.

To 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.

So 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.

And 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.

So 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.

Click 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.

Option 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 the 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. Go 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. And this website has basically made it super, super easy for anyone nontechnical to be able to deploy their site.

This is your unique URL. This is your password. So go ahead and copy the password, and let's open it up.

Okay. Put in our password and boom. And this is our website.

Now this is a publicly accessible link as long as you have the password. You can already share it with your team. You can share it with colleagues.

You can get feedback. You 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. In 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.

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.

Frameworks