09:30Griffin Wooldridge · Tutorial
How to Use Claude Skills as a Designer
A 9-minute field guide to the five Claude skills every designer should know — and how to build the one that is still missing.
March 9thThe argument in one line.
Claude Design stopped being a toy the day it gained shared usage limits, real design-system imports from code, and a two-way handoff with Claude Code — turning a promising sandbox into an actual design-to-code pipeline.
Read if. Skip if.
READ IF YOU ARE…
- A designer or developer who tried Claude Design at launch and bounced because of the 15-minute usage wall.
- Someone with an existing React component library who wants to use it as the source of truth when generating UI with Claude.
- A product designer who wants a canvas-based design tool that hands off directly to an AI coding agent without copy-pasting.
- Anyone evaluating whether Claude Design is ready to sit alongside Figma in a real product workflow.
SKIP IF…
- You have no existing codebase or design system — the most powerful new features require one.
- You are on the free plan and primarily care about usage limits — the pooled limit helps but the weekly cap is still real on Claude Pro.
The full version, fast.
Claude Design latest update fixes its two biggest problems: the isolated usage limit is gone (it now draws from the same shared pool as Claude chat and Claude Code), and you can finally import a real component library using the /design-sync slash command in the Claude Code CLI. The rebuilt canvas editor adds Figma-style layout controls so you can make small adjustments without burning tokens. A new bidirectional handoff lets you move a design project from Claude Design to Claude Code (and back) in one step. The verdict: significantly more useful than at launch, but Pro-plan users will still hit the weekly limit if they use it heavily.
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 →Where the time goes.
00:00 – 00:40
01 · Intro — the usage limit problem
Sets up the core problem: Claude Design launched strong but had a crippling isolated usage cap that cut sessions short in 15 minutes.
00:40 – 02:00
02 · Feature overview
Quick tour of the new dashboard UI, design system imports, examples page, MCP connectors, and the pooled usage limits.
02:00 – 03:11
03 · design-sync — importing a React component library
Walkthrough of the /design-sync slash command in Claude Code CLI: cd into repo, run claude, run /design-sync. Takes ~30 min and ~100K tokens. Result appears in Claude Design as a full design system.
03:11 – 03:56
04 · Sponsor — Mobbin
Mid-roll for Mobbin, a UI reference library of real production app screens. Framed as the grounded reference complement to Claude Design prompting.
03:56 – 05:27
05 · Building a dashboard with the Aria UI design system
Demo: selects the Aria UI design system, prompts for a SaaS research-platform dashboard, Claude generates 3 layout variations, demonstrates dark-mode toggle and Tweaks dropdown.
05:27 – 07:24
06 · New canvas editing options
Deep dive into the rebuilt editor: layer tree, Pro vs Simple mode, Figma-style layout controls, comments that route to Claude or teammates, markup/drawing mode.
07:24 – 08:15
07 · Exporting and Claude Code handoff
Export panel: PDF, PowerPoint, Project archive, Standalone HTML. Send to Claude Code demo — Claude Code imports the entire Claude Design project in one command. Bidirectional works both ways.
08:15 – 08:59
08 · Outro
Verdict: design-system import and Claude Code handoff are the two features worth the wait. Usage limits improved but not fully solved on Pro.
Lines worth screenshotting.
- Claude Design original usage limit was a separate tiny bucket — the new shared pool with Claude chat and code is the fix that actually matters.
- You can import your entire React component library into Claude Design using a single /design-sync slash command from the Claude Code CLI.
- The /design-sync process costs roughly 100K tokens and 30 minutes for a medium-sized design system — budget for it as a one-time setup cost.
- Claude Design MCPs are not configured in Claude Design — they sync automatically from whatever you have connected in Claude Code.
- The new Pro editor panel gives Figma-level layout controls (flex, grid, padding, margin, alignment) without spending a single AI token.
- Sending a design to Claude Code is a one-step copy-paste: Share then Send to Claude Code copies a pre-built import prompt.
- The bidirectional handoff means you can start in Claude Design for visual iteration and finish in Claude Code for implementation — or vice versa.
- Claude Design will generate multiple layout variations in a single prompt pass.
- If your design system includes dark mode, Claude Design automatically implements a working mode toggle in generated UIs.
- The best UI reference before you prompt is something that shipped to real users — not a portfolio piece.
- Exporting to Standalone HTML gives a self-contained file that works offline — useful for sharing prototypes without a Claude account.
- Pro-plan users should still expect to hit the weekly limit with heavy Claude Design use even after the pooled limit fix.
What actually changed in Claude Design — and what did not.
WHAT TO LEARN
The update is real, but the two features that matter are the ones that connect Claude Design to your existing codebase and to Claude Code — everything else is polish.
- The pooled usage limit removes the biggest blocker to actually using Claude Design: the old isolated cap cut sessions short before you could finish a single feature.
- The /design-sync command is most valuable if you already have a React component library — it makes Claude Design generate UI that matches your production code rather than generic components.
- Running design-sync costs real tokens (roughly 100K) and real time (roughly 30 min) — treat it as a one-time setup investment, not a per-session action.
- The new canvas editor Pro panel covers Figma-level layout controls so you can refine without prompting, which means you spend tokens on generation, not micro-corrections.
- The bidirectional Claude Code handoff is the feature that justifies Claude Design in a professional workflow: start visually, finish in code, iterate in whichever environment fits the task.
- Even with the improvements, heavy Pro-plan users will still hit the weekly limit — the update is meaningful progress, not a complete solution.
Terms worth knowing.
- design-sync
- A Claude Code CLI slash command that reads a codebase's React components, design tokens, and style conventions, then uploads the result to Claude Design as a queryable design system.
- Design system (Claude Design)
- A set of documented components, tokens, and usage rules that Claude Design references when generating UI — similar in concept to a Figma component library but sourced from real code.
- Pooled usage limits
- Anthropic's change to make Claude Design share a single weekly token budget with Claude chat, Claude cowork, and Claude Code, rather than having its own separate smaller allocation.
- Bidirectional handoff
- The ability to move a project from Claude Design to Claude Code or from Claude Code to Claude Design without re-prompting from scratch.
- Tweaks
- A Claude Design toolbar feature that lets you describe visual adjustments in plain text or ask Claude to generate tweak ideas without re-generating the entire design.
- Mobbin
- A paid UI reference library containing thousands of screenshots from real production iOS and web apps, organized and searchable by UI pattern, flow, or app category.
Things they pointed at.
Lines you could clip.
08:08
“The design system import and the Claude code handoff are the two big features I have been waiting for since April.”
08:20
“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 is a real workflow right there.”
00:00
“People were burning through their usage limit in fifteen minutes.”
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.
analogy
00:00Claw Design launched two 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 fifteen minutes.
00:09But Anthropic just released a huge update to it and you're now gonna get a lot more use out of Claude 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 Claude code.
00:23They rebuilt the editor with real drag, resize, and align controls so you're not burning through tokens on every small adjustment. They added some more export options, giving you a bit more flexibility depending on where you wanna take your designs. And on the usage side, like I said, they've improved it a bit, but it's not fully fixed.
00:39Let's get into it. First off, landing in the claw 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 claw design at the top here, even including animations like motion graphics and loops, which is a super cool area to explore with Claude Design.
00:56But you can also just start with a file. This means you could import a Figma file, a JPEG, PNG, and HTML file, pretty much anything that you want Claude Design to build out in the canvas. This is what the dedicated page for your design systems looks like.
01:09This will include every design system that you've created or imported into Claude 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.
01:25Now, one thing that's easy to miss is that you can use connectors or MCPs inside Claude design. So all these MCPs listed here, I connected inside Claude code, but they've synced over for use in Claude design as well. Then also in this menu is where you can access your usage limits.
01:40Like 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 Claude chat, Claude co work, Claude code. You don't have that low dedicated usage limit for Claude design specifically, which was the main thing that was making you hit your usage limit so fast inside Claude design.
01:57Now, going back to the design systems tab, you can see if you hit create that you now have this create using Claude code option. Option. This is especially applicable if you have an existing design system made up of React components.
02:08Now, I have a design system here that I wanna 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 Claude code CLI rather than the desktop app.
02:26So I'm gonna c d into my design system directory, then run Claude, and from here, I can use the design sync slash command. Make sure that your Claude code CLI is up to date with the latest version if you don't see that slash command. Now Claude code has asked me a few questions and now it's getting to work syncing the design system with Claude design.
02:43Now Claude code has finished syncing our design system to Claude design. Just know that this process was fairly intensive and took about a half hour and nearly a 100,000 tokens. So just be aware of that in case you're coming close to your usage limits.
02:55Now, when I go back to my Cloud Design design systems and refresh, I see the ARIA UI design system that I just synced. Let's open it up and check it out. I have my ARIA UI design system starting off with a bunch of instructions about how Claude should use the design system, and then down below gets into the actual components, looking just the way that they did in that Claude code preview earlier.
03:14Pretty soon, I'm gonna show you a real dashboard UI that I'm gonna generate using these components. But first, you need to know about a tool called Maubbin. And if you're a designer who hasn't heard of it, you're missing an essential piece of your design workflow.
03:26Maubbin 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.
03:50And 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.
04:05The more grounded your references are before you prompt, the better your results. Maubin helps you get there. Link's in the description to get 20% off.
04:13Now let me show you what else is new with Claw Design by building an actual dashboard using that design system. Check it out. I already have that ARIA UI design system selected, ready for Claw Design to use for this next build.
04:24However, 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 gonna use.
04:37Build a SaaS dashboard for research platform. Use daily by user researchers and UX designers for real work. If you wanna 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.
04:51Now I'll hit send. It's starting off by asking some questions about what we want Claw Design to build for us. Now I've answered its questions, and I'm letting it get to work.
04:59Now 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.
05:12The 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 nav bar 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.
05:27Now, Claw 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, Claw Design was able to seamlessly implement that switching mode between each design style.
05:42But 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.
05:54Now here's one of the newest updates to Claw 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.
06:06I 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.
06:17You 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 wanted these four KPIs at the top up here to be left aligned rather than center aligned.
06:29With all of those selected, I could 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.
06:46Pro 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.
06:56For example, if I wanna fix the padding inside these badges, I I can just click on it and say, fix the padding within each of these badges. Now if you just wanna leave a comment for your teammate to see, for example, I could just hit add comment. Or if I wanna prompt Claude to make the change, I'll hit send to Claude.
07:11Then 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.
07:25Now 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 gonna be most relevant for you.
07:40But what you'll probably find most useful is this send to Claude code feature. Like I said, Claude design can now hand off bidirectionally to Claude code or vice versa.
07:50Check 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 wanna start off in Claude design.
08:05Now because of the handoff is bidirectional, 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.
08:19The 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.
08:35On 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 Cloud Pro plan, you'll probably still burn through that usage limit a bit too quickly.
08:50Link 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.
The Hook
The bait, then the rug-pull.
Claude Design hit a million users in its first week — then immediately frustrated most of them by burning through usage limits in fifteen minutes. This update is the first serious answer to that problem, and it arrives with two features that change what the tool actually is.
Named ideas worth stealing.
02:08model
design-sync workflow
- cd into your component library directory
- run claude (Claude Code CLI, not desktop app)
- run /design-sync slash command
- Claude reads components, tokens, conventions, pushes to Claude Design
- design system appears in Claude Design Design Systems tab
Five-step CLI process to import any React component library into Claude Design as a structured, queryable design system.
Steal forany team that wants Claude Design to generate UI that matches their actual codebase rather than generic components
07:44model
Bidirectional Claude Design to Claude Code handoff
- Claude Design to Claude Code: Share then Send to Claude Code copies import prompt then paste into Claude Code
- Claude Code to Claude Design: open any Claude Code project in Claude Design for canvas editing
Two-way bridge between the canvas design tool and the coding agent.
Steal forany design-to-code workflow that bounces between visual mockup and implementation
How they asked for the click.
VERBAL ASK
07:44next-video
“Drop a comment letting me know what you are building right now and subscribe to become a better designer.”
Soft subscribe CTA at the end. Real mid-roll CTA is the Mobbin sponsor with 20% discount link.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
AFFILIATECommission earned if you click.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
