Big Idea

The argument in one line.

Claude Code's new /design command puts a Figma-like multi-artboard canvas directly inside the coding workspace, letting you generate, compare, and hand-edit several website designs at once, then turn whichever one you pick into a real, locally hosted site with a single instruction.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You already build websites or web apps inside Claude Code and want a faster way to compare visual directions before locking one in.
You tried the standalone Claude Design tool before and got stuck on the export-then-paste handoff into Claude Code.
You're comfortable giving Claude Code plain-language design instructions and also want to hand-edit colors, text, and spacing yourself.

SKIP IF…

You're looking for a full Figma replacement with vector tools, components, and team collaboration features.
You want the canvas to also generate production-ready code automatically; turning a design into a real site is still a separate, explicit step.

TL;DR

The full version, fast.

Claude Code added a native /design slash command that opens a visual canvas inside the coding tool itself, replacing the older standalone Claude Design app that required exporting a chosen design and manually pasting its prompt and files into Claude Code to build it. Typing /design plus a description generates several distinct artboards at once, which sit side by side on a pannable canvas instead of separate browser tabs. Clicking into any artboard opens a Figma-style properties panel for hand-editing colors, text, and corner radius without re-prompting for every tweak. Changes only reach the coding agent after being explicitly saved. Naming a finished artboard is enough for Claude Code to turn it into a fully functional, locally hosted website.

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

01 · What's new

Brendan introduces the new /design slash command, explains it folds the old standalone Claude Design canvas directly into Claude Code so nothing has to be exported between tools, and previews the multi-artboard canvas that's about to be demoed.

01:01 – 01:34

02 · Canvas overview

A first look at the canvas itself: an infinite, pannable board holding several artboards of the same personal bio site, each playable as a standalone page, with a UI that closely resembles Figma.

01:34 – 02:51

03 · Old limitations

Contrast with the previous, browser-only Claude Design tool: getting a chosen design into Claude Code meant clicking Share, copying the generated prompt and files by hand, and pasting them into a separate Claude Code session before anything could be built.

02:51 – 04:29

04 · Setting up the command

How to trigger the feature: open Claude Code inside the project folder, type /design, and either describe a new site from scratch or ask for variations of an existing one; the command is confirmed to be for design only, not for writing code.

04:29 – 05:06

05 · Generating design variations

Brendan dictates a request for five distinct variations of his existing personal bio site and sends it off; Claude Code opens the canvas automatically and populates it with the finished artboards.

05:06 – 06:40

06 · Requesting variations

Five stylistically distinct directions land on the canvas at once (editorial broadsheet, brutalist poster, terminal, dark glass, Swiss spec sheet); Brendan picks a favorite and asks for two color variations of it, which appear on the same board without leaving the chat.

06:40 – 09:44

07 · Modifying colors and fonts

Clicking into an artboard exposes a Figma-style properties panel; Brendan hand-edits background color, text content, and corner radius directly on the canvas, arguing it's faster than prompting Claude Code for each individual tweak.

09:44 – 11:19

08 · Turning a design into a functional website

Brendan tells Claude Code which named artboard (03A) to build, and it pulls the saved edits and stands the design up as a real, locally hosted website; a mismatch between the canvas and the local build is traced back to forgetting to hit Save.

11:19 – 12:26

09 · Viewing the hosted site

The finished site runs locally with working buttons and links; once resaved, the canvas edits (color and text changes) reflect correctly on the live page, closing the loop between design and code.

Atomic Insights

Lines worth screenshotting.

Claude Code's new /design command puts a full visual canvas inside the coding tool itself, replacing the separate export-and-import step the standalone Claude Design tool used to require.
The old workflow needed exporting a design from Claude Design, copying its prompt and files by hand, then pasting them into a coding assistant to build the site.
Multiple design variations can be laid out and compared side by side on one canvas instead of opening a separate browser tab for each option.
Typing /design followed by a description opens a multi-artboard canvas and asks what you want designed before generating anything.
Requesting five design directions for the same site produced five genuinely distinct visual languages: an editorial broadsheet, a brutalist poster, a terminal, a dark glass aesthetic, and a Swiss spec sheet.
Clicking into an artboard exposes a Figma-style properties panel where colors, text, corner radius, padding, and layout can be edited by hand instead of prompting for every change.
Manually adjusting a color or radius in the properties panel is faster than describing the same change in a prompt and waiting for a new generation.
Canvas edits only reach the coding agent after they're explicitly saved; skipping the save button leaves the agent working from the old, unsaved version.
Naming the specific artboard you want (for example '03A') is enough context for Claude Code to turn that exact design into a locally hosted, fully functional site.
The feature is scoped to design, not code generation, so turning a chosen artboard into a working website is still a separate, explicit step.
A locally hosted preview lets you click through buttons and links before deciding whether a design is ready to ship.
Live text edits made in the properties panel, like swapping one name for another, update the rendered design instantly without a new prompt round-trip.

Takeaway

A design canvas now lives inside the coding tool, not next to it

WHAT TO LEARN

Keeping design and code in one workspace removes the copy-paste handoff that used to make iterating on a website's look slower than it needed to be.

01What's new

The new /design command lives inside Claude Code itself, so a website's visual design and its code no longer live in two separate tools that have to be kept in sync by hand.
Design work stays purely visual at this stage; nothing is actually coded until you separately tell Claude Code to build a chosen artboard.

03Old limitations

The previous workflow required manually copying a generated prompt and its design files out of a browser tool and pasting them into a coding assistant before anything could be built, adding friction that discouraged iterating on a design.
Round-tripping a single color or layout change through two disconnected tools made comparing options slower than just looking at them side by side.

04Setting up the command

Typing /design followed by a plain description is enough to start either a from-scratch design or variations of an existing site already in the project folder.
The command explicitly stops at design: it will not start writing application code until asked to separately.

05Generating design variations

Asking for multiple distinct variations in one request front-loads the exploration work instead of iterating on a single direction and hoping it converges.
The canvas opens automatically once generation finishes, with no extra step needed to view the results.

06Requesting variations

A single prompt can produce genuinely different visual languages rather than five small variations on one theme, which is what makes side-by-side comparison worthwhile.
Once a favorite direction is picked, asking for a couple of color variants of just that one design keeps the comparison focused instead of regenerating everything from scratch.

07Modifying colors and fonts

Small, mechanical edits, like a background color, a corner radius, or a line of text, are faster to make by hand in a properties panel than to describe in a prompt and wait for a regeneration.
Reserving hand-editing for detail work and prompting for structural changes plays to the strength of each approach instead of using one tool for everything.

08Turning a design into a functional website

Referring to a specific named artboard gives Claude Code enough context to build that exact version into a real site, without needing to re-describe the design.
Canvas edits are not visible to the coding agent until they're explicitly saved, so a design that looks finished on screen can still build from a stale version if the save step is skipped.

Glossary

Terms worth knowing.

/design command: The slash command that opens a multi-artboard visual design canvas inside Claude Code, for iterating on a website or app's look before any code is written.
Canvas (Claude Code): An infinite pan-and-zoom board inside Claude Code, similar to Figma, that holds multiple design artboards side by side for comparison and hand-editing.
Claude Design: The earlier, standalone browser-based version of this design tool; a chosen design had to be exported and manually copied into Claude Code before it could become real code.
Artboard: One individual design variation living on the canvas, given its own name, that can be edited independently and later selected to be built into a real site.
Properties panel: The side panel that opens when an element on an artboard is clicked, exposing controls for color, text, padding, and corner radius, similar to Figma or Photoshop.

Quotables

Lines you could clip.

02:30

“it certainly is not seamless at all between Claude design and Claude code”

names the exact pain point the whole video sets out to fix→ TikTok hook↗ Tweet quote

03:20

“This is not actually coding itself.”

short, clarifying line that resets expectations about what the feature does→ newsletter pull-quote↗ Tweet quote

11:10

“Once you've made any changes, just make sure to hit the save button in the top right. Otherwise, the agent won't see the new changes, of course.”

the one gotcha viewers will actually hit themselves→ IG reel cold open↗ 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.

analogy

Claude just dropped a new slash design command inside Claude code. This brings the previous Claude design canvas interface directly inside our Claude code workspace. Meaning that we no longer need to export projects between the two platforms.

It all just works seamlessly together now. This new canvas allows us to easily view and iterate on the design of anything we are building inside Claude Code. So instead of telling Claude Code to make changes, waiting for it to write that code, then viewing it in your browser, we can either make the changes ourselves on the canvas in seconds or get Claude to modify the design itself.

And because it is a canvas, we can view multiple design variations all at once very easily rather than making a website or app and trying to think of other ways that it could look. By the end of this video, you're gonna be an expert at using this new slash design command, and you'll be on your way to making websites and apps that look better than ever.

So without wasting any time, this is the brand new canvas inside of ClaudeCode right here. This is on the right hand side. So on the left, of course, is our traditional ClaudeCode desktop app.

But if we look at this, I can now scroll around, and this is a canvas. So I can literally move around. It it does look very similar to Figma.

We have each of these boards here, and inside of this, we have the design. In this case, it's my personal bio site. And I was able to simply tell Claude that I wanted to see multiple different design variations of my personal bio site using the slash design command, it was able to open this panel up, give me each of these design variations, and now I can look at a particular design.

I can click on this play button right here and view the actual website as a standalone page right here. Now previously, if you've used Claude design before, you're probably very familiar with this interface.

So this is Claude design where we're able to tell Claude to do a very similar thing as to what I showcased just then. This right here are multiple different examples of my personal website with very different looking designs that we're looking at right here. And essentially, this is very similar to that design canvas we just looked at.

We're able to move around. We're able to look at these different designs right here. I can even go into it and click these buttons, and it was all very interactive.

But one of the big downsides of this is how we can actually take one of these designs and get it working inside of Claude code. Previously, what we needed to do is go to the top right, click on share, and then send it into our Claude project. Now, of course, this certainly worked, and you can just click this button to send these designs into Claude.

But we can see when clicking into it, it is a bit of a mess around to be honest. It's a bit of a headache in order to get these designs into Claude code. It's not very seamless and then especially if you wanna make changes to the designs as well, it certainly is not seamless at all between Claude design and Claude code.

Essentially, I would need to copy this prompt and copy the files that have been generated here, send that into my instance of Claude code, and then get it to look at them and decide what it wants to do with them. But, of course, now it's natively integrated. It's way more seamless, and I can even just ask Claude to make changes, to create more whiteboards, to update stuff, and so it is far more interactive than ever before.

And I'd say that it's actually usable now. Okay. So before I showcase what we can actually do with this canvas and the power of the canvas in terms of design, I'll just quickly go through how to get this set up in the first place and how we can get this canvas running on the side here.

So what you need to do is just come over to the Claude desktop app, of course, go into the folder where your particular project is. This is, of course, gonna work best if you have a website or some sort of a web app where design is very important for it. And all that we need to do very simply is type slash design into the prompt box right here, and you'll see at the top that we have design coming up right here.

And it should say on the right side, create a design canvas, a multi artboard visual design. So we'll click into this, and then you'll see right here after typing slash design, it is now asking us what exactly we want to design. So, of course, if you don't have a website or a web app already built in a folder and you are just from scratch, you can just go ahead type slash design and then tell it to design you a website or a web app, and it's obviously gonna get started in that design process.

The key thing to note is that this is purely for design. This is not actually coding itself. Now in my case, in this folder, I have my personal website in that folder, and so I'm gonna tell it that I would like to view a couple different variations of the personal website that I have existing at the moment.

Hey, Claude. Can you go ahead and give me five different variations of the existing personal bio site that I have at the moment. I'd like to see quite a few different unique designs.

Can you make them all very different to each other as well? Okay. So I just speech to text that through.

Looks like it kinda messed up my command here, so I'm gonna quickly put that command back in and make sure that it is still working there. And now I'm gonna go ahead and send this off, and it should go ahead and get started in its slash design process of our exact request here. Okay.

So here we go. It's finally loaded, and so automatically it opened up this canvas as it was going through creating all of these variations. It just opened it up on the right hand side.

I didn't have to do anything other than putting the slash design in the initial conversation message. So that's all we need to do, and now we have it all open for us. And, of course, on the right hand side, we can now see the multiple different five different variations of the BioSite website that I told it to create so we can have a look here and scroll through the different design variations that it's created for me.

So of course working very similar to Claude design, we get them all sort of laid out on this canvas board and we can ultimately just pick the variation that we like and then continue to work on it from there. So let's say that I like this design right here, which I do think looks pretty cool. I can click on this play button right here and then view this site in the slightly bigger view right here, and we can hover over these buttons and just see exactly what's going on.

Now let's say I wanted to see multiple different variations of the design, this one right here that I liked. Very simply, I can come to Claude now and just tell it to create me multiple different versions of number three, which this one is. And then live on the canvas, everything's gonna get updated for us.

We don't have to wait for it to manually code out anything. The biggest benefit is that we don't have to, like, open up individual website links and then go between the different tabs to look at the different designs. We're gonna be able to see everything on the canvas right here.

Hey, Claude. I really like the design of number three. Can you create a couple different variations of that exact design?

I'd like to see one which has got some blue styling as the theme color, and if you could just do one that's very similar styling but just slightly different just to see exactly what it could look like. Okay. So I'll go ahead and send that off, and we should get back on the canvas a couple of different variations of number three.

Okay. And here we go. We've just got back the two design variations that I asked for.

And so we can see the same sort of design has come through here with the sort of blue styling instead. And then we've got this styling right here, which is sort of just slightly modified the location of the buttons below it, but really just trying to prove the point that it's very easy to get multiple different design variations coming up on the canvas that we can compare against each other very easily.

And essentially, in the past, comparing this to what we would do traditionally is that we would have told Callowed Courage to just update our design with the changes that we would have wanted to make. It would have changed everything, and then it'd be very hard to compare that against the other stuff.

So purely from a design perspective, this is pretty amazing that we are able to do this all natively. Now if you've liked what you've seen as much as I have, please subscribe to the channel down below. I've got a lot more Claude content like this coming out, so I'd really like you to subscribe and you'll get notified right away when my next video comes out.

And stay tuned because I'm about to go through how we can specifically modify the colors and fonts just like you would in Figma on this canvas. And then I'm gonna go through how we can actually take this just from a design to a fully functional website or web app from the design canvas. Okay.

So at this stage, we've got a couple of different variations that we might like, but, obviously, we don't wanna design an entire new artboard or canvas every time that we might want to change the color of something. And so all we need to do is go ahead and click into this particular artboard. Once we've clicked into it, we can hover over these elements.

As you can see right here, it's highlighting all of the text elements, a lot of these sort of box elements, the images as well. So let's say I wanted to change the color of this blue background of the text right here. Simply by clicking into this, you'll see a new tab option pop up very similar to what you'd get on something like Photoshop or Figma.

We can then click this properties button right here. If I click into this, it's now gonna open up this right hand side panel, which once again very similar to something like Photoshop or Figma. But we've got the full control on controlling and designing literally whatever we'd like.

And so once again, if you're thinking why are we gonna go through and manually do any of this ourselves, it's because I do think that the design process is still quicker if we just quickly update things ourselves. For example, I can now scroll down, click onto this blue color, click into color, and now with this sort of color panel, I can literally pick exactly what kind of color I wanna have a look at in this particular design.

And I can very easily change this slider and just see exactly what these different colors look like on this website. If I wanted to make these exact same changes through the interface of Claude, it would just take way longer. If I told her to update this particular box and change it to a particular color of the gradient right here, we would have to wait for it to make that update.

It would then output the updated design canvas, and then we'd have to then ask it again to change it to a different color. And it just takes a lot longer than literally just clicking into two buttons and then going through this entire color picker right here. Of course, there's a lot more than changing colors that we can do here.

Of course, you can see all the settings related to the actual text content itself. You could change this to Smith, hit enter, and then we'll see the text changes as well. You can see these square elements around the text as well, and this actually allows us to increase the size of the background as well.

So really the best way to learn this is just to play around with this yourself, try and change things the way that you'd like, and eventually over time you will just get better and better at using this interface. But once again, we really do have a lot of control here. If I wanted to change the radius of this box, so that's sort of the curved edges, I could bump this up to 50 pixels, hit enter, and you'll see right here we've now got these curved edges on the text here now as well.

We can just click in the top right on this sort of blue properties panel. We can then close the panel and we can scroll around and change other stuff as well. Let's say we wanted to change this box right here, click into properties.

We can scroll around and change whatever we want. We can move around on the canvas so we can see this more clearly. But, of course, we can change this color once again to whatever.

We wanna change this color too. We can change the radius of this to 50 as well. Okay.

So now you know how to create the design canvas with multiple different variations and individually up those variations as well. But now how do we actually turn this into a fully functional website that Claude is going to take the design of and then code and put on a website? Well, that's exactly what I'm about to go through.

So stay tuned. Keep watching the video because this is gonna be the best part of the video. Okay.

So at this stage, this artboard that I've updated is called zero three a. I'm now gonna mention to Claude that this is the design that I would like to move forward with, and I'm gonna go ahead and tell it to locally run this web page. Hey, Claude.

I've just made some modifications to the o three a artboard. This is the one that I wanna move forward with. If you could now locally host this on my computer so I can view this website, play around with it, and make sure that it's exactly perfect before I go ahead and host this.

But do make sure that this is a fully functional website. I do wanna make sure that it is all working properly with all the links and any animations, uh, etcetera. Okay.

So I've just mentioned exactly what I want. I wanna run it locally first. I don't wanna get this pushed off to a server yet, but it is as simply telling it exactly the artboard that you've edited.

Just tell it to host that, and we'll see what exactly happens. And once again, just to compare this to what the process was before on Claude design, we would now have to be exporting this design from Claude design. We'd have to be uploading it into our instance of Claude code here.

It would have to then understand exactly what this design is, and only then would it be able to then locally host it. But if we wanted to make any changes to that design, we would kinda be stuck. We'd have to go back to Claude design, make any updates, create different variations, take them back, give it back to Claude.

It's really a bit of a mess around, but you'll see in just a second that this is gonna host itself locally, and we're still gonna be able to make modifications and updates to the design on the canvas and have it updated in the live version. Okay. So here we go.

It's now giving us back a local host link. And if I go ahead and visit this site on my browser, you'll see that we've got the page back right here all running and functional, and you can see we've got buttons. And if we click into these buttons, we can see they actually work.

So this is a functional website now running on this page. Now one thing that you might notice is that the updates that we made on the canvas actually didn't update. You can see that we didn't get the color change here or the color change here.

So that is one thing I'm gonna come back to Claude and ask what happened there. Once again, not exactly sure what happened and why it didn't change, but I'm gonna send this through and we'll see what changes. Okay.

So I managed to get this working now and we got both of these elements have now updated. The one thing that I forgot to do is just to save the canvas right here. So in the top right, you'll see this save button.

Once you've made any changes, just make sure to hit the save button in the top right. Otherwise, the agent won't see the new changes, of course. Once you get saved, you'll see the new changes and it will reflect it and it will reflect it in the live site.

But we can now see on the web page, it's all running. We've got the new text elements updated as well, and it should be all good to go. If you're interested in learning how to use Claude two design logos and professional brand kits, check out this video right here where I go through step by step exactly how I did that.

The Hook

The bait, then the rug-pull.

Claude Code just got a native design canvas, folding what used to be a separate browser-based tool directly into the coding workspace. This walkthrough shows the fix in real time: generate five distinct designs at once, hand-edit the one you like, and ship it as a working site without leaving Claude Code once.

Frameworks

Named ideas worth stealing.

05:29list

Five Design Directions

Editorial broadsheet
Brutalist poster
Terminal
Aurora glass
Swiss spec sheet

Five deliberately distinct visual styles Claude generated for the same personal bio site in one pass: a print-inspired broadsheet with a serif masthead, a high-contrast poster with hard offset shadows, a dark terminal/shell-session look, a dark atmospheric glass style with gradient mesh, and a light, grid-ruled spec-sheet layout.

Steal forKicking off any new site or landing page with several genuinely different creative directions instead of iterating on one safe default.

CTA Breakdown

How they asked for the click.

VERBAL ASK

06:36subscribe

“if you've liked what you've seen as much as I have, please subscribe to the channel down below”

Soft mid-video ask placed right after the free variations demo and right before the higher-value 'how to edit colors' section, framed as a reward for value already delivered rather than an opening ask.

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.

OTHER LINKSAlso linked in the description.