Big Idea

The argument in one line.

Claude Design 2.0 eliminates the friction between design systems and code by letting you sync real React components into the canvas, edit visually without burning tokens, and ship finished designs directly to any vibe-coding platform.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You use Claude Design and hit the old 15-minute token limit constantly -- this explains how that is now fixed.
You have an existing React or token-based design system and want Claude Design to respect it automatically.
You build landing pages or presentations in Claude Design and want to edit text/fonts without re-prompting the model.
You connect Claude to external tools via MCP and want those same connectors available inside Claude Design.

SKIP IF…

You have never opened Claude Design -- this tutorial assumes you know the basic interface.
You are looking for Figma-native workflows; this is entirely within the Claude ecosystem.

TL;DR

The full version, fast.

Claude Design 2.0 ships five meaningful upgrades at once. Tokens are now shared across all Claude products, ending the frustrating 15-minute resets. A new /design sync command in Claude Code reads your existing React components and tokens and mirrors them into Claude Design so every build stays on-brand without manual uploads. Canvas editing lets you click directly on elements and change copy or style without triggering a new model conversation. Comment and Markup annotation modes let you flag issues and route them to Claude for surgical fixes. Finally, MCP connectors and a multi-platform export panel let you push finished designs to Lovable, Replit, Vercel, Adobe, or Canva in one click.

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

01 · New UI overview

Build tab centered, design system selector added to bottom bar, template categories now include Animation

01:06 – 02:01

02 · Unified token usage

Claude Design no longer has a separate 15-minute token pool -- it shares limits with Claude Chat, Code, and Cowork

02:01 – 05:58

03 · /design sync -- syncing your design system

Three-step CLI: cd into folder, run claude, run /design sync. Bundles React tokens and components and uploads to Claude Design

05:58 – 08:58

04 · Building with a synced design system

Demo: prompt builds a landing page that automatically inherits the AI Workshop brand colors, buttons, and typography

08:58 – 11:21

05 · Canvas editing, Comments, and Markup

Edit elements directly without prompting; Comment mode sends targeted instructions to Claude; Markup mode lets you draw circles and annotate anything

11:21 – 12:34

06 · Sharing and multi-destination export

Export as PDF, PowerPoint, ZIP, or HTML; one-click send to Claude Code, Lovable, Replit, Vercel, Adobe, Base44, Gamma, Miro, Wix

12:34 – 14:03

07 · MCP connectors inside Claude Design

Add the same MCP tools from Claude Chat/Code; Zapier connector unlocks 9,000+ apps including Canva, Figma, Placid

14:03 – 17:48

08 · Slide deck template demo

Use the Slides template with a synced design system to build a branded presentation; present in-browser with speaker notes and full-screen mode

17:48 – 18:57

09 · Outro and CTA

Community plug for AI Workshop Claude Code Masterclass and AI Second Brain product

Atomic Insights

Lines worth screenshotting.

Claude Design old dedicated token pool is gone -- it now shares the same limit as Claude Chat, Code, and Cowork so the 15-minute resets no longer happen.
Three terminal commands mirror your entire React design system into Claude Design: cd into the folder, run claude, then run /design sync.
Canvas editing lets you change text and fonts directly on the output without sending a single message to Claude, saving tokens for structural changes.
Markup mode lets you draw a circle around any element and attach a natural-language instruction that Claude executes immediately -- no back-and-forth.
Claude Design now supports the same MCP connector directory as Claude Chat and Code, so any tool you already connected there is available in the design canvas.
Zapier Claude Design connector unlocks 9,000-plus apps including Canva, Figma, Placid, and Banner Bear inside the design environment.
Finished Claude Design outputs can be sent directly to Claude Code as a project reference, creating a two-way sync loop between design and implementation.
The export panel now lists Lovable, Replit, Vercel, Wix, Adobe, Base44, Gamma, and Miro as one-click destinations alongside PDF and PowerPoint.
Claude Design can build and present slide decks natively, including speaker notes and full-screen presentation mode, without leaving the browser tab.
Selecting your synced design system before prompting means you never have to describe colors, fonts, or button styles -- Claude reads them from the component library.

Takeaway

Five Claude Design upgrades worth knowing right now.

WHAT TO LEARN

Claude Design 2.0 shifts from a token-hungry prototype tool into a real design-to-code pipeline -- but only if you know which new features to reach for first.

The 15-minute token reset is gone: Claude Design now draws from the same pool as Claude Chat and Code, so long design sessions no longer hit a separate wall.
The /design sync command means you describe your brand once in code, then every future Claude Design build inherits it -- colors, fonts, buttons -- without re-prompting.
Canvas editing and Markup mode let you fix copy, typography, and layout directly on the output rather than asking the model to find and change something it already rendered.
Adding MCP connectors to Claude Design puts the same tool integrations you use in Chat and Code directly inside the canvas, including Zapier's 9,000-app library.
The export panel sends finished designs straight to Lovable, Replit, Vercel, or Wix, cutting the copy-paste step between AI design and AI coding platforms entirely.

Glossary

Terms worth knowing.

/design sync: A Claude Code slash command that reads a React design system from a local folder and uploads it to Claude Design so future builds automatically apply the same visual language.
Design token: A named design variable (color, spacing, font size) stored in code that both designers and developers reference, ensuring visual consistency across a product without manual coordination.
MCP connector: A Model Context Protocol integration that gives Claude access to an external tool or API. Claude Design now supports the same connector directory as Claude Chat and Code.
Canvas editing: The ability to click directly on a rendered element in Claude Design and change its text or styles without triggering a new model conversation, preserving token usage.
Markup mode: An annotation layer in Claude Design where you click or draw on any part of the canvas, attach a written instruction, and send it to Claude for an immediate targeted edit.

Resources

Things they pointed at.

00:00linkclaude.ai/design ↗

13:31linkmcp.zapier.com ↗

12:03toolLovable

12:03toolReplit

12:03toolVercel

13:26toolCanva

13:26toolFigma

Quotables

Lines you could clip.

01:31

“Every fifteen minutes you would run out of tokens or run into this usage problem. That's because Claude Design had a dedicated token usage for itself. Now all of the accounts share the same exact token and usage limits.”

Directly names the pain point and announces the fix -- high relatability for any prior Claude Design user→ TikTok hook↗ Tweet quote

07:58

“This is huge because this will save you a lot of tokens and a lot of back and forth with Claude.”

Clean punchy summary of the canvas editing benefit→ IG reel cold open↗ Tweet quote

03:03

“Now instead of describing it each time for a new project, you can essentially just sync all of that design directly here.”

Captures the core workflow shift in one sentence→ 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:00So Clot Design just got a massive new upgrade. So in this video, I'm gonna show you every single new feature, how it works, and how you can use it. Let's jump right in.

00:07So there's two ways to access Clot Design. You can head over to clot.ai/design or if you're on the desktop app, Now you can see in the bottom right here, there's a design tab that shows up.

00:17So if you click on this, this is gonna take you basically to the exact same layout inside your application. Alright. So the first change right away, you can see the user interface is different.

00:25Now you have the build tab right in the center here. In the bottom, you have the ability to choose a design system. Now this is another new big upgrade that I'm gonna talk about that in a little bit.

00:34But just also now you have the ability to choose different templates. You can start from scratch or you can choose the different templates that it has have access to like prototype slides, document, wireframe animation, which is a really cool addition by the way.

00:48So we can explore this in a little bit with a real example. And then on the right hand side, you obviously can choose different models and also you can click on the plus button and you can add your code directly directly from GitHub or upload your design. Alright.

01:00So now that's kind of the user interface change. Now the second huge change that happened and I think this is massive. So now if you go ahead on top and click on your account and click on usage, so now you can see right here your usage is basically correlated with all of your other cloud accounts.

01:16Meaning before, the annoying thing was like every fifteen minutes you will run on to run out of tokens or you would run into this usage problem. That's because clot design had a dedicated token usage for itself.

01:30Now, all of the accounts share the same exact token and usage limits. Meaning that your clot code, your clot co work, and your clot chat use the same exact token limit and usage limit along with your clot design, which is a massive upgrade in my opinion because a lot of people were getting frustrated on that.

01:48So that's the second big upgrade. Alright. So the third huge upgrade is the design system.

01:52So before you would come to design system, click on create, and you would create here and connect your Figma or GitHub or upload slides and asset manually. Now you have the option to create using clot codes. So if you click on this option so as you can see right here, now you can directly sync your entire design system from ClotCode directly by running this design slash sync command.

02:14I wanna show you how to do this step by step. But essentially, what this means is that now Clot Design can read your tokens and your React components directly from Clot Code. Meaning that majority of firms, whether you're a designer firm yourself or your personal brand or something somebody that's working with clients, you have your set of designs, your components, the way your fonts are, the color, the systems.

02:36For instance, this is my design system for my AI workshop brand, my business, my community. Right? So I have certain colors that I use, I have certain topography for the fonts that I use, the buttons, and everything else is in this design system that I've used throughout all of my components whether it's working with clients or for my own community and business.

02:56Now similar to this, every company, every personal brand has their own design system. So before you had to do this manually. Right?

03:03You had to go inside Claw design and manually upload all this. So now what it's saying is that ClawdCode already has access to all of those components. So if you're using react or just a token system or CSS, then Cloud Code already has access to it.

03:16So now instead of describing it each time for a new project, you can essentially just sync all of that design directly here. So let me show you how to do this. So it's basically three simple steps.

03:26The first thing you need to do is the CD to your path. So basically, you need to go on your folder. Second, you're gonna run clot and then just do slash design sync.

03:35So, uh, the easiest way to do this is through the terminal. So just head over to your terminal. Go to whatever folder your design system is located in.

03:43So mine's on AI workshop dash design dash system, but just c d into whatever folder your, uh, design system is sitting in. Afterwards, all you have to do is just run the command Claude.

03:54Right? This is gonna start Claude there. So, I'm just gonna let it use my browser.

03:57If I go back to my terminal here, now I have clot activated here. Right? So the next thing to do, like I just like it's shown on the page right here, all you have to do is run this slash design sync.

04:09So now, I'm gonna do slash design. There you go.

04:13It's this command right here. The second one. So it says, push a react design system with the cloth dot a I slash design.

04:18This runs a converter that bundles the real components code from storybook or bear pay package and uploads it. Now, again, this is if you're non technical, just note that all this is doing is syncing the design between clot code and clot design so that way you're using the same exact design system every time you build something from clot design.

04:38Right? So the way to do this is you're just gonna go to clot design sync. So I'm gonna go ahead and press enter.

04:43Now, obviously, if you don't have this slash design sync available as a command, it means that your CLI is not updated. So just go ahead and run Claude update so that we have the latest Claude version, and then you'll be able to come back and run design sync there. So as you can see right here, it says I'll start by getting oriented, checking whether this is a first time sync or exploring the design system repo.

05:03Right? So as you see right here, I'm inside the actual folder that my design system exists. So again, make sure that you're inside the folder when you run this because otherwise this is not gonna And it's gonna ask you a couple of questions.

05:14Do you want to proceed and ask you for a few permissions? And then after a couple of minutes, it's gonna sync all of the design. Since I've already done this, don't have to do this again.

05:22And once you come back, so now you should go to your design system and you will have a new design there. So as you can see right here, if I click on this, it says AI workshop design system. What this is is basically a replica or a copy of all of the different choices, every color scheme, every button, everything else that's inside my design system now brought into my claw design with this selection right here.

05:47Okay. So now let's go ahead and walk through an example of how this design system works. So one we wanna make sure that you're selecting your design here.

05:54So right now as you can see if I click off of it, it's just gonna go to design system as none. But if I click on it again, my design system will be activated or selected. So let's say I want to create a new landing page for my school community.

06:06Right? Again, your business might be different or whatever you're doing. I'm just giving you an example here.

06:10Let's say I want to create a, uh, brand new landing page for my community, uh, since I launched the Cloth Code Masterclass and this AI second brain or an AI operating system, I want to make an announcement for or a landing page that I can direct people to my community. Right? So I'm gonna head over to my Cloth design here, and I'm just gonna go ahead and paste this long prompt.

06:30This prompt is basically saying using my sync design system AI workshop DS. You don't have to say this, but since because you already select the design system, but just to be on the safe side. Build the one page landing page that sells my school community, the AI workshop audiences, creators, freelancers.

06:45I'm giving it sections and everything else, but I'm not describing the color, the the design system per se, the buttons, the hero page, or all of that stuff. Right?

06:53So I'm just gonna go ahead and enter. So now it's gonna go ahead and read. So there you go.

06:58It's already selected this AI workshop design system. Right? So now it's gonna say, let me explore the design system and the existing landing template before building.

07:07So it says, I have the template. Let me read it and design system tokens component blah blah blah. So now it's again, what it's doing is is going through every single step or every single direction that's inside that design system.

07:18It's gonna build build everything accordingly. So it's gonna take a couple of seconds. So right now, says checking design system.

07:23It already built kinda the first front end page, but it's gonna go ahead and keep building the rest. So let's give it a couple of seconds.

07:31Alright. Perfect. So it went ahead and built everything according to my design.

07:35So right away, you can see the color, the logo, everything is based on my design system. So for instance, let's go ahead and double check. So the button is right here with this green and white coloring.

07:46So if I go to my design system right here, come to the bottom, you can see it's the same exact thing. Right? The buttons have this green and the white font in there, and it looks exactly the same here.

07:56Right? So there you go. So now you have these nice little, uh, boxes here that kinda shows what's inside the community.

08:03And in the bottom, again, the color scheme, everything else looks exactly the same. So great. Looks like everything work according to my design.

08:09So design system looks perfectly. Obviously, like I said, yours is gonna look different. Alright.

08:14So another huge update is the ability for us to now edit on the canvas. So let's say this right here is inaccurate. Right?

08:21It just has the dollar amount and x x per month for, uh, the pricing right there. So let's say I want to change this. So all I have to do is click on edit here, and now you see on the left hand side, I have everything opened up for me where where I can now select something and edit right away.

08:35So let's say I wanna click on this. There you go. As soon as I click on it, you have all of these options for you to edit right away on your canvas without leaving this page or burning through tokens by chatting with Claude back and forth that, hey.

08:47Change the x x price or this and that. Right? This is huge because like I said, this will change, uh, save you a lot of tokens and a lot of back and forth with Clot.

08:55So, all I have to do is just basically make a change by, um, typing right here.

09:01Right? And perfect. So, very easy.

09:03And if again, if you wanna change the font or anything you want, you can change it because right here you have several options here. Another way to edit. So let's say you wanna remove this.

09:13Right? You can click on comment here, and then now you can, uh, put a comment in here. Let's say for the rest of your teammates or whatever it may be.

09:21You can click on it. You can describe the issue or suggestion right here, or you can actually send it to Claude and it will directly make the changes from that comment here. Right?

09:30So let's say remove this section. Right?

09:34And I'm gonna click on send to Claude. So now this is gonna grab this comment, right, and understand oh, there you go. It actually removed it right away.

09:41Understands it and automatically remove that section without me going back and forth on the left hand side here. Okay?

09:47So I just press escape so that way I'm out of there. So, another way to make changes is to the markup. So, if I click on markup here, now it says click and tell Claude what to do.

09:55So, let's say, uh, I wanna add another section or let's say I want to, uh, make a change here. Right? So, I'm saying for creators, freelancers and there's some kind of a garbage here.

10:06So, let me remove that. So, I'm just gonna click on markup here, remove the at sign.

10:14Right? Or whatever it is there. So now I can add comment or just send to Claude and Claude can now automatically on the left hand side.

10:21There you go. So as you can see, it says remove this section that came through earlier to the comment or right here it says remove the at sign and right away as you can see, it removed that mistake, whatever mistake it had made. So it replaced the and with and in that heading.

10:34Right? So I think that was the issue there. So another way to obviously use the markup is you can just kind of draw a circle.

10:40Right? So instead of clicking on at that particular item, you can just draw a circle and same thing. You can add your note here and send it to Claude, and we'll automatically, uh, make those changes for you.

10:50So those are really good changes in my opinion. Like I said, a huge part of this is the fact that it will save you a lot of tokens so that way you're not going back and forth and, you know, having Claude figure out what you mean. You can just point at something either edit it yourself from the canvas or you can just, uh, use the comment on the markup to have Claude do it for you.

11:10Alright. So another huge upgrade is the ability to share your designs. Okay?

11:14So now you can obviously share the link for your workspace. You can export it as a PDF, as a PowerPoint if you're creating slides or as a project archive or standalone h t m HTML.

11:25Obviously, if you if you're a designer, then you would probably use project archive like a zip file or a standalone HTML. And now, another addition to this, now you can actually send your design directly to ClotCode because you have kind of this back and forth syncing together where you can go from ClotCode to clot design and from your clot design to clot code.

11:44So you can reference your design directly in your clot code if you're building a project. Right?

11:49Which is a a a big advantage there. You also have the ability to add more destination. So if you click on the plus, now you can send your design directly to Adobe, Base 44, Gamma, Lovable, my Miro, Replit, Versal, Wix.

12:02Right? So if you're building, let's say, a brand new website, uh, and you're using a Vycoding platform like Lovable, then you or Ruplit, you can directly just send that design there, which is again a big advantage because you don't have to do any of this manually.

12:15Alright. So another big upgrade is the ability to add multiple connectors on MCP tools. So now you're gonna head over to manage connectors.

12:23And just like you have the ability to add MCPs and connectors to your Claw Chat and Claw Code, you can also do it through Claw Design. Now this is a big step and big deal because now you can have access to a lot more tools so that way you can use inside your cloud design. And the way to add it is again same thing.

12:40You're just gonna click on connectors. You're gonna head over to browse directory, and now you have, uh, you can search different connectors.

12:47Obviously, there's a bunch available here. And if you don't see something that you wanna use, you can use something like a Zapier where this will give you access to like thousands of apps including. So for instance, if you go to I was just searching the different design options that I have available.

13:01So inside Zapier, you have the Canva, the Banner Bear, you have Placid, Figma, and all of the different designs, Flickr, HTML to image that might not be available directly inside your, uh, inside your Clawd design by itself through connectors.

13:16So that way, you can just connect your Zapier and then you'll be able to use all of it together. It's very easy to do this. So let me just remove this so I can show you how to install this from scratch.

13:25So once you come and click on Zapier, you're gonna click on connect. This is gonna now it says grant access to Zapier. It's gonna automatically open your Zapier MCP.

13:33Now, uh, very important, make sure you head over to mcp.zapier.com. I'm put the link in description so that way you can just access this. So this is where you can add a new MCP server.

13:42You're gonna click on MCP server, click on Claude. And, again, same thing from your Claude design here. Once you click on Zapier and you click on allow, this will just basically connect your, uh, Zapier MCP into your Claude so that way you have access to, uh, the MCP or the connector from your plot design.

14:01So once you make that connection and authorize everything, here's where you can now add multiple apps. And again, they have, uh, access. You have access to thousands of apps apps here.

14:10So let's say you wanna add something like, uh, Figma here. Right? So you can click on search 9,000 plus apps.

14:15So you're gonna click on or Canva, let's say. I'm gonna click search for Canva. There you go.

14:22Right? So now you can add different, uh, permissions within that tool.

14:28Right? So it says find design or get a new design, create a new design, upload assets. So that's another advantage is that within the application, you can actually allow different permissions.

14:40So if you use a connector like a direct connector, a Canva connector from your Claude design, you might not be able to choose which features inside that application that Canva you wanna give Claude design access to. So from here to Zapier, you can easily do that. So once you select this, you're gonna click on connect.

14:57It's gonna ask you to connect your Canva account. So I'm gonna click on connect. It's gonna open your Canva and make sure obviously you give it permission.

15:04So once you click on allow and now it's gonna give, uh, Zapier access to all of your Canva account and therefore you can have now your Cloud Design access all of these tools. So there you go.

15:17So besides your Gmail and Slack and Google Calendar and everything else, so now you have, uh, given Canva access to your Zapier MCP, and therefore, from your cloud design.

15:28Right? So if I go back to my cloud design in the connectors, now as you can see right here, my Zapier is connected and therefore I have access to everything within my MCP tool inside Zapier including Canva and any other app that I give it access to.

15:43Alright. So now let's go ahead and walk through an example of using one of these templates. Right?

15:47So let's say you wanna create some kind of a presentation, uh, or slides, or you can even create like, those carousel for LinkedIn or Instagram as well.

15:56But I'm just gonna use a simple example like slides. So let's say I'm gonna click on slide. And, again, same thing, I can select my design system here so that way it applies my design system in here as well.

16:06It's gonna prompt prompt here. I'm just gonna say click click on our create a slide deck presentation about AI automation, the future of AI agency model, something very simple.

16:14Right? So now it's gonna go ahead and use this slide deck presentation based on my design system.

16:22But before that, it's gonna ask you a few questions, like what does the AI agency model mean here. So I'm just gonna say, uh, agency, that's fine, service clients.

16:31Who is this for?

16:35Educational attendees. You can say how long is the talk. I'm just gonna say five minutes, eight to 10 slides.

16:42Decide for me. Decide for me. You can add more things here as well.

16:45So I'm just gonna go ahead and continue. And now it's gonna go ahead and build me this nice little design where then I can now import it, export it, or I can actually even present it directly from my claw design here that I'm gonna show you in a little bit. So let me go ahead and let this thing create the design for us or the slide deck for us.

17:04Alright. So there you go. So now it's creating this it created this slide.

17:07I think it's still finishing up, but it's pretty much done. So you can see all of this is again based on the design system, kind of this cream background with the font there. All of it is based on the design system that we created.

17:20So same thing, you can now, uh, click on share here. You can actually, like I said, for a presentation, you can click on present here. You can present present it in this tab.

17:29So you click on in this tab. It'll actually also open. So there you go.

17:34So it's also gonna open the speaker notes here. Right? So that way you're presenting and all of the different slides are there, and you can add and edit the speaker notes right here.

17:42So really cool way to, um, add the side deck presentation in there as well. Oh, this and this one automatically went to the, uh, full screen page too.

17:52So if you click on present here, you can also click on full screen and this will go ahead and present it in full screen as well. And same thing, obviously, you can make edits right here. So if you wanna make any changes here, you just click on that component and make your changes.

18:06And, of course, same thing with your markup in comments just like we walked through on the other one, You can do the same exact thing over here as well. So those are it. I think those are the big major changes.

18:16Hopefully, you found this helpful. If you're interested obviously in learning how to sell AI tools, check out the community. Link is gonna be description.

18:23We launched our Cloud Code Masterclass and also AI Second Brain, is an AI operating system. This is like a three d and a two d version where everything lives, uh, within your environment, and you have the ability to interact with it.

18:36And, again, any questions or every anytime you get stuck, you can put it in a tech support channel and myself and my team will be able to help you out with any questions you need. Anyways, hopefully, you found this video helpful. Make sure you like and subscribe because I've got a lot more content coming up that you don't wanna miss.

18:50Thanks for watching and I'll see you on the next one.

The Hook

The bait, then the rug-pull.

Claude Design quietly shipped its biggest update yet -- and if you missed it, you are still fighting the old 15-minute token wall, manually uploading design assets, and going back-and-forth with the model every time you want to fix a typo. This breakdown covers every change, in order, with working examples.

Frameworks