Big Idea

The argument in one line.

Claude Design most valuable feature is not the generation itself — it is the Design System that encodes your brand once so every output, from slide one to slide fifty, looks like it came from the same designer.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You are a small business owner, coach, or content creator who produces marketing assets but has no design background.
You already use Claude for text and want to extend it to visual output without a dedicated design tool.
You are a Canva user who wants AI-generated starting points you can polish.
You have used Claude Design as a one-off prompt tool and did not know the Design System feature exists.

SKIP IF…

You need production-ready code — this covers the visual layer only; Claude Code handles the functional layer.
You are on Claude free tier — Claude Design requires a paid plan (Pro or higher).
You are a professional designer who already owns a full design stack.

TL;DR

The full version, fast.

Claude Design is Anthropic visual workspace (claude.ai/design) that turns text prompts into polished slide decks, mobile app prototypes, and landing pages. The four-step workflow is: learn the UI tabs, generate and refine using chat or Markup and Tweaks controls, build a Design System that auto-applies your branding to all future outputs, then export as PDF, PPTX, HTML, or hand off to Claude Code. The Design System — extracted from your existing website URL and logo upload — is what elevates outputs from generic AI to on-brand, and it is the feature most beginners skip entirely. Access requires a paid Claude plan; the tool is still in research preview.

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:02

01 · Cold open — what is Claude Design?

Defines the tool, lists output types, states four-step promise with tease for step three.

01:02 – 02:33

02 · Step 1: UI orientation

Walks top tabs (Recent, Designs, Examples, Design Systems) and left-rail project types.

02:33 – 04:19

03 · Lead magnet interstitial

Promotes free Claude Starter Pack (brand guidelines template + prompt templates). QR code + description link.

04:19 – 07:11

04 · Step 2a: Slide deck demo

Creates a 6-slide landscaping pitch deck from a prompt. Demonstrates three edit paths: chat sidebar, Markup tool, and Tweaks. Shows Comments and in-browser Present mode.

07:11 – 11:12

05 · Step 2b: App prototype demo

Builds high-fidelity interactive mobile app prototype. Clarifies this is visual design not a functional app — exits to developer or Claude Code.

11:12 – 12:43

06 · Step 2c: Landing page demo

Creates opt-in landing page for a lead magnet. Shows chat refinement and previews HTML export path.

12:43 – 15:37

07 · Step 3: Design Systems

Video centerpiece. Explains Design Systems as brand rulebook. Demonstrates creating one from website URL plus logo upload, reviewing extracted elements, publishing, and setting default.

15:37 – 17:06

08 · Step 4: Exporting

All share and export options: team access, duplicate as template, ZIP, PDF, PPTX, Canva, standalone HTML, hand off to Claude Code.

17:06 – 18:31

09 · Caveats and close

Paid plan requirement (Pro or higher), research preview status. Final CTA for Claude Starter Pack.

Atomic Insights

Lines worth screenshotting.

Claude Design has its own weekly usage limit separate from your regular Claude account limit — heavy users will hit it independently.
A Design System extracted from your website URL means you do not have to describe your brand in every prompt — the rulebook is already loaded.
The prototype output is a visual mockup, not a working app — its designed exit is a developer handoff or a Claude Code handoff.
Three edit paths exist for a reason: chat sidebar for major revisions, Markup for a single element, direct Edit for copy — matching tool to scope saves time.
Exporting as standalone HTML turns a Claude Design landing page into deployable code; exporting as PPTX gives you an editable PowerPoint.
Uploading a brand guidelines document before generating anything shifts outputs from generic AI to brand-specific without extra prompting.
The Tweaks panel (color story, fonts, voice presets) lets you test brand directions without writing a new prompt.
Claude Design comments feature is designed for team collaboration — teammates can annotate slides before you refine them.
You can present a finished slide deck directly from the browser in Claude Design without exporting first.
Design Systems include brand voice and tone guidelines — not just colors and fonts — meaning copy style is also encoded, not just visual style.

Takeaway

One setup that makes every future design on-brand automatically.

WHAT TO LEARN

The difference between generic AI outputs and ones that look like yours is not better prompting — it is a Design System you configure once.

Claude Design three edit paths — chat sidebar, Markup tool, and direct in-canvas Edit — map to different scopes; using the right one for the size of the change saves significant back-and-forth.
A Design System extracts your color palette, typography, logo, component styles, and brand voice from your existing website URL — you do not build it from scratch.
Uploading a brand guidelines document before generating anything shifts Claude Design output from generic to brand-specific without having to describe your brand in every prompt.
The prototype output is a visual mockup, not a working app — its designed exit is a developer handoff or a Claude Code handoff that builds the functional version.
Exporting as standalone HTML turns a Claude Design landing page into deployable code; exporting as PPTX gives you an editable PowerPoint for presenting outside the browser.
Claude Design has its own weekly usage limit separate from regular Claude usage — heavy users will hit it before their main account limit.
The research preview label means the tool is actively improving but bugs are expected; the multiple in-project edit paths exist partly to work around generation errors gracefully.

Glossary

Terms worth knowing.

Design System: A reusable brand rulebook inside Claude Design that stores your color palette, typography, logo, component styles, and brand voice — applied automatically to every new project instead of being re-specified in each prompt.
High fidelity prototype: A visually detailed, interactive mockup of an app or interface showing real colors, fonts, and layout — as opposed to a wireframe, which is a basic structural outline with no styling.
Markup tool: A Claude Design editing mode where you click a specific element on your canvas and give Claude a targeted instruction, rather than describing the change conversationally in the chat sidebar.
Tweaks: Pre-built style variations within Claude Design that let you swap color palettes, display fonts, body fonts, and voice tone with a single click rather than a written prompt.
Research preview: Anthropic label for features that are live and usable but still being actively tested — meaning improvements are ongoing and users may encounter bugs.
Wireframe: A low-fidelity structural outline of an app or page that shows layout and element placement without colors, fonts, or visual polish — used early in design to validate structure before aesthetics.

Quotables

Lines you could clip.

12:53

“Your first, second, and fiftieth design all look like they came from the same designer.”

Self-contained ROI claim for Design Systems, no setup needed→ TikTok hook↗ Tweet quote

10:33

“You set it up once in the beginning and Claude will automatically apply it.”

One-liner summary of the Design System value prop→ IG reel cold open↗ Tweet quote

10:28

“This is not an actual functioning app. This is just the visual layout — you can then hand this off to a developer or even send this design to Claude Code.”

Clarification that prevents misuse expectations; good standalone tip→ 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.

00:00Claude just recently released Claude Design, a super powerful AI tool that gives you actual visual designs based just on a prompt. You describe what you want, and Claude Design builds it. We're talking slide decks, landing pages, prototypes.

00:13It's actually crazy. So in this video, I'm walking you through the four main steps to start using and mastering it from start to finish, including three real life examples of designs you might create. And make sure you stick around for step three because it's definitely the most powerful feature, and a lot of Claude Design users don't even know about it yet.

00:29So by the end of this video, you'll know how to confidently navigate the user interface, create and refine your project, and use Claude Design like a pro. Now before we dive in, I wanna be extra clear on what exactly Claude Design is. Claw Design is Anthropic's visual creation workspace.

00:44You describe what you want, and it builds real polished visual assets for you. So we're not just talking about generating text anymore. We're talking actual designs like landing pages, marketing assets, social media designs, slide deck presentations.

00:57You can even design prototypes for things like mobile apps. So to get here, you're gonna go to claude.ai/design, or you can access it through the Claude web browser.

01:05At the time of this filming, it's not currently available on the Claude desktop or mobile app yet, So so you'll have to access it by either typing in that link or on the left side panel of your main Claude page. Alright. Let's dive right into step number one, which is getting familiar with the user interface.

01:19So this is what it looks like when you access Claude Design. Let's start by looking at these tabs at the top. You've got your recent tab where you can see what you've recently been working on.

01:28You've got your designs tab that'll show you your existing projects. You can click over to examples where you can scroll through and it'll give you different example prompts for generating different types of graphics and visual assets. And you can click over to design systems, which we'll get to in just a little bit.

01:43Then on your left hand side, you'll see some different tabs here that you can click through depending on what you want to create. So you can create a prototype, which would be creating a prototype for something like a mobile app.

01:54You can also click over to create a slide deck presentation. You can choose the from template tab if you have projects that you have saved as your own personal template that you wanna use again and again. And you can click over to other if you want to create some other type of project that doesn't fit into one of these categories.

02:10Now we're about to jump into these real life examples of creating these different types of visuals. But before we even get started with that, I wanna make sure that you have something that's going to help this process go so much smoother. It's my Claude Starter Pack.

02:23As someone who uses different AI tools on a daily basis, I can tell you how important it is to start with a clear idea of your branding, your color scheme, your fonts, your brand voice. Giving your AI tool context to work with from the very beginning helps take your outputs from just general generic AI replies that pretty much everyone's getting to replies that are specific to you and your business and your brand and exactly what you're looking for.

02:48So in this Claude Starter Pack, there's several things, but the thing that I think you'll find super helpful as you're getting started with Claude Design is the template that's included for a brand guidelines document. This is gonna help you create a document that you can then upload into Claude so it knows exactly who you are, who your audience is, who you're creating visuals for, if you have a business or a brand, what your branding guidelines are, what your tone of voice and your writing is, all of the things that Claude needs to know to tailor its responses to you.

03:14Also included in that starter pack is an overview of Claude itself, giving you the information you need to know if you're just getting started with Claude, about the six core features it offers, and you'll also get templates to create a mega prompt with Claude, as well as templates to create three Claude projects. These are shortcuts for you to get started using Claude the right way so you don't waste time going back and forth and back and forth trying to figure out how to prompt it and give it the right information.

03:38You've got it all in these templates in a copy and paste format so you can literally take it, paste it into Claude, and be ready to go. So that Claude starter pack is completely free to you. Just scan the QR code on the screen right here, you or can click on the link in the description box below to hop over and grab that.

03:54Okay. Let's move on to step number two, which is creating and refining your designs. So first, we're going to create a slide deck.

04:00So over here on the left, I'm gonna click over to the slide deck tab. I'm gonna give it a project name. So for these use cases that we're going through today, let's say you're the owner of a landscaping business.

04:09So for instance, you might wanna create a new slide deck to pitch your business to potential clients or to HOA boards. So for this project name, I'm gonna say landscaping pitch.

04:20Now here you'll see where you can choose a design system from your drop down menu. Again, we'll talk about this more in-depth in just a minute, but for now, we're just gonna skip over that, and I'm gonna click on create. So when I click create, it'll bring up my blank canvas over here.

04:32This is where the actual slide deck is going to appear once it's created. Now before I give it a prompt, I can choose to start with context over here to the left. I can choose to add a screenshot if I wanted to use that for reference.

04:44If I have an existing code base, I can attach that or even drag in a Figma file, but I don't have to do any of this. I can just simply come down to the prompt box and type in what I'm looking for for this slide deck. So for this one, I'm saying create a six slide presentation for a landscaping business called you can insert your business name here.

05:00I just came up with an example name, Luxury Lawns Landscaping. And then I said, slide should cover who we serve, the services we offer, why customers choose us, before and after results, pricing packages, and a call to action to book a free consultation. Of course, you can give this prompt as much or as little information as you want.

05:18The more details, the better, in my opinion, so you don't have to waste a ton of time going back and forth refining. But once you're ready and you have your prompt put in there, you're gonna click send. Now it's worth noting that this is just me starting from scratch with a simple prompt.

05:31But if you have something like a PDF document that already outlines exactly what you're wanting in your slide deck, you can always click this little plus button here and click on attach file to bring in a document or some other file to base this off of. For now, I'm just gonna stick with my prompt and see what it comes up with.

05:46Now as it's working creating my slide deck, it'll be telling me over here on the left exactly what step of the project it's working on. Okay. So here is the slide deck that it generated for me.

05:56I can click through to see all of the different slides. We can see it's got the name at the top, luxury lawns landscaping. This is in our services slide.

06:03We've got why homeowners choose us before and after, pricing packages. It's given me pretty much everything I asked for it.

06:11It looks really nice and professional. Now because I didn't give it any information on fonts or colors, it just came up with the way it looks itself, but I could have given it information on that. So if I wanna make any changes, there's a few ways I can edit this.

06:24Number one, I can just use this sidebar panel to the left, which is where this prompt box is still and just describe the change I want and simply do it through a conversation with Claude. So I could say something like, make the title slide more bold and eye catching. So here it's gonna take it from this original design for the title slide to this.

06:42This is definitely more bold and eye catching. So that's an example of how you can edit this from the side panel, but you can also edit with these buttons here at the top right. So the first one says markup.

06:52When you click that, you can either click on a section and just tell Claude what you want for just that section. So I might say something I wanted to change about the font or the color here for this word. I can also click over to where it says edit and just click into any of these blocks myself and edit what they say or edit something about it.

07:09And I can click over to where it says show tweaks. Tweaks are basically just built in little changes that don't drastically affect it, but they tweak it a little bit here or there. So right now, this is offering me different tweaks for the color story, so it could change the color palette out.

07:23It's also offering me tweaks for the display style, so I could click over to play fair to change the font or DM Serif. These just give me different font options. And I can click to change from the voice from the current classical voice over to more of a modern voice or editorial.

07:39And then another button here at the top is this comments button. This is really helpful if you are collaborating with a team inside of Claw Design. You or your teammates can come in and make a comment.

07:48So I might say, change this background to a lighter shade. And now that comment is here on this slide for everyone in my team to see. Now when you have created your slide deck, you do have some presenting options straight from Claw Design.

08:03So you come up here to the top right where it says present, and you can choose to present in this tab or full screen. So let's say I choose in this tab. It's still in my browser tab, but I can click through the slides to present it straight from here, or I can present full screen.

08:17Okay. Coming back to the main page of Claude Design, I wanna give you another example of if you were to create a prototype. So let's say I'm still this landscape business owner, and I want to create a client facing app that my clients could use for things like getting a quote, viewing their service schedule, or approving lawn care plans.

08:34But before I invest in creating an app like this, I wanna get an idea of what it might look like first. So I'm gonna come over to this prototype tab and give it a name. So I might say client app, and then you can choose from wireframe or high fidelity.

08:46Wireframe is gonna give you more of a basic outline of what it would look like, and high fidelity is going to be more high quality with colors and fonts to help you visualize what the app actually might look like. So I'm gonna leave this on high fidelity and click create. Now, again, you'll notice this is the same screen as before with our canvas to the right.

09:02We can add context here if we want or just come straight down to add our prompt. So for my prompt, I'm gonna say create a mobile app prototype for a landscaping service called Luxury Lawns Landscaping. It should have a home screen showing upcoming scheduled services, a request a quote button, and a photo gallery of past projects.

09:20Keep the design clean and professional earthy greens and neutrals. I'm gonna click send. Okay.

09:25So here it is. This is the app prototype that it came up with. So this is what my app would actually look like, and it's really cool because I can actually scroll through this and see all the different sections that I asked for, and I can click on the different sections to open them up and see what's included in each one.

09:39This is interactive, so it lets me do things like check boxes, click through on buttons, and see everything that's built into it. It also has the tweaks available over here like the slide deck did, so I can click on some of these tweaks if I wanna tweak the colors, the display fonts, the body fonts, or jump to one of the different screens.

09:57It's got a gallery screen, project details, service details, quote flow. And, of course, I can always make edits again by coming to my prompt box over here to the left and describing what I want it to do. So I might say something like, add a seasonal promotion screen.

10:11And it would go ahead and apply that edit from here. Now just like we saw with the slide deck presentation, I can also come to this button at the top right that says markup and click on a section that I want Claude to edit in some way and then leave a comment for Claude. So I might say, make this box a light blue color.

10:29I can click send to Claude. It's just another way I can edit these elements. Now I do wanna note when you are creating something like this, a prototype for a mobile app, this is not an actual functioning app.

10:39This is just the visual layout and design for what it could look like. So this is great for visualizing if you have an idea for something like this, what it could look like, the aesthetics of it, so that you can then hand this off to a developer to create your functioning app or even send this design to Claude Code and build it out yourself inside of Claude Code, which can actually build out a fully functioning app.

10:59And we'll cover that more in just a minute in step four. Okay. Let's move on to our third example of something you might create with Claw Design, and this is gonna be a landing page.

11:07So I'm gonna click over to where it says other and just type in landing page and click create. So a landing page is something I might use if I'm wanting to build my email list, I'm wanting to get people to opt in and subscribe by offering them a freebie or a lead magnet of some sort. I can build out a simple landing page where the person can input their name and email and receive the freebie I'm offering.

11:28So I'm gonna start with a prompt again over here to the left and just give Claw Design the basics of what I want my landing page to look like. For this example, I'm continuing with our landscaping company and telling it that this page is offering a free homeowners spring lawn guide. I want a form where the person can enter, again, their name and email address and a download button.

11:48I'm gonna click send, and here is what it came up with. This is what my landing page could possibly look like. Of course, I can continue to edit this in the normal ways we've been editing our other designs, either using the chat box here to the left to describe what I want refined or changed, or I can come up here to edit and then simply click on any of these text fields to go ahead and just edit myself.

12:09And once I'm happy with this, I can actually export this as HTML code to then build out the real landing page with my website host. We'll talk more about how to do that in just a minute in step four. But first, I wanna move on to step number three because this is the most powerful feature of Claw Design Design in my opinion, and one that people are overlooking and not taking advantage of, and this is building out design systems.

12:30A design system is basically your brand rule book or guide book baked directly into Claw Design, so it knows how to keep every single thing that it generates for you on brand according to your color scheme, your font choices, your writing style. You set it up once, and it automatically applies it to everything you want it to going forward.

12:48If you're a Canva user, you can think of this sort of like a Canva brand kit, but for design, and it goes even deeper than a brand kit even does. You can include things like your color palette, typography, your logo, component styles like button styles and card layouts, and even your brand voice and tone guidelines.

13:04This is so powerful because now with minimal effort, you can have a brand consistency across every single output so that your first, second, and fiftieth design all look like they came from the same designer. This also saves you massive time and effort instead of having to manually explain with every single prompt what colors you want, what fonts, the spacing, the layout.

13:24You set it up once in the beginning and Claude will automatically apply it. So to set up your first design system, you'll come over to this top tab that says design systems. And from this tab, I'm gonna come over to this create button, and this will bring me into where I can start setting this up.

13:38First, I'm gonna enter a company name. So I'm gonna say Kate Hayes. And this is also where you can input a website.

13:44If you have an existing website that you just want Claude Design to extract elements like your colors and fonts from, you can input that here. So I'm gonna put my main website, kate-hayes.com. And then these next fields are optional, but you can provide examples of your design system and products from things that you already have existing.

14:01So for instance, if you use GitHub, you can link your code from that here. You can link code from your computer by dragging a folder here or browsing to upload. You can upload a dot fig file here, or you can drag files here to add fonts, logos, and assets.

14:16So if you have these already created, this is a great way to quickly set it up. So for instance, I'm going to just go ahead and upload my main logo here. And then you can add extra notes, like if you wanna say something like, use an earthy color palette or use rounded corners on buttons, you can input text here as well.

14:32Then you're gonna click this continue to generation button and click generate. And you can see here what it's doing on the left. So it said it was fetching from kate dash haze dot com.

14:40It's extracting my brand elements from my website and looking at the files that I uploaded. Okay. So here, it's pulled the information from my website, and it has my logo that I've uploaded.

14:50It says it's missing brand font. So if I wanted to, I could upload my actual fonts here. And then this is the needs review section.

14:56So I'm just gonna go through each of these and either click looks good or needs work. So for this, I'm just gonna say it looks good, and it'll continue giving me different things like my brand voice, looks good, colors, looks good, it's going through my different neutral colors, supporting accent colors. So for all of these, just for this demo, I'm gonna keep clicking looks good, but you can always click needs work and adjust it as you need to until everything is reviewed.

15:20So now when you come back to your design system tab, you'll see the one you just created, and you can toggle it from draft over to published. You can also switch between them and make whichever one you use most often your default by choosing make default.

15:34So now when I come to create a new design or prototype, here where it says design system, I can choose which one I want from the drop down menu, and it will default to the one that I have set. This way, whatever the output is will be according to my specific branding in that design system, so I don't have to worry about giving it that information inside the prompt every time.

15:53Now remember, if you grab that free Claude starter pack with this QR code, you'll be able to download that free brand guidelines template, and that'll make this process of creating your design system in Claude go a lot faster because it'll be a file that you can upload for Claude to get your information from. Okay. Time to move on to step number four, which is exporting your project.

16:12So when you have your project open, when it's finalized and you're ready to export, you can come up to the top right where it says share, and you've got lots of different options here. Starting with your access for your teammates, you can choose if you have teammates working with you inside of Claw Design, if they can just view this design, if they can comment on it, if they can edit, or you can make it private.

16:31You can also duplicate the project or duplicate it as a template to use again in the future. You can download your project as a dot zip file. You can export it as a PDF document.

16:41For something like this, a slide deck, you could export it as a PPTX, which is a PowerPoint presentation file. That way you can open this up in PowerPoint and make further edits if needed.

16:51One of my very favorite options is this next one. You can send it to Canva. So if you are currently a Canva user, you can send it Canva to continue editing or applying your branding just to polish it and make it exactly what you want.

17:03You can also export it as standalone HTML. So this would be really helpful for something like that landing page that we built. If you wanted to get HTML code and bring it over to build it out inside of your website host, you could do that.

17:17Or for something like the mobile app prototype that we created, you can hand this off to Claude Code. So Claude Code is also a really powerful Claude feature. Remember, Claude Design is for the visual design of what it looks like, but Claude Code can actually take that design for something like a mobile app and turn it into a fully functioning app.

17:35So that is a great ability to have here as well if you're wanting to go that route. Now one thing to note here with Claude Design is that it is only available currently for those that are on a paid Claude plan. So that's the Claude Pro plan or higher.

17:47So if you wanna have access to use Claude Design, you will need to be on one of those plans. And it's also important to remember at the time of this filming, the Claude Design is currently still in what they're calling the research preview phase, which means it's getting better and better as they're testing it and using it.

18:01But you may run into some glitches or bugs, and that's totally fine and to be expected. I love that they've given us all of these different ways of refining and editing inside the project in case that happens. So I hope that was helpful for you.

18:13I can't wait to see what you come up with inside of Claw Design. Remember, can click on that link below to hop over and grab your free Claw Starter Pack to get started using Claw the right way. Happy designing.

The Hook

The bait, then the rug-pull.

Anthropic visual workspace landed quietly, but the gap between what it can do and what most users actually use it for is already wide. This breakdown covers every feature of Claude Design in sequence — including the Design System that most beginners miss entirely.

Frameworks

Named ideas worth stealing.

00:13list

Four-Step Claude Design Workflow

Navigate the UI
Create and refine designs
Build a Design System
Export your project

Linear checklist that works as a reference frame for any new Claude Design user.

Steal foronboarding walkthroughs, tool tutorial structures

06:53list

Three Edit Paths

Chat sidebar (major changes)
Markup tool (single element)
Direct Edit (copy fixes)

Scope-matched editing — match the tool to the size of the change.

Steal forany AI tool tutorial with multiple editing modes

12:43concept

Design System as Brand Rulebook

Set color palette, typography, logo, component styles, and brand voice once; Claude applies them to every future output automatically.

Steal forexplaining brand consistency to non-designers

CTA Breakdown

How they asked for the click.

VERBAL ASK

03:13product

“Just scan the QR code on the screen right here, or you can click on the link in the description box below to hop over and grab that.”

Embedded twice — once at the step 2/3 boundary (mid-video) and once at close. The freebie (brand guidelines template) is directly relevant to the Design System step that immediately follows.

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.

AFFILIATECommission earned if you click.

OTHER LINKSAlso linked in the description.