A screen-recorded walkthrough of Anthropic's Claude Design tool, built around one argument: skip the design system and every output stays generic.
Posted
2 days ago
Duration
Format
Tutorial
educational
Views
5.1K
113 likes
Big Idea
The argument in one line.
Claude Design writes real, editable HTML and CSS from a chat prompt, but the tool only produces usable, on-brand output after you build a design system first — skip that step and every result comes out generic.
Who This Is For
Read if. Skip if.
READ IF YOU ARE…
A designer or non-technical founder who wants a written brief turned into a real, clickable interface without writing code.
Someone building a first landing page or dashboard mockup who wants an AI tool that respects consistent brand color, type, and components.
A Figma user curious whether an AI design tool can output real code instead of another prototype trapped in a preview pane.
SKIP IF…
You already have a mature design system in Figma and need pixel-perfect handoff — the manual editing here is still rougher than Figma's.
You want fully automatic edits with no review step — every manual change here has to be saved and reprocessed by the AI before it applies.
TL;DR
The full version, fast.
Claude Design works by having you describe what to build in a chat panel while it writes real HTML and CSS live on a canvas next to the conversation, which is why every output is genuinely clickable. The workflow starts with a design system — a generated brand file covering color, typography, components, and even a rough interactive dashboard — built from as little as a company name and one sentence. From there, a manual editing panel lets you select any element and adjust color, spacing, and layout by hand instead of prompting for every small change, and dedicated tweak and annotate tools let you compare variations or point directly at what to change. Finished designs export as HTML, PDF, or hand off to a coding tool for hosting, but the design system is the step that keeps every downstream output on-brand instead of generic.
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.
Cold open framing Claude Design and the promise that its outputs are real, clickable code, not static mockups.
01:19 – 02:25
02 · Platform overview
Tour of the claude.ai/design landing page: the chat box, file/folder/GitHub/Figma attachments, skills, connectors, and the model selector.
02:25 – 04:35
03 · Getting started
How templates and skills set the output type upfront, and that a blank project is a valid starting point.
04:35 – 08:30
04 · Design systems
Building a design system for a fictional climate-tech brand from just a name and a sentence; the generated README, brand voice, components, and dashboard.
08:30 – 12:10
05 · Editing
The manual editing panel — layer tree, property editors, color/CSS controls — and how component-level edits propagate everywhere that component appears.
12:10 – 14:26
06 · Landing page
Starting a landing page project with attached reference images and the front-end design skill; Claude asks clarifying questions and generates three full variations.
14:44 – 17:52
07 · Editing (landing page)
Inserting a hero image, resizing sections, using the eyedropper to match the nav color, the tweaks toggle for typography, and the annotate tool for targeted changes.
17:52 – 19:02
08 · Exporting
No native hosting — export as HTML/PDF/PNG/video/PowerPoint/zip, or hand off to Claude Code for actual deployment.
19:02 – 19:39
09 · Outro
Recap of the core workflow and a closing reminder that outputs are a first draft, not a final version.
Atomic Insights
Lines worth screenshotting.
Claude Design writes real HTML and CSS live on a canvas, which is why every output it generates is actually clickable, not a static mockup.
Skipping the design-system step is what makes Claude Design output look generic — building the brand file first is what makes it usable.
A design system needs almost no input to generate a first draft: a company name and one sentence about what it does is enough to start.
Claude Design does not support automatic edits — every manual change has to be saved and then reprocessed by the AI before it takes effect.
Editing a shared component, like an alert style, propagates that change to every instance of it across the design system automatically.
The tweaks tool turns a described variation into a dynamic toggle, letting you flip between two versions of a design instantly instead of re-prompting.
The annotate tool lets you draw a rough shape around an element and describe a change, skipping the need to name the exact element in words.
There's no native hosting: finishing a design means exporting it or handing it to a coding tool like Claude Code to actually put it online.
The model picker trades cost for depth — lighter models suit simple designs, while heavier ones burn through usage limits fast on complex ones.
Attaching real reference images anchors the AI's color and layout choices to a specific look instead of leaving it to guess your taste.
Takeaway
The design system is the entire game in Claude Design.
WHAT TO LEARN
Every output stays generic until you generate a design system first, and every edit needs an explicit save before the AI applies it.
02Platform overview
The chat box on the landing page also takes file attachments, GitHub links, local codebases, and Figma files as project context, not just typed prompts.
Connectors already set up elsewhere on an account carry over automatically, so an AI design tool can pull in outside references like a UI pattern library on its own.
Model choice is a real lever: lighter models suit simple tasks and heavier ones should be reserved for genuinely hard problems because they burn through usage limits fast.
03Getting started
Skills act as a template for the kind of output wanted — slide deck, wireframe, or front-end design — and picking the right one upfront shapes the whole generation.
A blank project with no template or skill is a valid, often faster, starting point when nothing pre-built fits.
04Design systems
A design system needs almost nothing to generate a usable first draft — a company name and one sentence describing the business was enough.
The generated system isn't just visual — it includes brand voice guidelines, a component library, and a working interactive dashboard mockup on the first pass.
Treat the first-pass design system as a draft to react to, not a finished brand kit — the real work is the editing pass after it.
05Editing
Manual editing controls (color pickers, corner radius, layout settings) exist specifically because prompting for every small visual tweak is slower and less precise than direct control.
There is no live auto-apply: every manual edit has to be explicitly saved, and the AI reprocesses the change through a prompt before it shows up elsewhere.
Editing a shared component updates every instance of it across the whole design system, so component-level edits are the efficient way to make a system-wide change.
06Landing page
Attaching real reference images and naming exactly what to borrow from them (palette, type, layout) gives sharper results than a purely written description.
Being asked clarifying questions mid-generation is normal, and answering with 'explore a few options' instead of committing early is a legitimate response.
Generating multiple full variations up front costs more time and tokens but is worth it when the direction genuinely isn't decided yet.
07Editing (landing page)
An eyedropper tool for pulling an exact color off part of a design beats trying to describe a color in words.
A described visual variation can become a persistent toggle, so two versions of the same design can be compared instantly instead of re-prompted each time.
Drawing a rough shape around an element and describing the change in place is faster than trying to name the exact element in a text prompt.
08Exporting
There's no built-in hosting — a finished design either exports as a file (HTML, PDF, PNG, video, PowerPoint, zip) or hands off to a coding tool to actually go live.
The right export format depends on the output: standalone HTML for a landing page, PowerPoint for a slide deck, video for an animation.
Glossary
Terms worth knowing.
Design system
A generated brand file — color palette, typography, spacing, and reusable components — that every new design in the tool is built from, so outputs stay visually consistent.
Tweaks
A tool for describing a specific design variation (like a typography swap) that becomes a toggle you can flip on and off to compare instantly.
Annotate
An editing mode where you draw on or select part of a design and describe a change in place, instead of naming the element in a text prompt.
Connectors
MCP servers linked to an AI account that let it pull in outside data — for example, browsing a reference site for design inspiration on its own.
“Earlier this year, Anthropic released a dedicated design tool called Claude Design.”
clean, immediate cold open that states the whole topic in one line→ TikTok hook↗ Tweet quote
08:04
“Your design system isn't gonna come out perfectly tailored to your vision on the first pass.”
sets honest expectations in one sentence, useful as a pull-quote→ newsletter pull-quote↗ Tweet quote
09:12
“You get this whole editing panel rather than having to make all your changes and iterations through prompting.”
names the core value proposition against pure chat-based tools→ IG reel cold open↗ Tweet quote
16:16
“This is the value of adding tweaks to your design. You can compare different variations of what is nearly the same design super quickly.”
explains a specific feature benefit in one breath→ TikTok hook↗ Tweet quote
18:46
“Connect or generate your design system first. Refine in small pieces instead of regenerating everything. And remember, it's a powerful first draft, not the final version.”
tight three-part recap that doubles as the whole 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.
17px
metaphor
00:00Earlier this year, Anthropic released a dedicated design tool called Clawd Design. You describe what you want in a chat on the left, and then it builds a real working version on the canvas on the right side. Slide decks, landing pages, app prototypes, and more.
00:13That sounds pretty straightforward, but there are some crucial steps to include in your design process with it that if left out will leave you with generic unusable output. And these steps are all completely beginner friendly. So in this video, I'm gonna show you what Claude Design is, the essential steps for using it for a real design project, and how to build your first real design without ever leaving Claude Design.
00:33Let's get into it. Okay. Starting with the basics since this video is for all of you who are brand new to this app.
00:38It's a relatively new product from Anthropic, powered by the same AI models that you get in Claude code and the standard Claude chat, and it lives at claude.ai/design, but you can also get to it from the left sidebar of the Claude web app. As of filming this, it's no longer in research preview, but it is still in beta and you need a paid plan to use it.
00:56This means at least the pro subscription. At its core, you describe what you want from it, whether slides, an animation, a prototype, and Claude generates a first version on the canvas, then you refine it. Under the hood, it's writing real HTML and CSS and rendering it live.
01:10That's why the prototypes are actually clickable, because it's real code. But instead of just talking about it, let's dive into a real design project created entirely inside Claude design. Let's start off with a quick overview of the Claude design landing page.
01:22And like I said, you can get here either by going to claude.ai/design or from the Claude web app, you can use this design tab in the left sidebar. Now this interface that you first land on should feel pretty familiar to you.
01:33The heart of it is the chat box right here in the middle, and then you have a few tools in the bottom left to give Claude design more context about your project. In this drop down, you can attach a file. That could be a screenshot of an existing design.
01:45Alternatively, you could attach an entire folder as well. If you already have a code base that you want Claude to pull from, you can either connect your GitHub account or link a code base that you have stored locally on your machine. If you already work in Figma, you can upload a dot fig file and have Claude design turn your Figma file into real HTML and CSS.
02:03Then in this last section, can attach a design system, which I'll touch more on in just a second. Now, just like in Claude chat, Claude code, or pretty much any other agentic AI coding tool, you have access to skills. But right now in Claude design, you only have access to six different skills tailored to each type of design that you can create.
02:20But luckily, front end design especially is a very powerful skill that I highly recommend you try out to get better design taste from Claude. I also have three dedicated videos on Claude's skills on my channel, so if you wanna learn more about skills, go check those out. Then lastly, in this drop down, you can manage your connectors.
02:35If you don't know what connectors are, they're MCP servers which let Claude communicate with outside tools. And luckily, in Claude design, you have access to all the connectors that you've already set up in Claude AI. For example, if I wanted to have Claude study existing UI screens on Mobin, that would be possible because I have this Mobin connector set up.
02:52Claude could essentially go to mobin.com on its own and study the best practices for whatever type of design I'm creating before it starts building. Now the next drop down is for design systems, and this is one of, if not, the most core feature inside Claude design. Now you have a few different options for for creating or importing the design systems like the ones that you see listed here.
03:11If I hit this create design system button, the first option is create here, which means you're creating the design system inside Claude Design. Then it walks you through a setup process, which I'll show you more about in a bit. Then this template drop down is just where you tell Claude design what kind of design you wanna come up with.
03:26This is the exact same as these cards you see down here. You're just specifying what kind of design you wanna make so that Claude design comes up with the right thing. This isn't essential though when you start a project and you can just say start a blank project.
03:37The last piece of this chat box up here is the model selector. This is where you select the AI model that you want Claude design to use to generate your design. If you're building a simple design, I would recommend you use a model that uses less tokens like Haiku.
03:50But if you're working on a more complex project that you want Claude to think harder on, try a model like Opus or even Fable five. But just know that these two models will use a ton of tokens. Sonnet is usually my go to model because it's a good balance of AI intelligence and token usage.
04:04Also, you may have heard that Claw Design uses up a ton of tokens and will lead to you hitting your usage limit fairly quickly. This is still the case, so I recommend you reserve Opus and Fable five for your absolute toughest and most complex tasks. Now moving on, the rest of the interface here is pretty simple.
04:19You have your existing projects that you've created inside Claw Design. You have the design systems that you've created or imported, and then you have templates which set the output type and skill if you used one upfront from an existing project. Now, that was just an overview of the landing page.
04:33Now, let's get into an actual project. Like I said before, design systems are pretty much the core of Claude design and its value proposition. Let's go back to the setup page for creating a new design system.
04:43Now, quick note, if you feel more comfortable creating your design system in Claude code, you can create it there and then bring it over to Claude design using this slash design sync command. Just know that this method can take a long time depending on how big your design system is and can use a lot of tokens compared to just building your design system inside Claude Design.
05:02So for this demo, I'm gonna go back and create it here. Now this step for setting up a design system is pretty simple. In the first field, you're gonna put your company name.
05:09My fictional company name that I want Claw Design to use is Solon, and it's a climate tech company helping factories reach net zero emissions. Then this next area is everything you're gonna give to Claw Design if you already have your design system existing somewhere. So if it already exists in code, you can attach a GitHub link.
05:26If the code for the design system is on your computer, you can attach it here. Or if you have a Figma file for the design system or any fonts, logos, or assets on your computer, you can attach those too. But this is all optional.
05:36Now because I already know a couple of the fonts that I wanna use, I've attached them as zip files, play fair, and enter. Then the last field is any other notes, and this is where you can give Claude Design some guidance about how you want your design system to look and feel. If there's any particular guidelines you want Claude Design to follow for this design system, tell it here.
05:54Now something you might be thinking you wanna do at this point is attach some reference images of some design inspiration. This is actually not the point where you do that, but you will be able to do that once your design system is created and you land in the canvas view. With that being said, let's hit continue to generation and hit generate.
06:09It'll take about five minutes. Now whether you're inside a design system or an actual design file, this view is gonna look pretty similar. You have your left sidebar, which is where you have the conversation with Claude, and then this huge space on the right is essentially a canvas where you can view either your design system or the designs that you've generated with Claude.
06:27Then over in the bottom left of this sidebar, you have all the same options that you had on the landing page in Claude design, attaching a file, connecting some code, and it's not too late to upload a Figma file. With that being said, I'll be back once this design system is generated. Alright.
06:42Now let's finish the build of our design system, and here it is. It starts off with a read me file at the top going over the details about our brand, the products we offer, content fundamentals, and this was, of course, all generated by Claude Design without much context. All I told it was that my brand is called Solon and just one quick sentence about what the company does.
07:00But regardless, we now have a starting point that we can work off of. The read me also details the visual foundations including color, typography, spacing, layout, and more.
07:09Then if I close this read me section, we have this brand section. And here we can see how all of those brand guidelines that it discussed in the read me are manifesting visually. The placeholder logo types it came up with, guidelines about the brand voice, and an entire color palette that we can now use to build an actual app.
07:25Check it out. We have all these components built out which would be used to generate a UI, effects like border radii and shadows. And then what's super cool is in this platform section, it generated a full interactive clickable dashboard for our brand, including five different pages based on what it thinks our brand's product would include.
07:42It's definitely not perfect yet, and this is still just a first draft. But part of the design process, of course, is iterating on it, which we're gonna do pretty soon. Going back to the design system page just to show you everything that's included in a design system on the first pass.
07:55In the left sidebar, you can see you get a read me file, brand guidelines, a color palette, components, effects, platform, which includes the UI that I just showed you, spacing values, and a typography scale.
08:06Now your design system isn't gonna come out perfectly tailored to your vision on the first pass. So this is where the editing functionality comes in. Let's say I don't like the look of these alerts in our design system.
08:16From this view, I could go over to the left sidebar and describe what changes I want made to them, but instead, let's hit this edit button for the core component section. Now we have a dedicated page view for this particular section of our design system, and I have editing options. Again, I could prompt the change that I want through natural language, or if I wanna make specific manual changes, I could hit this edit button up here.
08:37Then you see the left sidebar turns into a dedicated editing panel similar to what you would see in Figma. This is one of the great things about Claude design and what gives it a leg up over something like Claude code for designers. When I select any of these components, I get a dedicated layer tree, buttons to add text, shapes, or a frame to add an entirely new section, and you get all these property editors down here.
09:00Background color, corner radius, even width and height settings, which isn't quite as relevant in a design system, but it is very relevant if you're editing a design file, and plenty more. Check this out. All your typography settings, layout settings, which is similar to auto layout from Figma, all the way down to advanced settings to go straight to adjusting the CSS for an element.
09:20If you were wondering what the value proposition of Cloud Design is over something like Cloud Code or Codex, I'd say this is a big part of it. You get this whole editing panel rather than having to make all your changes and iterations through prompting, which you don't always wanna do. Sometimes you want this manual control.
09:35Then if you don't wanna see all of these editing options, you can switch to the simple tab, and this just gives you the most core editing options. Then if you're more of a CSS kinda guy, you can switch to the code panel and make changes to the CSS directly. So like I was saying, let's say I wanna make some design adjustments to these alerts here.
09:50I'll select this first one, and instead of this very subtle look that doesn't really stand out much, I wanna use a more bold color palette. So I'm gonna change the background color to a darker green. I think something like that looks good, not too saturated.
10:02Then I'll select the elements inside the alert, open color, and then I want the color of everything inside this alert to be white. For the look I'm going for, I think this is looking quite a bit better. Though the thing about Claude design is that it actually doesn't support automatic edits as it says up here.
10:15This means that after I've made my changes to the design system, I have to hit save, and then Claude has to actually process these changes through a prompt. This obviously is not ideal, and this is why you might prefer a design tool like Figma still.
10:28But I think eventually they'll make it so that you can make automatic real time edits without any waiting after. Now check this out. If I go back to the design system page and I go down to the platform dashboard that we looked at, since these alerts over here are components and I just made changes to the color palettes of the components themselves, these instances are now reflecting those changes.
10:47You make the changes to the components themselves, then the changes reflect everywhere else that they appear. Now aside from the left sidebar and the edit button in the top right, there's also a couple other ways to make adjustments to your designs. This tweaks button and this annotate button, which I'll dive into in this next demo.
11:02Now this is very similar to the type of project that you would build inside a community like AI Makers Club, and they're the sponsor of today's video. So let me tell you why this community matters for designers like you. It's a community of creatives and the format is simple.
11:15Every Monday, a new brief drops. One page, one specific challenge, just enough guidance to get you moving. You spend the week building it inside whatever stack you want, mostly using agentic coding tools like Claude Design or Claude Code.
11:27On Sunday, you post what you build and take a look at what everybody else built as well. What's different about AI Makers Club is the accountability that it holds you to. A brief that gives you a time constraint forces you to actually finish it instead of endlessly building a side project that you never end up shipping.
11:42That's the trap that most people building with AI fall into, myself included sometimes. You don't know how to code going in. Members of this community have built AI tutors, a finance dashboard, an app with paying customers, all without a technical background.
11:55And you get all the support you need when you get stuck building your next exciting project. It's $69 a month, which is the founding rate, and that price is locked in for you once you join. Free trial for five days as well, making it no commitment.
12:07Link is down in the description to get started, and I'll see you there. As you probably know, a design system is mainly for user interfaces. Think dashboards, SaaS platforms, mobile apps, any kind of UIs that you interact with.
12:20But what you can also use Claw Design for, and it's not listed in any of these cards, is websites. And this can be a full multi page website or just a single landing page. For this next demo, I'm gonna show you a landing page design for the same brand that we just made a design system for, and I'm gonna kick off this project in this chat box up here.
12:38Something I very often like to start out with for a design project, whether it's a UI or a landing page, is give my AI agent some reference images as inspiration. I have a certain look and vision that I wanna achieve for this landing page, so I'm gonna show Claude what that looks like visually. I attached five different designs from modern.com of landing pages from established brands.
12:58They all convey the look and feel that I want for my landing page, so this is gonna give Claude a great starting point to work off of. I'll say design a landing page for Solon, and I'll also re explain what the brand is in case Claude forgot. To give Claude some more guidance, I'm gonna say use the attached reference images as design inspiration, particularly with regards to the color palettes, typography, and layouts.
13:18Remember when I mentioned skills earlier? I'm gonna attach a skill. This front end design skill is gonna be the most relevant one for this landing page.
13:25Try to be as detailed as you can with this first prompt so that you get a solid foundation to work off of. Let's hit prompt. Now check this out.
13:32A lot of the time when you start a project with Claude design, it'll have some questions for you. First off, it's asking me which palette direction from the reference, and that's a great thing for Claude to ask because one of them is a warm color palette while the rest are pretty cool. But I don't have to pick one specifically.
13:47I can choose explore a few options. For the typography feel, just like for the design system, I want an elegant serif display, and then for the body, I want a clean sans. For the hero imagery, I think an atmospheric nature photo fits my brand.
13:59Now, I've answered the next couple questions and the last question is, how many full design variations do you want? Since I wanna explore some different looks and I'm okay with burning a bit more tokens and taking a bit more time, I want three different options to compare. So now we can see it's building out the three variations of our design, and we can see the second one getting built out in real time.
14:17I'm already really liking the look of this third one. It looks really dark, atmospheric, and on brand.
14:22So now we have three different looks with the same content for the most part. A light and airy look, then a warmer kind of anthropic slash Claude style look, and then a much darker modern looking style I would describe it as. Now, I think this first variation is actually a great starting point to work off of.
14:37I generated this image that's gonna look really nice as a hero background. Let's So get that inserted and then go from there. Like last time, I'm gonna use the edit button, and then I want the image to go in the background of our hero section.
14:48So I'm gonna select the container for our hero, then in our editing panel under appearance, I'm gonna open background, choose image, and then upload that image.
14:57Then I don't think this element has much of a place in our hero section anymore, so I'm just gonna select it and then delete it. But I still want our hero section to be a bit taller, so with it selected, I'm gonna change our height setting from hug to fixed so that I can specify a manual pixel amount for the height. Then I'm gonna crank it up a bit just about there.
15:14Now that's looking pretty good, but since we have this empty space at the bottom of our hero section, I think this whole trust logo section can go there. There we go. Dropped it in the hero section and then I just added a subtle background with a 20% opacity just to give all this white text some contrast against the background.
15:30One more thing I'm noticing is I think this nav bar would look a lot cleaner if it matched more of the overall color palette of this hero background image. So with it selected, I'm gonna open the background field again. And then in this case, I can just use the eyedropper tool and this is gonna let me select a specific color shade on the page.
15:46So I'm gonna go right up here in the middle and select that color. Now it's blending into the hero background a lot better. Now, like I said, you have a couple other options to edit your design besides just the edit button.
15:56If I select tweaks, you'll see in the left sidebar that I can now describe a tweak that I want. Whatever tweak I ask for, this is gonna create a dynamic control that'll let me instantly adjust the look of our design. For example, let's say we want a tweak for changing the typography system from the current one to a 100% sans serif one.
16:16Now check this out. I have this new tweaks window with this new toggle that I asked for. Right now, it's selected on serif sans, which means I have a serif typeface paired with a sans serif typeface.
16:26That's what we have now. But then if I switch over to all sans, just like that, our entire landing page is sans serif. This is the value of adding tweaks to your design.
16:34You can compare different variations of what is nearly the same design super quickly. I could also ask for one for spacing values, whether I want it to look more compact or more spaced out. I could ask for variations of the hero background.
16:46The possibilities are really endless with this. Now, heading over to the annotate button. This is where you get to prompt Claude design visually.
16:53You don't have to write out everything in natural language. And for certain design edits, this ends up being a lot faster. Check this out.
16:59Let's say I want these key stats to stand out a bit more and just look more bold overall. I can select the section directly and then describe the change right here in this chat box.
17:10The key advantage of this is that I don't have to spell out the exact name of the element that I wanna change. Another way you can use this annotate tool is by just drawing anywhere. When I've roughly drawn around this 38% statistic, Cloud already knows that the change I'm gonna ask for should be made directly to that element and nothing else.
17:27So let's just try prompting that change for all of these stats here. I'm saying make this section stand out more. These are important stats and they need to grab the visitor's eye.
17:36Just like that, I see that prompt appear in the left sidebar. This whole section has a dark mode theme, and these stats stand out a lot clearer. So just remember that these are your editing options.
17:44You can give a general prompt in the chat box or for anything where you wanna be more specific, edit, tweaks, and annotate are your friends up here. Now, let's say you're happy with your design and you're ready to export it.
17:55Unfortunately, Claude design does not offer a native way to host a website like this on the Internet. However, that is something you could do by hitting share in the upper right and then hitting send to and handing it off to Claude code. The bidirectional handoff from Claude design to Claude code is a huge selling point for Claude design.
18:11Claude code is where you could send this off and actually host it on the Internet using a method like Netlify or Vercel. Or you could even continue iterating on your design inside Claude code if you're done working on it inside Claude design. If I hit send, all I have to do is copy this prompt and paste it into Claude code, or you can just download a zip file of it, which is oftentimes more friendly if you're using the Claude code desktop app or web app.
18:33But let's say you just wanna download this landing page as a file. You can go to this export tab, and then you have six different options here, PDF, PNG, video, PowerPoint, a zip file, or standalone HTML.
18:46Obviously, for a landing page, standalone HTML would make the most sense. But if you generated a slide deck, go for PowerPoint. If you made an animation, go for video.
18:54It all just depends on what kind of project you worked on. Lastly, you can share the link with anyone who wants to hop in this project with you on Claude design. So that's Claude Design.
19:02Quick recap, it's a conversation on the left, a live canvas on the right, and it's writing real code under the hood, which is exactly why the prototypes are clickable and the slides come out polished. Connect or generate your design system first, Refine in small pieces instead of regenerating everything. And remember, it's a powerful first draft, not the final version.
19:21Even if this tool isn't a full replacement for Figma or AI agents like Cloud Code, it's still a useful tool to keep in your rotation, especially if you're a designer. If this video was helpful for you, subscribe and let me know down in the comments what you're designing with Cloud Design after watching this. Thanks for watching, and I'll see you in the next one.
The Hook
The bait, then the rug-pull.
Anthropic's new tool promises real, clickable HTML and CSS from a plain-language prompt — but the video's actual argument is that skipping the design-system step first is what turns that promise into generic, unusable output.
CTA Breakdown
How they asked for the click.
VERBAL ASK
10:40product
“Link is down in the description to get started, and I'll see you there.”
Mid-video sponsor read for AI Makers Club (a $69/mo founding-rate community with a 5-day free trial), placed as a break inside the design-system editing chapter.
A hands-on tour of Brilliant, the AI-native vector design tool built to fix the biggest gap in Claude Design and Google Stitch: you can generate a UI in seconds, but you can't actually edit it.
A working product designer wires Claude Code into Mobbin's 600,000-screen UI library through an MCP server, then builds a profile page and redesigns a financial dashboard entirely from cited, real-world reference patterns.
Mobbin's new MCP connector lets Claude search 600,000+ real, shipped app screens as design references — trading the generic serif-and-purple-gradient AI look for interfaces grounded in production apps.
00:17
00:35
00:58
01:06
01:19
02:00
02:16
02:32
02:46
03:01
03:15
03:30
03:44
03:58
04:27
04:42
04:57
05:26
05:41
05:55
06:10
06:25
06:39
06:54
07:10
07:21
07:37
07:50
08:06
08:33
08:52
09:06
09:28
09:35
09:46
10:07
10:15
10:33
10:47
11:07
11:12
11:28
11:48
11:56
12:17
12:29
12:45
13:19
13:34
13:50
14:11
14:22
14:30
15:05
15:13
15:34
15:49
15:57
16:16
16:32
16:48
17:01
17:15
17:36
17:38
18:23
18:36
18:57
19:02
19:32
11:03
08:59
16:44
12:43
22:09
09:00