Big Idea

The argument in one line.

Claude Design 2.0 turns AI design from a one-shot token gamble into a real workflow by sharing usage across products, letting you edit directly on canvas instead of re-prompting, and locking every output to an imported brand design system.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You build landing pages, decks, or dashboards for yourself or clients and want AI output that looks on-brand instead of generically AI-made.
You tried Claude Design (or a similar AI design tool) early, burned through a usage limit fast, and gave up.
You want a single AI workflow that goes from a design mockup to a working, database-connected app without re-explaining context to a second tool.

SKIP IF…

You already have a mature Figma-to-code pipeline and a design team — the value here is mainly for solo builders without one.
You need pixel-perfect custom design work; this is a fast-draft tool, not a replacement for a hired designer on brand-critical work.

TL;DR

The full version, fast.

Claude Design's first version had its own separate, easily-exhausted usage pool and no way to make small edits without burning a prompt, so outputs often looked generically AI-made. Version 2 fixes this: it now draws from the same shared usage pool as Claude, Code, and Cowork, adds direct canvas editing (click an element, type or drag, no prompt spent), lets you import a real design system from Figma, GitHub, or uploaded assets so every new screen matches your brand automatically, and adds a two-way handoff to Claude Code so a finished design can be wired to a real backend without re-describing it. The video proves this by building a landing page (deployed live to Vercel), a five-slide pitch deck with AI-written speaker notes (exportable to PowerPoint), and a SaaS dashboard connected to a live Supabase database, all against one imported brand system, in a single session.

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

01 · Intro / why v1 failed

Recaps Claude Design 1.0's separate usage pool, per-tweak token cost, and generically off-brand output that made early adopters quit.

01:29 – 02:37

02 · What's new in 2.0

Four changes: shared usage pool, canvas editing, design-system import from Figma/GitHub/assets, and two-way Claude Code handoff.

02:37 – 04:05

03 · Setup Design System

Creator explains why importing a design system first is the single biggest quality lever, then builds one for the fictional brand Lumiere from uploaded assets.

04:05 – 06:03

04 · Use case 1 — landing page

Builds a Lumiere landing page from a structured prompt, compares hero directions, edits the tagline and product spacing via canvas/comments with zero extra prompts, exports as HTML and deploys live to Vercel.

06:03 – 07:51

05 · Use case 2 — pitch deck

Generates a five-slide brand pitch deck with AI-written, slide-specific speaker notes, runs it in present mode, and exports it to a native PowerPoint file.

07:51 – 10:11

06 · Use case 3 — dashboard + Claude Code handoff

Builds a SaaS sales/inventory dashboard, then hands it off to a new Claude Code session with full context to wire it to a real Supabase database with live tables and KPI data.

10:11 – 11:41

07 · Pro tips

Three tips: switch from Opus to Sonnet for refinements to save usage, prefer free/instant canvas edits over re-prompting, and explicitly save state before trying a different direction since there is no undo button.

11:41 – 12:43

08 · Outro

Recaps the fixes, points to the free Skool community for prompts and the design system guide, and asks for a subscribe/like.

Atomic Insights

Lines worth screenshotting.

Claude Design 1.0 had its own separate usage pool from other Claude products, so most users burned through it in a handful of prompts before quitting.
Version 2.0 draws from the same shared usage pool as Claude, Claude Code, and Cowork, removing the separate hard limit that killed early adoption.
Every manual tweak in v1 cost a full prompt against the token budget; v2's canvas editing lets you click, type, drag, resize, or adjust color with zero tokens spent.
Importing a design system before generating anything is described as the single biggest quality lever — skip it and every screen is guessed and inconsistent; do it and every screen pulls the same real colors, fonts, and components.
A design system can be built three ways: connecting a live Figma file, linking a GitHub repo, or simply uploading brand assets.
Claude Design can generate multiple hero-section directions at once so you compare options without spending a second prompt to regenerate.
Inline comments work like design feedback: click an element, type a note like 'tighten the gap between product cards,' and Claude applies just that fix.
A design built in Claude Design can be exported as a standalone HTML file and deployed directly to Vercel from inside the same session, going from mockup to a live public URL.
The AI-generated speaker notes for a pitch deck reference the specific content of each slide rather than generic filler, saving what the creator calls 'its own little chore every time.'
A generated deck can be exported to a native PowerPoint file with one click, covering the case where a client insists on PowerPoint.
The two-way Claude Code handoff sends a finished design to a new Claude Code session with full context attached, so the coding session does not need the design re-described or screenshotted.
In the demo, Claude Code wired a generated dashboard to a real Supabase database, creating products, orders, and customers tables with sample data and pulling live numbers into the KPI cards, in the same working session as the design step.
Recommended model strategy: use the larger model (Opus) for big first-draft generations where quality matters most, then switch to the smaller model (Sonnet) for refinements, tweaks, and comment-based fixes to conserve usage.
Claude Design has no undo button, so before trying a substantially different direction the recommended move is to explicitly tell Claude to save the current version before generating an alternative.
Canvas edits (text, spacing, color) are framed as free and instant compared to prompt-based regeneration, which costs both tokens and generation time.

Takeaway

A brand design system is what separates AI drafts from real output

WHAT TO LEARN

Importing a real design system before generating anything is the single lever that turns generic AI output into something that looks like an actual brand, and pairing that with canvas edits instead of re-prompting stretches a limited usage budget much further.

Loading a real design system (from Figma, a GitHub repo, or uploaded brand assets) before generating anything forces every subsequent output to reuse the same colors, fonts, and components instead of being guessed fresh each time.
Small fixes — text changes, spacing, color — are cheaper and faster done as direct manual edits than as a new AI prompt, so save prompts for the changes that actually need generation.
When usage is shared across a limited pool, matching model size to task size (a larger, more capable model for big first drafts; a smaller one for refinements) meaningfully extends how far that budget goes.
Before attempting a significantly different direction on an AI-generated asset, explicitly preserving the current version first avoids losing acceptable work if the new attempt doesn't pan out.
AI-generated supporting material (like presentation speaker notes) is most useful when it's specific to the actual content in front of it rather than generic filler, so the same content-specificity is worth demanding from any AI writing tool.
A generated design and a generated codebase communicating with full shared context — rather than one being re-described or re-explained to the other — removes a common source of drift between a mockup and the working product.

Glossary

Terms worth knowing.

Design system (in Claude Design): A saved set of a brand's colors, fonts, and component styles that Claude Design references automatically on every new screen, instead of guessing the brand each time.
Canvas editing: Directly clicking and modifying an element (text, position, size, color) inside the generated design without sending a new AI prompt.
Claude Code handoff: A one-click transfer of a finished design, along with its full design context and annotations, into a new Claude Code session so it can be turned into working, connected software.
Supabase: A hosted database and backend platform used in the video to give a generated dashboard real, live data instead of static mock content.

Resources

Things they pointed at.

01:16linkAI Launchpad (Skool community) ↗

15:29toolSupabase

Quotables

Lines you could clip.

00:00

“Claude just dropped Claude design two point o, and it basically turns you into a one person design team.”

clean cold-open hook stating the whole value prop→ TikTok hook↗ Tweet quote

02:42

“If you skip it, then your outputs look like AI made them. If you do it, then they look like a real brand.”

tight before/after contrast about the design-system step→ IG reel cold open↗ Tweet quote

11:25

“Claude design has no undo button... save what we have and try a completely different approach.”

concrete, actionable warning with a workaround→ 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.

metaphoranalogy

00:00Claude just dropped Claude design two point o, and it basically turns you into a one person design team, landing pages, pitch decks, working dashboards, all on brand and no Figma, no code, and I built all three in the last hour. And I'm gonna show you exactly how.

00:17Now if you're one of the people that Tideclaw designed when it first came out, then there's a good chance you quit after about ten minutes, and that was the right call. Version one had brutal usage limits on a separate token pool. Most people burned through it in a handful of prompts.

00:34Every tweak cost you a prompt and nothing stayed on brand. So everything came out looking slightly off, slightly like AI made it, and that's the version that people walked away from. Now version two fixed all of that, and also it added a real workflow on top.

00:54Now in today's video, I'll show you what's new, the one setup step that changes everything, and then there's three real builds for a fragrance brand called Lumiere. And with it is a landing page, a pitch deck, and a dashboard that we wire to a real database.

01:10Now one quick thing before we get started, every prompt that I use in this video plus the full design system guide, all of it is in our free school community. There are 29,000 builders that are already over there and you should be joining them.

01:24The link is down in the description below. Right now, let's get into it. Now wait, before we hop over to the PC, we need to discuss a few things.

01:32So four things have changed and let me go through everything. Number one, shared usage pool. Claw design no longer has its own separate limits.

01:40It draws from the same pool as chat, code, and co work. There's no more hitting a wall after just two prompts. Then number two, there's canvas editing.

01:49So you can click any element and you can edit it directly. You can change the text, you can drag, resize, adjust color with a slider, no prompt, no token.

01:58And then we go over to number three, that is the design system import. You can pull your real brand, the colors, the type, the components from a real code base, Figma file, or GitHub repo, and every screen is automatically on brand.

02:13Now number four is the two way Claude code handoff. Send any finished design to Claude code with full context, no screenshot, and push changes back to the canvas.

02:25So design and code finally talk to each other. So those are the four, but knowing what changed and knowing how to use it are literally two totally different things. Now, let me show you starting with the one step that makes the biggest difference.

02:42Now, this one step is the single biggest quality lever in Claude design. If you skip it, then your outputs look like AI made them. If you do it, then they look like a real brand.

02:54Now first things first, we need to set up our design system. Without one, every project starts from scratch and it basically just guesses your brand. So every screen comes out slightly different if we go down that route, but if we have one loaded, then Claude pulls your actual colors, fonts, and button styles before it writes a single line of code.

03:13Consistency is always automatic. So let me set up one for our fragrance brand.

03:19We're gonna be calling it Lumiere. I hope that you guys like that. If you do, let me know down in the comments down below.

03:25And there are few ways in here. Okay? So you can connect a Figma file, you can link a GitHub repo, or you can just upload assets.

03:34So I'm going to add all my assets and there it is.

03:38Okay? So deep burgundy, cream set of type, gold accent.

03:43Now that's what I associate with Lumiere. Every bold from here uses exactly this. Now I don't have to describe it or ever have to re explain it.

03:53That's always just going to be there. Now this one step is what separates a generic output from a real brand asset. Now let's actually start building something.

04:04Okay? So let's put these features to work. First, we are building a landing page for Lumiere, and we are not gonna be stopping at a mock up.

04:13We are actually going to be deploying this live. So here's the prompt that I'm going to be using and you can simply just copy the exact version from the free school community. Link is down in the description below.

04:23But the key elements are what the brand is, what the page is for, what sections you need, and a note to stick to the design system. Okay. Now I want you to take a look at this.

04:36First thing that I'm noticing over here is the colors are right, the fonts are right, the spacing feels premium. Claude didn't guess the brand. It actually read it from the design system and it applied it.

04:47Now we've got a couple of hero directions here to compare. This is this is huge because now I can pick between them without prompting twice.

04:58Okay. So I'm gonna go with this first hero, but I want to change the tagline.

05:05So now take a look at this. No prompt, no token. I just clicked and I typed and that is the canvas editor working exactly the way it should.

05:17Now let me use one inline comment to fix the spacing on this product section. I'll click on top of it and I'll drop in a comment, tighten the gap between product cards and then send it to Claude and there we go.

05:31I'd adjusted the whole section from that one note. Now let us make this all a deal. So I'm exporting this as a standalone HTML file and I'm dropping its state into Vercel and here it is.

05:47A live URL on the Internet right now. Anyone watching this can let me open it. Okay?

05:53So that is the difference between a mock up and a product, and that is what Claw Design two makes possible in just one session. Now next up, we are building a pitch deck for Lumiere. And after this, I genuinely think that you will not open PowerPoint ever again.

06:11So I'm gonna make sure that speaker notes are toggled on. And this is important and I'll show you why in a second. So here's the prompt.

06:19Build a five slide brand pitch deck for Lumiere. Slide one, brand story and founding vision. Slide two, the product line.

06:27Slide three, target market and positioning. Slide four, traction and early numbers.

06:33Slide five, the ask. Use the Lumiere design system.

06:37And here's the deck. Dark burgundy backgrounds, cream set of headlines, gold accents on the data points, a state from the design system, and this looks like a real deck, not just some template that we found.

06:53But here's the part that most people do not expect. Look at the speaker notes on slide one. Claude did not write generic filler.

07:03It wrote notes that reference the specific brand story on that slide. The founding vision, the sensory positioning, these are actual talking points that I can use.

07:15Writing those out by hand used to be its own little chore every time I bolt a deck. Now it just happens. Now I'm gonna go into present mode, and I'm gonna make it full screen.

07:26And now slides advance on click, and the speaker notes are right there alongside the slide.

07:32Now this is the core functionality of PowerPoint inside Claude design. And if my client needs a PowerPoint file, because let's be honest, they almost always do, Just one click over here, PowerPoint file, and it is done. Slide deck in about eight minutes.

07:50Now moving on to use case three, and this one is the money shot. We are going from design to working app in a one session. I'm going to build a sales and inventory dashboard for and by the end of the segment, it's going to be connected to a real database with a real data populating it.

08:08Okay. So here is the prompt, bold a SaaS dashboard for Lumiere, include a sidebar nav with sections for overview, products, orders, and customers, KPI cards at the top showing revenue, units sold, and top product.

08:24A recent order table, dark mode toggle, use the Lumiere design system, and give me two layout versions. Okay. There we go.

08:32Now here's what it built. The sidebar nav, the KPI cards up top, the order tables below, the design system is applied, and the dark mode toggle is already wired in.

08:44Now that works out of the box. There's no prompt needed, and I'm gonna be going with this one. Okay?

08:51So right now, this is beautiful, but it is pretty static. The numbers are made up, the table is a mock up, and we need to make this real.

09:01So this is where the claw code handoff changes everything. One click claw design generates a full prompt with the design context, annotations, and all of it.

09:11And it sends its state to a new claw code session. Now claw code already knows what we built, so I don't need to I don't need to describe it again. I don't have to screenshot it.

09:24The full context is right there. Now what I'm gonna do is tell CloridCode to wire this to Superbase, and I'm gonna say connect this dashboard to Superbase database, and then create a products table, an order table, and a customer table with sample data, pull live data into the KPI cards, and the audit tables.

09:47And as you can see, there it is. Real numbers, a real table, a real database behind it. This went from a prompt to a working app in just one session, and that is the full workflow.

10:01Design in Claude design, ship to Claude code, wire the back end, and then we did all of that in about one session. Now before we wrap up, since you stay till the end, here are three quick tips for you. Okay?

10:15Tip number one, switch models to save usage. You do not need Opus 4.7 for everything. Use Opus for your big generate.

10:26Okay? The one where quality really matters.

10:30Then drop down to Sonnet for the refinements, the small tweaks, and the comment fixes. Do that consistently and your credits go a lot further than most people expect. Tip number two, edit on canvas.

10:44Do not replant every time you fix something with a new prompt, you are burning tokens and you're just adding in generation time, text changes, spacing adjustments, color tweaks.

10:58Do those directly on the canvas. It's free. It's instant and you're going to save your prompts for the things that actually need AI.

11:08Okay? Now tip number three, branch before you Claude design has no undo button.

11:16If you want to try a completely different direction, different layout, different color treatment, anything big, then tell Claude first.

11:24Say, save what we have and try a completely different approach. That way, if the new direction does not work, then you have not lost the version that you liked. This is the tip that will save you the most frustration at the end of the day.

11:40So here is where we landed. Okay? Claw design two point o fixed the usage limits.

11:47It added a real canvas editing and made brand consistency automatic, and it connected the design to code workflow in a way that actually makes sense.

11:59And WinFilm, an experiment to a real design workflow that will save you hours every single week, whether you are building for your own brand, for clients, or for a product that you are shipping.

12:13All the prompts found today's video, every single one of them, all of them are in our free school community. Go and check it out right now. The link is not in the description below.

12:22The design system guide is also there. So go over and join the other 29,000 members that are kindly over there.

12:30And also make sure to subscribe to the channel and also give this video a like since you made it till the end. It helps some more AI enthusiasts see our content. And also check out the other videos on the channel.

12:40And as always, I'll catch you on the next one.

The Hook

The bait, then the rug-pull.

Claude Design's first version burned out most people who tried it — a separate, tiny usage pool that emptied in a handful of prompts, with every small tweak costing another one. Version 2.0 rebuilds the workflow from the ground up, and this video proves it by building a landing page, a pitch deck, and a live database-backed dashboard for a fictional fragrance brand in a single sitting.

Frameworks

Named ideas worth stealing.

01:36list

Four things that changed in Claude Design 2.0

Shared usage pool (draws from the same pool as Claude, Code, and Cowork)
Canvas editing (click, type, drag, resize, color-adjust with no prompt)
Design system import (Figma, GitHub repo, or uploaded assets)
Two-way Claude Code handoff (send design to Code with full context, push changes back)

The creator's framing of what actually changed between Claude Design v1 and v2.

Steal forframing any 'what's new in v2' product-update video

10:01list

Three pro tips for using Claude Design efficiently

Switch models: Opus for big generations, Sonnet for refinements
Edit on canvas instead of re-prompting for small changes
Branch/save state before trying a big new direction — no undo button

Closing usage-efficiency advice aimed at stretching a shared usage budget.

Steal forany AI-tool usage-optimization checklist

CTA Breakdown

How they asked for the click.

VERBAL ASK

01:16newsletter

“Right now, let's get into it... The link is down in the description below.”

Soft CTA repeated three times (hook, mid-video, outro) pointing to a free Skool community for prompts and a design-system guide; no paid product pitched.

MENTIONED ON CAMERA

01:16linkAI Launchpad (Skool community) ↗

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.