Transcription
Cloud Design launched 2 months ago now, and it hit a million users in its first week, but it also had one massive problem. People were burning through their usage limit in 15 minutes. But at Tropic, just released a huge update to it, and you're now going to get a lot more use out of Cloud Design before hitting that limit.
You can also import your design system from a repo, design files, or code base. They added a full bidirectional handoff with Cloud Code. They rebuilt the editor with real drag, resize, and align controls, so you're not burning through tokens on every small adjustment. Some more export options giving you a bit more flexibility depending on where you want to take your designs. And on the usage side, like I said, they've improved it a bit, but it's not fully fixed. Let's get into it.
First off, landing in the Cloud Design dashboard, you'll see that they've changed the look of it quite a bit. It's still pretty minimal, but they've laid out the main types of designs that you can make with Cloud Design at the top here, even including animations like motion graphics and loops, which is a super cool area to explore with Cloud Design. But you can also just start with a file. This means you can import a Figma file, a JPEG, PNG, and HTML file, pretty much anything that you want Cloud Design to build out in the canvas.
This is what the dedicated page for your design systems looks like. This will include every design system that you've created or imported into Cloud Design, still including the option to create a new one as well, which I'll touch on more in just a second. Then they've also added this examples page where you can see design projects that other people have created and get inspiration for your next design project.
Now, one thing that's easy to miss is that you can use connectors or MCPs inside Cloud Design. So, all these MCPs listed here, I connected inside Cloud Code, but they've synced over for use in Cloud Design as well. Then also in this menu is where you can access your usage limits. Like I said before, the usage limits are now pooled. And why this is so important is that you're getting the same usage limits that you do in Cloud Chat, Cloud Cowork, Cloud Code. You don't have that low dedicated usage limit for Cloud Design specifically, which was the main thing that was making you hit your usage limit so fast inside Cloud Design.
Now, going back to the design systems tab, you can see if you hit create that you now have this create using Cloud Code option. This is especially applicable if you have an existing design system made up of React components. Now, I have a design system here that I want to get into Cloud Design so that I can design a dashboard using all of these components. If I click this option, it tells me that all I have to do to import it is use the design sync slash command.
Now, the design sync slash command works best from the Cloud Code CLI rather than the desktop app. So, I'm going to CD into my design system directory, then run Cloud, and from here I can use the design sync slash command. Make sure that your Cloud Code CLI is up to date with the latest version if you don't see that slash command.
Now, Cloud Code has asked me a few questions, and now it's getting to work syncing the design system with Cloud Design. Now, Cloud Code has finished syncing our design system to Cloud Design. Just know that this process was fairly intensive and took about a half hour and nearly 100,000 tokens. So, just be aware of that in case you're coming close to your usage limits.
Now, when I go back to my Cloud Design design systems and refresh, I see the Arya UI design system that I just synced. Let's open it up and check it out. I have my Arya UI design system starting off with a bunch of instructions about how Cloud should use the design system, and then down below gets into the actual components looking just the way that they did in that Cloud Code preview earlier. Pretty soon, I'm going to show you a real dashboard UI that I'm going to generate using these components.
But first, you need to know about a tool called Mobbin, and if you're a designer who hasn't heard of it, you're missing an essential piece of your design workflow. Mobbin is a UI reference library with thousands of real screens from real apps. iOS and web apps all organized and searchable so you can find exactly the kind of UI pattern you're looking for in seconds. So, instead of screenshotting apps on your phone, digging through Dribbble, or just guessing what a good dashboard should look like, you can search something like analytics dashboard with sidebar nav and get back a curated set of screens from actual production apps. And for designers, that matters because the best UI reference isn't something someone designed for a portfolio. It's something that shipped that real users interact with that had to solve a real problem. The reason I bring it up here is that when you're working with Claude on UI design, your inputs determine your outputs. The more grounded your references are before you prompt, the better your results. Mobbin helps you get there. Links in the description to get 20% off.
Now, let me show you what else is new with Claude design by building an actual dashboard using that design system. Check it out. I already have that already UI design system selected ready for Claude design to use for this next build. However, like I said earlier, you can now import your own code base, whether that's through GitHub or uploading code stored on your computer. Then you still have the other import options like giving Claude design a screenshot or giving it your own Figma file. Here's the prompt I'm going to use. Build a SaaS dashboard for a user research platform used daily by user researchers and UX designers for real work. If you want to be extra sure that Claude design follows your design system, you can say something like adhere to the design system strictly without drifting off track. Now, I'll hit send.
It's starting off by asking some questions about what we want Claude design to build for us. Now, I've answered its questions and I'm letting it get to work. Now, after a few minutes, we have the three different layout variations that I asked for. This first one looks pretty solid overall, but we can see there's a spacing bug within these status badges here. However, I like the KPIs at the top and the sidebar looks really nice and clean. The second variation is a little bit similar, but instead of a table down here, we have each of these cards laid out as a grid and the navbar is horizontal across the top. And then with the third variation, it went in a much different direction showing dedicated pages for each of these items on this left side rail here.
Now, Claude design will also include tweaking options for your designs. The one that it included this time was this dark mode toggle up here. Because my design system included dark mode functionality, Claude design was able to seamlessly implement that switching mode between each design style. But if you want more tweaks, you can use this tweak drop down up here. You can either describe the tweaks that you want, like different typography styles, different values for corner radii, or if you click this ideas button, it'll come up with those tweaks for you.
Now, here's one of the newest updates to Claude design, this edit button. While I'm in this edit mode, I can zoom in or out, and if I select any element on the screen, you can see that I have this layer tree like you're probably used to from Figma. I can add another layer of text, add a new frame, or add a bunch of different shapes to my UI. This is the main update to this editing functionality. You have a bunch more features to make edits manually rather than prompting everything. You get fine-tuned controls for layout, direction, alignment, pretty much everything that you would be able to do in Figma or actual code. Let's say I want one of these four KPIs at the top up here to be left-aligned rather than center-aligned. With all of those selected, I can just choose align left, and now all the content in each card is getting pushed to the left.
Now, if you prefer to have more simple editing options, you can switch from pro to simple up in this toolbar. If adjusting the basic appearance of each element is the only thing you need to do, then using the simple tab makes a lot more sense. Pro just gives you all the extra editing capabilities that you would expect if you're a professional designer or developer, for example. Then you still have the other two options for editing. You can leave comments. For example, if I want to fix the padding inside these badges, I can just click on it and say, "Fix the padding within each of these badges." Now, if you just want to leave a comment for your teammate to see, for example, I can just hit add comment. Or if I want to prompt Claude to make the change, I'll hit send to Claude. Then, if you'd rather make edits through drawing instead, you can mark it up. You can either click on an element directly or just draw and tell Claude what you want changed. But the real star of the show with the new update is all the additional editing options you get in this left sidebar.
Now, when you're ready to share or export your designs, there's a brand new share drop-down up here. You can manage who can access these designs, whether it's just you or your entire workspace. Then there's a new dedicated tab for export. For designers, the zip file or the standalone HTML is going to be most relevant for you. But what you'll probably find most useful is the send to Claude code feature. Like I said, Claude design can now hand off bi-directionally to Claude code or vice versa. Check this out. I just hit send, copy this prompt, and now Claude code is importing that entire Claude design project so that I can continue iterating on it here. After all, I do still prefer Claude code over Claude design, which makes this a really helpful feature for me when I do want to start off in Claude design.
Now, because of the handoff is bi-directional, this means that I can take any project that I'm working on inside Claude code and keep working on it inside Claude design when I want that more designer-focused canvas view. So, that's everything you need to know about the new Claude design update. The design system import and the Claude code handoff are the two big features I've been waiting for since April. The fact that it can now pull your actual components, check its own work against your actual design system before you even see it, and then hand it off straight to Claude code in one command, that's a real workflow right there.
On the usage limit side, they have improved it. The shared pool, the efficiency improvements, the new editor controls that let you tweak your designs manually without burning through tokens, it all helps. But, if you're on a Claude Pro plan, you'll probably still burn through that usage limit a bit too quickly. Link in the description to get 20% off your Mobbin plan. Drop a comment letting me know what you're building right now, and subscribe to become a better designer.