Modern Creator
Jay E | RoboNuggets · YouTube

Claude Design just got MASSIVE Upgrades (2.0 Update)

A 12-minute screen-recorded tour of Claude Design 2.0 — unified limits, a real editor, markup annotations, MCP connectors, and two-way sync with Claude Code.

Posted
yesterday
Duration
Format
Tutorial
educational
Views
26.5K
691 likes
Big Idea

The argument in one line.

Claude Design 2.0 closes the gap between AI-generated mockups and production-ready assets by adding direct WYSIWYG editing, MCP connectors, and two-way sync with Claude Code — turning a one-shot prototype generator into a full design workflow.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • You use Claude Code regularly and want to understand how Claude Design integrates with your existing workflow.
  • You build slides, dashboards, or landing pages and are curious whether Claude Design can replace PowerPoint or Figma for basic work.
  • You hit usage limits on Claude Design at launch and stopped using it — the unified limits fix is the reason to revisit.
  • You want to use MCP connectors to pull AI-generated images or videos into your designs without leaving Claude.
SKIP IF…
  • You need pixel-perfect production design or complex vector work — Claude Design is not a Figma replacement at that level.
  • You have no existing Claude subscription; this assumes a paid Claude plan.
TL;DR

The full version, fast.

Claude Design 2.0 ships five meaningful upgrades. Usage limits are now unified across Claude Design and Claude Code, so you stop burning your quota on a single prototype. A direct WYSIWYG editor lets you click any element and edit it without prompting. A markup annotation tool lets you draw feedback on designs and have Claude apply it. MCP connectors let you pull in third-party tools like Higgsfield mid-generation. And /design sync lets Claude Code push a code-based design system directly into Claude Design so every template auto-adheres to your brand. The two-way workflow — design in Claude Design, wire the backend in Claude Code — points at where Anthropic is taking this: one app for everything.

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:0000:45

01 · Cold open — what changed

Host lists the five major upgrades and credentials himself.

00:4501:14

02 · New interface and templates

Tour of the new Claude Design homepage: Prototype, Slides, Document, Wireframe, Animation templates.

01:1401:53

03 · Unified usage limits

Shows that Claude Design and Claude Code now share the same 5-hour and weekly usage quota.

01:5304:03

04 · Building slides — replacing PowerPoint

Prompts a 5-slide deck, presents full-screen with speaker notes, exports as .pptx.

04:0305:49

05 · Direct WYSIWYG editor

Click-to-edit text, font, size, color. Pro toggle reveals a nested Figma-style layer panel.

05:4906:32

06 · Markup annotation tool

Draw on the canvas or select elements, leave comments, Claude applies the edits.

06:3207:50

07 · MCP connectors

Connect third-party tools; demo uses Higgsfield to generate and inject an image into a slide.

07:5010:11

08 · Design systems and Design Sync

/design sync skill in Claude Code pushes a code-based design system into Claude Design; Apple design system demo.

10:1111:45

09 · Send to Claude Code — wiring the backend

Export a Claude Design dashboard as a prompt, paste into Claude Code, wire to Supabase with a scheduled refresh.

11:4512:48

10 · Where this is headed

Host predicts Claude Design folds into desktop app; Anthropic is building toward a super app.

Atomic Insights

Lines worth screenshotting.

  • Claude Design and Claude Code now share the same usage quota pool, so you no longer burn your weekly limit with a single prototype run.
  • The new WYSIWYG editor means you can click any element in a Claude Design output and edit text, font, size, or color without writing another prompt.
  • The markup annotation tool lets you draw directly on a Claude Design canvas and leave comments Claude will act on — closer to a design review workflow than a chat loop.
  • MCP connectors extend Claude Design to third-party tools, so you can prompt Claude to generate an image via Higgsfield and have it land in your slide in one step.
  • /design sync is a Claude Code skill that reads your code-based design system and publishes it to Claude Design, so every template you generate stays on-brand automatically.
  • You can go the other direction too: build a front-end design in Claude Design, hit Send To, and paste the generated prompt into Claude Code to wire it to a real database.
  • The presenter makes the case that Claude Design can replace PowerPoint for most business slide decks — generation, presentation mode, speaker notes, and .pptx export are all there.
  • Version 1 of Claude Design failed not because of the UX but because the rate limits were too tight — users hit the cap after one or two prototypes.
  • Claude Design still lives only in the browser, but the host predicts it folds into the Claude desktop app within the year as part of a broader super-app strategy.
  • The pixel/halftone Robo design system the host uses was built in Claude Code and ported to Claude Design in one /design sync command — no manual rebuild.
Takeaway

Five upgrades that make Claude Design actually usable.

WHAT TO LEARN

The 2.0 update addresses every structural complaint about the original — token limits, no direct editing, no integration — and adds a two-way bridge with Claude Code that changes how you move from design to production.

  • Claude Design and Claude Code now draw from the same usage pool, so switching between them no longer doubles your quota consumption.
  • The new WYSIWYG editor means you can make small text and color tweaks without writing another prompt and waiting for a full regeneration.
  • The markup annotation tool inverts the feedback loop: instead of describing changes in chat, you mark up the canvas directly and Claude acts on it.
  • MCP connectors mean Claude Design is no longer limited to what Claude itself can generate — you can pull in images, videos, or data from any connected tool mid-session.
  • /design sync gives you a one-command way to keep a code-based design system in sync with Claude Design, so generated templates automatically match your brand without manual token entry.
  • The Send To Claude Code workflow closes the prototype-to-production gap: design visually, then hand off to Claude Code with one click to wire in a real backend.
  • Claude Design can now export slide decks as .pptx files with speaker notes, which removes the main blocker for using it in corporate or client settings that require PowerPoint.
Glossary

Terms worth knowing.

Design Sync (/design sync)
A Claude Code skill that reads your project's design system files and publishes them to Claude Design, making the brand tokens available to every template you generate there.
MCP connector
A Model Context Protocol integration that connects Claude to an external tool or API, allowing Claude Design to call third-party services like image generators mid-prompt.
Pro toggle
A mode in Claude Design's editor that exposes a nested, Figma-style layer panel so you can navigate and edit specific elements without prompting Claude.
Markup tool
A Claude Design feature that lets you draw on the canvas or select elements and attach text comments, which Claude then uses as instructions to apply edits to the design.
Design system
A set of defined colors, fonts, spacing rules, and component patterns that Claude Design applies consistently across every template when one is selected.
Higgsfield
A third-party AI image and video generation tool shown connected to Claude Design via MCP, used in the demo to inject a generated image into a slide title.
Resources

Things they pointed at.

Quotables

Lines you could clip.

00:00
With these updates rolled out this week, you're going to get much more use out of Claude Design, which finally makes it usable.
Direct verdict on v1 vs v2 — zero context neededTikTok hook↗ Tweet quote
01:53
Before, when Claude Design first launched with just one prototype, it is very common that you run into rate limits already. So I'm glad that they finally fixed that.
Validates the #1 complaint about v1 in one sentenceIG reel cold open↗ Tweet quote
11:45
I think what a lot of the AI labs are doing is they're trying to create the super app, the everything app, where with just one application you can do your design, your coding, build software, build slides, and pretty much anything that you want.
Pithy framing of the AI super-app thesisnewsletter 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.

analogystory
00:00So Ontropic just gave Claw Design some massive upgrades. Because when it first launched, the major problem was that a lot of people were hitting their usage limits with just a few prompts. But with the updates rolled out this week, you're going to get much more use out of Claw Design, which finally makes it usable.
00:15They fully rebuilt their editor, so you can now manually edit elements just like any proper design tool. They also introduced new features to integrate seamlessly with Cloud Code, as well as several other updates that legitimately make Cloud a proper design software that can automate and replace your other tools. And if you're new here, my name is Jay.
00:33I spent over a decade working with brands that you may know, have been in AI since my masters in data science. Now I'm running an AI business in one of the largest AI communities globally. Let's dive into it.
00:45So when you now go to Claw Design, which you can just access by heading to this URL, claw.ai/design, you can see they have a brand new interface here. So it's quite similar to other AI chat apps that you may be used to, but now what they are putting front and center are the different templates that you can start with.
01:00So you can create prototypes of applications, you can create slides or PowerPoint packs, documents, wireframes, and even video animations.
01:09So I'm going to give a few examples of that in just a bit. But apart from the changes that Anthropic made to Cloud Design's UI, I think what finally makes Cloud Design a bit more usable is the fact that they have now pulled your account's usage limits across Cloud Design and Cloud Code. So if you now go to your profile and click on the usage here, you'll you now see this familiar usage limits for five hour current sessions as well as your weekly limits.
01:32And if we bring up Cloud Code real quick and just look at the account and usage, you can see that this is exactly the same rates that you have. So it's much easier to manage now and honestly just makes a lot more sense that they unified this. Because before when Cloud Design first launched with just one prototype, it is very common that you run into rate limits already.
01:51So I'm glad that they finally fixed that. Now to show you some of the new features that they introduced, unironically, one of the best ways and one of my favorite ways by which to use Claw Design is to create some slides. Because in my view, with these features that they just added, I think you don't really need to use PowerPoint anymore.
02:06So what I'll do here is just select the slides template, and I'll ask it to just build me a short slide deck about what's in Claw Design, some guidance on the slide opener, and at the bottom, I gave it a few notes on what is new so that it has some guidance on what it should highlight. So when we send that over, what it now created for us is this five slide pack, which you can see is adhering to our Robo design system, which is this pixel style design that we're starting to use now with a lot of our visuals.
02:32And in case you need a detailed guide of how to create your own design system, I will link this PDF guide below, which you can just grab for free. And that just goes through a lot of the principles as well as the skills that I personally use in order to create great design systems. So you can download this, read through it, or feed it to your cloud, and that should get you well set up with best practices for creating your own design systems.
02:53Now if we just hide the chat window for a bit, you can see this is quite familiar. Right? This is exactly what you would expect in something like Keynote or PowerPoint.
03:00And the great thing about it is not only can you present straight from Cloud Design. So if I press on present there, can just present this full screen and just shrug through these slides the same way that you would in PowerPoint or in Keynote.
03:13But apart from that, they also built in this functionality, and I'll just drag that window here in a bit, where you have your speaker notes being shown on your other screen. And this is exactly the core functionality that you would expect in a slide maker like a PowerPoint. Right?
03:26But obviously, the big difference is with Cloud Design, all of the content in these slides, can freely edit just by talking to Cloud. And here at the bottom, you can see that you can freely edit those speaker notes. And if in case you are required to use PowerPoint, let's say, in your company, if you click on share and click on export, there is actually an option here to export this via a PowerPoint X file.
03:47Just note that if you use universal fonts, that will most likely change any fonts that you have in your design system here, especially if they're custom ones. So what I would recommend here actually is just use the custom fonts feature. And once you download that, what we now have here is a PowerPoint file that you can freely edit as well if you need it.
04:03Now if you need to apply tweaks or edits to whatever design that you create, whether it's a slide pack or a website landing page or even a dashboard. Cloud Design has different features for you to do that. And the newest one, which I think is really useful, is this edit feature.
04:18So if I click on that, you can see that this is quite a familiar interface for most designers where if I go and click any of the elements here, I can freely just change the text by typing it in. I can change the font if I want to. I can also increase the size of the letters.
04:36It's probably too big, so we can just resize that a bit. And you can also bold some text, make some text italicized, and so on and so forth.
04:44And so now what Claw Design has become is a fully fledged editor for a lot of these assets and creative presentations and communication materials. Right? Because with each of these elements now resizable and all of these text pieces freely editable by you, you can pretty much replace a lot of the editing tools that you may be used to just by using Claw Design.
05:03Apart from that simple edit, you can also click on this pro toggle, and that just gives you a layered view that some people who may be used to something like Figma may be quite familiar with. And let's say if I want to quickly just edit this piece of text here, that just directs me to the right element in this nested view, and I can apply those same changes myself instead of having to prompt Claude every time and waste some tokens.
05:28So let's say we want to change the color of Claude from this orange into, let's say, something a bit more yellow. That's something that we can do now. And also, if I click on save, that will just bake in all of those changes into this final deck.
05:42So very useful, especially if you are crafting a slide pack for clients or for any type of communication materials that you would need. Now if you do want Claude to handle the editing for you instead of you having to do it manually for your final tweaks, then Claude Design still has a lot of the features that let you do that.
05:58My favorite way personally of giving feedback to Claude for specific items is this markup tool. Because if I click on that, I can just choose the elements that I want to give feedback on. And let's say I want to rework the body of this text and just say across all the slides, don't use em dashes, then I can just add that as a comment and that will create a running list of comments here on the left.
06:18And you can continue marking things up, which apart from selecting things, you can also just draw on the screen here and give your comments that way. The other feature that is really useful, especially when it comes to these visual assets, is that you can actually connect Cloud Design to third party tools using MCP connectors.
06:34And the way you do that is if you click on your profile and click on connectors, you'll be able to see all of the connectors that you have set up in your Cloud desktop app or in your cloud.ai account here. And you can see I have Higgs Field connected on my side here, which is pretty useful because if you send a prompt like this where I'm saying to add a title slide and use Higgs Field g p d image two to generate an appropriate image, it was able to understand that.
06:56It found the right tool to use from within Higgs Field's MCP, and it actually generated an image which it included in this final title slide. And so you can start to be creative with this if in case you need more visuals or even videos for your assets, then connecting Cloud Design via MCP connectors is one way for you to do that.
07:13And by the way, if you want to learn how to build and sell AI systems that businesses actually pay for, then that's pretty much all we do over at the Robo Nuggets community, where not only do you get access to the Cloud Living Masterclass, which we update every week and takes you from zero to mastery with the latest on AI, but you also get access to our agents as a service course, which walks you through how to actually get paid for all these AI skills that you are learning.
07:35You also get to be part of a genuinely great community of AI builders. In fact, you can see just some of the recent wins our members are getting from the program right here. So if you want to check that out, if it's for you, then it's just in the pinned comment below.
07:46And if not, that's totally okay too. Either way, I still appreciate the support you have here on the channel. Now you may be curious about this robo design system that I built.
07:54And the way that I actually built this originally is I had this done from within Cloud Code, and I used the new design sync feature in order to export this design system and port it over to Cloud Design. And in case you're not sure what I'm talking about, essentially, this design system feature, it's a pretty useful tool that Cloud Design has introduced even when it first launched.
08:14Because if you have a design system like this dialed in, then whichever template that you create, that will actually adhere to the design principles, the fontage, and the colors of that system that you have selected. And so to give you an example, these are some video animations that are adhering to that same design system.
08:30This one's an instance of a dashboard that's also using that design system. So you can see the same fonts, the same color palette is being applied. Now in version one of Claw Design, the way that you created these design systems, if you go to the design system toggle here at their homepage, is if you click on create design system, you used to only have this option where you can create here, where if you click that, that just gives you this interface, which is still pretty useful if you want to just describe your company name, if you have code from GitHub, let's say, that has that design system, or if you want to upload some files like a Figma file and other assets that you think would be useful to craft this design system.
09:06So you can, of course, still do that, especially if you don't have a design system yet. But what you now have the option to do is to create a design system straight from using Cloud Code. So if you click on that option, all that really shows is this sort of snippet by Entropic where they're saying that they now have this slash design sync skill that will be available to you by default in Cloud Code.
09:26So this is pretty useful if in case you have already built some sort of design system in Cloud Code. To give you one example from our side, you can see here at Cloud Code, I already have this robo design system that we made. And if you look at the sort of brand book that we have here, it is already well made.
09:42It is already ready to import. And all I really did is to use slash design sync. And what Cloud Code did is port over this whole design system and make it available in Cloud Design.
09:53In fact, to show you how easy that is, earlier when I was testing this out again, I just asked Cloud Code to try a design sync and to make a design system that has the aesthetic of Apple. And because Entropic rolled out this capability now, you can see that Cloud Code is telling me that it created a new project, this Apple design system on our cloudaiorg account.
10:12And if I look at the design system here, you can see there's six pages or six different artifacts that it can pull from. It has this hero page. It has this navigation bar and a couple of other design elements that it can now use whenever I need to make animations, whenever I need to make slides or any dashboards that are in the Apple aesthetic.
10:31And so if you're a heavy Cloud Code user, this is just a nice way for you to work more seamlessly between Cloud Code and Cloud Design. And speaking about that Cloud Code connection, you can actually go the other way as well, where you start with a front end design right here in Cloud Design. And once you're satisfied with the look and feel of this, let's say this dashboard is what you're creating and you are, let's say, okay with this look, then what I would now do as a next step here is to port this over to Cloud Code and actually wire it to the actual back end of the database of this dashboard.
11:03So that these demo numbers, I'd probably ask Cloud Code to connect to a database like Supabase and set up that scheduled routine to update it, let's say, daily in order to make sure that the dashboard that we are going to ship is live and working and is useful. So the way you do that from Cloud Design is you just click on share, you just click on send to, and here you can see that Cloud Code is one of the destinations here.
11:25And if I click on send, that will just give me a prompt that I can just copy. And if I go back to Cloud Code wherever you are using it, you just send over that prompt and in that session, Cloud Code will now be able to work on this front end design and just ask it to wire it to whatever live database that you have and set up that routine to refresh the dashboard on the regularity that you wish.
11:46And with this sort of workflow, you can sort of see where Claude Anantropic is going with this. Right? Because right now, Claude design is only available in the web, but I wouldn't be surprised if they actually fold in a lot of the capabilities here right from within the Claude desktop app.
12:01Because it just makes sense, and like I mentioned before in this channel and often in our community, I think what a lot of the AI labs are doing is they're trying to create the super app, the everything app, where with just one application, which is Claude in this case, you can do your design, you can do your coding, you can build software, you can build slides, and pretty much anything that you want really.
12:19And so a lot of these improvements that they have made in Clawd design are pointing toward that direction. So there you go. Kudos to the Clawd design team because I definitely think that a lot of the improvements that they made just made Claw Design a bit more usable.
12:31And, uh, I think they're headed towards the right direction here. I hope that was useful. And as always, thanks for watching until the end, and I'll see you all next time.
12:38Thank you.
The Hook

The bait, then the rug-pull.

When Claude Design launched, most users ran out of tokens before they finished their first prototype. The 2.0 update changes that calculus entirely — and that's just the first of five upgrades Jay walks through in this twelve-minute tour.

Frameworks

Named ideas worth stealing.

07:50concept

Design Sync workflow

  1. Build design system in Claude Code
  2. Run /design sync
  3. All Claude Design templates auto-apply brand

A one-command bridge that keeps your code-based design tokens in sync with Claude Design templates.

Steal forAny project with an existing brand system in code that needs to generate design assets consistently.
10:11model

Claude Design to Claude Code handoff

  1. Build front-end in Claude Design
  2. Share > Send To > Claude Code
  3. Paste prompt in Claude Code session
  4. Wire to live database + schedule refresh

A two-step workflow to go from visual mockup to production app without rebuilding the UI in code from scratch.

Steal forDashboard, landing page, or internal tool prototypes that need a real backend.
CTA Breakdown

How they asked for the click.

VERBAL ASK
07:10product
If you want to learn how to build and sell AI systems that businesses actually pay for, then that's pretty much all we do over at the RoboNuggets community.

Mid-roll at 7:10, ~60 seconds. Standard community pitch with member wins social proof. Sandwiched between MCP demo and design system section.

Storyboard

Visual structure at a glance.

open
hookopen00:00
unified limits
valueunified limits01:14
slide builder
valueslide builder01:53
wysiwyg editor
valuewysiwyg editor04:03
MCP connectors
valueMCP connectors06:32
CTA
ctaCTA07:10
design sync
valuedesign sync07:50
send to claude code
valuesend to claude code10:11
super app thesis
ctasuper app thesis11:45
Frame Gallery

Visual moments.

Chat about this