Claude Just Launched a Mini Figma Inside Claude Code
A hands-on first look at Claude Code's new /design command, tested live on a real product page, bugs and all.
Posted
3 days ago
Duration
Format
Demo
educational
Views
3.3K
96 likes
57 · 43
Big Idea
The argument in one line.
Claude Code's new /design command turns the desktop app into a Figma-style canvas that generates UI directions from a project's own components, lets you edit properties and leave comments directly on the canvas, and pushes accepted changes straight into the codebase, but it still misreads which section a comment is targeting.
Who This Is For
Read if. Skip if.
READ IF YOU ARE…
You build software with Claude Code and want a first-hand account of a brand-new feature before trying it yourself.
You're a designer or indie developer who wants a visual, low-code way to iterate on UI without hand-coding every variation.
You're deciding whether to redesign a page in Figma first or generate directions directly from your live codebase.
SKIP IF…
You're looking for a Figma tutorial, this is about Claude Code's own canvas, not Figma itself.
You need a CLI-only workflow, /design is desktop-app-only right now.
TL;DR
The full version, fast.
Claude Code shipped a new /design command that only works in the desktop app, not the terminal or CLI. It opens a Figma-style canvas that generates multiple UI directions using the components already in your repository, then lets you click any element to edit its properties, resize with drag handles, and leave comments asking Claude for variations. A current bug blocks comments on nested elements unless you right-click first. 'Tweaks' let you generate switchable variants of one component, like a stat shown as a ring, bar, or list, without touching the rest of the page. Accepted directions implement straight into the codebase, and the canvas supports sharing links, opening in browser, and version history. The one real flaw shown live: asking for a tweak on one section sometimes updates a different section instead, so treat every AI edit as something to visually verify before shipping.
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: people are hyping the new /design command without showing what it actually does, so the host sets out to demonstrate it directly.
00:21 – 00:48
02 · Where /design actually runs
Clarifies /design only works inside the Claude Code desktop app under Code / Home, not in the terminal or CLI.
00:48 – 01:40
03 · The real page being redesigned
Introduces Morket, the host's own SEO / AI-visibility tool, and the plain AI Visibility page he's about to redesign.
01:40 – 03:00
04 · Running /design and the canvas it gives you
Typing /design generates multiple UI directions on a Figma-like canvas, each a different visual take on the same data.
03:00 – 03:50
05 · Editing properties on the canvas
Clicking an element exposes its properties like font size and position; shift-dragging resizes it, and pieces can be dragged to reorder, like moving Claude and ChatGPT to the top of a ranked list.
03:50 – 05:02
06 · Comments: asking Claude for variations
Adding a comment on the canvas sends a request straight to Claude; a bug blocks comments on nested elements unless you right-click first to unlock the box.
05:02 – 05:47
07 · Tweaks: switchable variants of one component
A separate 'Tweaks' request generates several interchangeable versions of a single component instead of a whole new page.
05:47 – 09:50
08 · Sharing, browser view, and variation grids
Shows sharing an artifact link, opening the design directly in a browser without the chat panel, version history, and a generated grid of five different ways to visualize the same 50% stat.
09:50 – 10:55
09 · The honest part: editing the wrong section
Three rounds of text comments aimed at a crowded section instead update a different block; a screenshot finally gets Claude targeting the right area.
10:55 – 11:05
10 · Final result and what's next
Wraps on the finished, less-crowded layout and the host's take on where AI-driven design-to-code is headed.
Atomic Insights
Lines worth screenshotting.
Claude Code's new /design command only runs inside the desktop app, it does nothing in the terminal or CLI.
/design generates UI directions using the components that already exist in your repository, not generic stock components.
Redesigning a real page by hand in Figma would take hours; generating directions with /design took a couple of minutes.
Every element on the /design canvas can be clicked and edited directly, including font size and spacing, with shift-drag resize handles.
Leaving a comment on a nested element currently fails silently in the UI, but right-clicking the element first unlocks the comment box as a workaround.
Tweaks generate switchable variants of a single component, so you can flip between columns, chips, dots, or bars without regenerating the whole page.
A finished /design artifact can be shared as a link, opened directly in a browser without the chat interface, and rolled back through version history.
When asked to tweak a crowded section, Claude sometimes edits the wrong block entirely, updating a section that was never mentioned in the comment.
Screenshots work better than typed comments for correcting a mistargeted edit, showing Claude the actual crowded area got the fix right where text comments hadn't.
Accepting a generated direction pushes the change straight into the codebase, closing the loop between design exploration and shipped code.
Takeaway
Test new AI features on real work
REAL-WORLD AI TESTING
Judging a new AI feature by trying it on a page you actually maintain, not a toy demo, is what turns a hype post into an honest, useful review.
02Where /design actually runs
Before adopting a new AI feature, check exactly where it runs, a desktop app, a CLI, or a browser plugin, since assuming it works everywhere wastes setup time.
AI design tools that generate from your own component library produce more usable output than tools that generate generic, disconnected UI.
03The real page being redesigned
Testing a new AI tool on a real page from your own product surfaces its actual strengths and weaknesses faster than a toy demo would.
A redesign that would take hours by hand in a traditional design tool can take minutes to explore when an AI generates multiple directions from existing code.
04Running /design and the canvas it gives you
Generating several distinct UI directions at once, rather than one best guess, gives you more to react to and narrows decisions faster than starting from a blank page.
A canvas that shows multiple AI-generated directions side by side works like a moodboard: pick a favorite, then refine, rather than accepting the first output.
05Editing properties on the canvas
Direct manipulation, like clicking an element to see its properties or shift-dragging to resize, gives faster feedback than describing a change in words and waiting for a regenerate.
Reordering ranked or prioritized elements, like moving the more important items to the top, is a small, high-leverage edit worth doing before regenerating anything else.
06Comments: asking Claude for variations
New AI features ship with rough edges: expect small bugs, like a comment box that silently fails, and learn the workaround instead of assuming the feature is broken.
Leaving a specific comment directly on the element you want changed keeps the AI's fix scoped to that piece instead of touching the whole page.
07Tweaks: switchable variants of one component
When you want several interchangeable versions of one component instead of a full redesign, ask for that explicitly, it keeps everything else on the page untouched.
Naming what you don't like about the current version gets a more targeted set of alternatives than a vague request to make it better.
08Sharing, browser view, and variation grids
Sharing a live, editable link, rather than a static screenshot, lets collaborators actually explore the alternatives instead of just viewing them.
Opening a generated design directly in a browser, outside the chat interface, is a useful sanity check for how it will actually look to an end user.
Version history on AI-generated work matters as much as it does on hand-written code, since you'll want to roll back explorations that didn't work out.
09The honest part: editing the wrong section
AI tools can misinterpret which section of a request you're pointing at, especially in a crowded layout with several similar-looking blocks, so verify the actual change before trusting the summary.
When a text description of a problem doesn't get the right fix after multiple tries, a screenshot of the exact area gets AI tools unstuck faster than another paragraph of explanation.
Treat AI-generated edits as drafts to visually check, not commits to trust blindly, especially when a layout has many similar components.
Glossary
Terms worth knowing.
/design
A slash command in the Claude Code desktop app that opens a Figma-style canvas for generating and editing UI directions from a project's existing components.
Tweaks
Switchable variants of a single UI component, such as a stat shown as a ring, bar, or list, that can be toggled without regenerating the surrounding page.
Artifact
A shareable, versioned output produced inside Claude Code's canvas that can be sent as a link or opened directly in a browser.
“So the first thing is this does not work in the CLI. This is not this does not work in the terminal. This actually just works in Claude code.”
clears up the single most common misconception in one line→ TikTok hook↗ Tweet quote
01:18
“If I was to redesign this page in Figma directly, it would take I don't know how many hours. But if I was to white code it, it would take just a couple of minutes.”
“I want to also highlight, like, is not a sponsored video. Right? So I want to be really honest as to what it did. I was asking it to update this, but it went ahead and updated this bottom portion for whatever reason.”
rare on-camera admission of an AI tool getting it wrong→ 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
Hey, guys. What's up? Claude just launched slash design in Claude code, and a lot of people are just posting about it, uh, without really telling us what it actually means.
So I wanted to create a video to demonstrate what it actually means, whether it's useful, whether you should be actually hopping on it because I think it's pretty exciting. And I think this move is really valuable in Claude's journey.
So the first thing is this does not work in the CLI. This is not this does not work in the terminal. This actually just works in Claude code.
So when you're here, you can go to code, you can go to home, and this is where it basically works. Now what happens is, like, for example, a lot of people know that I have a a tool, like, for example, like, Market that allows me to rank on, let's say, Google, rank on ChatGPT, rank on all of these AI tools. It basically helps me launch my application and get a lot of traction on it.
So I have a page here called AI visibility, which tells me where am I ranking or where is my product ranking on a bunch of these things. Obviously, my product is new, so it's telling me, hey, it's actually being cited here.
It's giving me some recommendations about it, but it still does not encapsulate the feelings that this page should encapsulate directly in it.
Now a lot of people are now directly designing their applications and websites in Claude, in ChatGPT, directly in code.
So it gets a bit hard especially if I was to redesign this page in Figma directly. It would take I don't know how many hours. But if I was to white code it, it would take just a couple of minutes.
But when I'm white coding it, I just want to explore certain ideas. Now I can give it to chat GPT and get some images out of it, but I actually wanted to use the components that I have in my repository and then flesh out some different variations for this.
And I've done that already. So I'm going to show you how this actually works. So when you're in, let's say, the market project or you can open a new project as well.
Like for example, if I go open a new project, I can decide which project do I actually wanna work in. I already am working on market and I already gave it certain things. So I'm gonna show how that works.
When you ask it to design something and you can ask it to design something just by pressing the slash design and see it anything. For example, this AI visibility page.
I asked it to redesign this AI visibility page to with some variations. So for example, it actually gave me this.
Now as you can see, and let me just close everything here and make it a bit more collapsed so you can see how this looks. This looks very similar to Figma. Right?
So I have my canvas here. This is based on where we were right now initially. And then we have some other pages.
This is another direction it gave me. I really like this because it tells me, okay, AI visibility, in AI you're basically again half of the answers are coming to you.
You're basically ranking like this on some of these engines. These are where some of the competitors actually ranking and something that you actually have to do. And then obviously the questions that you have to rank for.
I really like this page. And then there's another variation like this that it gave me. I think this is really nice as well.
But I actually like this one. Now this is what it gave me and I can just say, hey, I like direction a, just go ahead and implement it and it is going to implement it. But I can make some changes here as well.
Like I can click on this and I can go to edit and I can see all of the different types of properties. Like for example, I can go here. I think the font size here should be 12 pixels.
So I can just go ahead and I can resize it just by pressing here. I can press shift and it can actually help me resize it just by moving it left and right. So I think the resizing is really nice that I can do it so easily.
I don't like this large circle. Right? And I also don't like how Claude is actually at the bottom.
Gemini oh, sorry. ChatGPT and Claude should be at the top. So I can just click on it and I can basically just move Claude directly to the top.
I can click on this. I can move Claude and chat chat GBT directly to the top because I feel like those are the most important tools that people should be ranking on right now. Very similarly, I like this UI, but I don't like the circle.
Maybe we need some other representation of it. So what I can do here, obviously I have to redesign it. Instead of manually redesigning it in Figma, I can go to the comment.
Now this is a comment. And I can add any comment and ask Claude to do something for me. And the problem here is that if I go add a comment outside, it allows me to add the comment here and I can add a comment for other people to view as well.
And I can send a comment to Claude as well to make some updates. But when you actually come here, it doesn't allow you to add a comment. I think this is just a bug that they currently have in the application, which they're gonna fix.
But a workaround to that is you right click it and when you right click it here, then you can add a comment. So I'm gonna add a comment. Give me five variations of this visual.
I don't like how this circle looks.
Maybe we can have one circle that's half in size or something along those lines and I'm gonna send that to Claude. So when I send that to Claude, you can actually see that all of the comment comments appear here and Claude already is starting work on it.
So Claude's gonna go ahead and start work on it and it's gonna give me some ideas as to how to go ahead and actually improve it. Separately, I wanna make some other changes as well. I don't actually, let me just disable the comments here.
I don't like how this particular thing is actually taking too much space. I also want multiple variations of this as well.
And this is where tweaks come in. Now I can obviously ask it to go ahead and actually create four variations just for this. Or I can say, I can go open the comments again, right click and then click on it.
Can you give me five tweaks to represent this information differently.
And I'm gonna send that to Claude as well. So Claude is going to be working on all of these things. If you go into the comments, you can see how it is working on something.
So as you can see, I'll put together five variations. It's doing that. And then it's also Claude is starting work on this one.
So we can come back when it's actually done and see what it has actually given us. In the meantime, I can actually share some of the other features that exist in this particular tool. So if I let me just disable comments.
If I go, I can share this artifact as well. So I can copy the link and I can share it to anyone and anyone would be able to see it. Like this artifact offers file download, it can be shared because obviously there's a bit too much in this file.
But there are other if it was obviously public, you would be able to share it if it did not have the file download artifacts. And then I can also decide which version is actually being shared. Some other things that I can do is I can actually open it directly in the browser as well, which is pretty interesting.
So if I click on open in browser, you can see I don't have all of that like chat and stuff along those lines. I can directly have a look at it here.
If I'm obviously logged in into my account, I can go ahead and start editing it. I can decide, okay, I don't really like how this actual border looks.
Maybe the active border should be a different color. Maybe the chips should actually be a different color instead of this gray color. So I can do and I can control all of those things directly by coming here.
Some other things that you can do is you can actually add multiple pages as well in the canvas. And if you go let me just close this extension that I made. If you go here, you can even see the version history and all of the updates.
So it's basically a mini Figma that works based on your code base and you can just work on it. And since Claude launched it, I'm pretty sure they're gonna start maintaining it, start building it.
Now obviously I can draw a frame here. I can start typing certain things. I can work very similar to how I work in Figma.
So it automatically refreshed. It refreshed for some reason and it gave me these variations to showcase how we can have this particular visual look like.
So if I like one, I can just say, hey, I like this variation. I can give it to Claude and it can go ahead and actually implement it. Okay.
So now that it's done with the changes, I mean, you will be surprised as to what you can do now because I went ahead into I asked it to actually give me some options. You can actually go to the tweaks at the top and it's gonna give you a bunch of options for a bunch of these things. Like for example, ring.
Do I actually like this ring? Do I wanna tweak something here? Maybe I wanna use a fraction.
Maybe I wanna use may have it in line here. Maybe I wanna have this hidden.
Maybe I wanna actually have a list here like for example on the right or maybe have them as dots. Maybe have them as bars. So we have all of these options here that I can go ahead and actually tweak as well.
I can decide which one I actually like and whether this one makes sense. I actually think the ring actually makes sense to me. I like it.
Maybe the dots here makes sense. Actually, the bars are fine as well. But coming to this one because I think I asked it to update this one as well.
So it did make that mistake as well. So I'm gonna save the defaults as well and I'm gonna ask it like right in front of you. I'm gonna go add a comment.
I asked you to give me some variations and tweaking options for this section too because it looks too crowded.
Where are those? And let's see what it actually responds. So I'm gonna send that to Claude.
I'm gonna wait for its response here, and obviously, can open the comments and see what it actually gave me. So it mentioned that it only did it for the section above and actually skipped this one. For this block, I'll work on a few options along these lines, increasing vertical spacing and letting the items breathe, dropping the two columns, so nothing gets squeezed.
Okay. So it is done with it. And as you can see, we have the lists here.
And I want to also highlight, like, is not a sponsored video. Right? So I want to be really honest as to what it did.
I was asking it to update this, but it went ahead and updated this bottom portion for whatever reason. If I make it compact, comfortable, roomy, it's going ahead and actually updating that.
So it's not reading my comments correctly. It's nice that these tweaks exist. So much better would be.
I I like how these works. I actually just wanted to update this. So what I'm going to do instead is, I am just going to go ahead, give it this particular screenshot.
I wanted you to give me tweaks for this thing because the bars actually, why am I speaking?
I have whisper. I want you to go ahead and actually tweak these because the bars are extremely long. This section is actually occupying too much space.
It's not utilizing its space correctly and optimizing for all of the empty space and redundancies. So we need to prepare five different variations for this and give those to me as tweaks.
You can keep the other tweaks that we currently have as well because I wanna play around with them. So I'm going to give it that and then I'm going to come back when it's actually done with this as well. Okay.
So it's fine. We done with that and now you can see it actually went ahead and updated this and this looks much more balanced. And I also have some other variations that I can actually try.
So we have columns, we have chips, we have dots.
I like the dots. We have this ranked. That's fine too.
We have this stack. So we can actually play around with I actually don't like the slack, we can obviously go ahead and work on it as well. We also have top three whether it should actually show all or top three.
I don't think that's working. So that's basically what it is. That's how you can actually go ahead and do that.
And I think it is amazing. I think this is the future where we actually have that ability to iterate on versions really quickly based on the code base that's there And also have creative control to directly modify the code, to directly modify the editing settings, to directly have tweaks that you can play around and you can play with.
So I'm really excited about this. I would love to know what you think about it. And that's pretty much it.
Do subscribe and I'll see you later. Take care. Bye.
The Hook
The bait, then the rug-pull.
Everyone was posting screenshots of Claude Code's new /design command without explaining what it actually does, so the host ran it live on a real page from his own product, resizing elements, leaving comments, and catching the moment it edited the wrong section.
CTA Breakdown
How they asked for the click.
VERBAL ASK
11:00subscribe
“Do subscribe and I'll see you later. Take care. Bye.”
soft, low-key sign-off subscribe ask, no link or discount offered
Anthropic shipped a Figma-style artboard editor into Claude Code itself, and one identical prompt with real context beat Claude Design's default template every time.
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.
Claude Code's new /design canvas folds the old standalone Claude Design tool directly into the coding workspace: generate several distinct site designs at once, hand-edit the one you like, then turn it into a real hosted website.
A five-level walkthrough of building one locked brand system in Claude Design, then generating a burger-brand website, a 3D scroll showstopper, and a matching animated video from that same system.
A screen-recorded walkthrough of a Claude Code skill that writes, designs, and quality-checks an entire Instagram carousel — hook slide included — before a human touches a single layer.
00:12
00:20
00:36
00:41
00:54
01:02
01:18
01:27
01:35
01:43
01:52
02:00
02:08
02:25
02:33
02:42
02:50
02:58
03:07
03:23
03:31
03:40
03:48
04:05
04:13
04:21
04:30
04:38
04:46
04:55
05:03
05:20
05:28
05:36
05:44
05:53
06:01
06:12
06:18
06:26
06:34
06:43
06:51
06:59
07:05
07:24
07:33
07:41
07:49
07:57
08:06
08:14
08:22
08:31
08:39
08:47
08:56
09:04
09:12
09:21
09:29
09:46
09:54
10:06
10:10
10:19
10:27
10:35
10:52
11:00
Video of the Day06:53
11:03
12:26
20:10
17:55
Video of the Day21:18