Big Idea

The argument in one line.

Claude's /design command builds real, editable websites from a single prompt, and organizing work in per-client folders while generating multiple creative directions turns it into a repeatable professional workflow instead of a one-off novelty.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

Someone who designs websites, brand assets, or client work and wants a faster path from idea to an editable design file.
A freelancer or agency owner juggling multiple client projects who needs a repeatable, organized design workflow.
Anyone curious what the new /design (Claude Design) feature inside Claude's desktop app and terminal can actually build.

SKIP IF…

You need custom illustration, animation, or pixel-perfect production work outside what Claude Design natively generates.
You're looking for prompt-engineering theory rather than a direct walkthrough of the Claude Design interface.

TL;DR

The full version, fast.

Claude Design, the AI tool inside Claude's desktop app and terminal (accessed with /design), now builds entire websites, design systems, and brand assets from a single prompt, and every element it generates stays fully editable afterward, similar to editing layers in Figma. The video walks through three levels of use: build one website from a folder containing a product image and copy, build a reusable design system from a single reference image so the same look drives every future asset, and generate several distinct creative directions on one canvas so a human picks the strongest option instead of settling for the first result. Organizing work in one folder per client keeps each project's design system self-contained and reusable.

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 – 00:25

01 · Claude Design Killed Figma

Cold open: the claim that Claude Code just killed Figma, and a promise to show three ways to build with Claude Design.

00:25 – 00:33

02 · How to Access Claude Design

In the desktop app, typing /design opens Claude Design directly, no browser required.

00:33 – 01:19

03 · What Claude Design Can Build

Claude Design can build mobile apps, presentations, animations, full websites, and Instagram carousels, plus design systems that lock in type, color, and components for a repeatable brand.

01:19 – 01:33

04 · How to Set Up Folders

Starting the project from inside a dedicated folder on the computer gives Claude Design file access to product images and references for that project.

01:33 – 01:55

05 · How to Organize Client Projects

Separate folders per client or project keep each design system self-contained, so multiple brands never mix inside one file.

01:55 – 01:59

06 · How to Choose Your Model

The demo runs on the Fable 5 model, chosen for being the most creative thinker of the available options.

01:59 – 02:27

07 · How to Add Product References

A real skin-cream product is found via Google, its image saved into the project folder, and its product page copy copied for use as prompt material.

02:27 – 02:53

08 · Level One: One-Prompt Website

Typing /design with a request to build a website for the product in the folder, plus pasted product details, produces a full desktop and mobile homepage in minutes.

02:53 – 03:20

09 · How to Edit Designs Manually

Clicking any element in the finished design opens direct manual editing (font, size, weight, alignment), the same kind of control Figma offers.

03:20 – 04:08

10 · How to Add Tweak Controls

Asking Claude to suggest tweak controls generates a list of viable user-facing adjustments, like an accent-color swatch and a dark-mode toggle, which can then be added and demoed live.

04:08 – 04:19

11 · How to Export Your Design

Finished designs export as PNG, PDF, or a full HTML zip, downloadable per-artboard or as a complete set.

04:19 – 04:28

12 · Level Two: Design Systems

Introduces building a standalone design system as the next level beyond a single generated page.

04:28 – 05:47

13 · How to Use Reference Images

A reference image pulled from Dribbble is pasted into a prompt asking Claude to build a design system HTML from it, then a V2 of the site is generated to fit that new system.

05:47 – 06:45

14 · Level Three: Multiple Versions

Prompting for two more site versions with different copy and layout, shown together on one artboard, produces three distinct creative directions to choose between.

06:45 – 07:16

15 · How to Share With Teams

Because every version stays live and editable, a team can open the same file, propose edits, and give feedback before a final direction is chosen; closes with the Skool community and masterclass pitch.

Atomic Insights

Lines worth screenshotting.

Claude's /design command, once browser-only, now builds and edits websites, design systems, and brand assets directly inside the desktop app and terminal.
Every element Claude Design generates stays individually editable afterward: font, size, weight, and alignment, the same way layers work in Figma.
Structuring work as one folder per client keeps each project's assets, product images, and design system self-contained and reusable.
A single prompt with a product image and a paragraph of copy is enough for Claude Design to produce a complete desktop and mobile homepage.
Claude Design can suggest its own 'tweak controls,' like an accent-color swatch picker or a dark-mode toggle, when asked, without the user specifying which controls make sense.
Feeding Claude Design one reference image from a site like Dribbble is enough for it to extract a usable design system: color palette, type pairing, and component set.
A design system built once in a project folder can be reapplied to build additional assets, new site versions, carousels, or slide decks, without rebuilding the visual language from scratch.
Asking for several distinct versions of the same site with different copy and layout in one request produces genuinely different creative directions, not just color variations of one design.
Finished Claude Design files export as PNG, PDF, or a full HTML zip, downloadable per-artboard or as a complete set.
Every generated design version stays shareable and editable by teammates, so feedback happens inside the same live file instead of on a static exported image.

Takeaway

Three levels turn a one-prompt design tool into a repeatable workflow.

CLAUDE DESIGN WORKFLOW

Claude Design's real value isn't the first one-prompt website. It's structuring folders, feeding it reference images, and asking for multiple directions so every later asset builds faster and stays consistent.

02How to Access Claude Design

Claude Design, previously browser-only, is now reachable directly from the Claude desktop app or terminal by typing /design.

03What Claude Design Can Build

Claude Design can produce mobile apps, presentations, animations, full websites, and Instagram carousels, not just static mockups.
A design system built once in Claude Design lays out type, color, and reusable components so a brand stays visually consistent across every asset built from it.

04How to Set Up Folders

Starting a Claude Design project from inside a dedicated folder on the computer gives Claude direct file access to product images and reference material for that project.

05How to Organize Client Projects

Separate folders per client or project keep each design system self-contained, so multiple brands never bleed into the same file or color palette.

06How to Choose Your Model

Trying a more creative-leaning model for design work can produce more original layout and copy choices than a default model.

07How to Add Product References

Saving a product photo directly into the project folder gives Claude Design the visual reference it needs to build a homepage around a real product, not a generic placeholder.

08Level One: One-Prompt Website

A single prompt naming the product folder plus a short paragraph of product details is enough for Claude Design to generate a complete desktop and mobile homepage in a couple of minutes.
The generated homepage arrives with real copy, the actual product image, and working CTA buttons already placed, not a wireframe needing manual assembly.

09How to Edit Designs Manually

Every element in a Claude Design output is individually clickable and editable afterward: font, size, weight, and alignment can all be adjusted directly in the interface, similar to editing layers in Figma.
Manual editing is optional. The same changes can be requested back through a plain-language prompt instead of clicking through the interface.

10How to Add Tweak Controls

Asking Claude Design to suggest tweak controls generates a list of plausible user-facing adjustments, like an accent-color swatch or a dark-mode toggle, without the user having to specify what controls make sense.
Once added, tweak controls let a non-technical viewer restyle a finished design without writing a single prompt or touching code.

11How to Export Your Design

A finished design can be exported as a PNG, a PDF, or a full HTML zip file, either per-artboard or as one complete downloaded set.

13How to Use Reference Images

Claude Design responds strongly to references. Giving it a single visual example to imitate produces stronger, more specific output than describing a style in words alone.
A generated design system is saved inside the same project folder, so it can be reapplied later to build new websites, carousels, or slide decks in the identical style.
Pulling a reference image from a site like Dribbble, Behance, or Pinterest and pasting it into the prompt is enough for Claude Design to extract a usable color palette, type pairing, and component set from it.
Once a design system exists, a follow-up prompt referencing it restyles an already-built design to match it, rather than starting over from scratch.

14Level Three: Multiple Versions

Prompting for several versions of the same site with different copy and layout in a single request produces genuinely distinct creative directions, not just color variations of one design.
Generating multiple directions up front turns the human's role into choosing the strongest option rather than being locked into whatever the first output happened to be.
Every generated version stays as editable as the level-one and level-two work. Font, copy, and layout remain fully adjustable per version.

15How to Share With Teams

Because every version stays live and editable rather than exported as flat images, a whole team can open the same file, propose edits, and leave feedback before a final direction is chosen.

Glossary

Terms worth knowing.

Claude Design: An AI design tool built into Claude's desktop app and terminal, invoked with the /design command, that generates and edits websites, presentations, and brand assets from a prompt.
Design system: A single reusable set of colors, fonts, and components that keeps every design built from it visually consistent across a brand.
Tweak controls: User-facing sliders and toggles Claude Design can add to a finished design, such as an accent-color picker or a dark-mode switch, so a design can be restyled without editing prompts or code.
Artboard: One individual canvas or page inside a Claude Design project, such as a desktop layout, a mobile layout, or one version in a multi-version set.

Resources

Things they pointed at.

00:00productLearn Claude Code (Skool community) ↗

04:30toolDribbble ↗

04:31toolBehance

04:32toolPinterest

01:59productAsarai — Earth Tones Brightening and Detox Mask (demo reference product)

Quotables

Lines you could clip.

00:00

“Claude Code just killed Figma.”

bold cold-open claim, no setup needed→ TikTok hook↗ Tweet quote

02:39

“If you open the side panel over here and you click on anything, you can literally edit the entire file inside of Claude Code.”

states the core value proposition plainly, mid-demo→ IG reel cold open↗ Tweet quote

05:33

“But this is where most people stop.”

short, sets up the payoff of going further→ 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.

Claude Code just killed Figma. Claude Design is now available in the desktop app and the terminal, but most people are using it wrong. So on this video, I'm going to show you how to use Claude Design to build entire design systems, build beautiful websites, and a couple of tricks that I have learned to supercharge the way that you use Claude Code so you can stay ahead of everyone else.

So focus in, close all your open tabs, and let's build. So we're inside of the desktop app. And if you're on the latest version, all you have to do to access cloud design is type in slash design and you can literally build.

anything. So if you don't know what cloud design is, up until recently, you had to access cloud design through the browser. And cloud design is basically a cloud tool that allows you to design literally anything.

You can build mobile apps, you can build presentations, you can use it for animations, entire websites, Instagram carousels, you name it. You also can use it to build what's known as a design system, which lays out all of your type, all of your fonts and colors, and basically anything that you need to build a repeatable brand.

But now you can actually access all of this functionality inside of the desktop app, which makes it way more powerful. So today I just kind of want to show you how to build your own design systems, how to build beautiful websites, and then how you can actually take that one step further. And I'm even going to give you three different levels for building with cloud design.

So the first thing that you want to do is you want to just make sure that you're inside of a folder on your computer. So I'm just going to go over to the desktop and I'm just going to call this design. And now one question that I get from a lot of people is like, what if I'm doing.

this for multiple clients or multiple projects or I have multiple designs. The best way to do that is you can just create separate folders. You can name this client one and you can put your first design system inside of here and then you can make a new folder and you can call this client two or design two and you can make a whole separate design system and put it in a separate folder.

So now you have different systems for different projects. So I'm going to come into this client one folder and I'm just going to click open and now we can start building. I'm gonna be doing this today using the Fable 5 model just because it's the most creative thinker.

So I wanted to just try this like if I was an e -com brand. I'm just gonna search skin cream on Google and I found a couple of options. I thought this one is fun.

It's got this nice bright yellow color. So I'm just gonna open up this page and we're gonna build an entire website for this brightening and detox mask. So I'm just gonna go ahead and save this image and I can save this in this same client folder and now Quad Code has access to our core product.

So I'm just going to copy all of this and we're just going to use this as information for cloud code. So level one, all you have to do is type in slash design and I'm just going to say, build me a beautiful website for the product in the folder. Here are some details about it.

I'm going to paste in those details and then I'm going to hit enter. So pretty incredible. In just a couple of minutes, Cloud Code built this entire homepage, both the desktop and mobile version for our skin cream product.

It has all of our copy. It has the actual product image. It has some CTA buttons and things like that.

But why did I say that Cloud Code just killed Figma? Well, if you open the side panel over here and you click on anything, you can literally edit the entire file inside of Cloud Code. You can edit the font, the sizes, the weights.

You can make it center. or right justified, like anything that you can do in Figma, you can pretty much do in here now. If you don't want to bother doing anything manually, you can always go back to quad and just say, hey, I need you to change this.

You may notice this other feature up here called tweaks, which basically has some additional user controls that allow you to change your design. If you don't know what type of tweaks you might want to make, you can just come into quad and you can say, suggest some tweak controls for me that I can add to this design. So it suggested a couple of controls like the accent color where I can change this yellow to be something else, a dark mode toggle that will flip the page to dark mode.

It suggests that we add one and two. So let's just say. Yes, add those too.

So check this out. Now I can easily change this accent color to something like blue. We have all of these swatches that it thinks are going to naturally look good.

Or if I want, I can just hit this toggle and flip everything to dark mode. And if you are happy with this design, you can just click this arrow here to download it as a PNG, a PDF, or an HTML zip file. You can either save just the desktop or mobile version separately, or you can click this to download all of the artboards as a PDF.

But what if we... want to take this one step further. And this brings me to level two.

So level two is using that thing I showed you in the beginning, a design system. So let me show you how you can create your own design system in just a couple of minutes. Now, Claude code.

absolutely loves references. So I recommend you come over to a site like Dribbble .com. You can go to Behance.

You can do something like Pinterest. And if you just come into Explore, you can go into Web Design and you can take a look at any of the options. And I scrolled through here.

You can find something that you like. And I thought this one was really interesting because obviously it's heavily product focused. And so what you can do is you can just copy an image like this.

You can come back into Quad Code. You can paste this in. You can just give it a prompt like this.

Create a design system HTML. based on this reference, then create a V2 of our Asari website to fit the system. So check this out.

The first thing that it did is it built this beautiful botanical design system for us. It gave us our entire color palette, all of our fonts, this cool little highlighted text mixed with this scripted font, a couple of the different components and buttons and things that we use, which is really incredible. And what's super cool about this is this actually lives inside of the folder we created in the beginning.

So if you wanted to use the same design system to create another website or those Instagram carousels or a slide deck or whatever, Now you can use this over and over again to keep a consistent brand. And if we go back to the canvas, we can see we created new versions of our desktop and mobile sites in this new style, which is awesome.

I love how this looks. This is super fun. But this is where most people stop.

And now let me show you level three, which is the real power of quad design. Now I gave quad code the prompt, make me two more versions of the site. They should have different copy and different layout.

be creative. Show all three desktop versions on a single artboard because now you don't have to just settle for the first thing that cloud code creates. You can actually let it think super creatively, create different versions of a site with different messaging for your audience.

And now you as the human can choose which one you think is going to resonate the most. And now in just a couple of minutes, we have three completely different directions for the site. They each have different headlines and different messaging to target different audience or different pain.

points, different visuals to maybe attract different types of viewers. And remember that if we open up this side panel, every single version of this site is still editable. You can go in here, you can change the copy, you can change the font size and colors, all of these things.

And if you're someone who is working on a team, it actually gets cooler because now you can create all of these different design directions. You can share it with your boss or your manager, your other team members. They can come in, they can make edits, they can provide feedback so you can get the best possible version.

of your site. If you wanna learn how to use Cloud Code to build websites, apps, games, and more, and get access to all my resources already built for you, just check the link in the description. If you wanna go deeper on building beautiful websites that convert using Cloud Code, check out this entire masterclass right here.

I'll see you over there.

The Hook

The bait, then the rug-pull.

The claim up front is that Claude just killed Figma. What follows is a straightforward demonstration of why: a walkthrough of /design, Claude's built-in design tool, taken from a single generated homepage to a reusable brand system to several competing creative directions generated in one pass.

Frameworks

Named ideas worth stealing.

02:27model

The Three Levels of Claude Design

Level One: build a website from a single prompt
Level Two: build a reusable design system from a reference image
Level Three: generate multiple creative directions on one canvas

An escalating progression from a one-off generated page to a reusable brand system to several parallel creative directions a team can choose between.

Steal forstructuring any tutorial that demonstrates a build-out progression from simplest use case to full workflow

CTA Breakdown

How they asked for the click.

VERBAL ASK

07:00link

“If you want to learn how to use Claude Code to build websites, apps, games, and more, and get access to all my resources already built for you, just check the link in the description.”

verbal sign-off pitch to a paid Skool community ($9 per the description) plus a link to a deeper paid masterclass, no on-screen graphic captured in the sampled frames

MENTIONED ON CAMERA

00:00productLearn Claude Code (Skool community) ↗

04:30toolDribbble ↗

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.