Transcription
Claude just dropped Claude Design 2.0 and it basically turns you into a one-person design team. Landing pages, pitch decks, working dashboards, all on brand, no Figma, no code. And I built all three in the last hour. And I'm going to show you exactly how.
Now, if you were one of the people that tried Claude Design when it first came out, then there's a good chance you quit after about 10 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. Every 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. Now, 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.
Now, 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. The link is down in the description below. But right now, let's get into it.
Now, wait, before we hop over to the PC, we need to discuss a few things. So, four things have changed and let me go through everything.
Number one, shared usage pool. Claude Design no longer has its own separate limits. It 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. So 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.
And 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 codebase, Figma file or GitHub repo, and every screen is automatically on brand.
Now 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. So 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.
Now 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.
Now 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. Consistency is always automatic.
So, let me set up one for our fragrance brand. We're going to be calling it Lumiere. I hope that you guys like that. If you do, let me know down in the comments down below. And there are a few ways in here. Okay, so you can connect a Figma file, you can link a GitHub repo, or you can just upload assets. So, I'm going to add all my assets. And there it is. Okay. So, deep burgundy, cream, set of type, gold accent. Now, that's what I associate with Lumiere. Every build from here uses exactly this. Now, I don't have to describe it or ever have to reexplain it. It'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. Okay, so let's put these features to work. First, we are building a landing page for Lumiere. And we are not going to be stopping at a mockup. We 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. But 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. First 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. Now, 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. Okay. So, I'm going to go with this first hero, but I want to change the tagline. So, 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.
Now, 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. It adjusted the whole section from that one note.
Now, let us make this all the real. So, I'm exporting this as a standalone HTML file and I'm dropping it straight into Vercel. And here it is a live URL on the internet right now. Anyone watching this can literally open it. Okay, so that is the difference between a mockup and a product and that is what Claude Design 2 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. So, I'm going to 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. Build a five slide brand pitch deck for Lumiere. Slide one, brand story, and founding vision. Slide two, the product line. Slide three, target, market, and positioning. Slide four, traction, and early numbers. Slide five, the ask. Use the Lumiere design system.
And here's the deck. Dark burgundy backgrounds, cream set of headlines, gold accents on the data points. It's state from the design system. And this looks like a real deck, not just some template that we found. But here's the part that most people do not expect. Look at the speaker notes on slide one. Claude did not write generic filler. It 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. Writing those out by hand used to be its own little chore every time I built a deck. Now it just happens.
Now I'm going to go into present mode and I'm going to make it full screen. And now slides advance on click and the speaker notes are right there alongside the slide. Now 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 8 minutes.
Now, moving on to use case three and this one is the money shot. We are going from design to working app in one session. I'm going to build a sales and inventory dashboard for Lumiere. And by the end of this segment, it's going to be connected to a real database with real data populating it. Okay, so here is the prompt. Build 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. A recent order table, dark mode toggle, use the Lumiere design system, and give me two layout versions. Okay.
There we go. Now, 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. Now, that works out of the box. There's no prompt needed, and I'm going to be going with this one. Okay, so right now, this is beautiful, but it is pretty static. The numbers are made up. The table is a markup and we need to make this real.
So this is where the Claude code handoff changes everything. One click Claude Design generates a full prompt with the design context, the annotations and all of it and it sends its state to a new Claude code session. Now Claude 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. The full context is right there.
Now, what I'm going to do is tell Claude Code to wire this to Superbase and I'm going to 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. And as you can see there, it is real numbers, a real table, real database behind it. This wind film a prompt to a working app in just one session and that is the full workflow. Design in Claude Design ship to Claude code wire the backend and then we did all of that in about one session.
Now before we wrap up since you stayed till the end here are three quick tips for you.
Okay tip number one switch models to save usage. You do not need Opus 4.7 for everything. Use Opus for your big generator, okay? The one where quality really matters. Then 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. Do not reprompt. 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. Do those directly on the canvas. It's free, it's instant, and you are going to save your prompts for the things that actually need AI. Okay.
Now, tip number three, branch before you explore. Claude Design has no undo button. If you want to try a completely different direction, different layout, different color treatment, anything big, then tell Claude first. Say, 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.
So, here is where we landed. Okay, Claude Design 2.0 fixed the usage limits. It added real canvas editing. It made brand consistency automatic and it connected the design to code workflow in a way that actually makes sense. It went from 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.
All the palms filmed 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 now in the description below. The design system guide is also there. So, go over and join the other 29,000 members that are currently over there. And 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. And as always, I'll catch you on the next one.