15:53Jack Roberts · Tutorial
I Replaced Claude Design - 100% UNLIMITED
How an Apache-licensed local clone removes the weekly cap, unlocks every LLM, and lets you build client work without burning Anthropic credits.
May 1stThe argument in one line.
Claude Design 2.0 stretches credits far enough to be practical, but the real unlock is exporting your design as a zip so you can continue building in any model locally — hitting your limit no longer stops you.
Read if. Skip if.
READ IF YOU ARE…
- You have tried Claude Design before but abandoned it after burning through credits too fast.
- You want to build on-brand slides, decks, or animated prototypes without starting from scratch in Figma.
- You use Claude Code already and want to understand how the Design tool connects back to the codebase.
- You are hitting model limits and want a local, model-agnostic fallback that keeps your sessions alive.
SKIP IF…
- You need a serious production design tool — this is a prototyping and scaffolding accelerator, not a Figma replacement.
- You only work with text-based outputs and have no interest in visual design or presentation assets.
The full version, fast.
Claude Design 2.0 fixes its biggest complaint — credits bleeding too fast — while adding canvas editing, design system imports, and a two-way handoff with Claude Code. The tutorial walks five levels: orienting in the interface, building branded slides from a GitHub design system, scraping live brand identity with Firecrawl MCP, pushing designs back to Claude Code for database wiring, and escaping limits entirely with Open Design — an open-source local version that runs any model, including GLM 5.2 at roughly one-sixth the cost of Opus. The reliable way to hand off work between tools is the zip download, not the direct integration link.
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 →Where the time goes.
00:00 – 00:33
01 · Cold open + channel intro
Hook on Claude Design 2.0 launch, channel credibility (AI startup, Startups.100 2023 badge)
00:33 – 01:07
02 · Five Levels overview
Overview graphic introduces the five-level framework; Budapest setting acknowledged
01:07 – 01:32
03 · What Claude Design is
Sites, apps, prototype decks — runs on Opus 4.8; 1M+ users in week one
01:32 – 02:41
04 · Four big 2.0 changes
Credits go further; import design systems; design-code both ways; canvas editing
02:41 – 04:01
05 · Level 1 — The Interface
Claude.ai web vs desktop app; Design tab opens new window; model selector
04:01 – 06:10
06 · Level 2 — Build in your brand + slides demo
Design systems panel; Slides template; power-design GitHub repo + illustration; LaCroix pitch generated
06:10 – 08:11
07 · Canvas editing + export
Markup annotation; inline text/font edit panel; export to HTML/PowerPoint/PDF; presentation mode
08:11 – 09:15
08 · Level 3 — Live-data connectors
Connectors + MCP pull real copy, images, assets on demand; Firecrawl demo intro
06:58 – 09:15
09 · Firecrawl brand scrape demo
Firecrawl scrapes glaido.com; brand animation generated with logo, waveform, headline
09:15 – 10:16
10 · Design vs Claude Code distinction
Claude Design = interface + export; underlying model is identical to Claude Code
10:16 – 11:43
11 · Level 4 — Design to Code handover
Send to Code (web prompt) vs zip download; zip is reliable; use zip for asset fidelity
11:40 – 12:40
12 · Zip handover fix
Extract zip, hand to Claude Code; any model can continue building from extracted code
12:40 – 13:57
13 · Level 5 — Open Design locally
Open Design GitHub; locally hosted; model selector; no PowerPoint export limitation
13:27 – 14:24
14 · Picking any model + GLM 5.2
Claude Code CLI, Codex, GLM 5.2 at 1/6 Opus cost; green-to-blue demo
14:24 – 15:02
15 · Cost comparison + CTA
Claude Design $20+ vs Open Design + GLM at $0; next video CTA for Claude Code OS
Lines worth screenshotting.
- Claude Design 2.0 uses the Opus 4.8 model underneath — anything you can build in Design, you can build in Claude Code directly.
- Credits going further is the single biggest change in 2.0 — the original burned through tokens so fast that most users quit after the first session.
- Canvas editing lets you fix typos and resize elements without re-prompting, eliminating the token burn of trivial corrections.
- Firecrawl strips HTML noise and returns only text and style tokens, making brand identity scraping dramatically cheaper than passing raw HTML.
- The direct Design-to-Code handover link drops embedded assets; downloading the zip is the only reliable way to move work across tools.
- Open Design is a free, locally-hosted repo that mirrors Claude Design workflow but accepts any model via CLI — no credit limit applies.
- GLM 5.2 benchmarks near Opus 4.8 on design tasks at approximately one-sixth the cost, making it a practical fallback for budget-sensitive sessions.
- Importing a GitHub repo or image as your design system makes AI-generated output stop looking generic — the model inherits your visual rules.
- Claude Design is web and desktop accessible, but the desktop app is recommended — it keeps coding and design environments side by side.
- Exporting as a zip makes the generated code model-agnostic; you can hand it to ChatGPT, Gemini, or any local model to continue.
Five moves that make Claude Design worth using again.
WHAT TO LEARN
Credits going further removes the biggest objection, but the real lesson is that Claude Design is a scaffold, not a destination — and knowing the exit routes is what makes it powerful.
- Importing a GitHub repo or image as your design system is the single step that stops AI design from looking generic — the model inherits your visual rules before generating anything.
- Canvas editing eliminates the biggest hidden cost in AI design: re-prompting for trivial corrections burns context window budget; clicking to fix is free.
- The Firecrawl scrape-to-design pipeline turns any competitor or client website into a design brief in seconds without handing raw HTML to the model.
- The direct Design-to-Claude-Code handover drops embedded assets; downloading the zip and extracting it is the only reliable way to move work between tools.
- Open Design, locally hosted, lets you continue any Claude Design session with a different model when credits run out, including cost-efficient alternatives at a fraction of Opus pricing.
- Claude Design and Claude Code run the same underlying model — the Design interface is a convenience layer, not a capability ceiling; anything buildable in Design is buildable in Code.
Terms worth knowing.
- Design system
- A set of reusable visual rules — fonts, colors, spacing, component patterns — that constrain AI output so generated designs match a specific brand rather than a generic template.
- Firecrawl
- An MCP-compatible web scraping service that returns clean structured text and style data from any URL, stripping out raw HTML so language models can process brand identities cheaply.
- Open Design
- A community open-source project that replicates Claude Design interface locally on your computer, letting you connect any supported model instead of being locked to Anthropic credit system.
- MCP (Model Context Protocol)
- A standard for connecting external tools — such as web scrapers, image generators, or databases — directly into a model context window so it can take actions beyond text generation.
- GLM 5.2
- A language model from Zhipu AI that reportedly matches Opus 4.8 on certain design and coding tasks at roughly one-sixth the token cost, accessible via command-line interface.
- Canvas editing
- A Claude Design 2.0 feature that lets you click and modify individual elements — text, font size, colors — directly on the generated design without sending a new prompt, preserving context window budget.
- Power Design
- A GitHub repository of 20 curated design principles used as an importable design system to make Claude Design output match a specific human-curated aesthetic rather than AI defaults.
Things they pointed at.
07:21toolHiggsfield
07:25toolKia AI
13:48toolGLM 5.2
Lines you could clip.
05:21
“You just said the word Claude Design and your Claude credits went broke.”
08:17
“Anything you technically build in Claude Design, you can, if you want to, build in Claude Code. It is just trying to make it so easy.”
11:34
“Whatever you build in Claude Design, you can take it anywhere that you want to and use by any single model that you like.”
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.
metaphoranalogystory
00:00Claude code is the world's number one design agent and they just dropped Claude design 2.0. And in this video, I'll show you exactly how to use its most powerful new features across five levels and how to overcome its biggest limitation. So you don't waste your time and you get light years ahead of everybody else even if you've never even touched this before.
00:20And if you're new, I'm Jack. I built an AI startup with a gazillion customers. [music] Now I'm building my own AI startups and I share here the stuff that actually works.
00:29So if you [music] haven't already, grab that beautiful coffee and let's dive straight in. So these are the five levels of Claude design. By the way, if it's in your background, I'm currently in Budapest drinking that beautiful Budapest coffee.
00:41And I'm going to be honest, the lighting situation looked like I was an unlockable character 5 minutes ago. So thanks for bearing with me. Now, what actually is Claude design?
00:49Effectively, it is Claude's answer to creating beautiful design and Claude is at the moment Opus 4.8, one of the best design agents on the planet. You can build websites, apps, prototype decks, effectively anything you want to.
01:00And initially, it got a million users in week one which leads us on to the change and why we need to talk about it in this video. They have done four big things and a few of the small things that I'm going to show you and how it's going to affect what you design. First of all, and this is the big one, credits go further.
01:15Biggest limitation was the fact that oh my gosh, like you would literally bleed credits. You just said the word Claude design and your Claude credits went broke. You can bring in design systems, you can design both ways and you can even edit on the canvas.
01:29So let me show you exactly what that looks like by jumping through to the very first level which is knowing exactly what the tool physically is. So you remember if you're on the basically the Claude website, on the left hand side, you click on design, you will see the interface. But you can also access this inside your Claude desktop app.
01:47Now on that Claude desktop app, if you click on chat in the top left and you come down here to design and just I just might have guessed it, click that design button, it actually opens up a new terminal. So, when you click on Claude, you can see one for basically Claude design and one for Claude itself. And you can do everything now inside the desktop app.
02:04Now, I know many of us have PTSD from using Claude design, but I'm going to show you it's actually pretty cool. So, let's familiarize ourselves with it. So, you can select effectively the thing that you want to design, prototypes, website animation frames, which is awesome.
02:18All your projects live underneath, which is fantastic. You can see all of the design system. So, if you've got a particular brand, we can build one of those and even have templates down there at the bottom.
02:27Now, you can select the design system when you're building, or you can just clear that and just go and create something brand new. And here, we can select the model. And I'm going to show something really interesting in this video that's going to help solve any issues you have with tokens.
02:40So, this takes us on to level two, where we're going to build something together. Now, what's really cool here is we can build it in any brand.
02:46We can give it a GitHub repo. It can design basically anything in brand. It will auto validate things.
02:51And we can even take that stuff, push it out to PowerPoint, PDF, Miro, Figma, anything that you want, you name it. So, let's go ahead and give that a crack. So, to really challenge it, I'm going to give it, for example, a link to a repo, and I'm also going to give it an image.
03:04So, let's give it a task. I'm going to come down. I'm going to select slides.
03:08We're going to go with no design system, like so. I'm going to give it the following, which is, "Hey there, I'd like to use this repository, this GitHub repo, and this image to design for me three beautiful slides in talking about why LaCroix is the best drink to be having in 2026." All right, further on in that, and let's go ahead and grab the actual GitHub repo.
03:26And here it is. This basically is a repo that I built just to kind of extract great design principles. So, come back over, drop that in there.
03:33Now, you can drop anything that you want into it. You can drop in Figma files, you can drop in images, whatever you like. And in fact, if I even open up these principles, you can see I have a really clear design style with this.
03:44If I copy this image, for example, come back over, drop it in, just literally copy and paste the images that you like, that you think are groovy and cool. It's really designed to make it as easy as possible.
03:53Then you can select the model Babel 5. She will be coming back. I'm hearing she's coming back.
03:58On that point by the way, it has been it rumored that GPT-4.6, which is the latest ChatGPT model, is allegedly that that big model, okay, which sounds a bit controversial, is supposed to rival if not exceed some of the fantastic models. So we're going to keep our eyes peeled for that because even with any model release we've seen with ChatGPT, Claude has always seemed to edge it.
04:15But there might be a model that even challenges is Claude, which I'm going to I'm going to cover in a second in this video. Now, the first thing that's come up here, for example, is going to show us some questions. So we're going to do this for the Let's just do it for the investors pitch.
04:28That's fine. Playful and bold, Wild Claw wins the most, zero sugar health, flavor variety, and lifestyle and vibe. That's fantastic.
04:34Use them as the main visual style. Just make something that's beautiful and follows the instructions and the visual style. So we're giving it some information, come down, and then click on continue.
04:42Beautiful. Now we have the presentation from Claude to LaCroix owns 2026. You'll see at the bottom we have speaker notes, which we can edit.
04:49We can just uh look at it if we want to. Then we have slide two, which is going to be three reasons it wins. It's cool cuz you see these squares and circles, it actually copied that from that initial image, which is cool.
04:58It's taking some creative license. Come down, and the commas can in the cooler wins the decade. Cool.
05:02That's decent. In this itself, you can do a couple of things. I can mark up so I can like basically say, "Hey, let's make this section bigger." So I can come down and say, "Hey there, make this section a little bit bigger." Okay, cool.
05:13Send that one off. While Claude is working in the background, you can drop comments on there, too. But probably the coolest one I think is going to be the edit feature.
05:20So I can just literally now edit it. Now, the reason why this is important is because previously we had to give a command, and AI had to go through the entire context window, which meant they just burned so many tokens. Now, let's say for example, I want to remove the apostrophe, I can just click on this, come over, and there you go, done.
05:34I don't have to say, "Hey Claude, remove the full stop." It can physically do it, and we can edit it. Then on the left-hand side you see you can actually edit everything. We can check out the font sizes, um play around with colors, just kind of edit everything in detail just like you would do in a Figma.
05:47So now Claude has made that image larger. If you want to, you can do presentation mode and actually go full screen with that and just say "Hey guys, here's my presentation. How good is life?" Cool though, we can actually go ahead and share this.
05:57And on the share link, you can do it to your workspace if you want to. Or if you come down to export, for example, you can see the different formats we have here. So, we can do this as a stand-alone HTML, or you can do it as a PowerPoint, export it in PowerPoint, and then actually edit it within that software yourself.
06:11Well, this leads us onto the coolest part of this and actually the biggest issue that I've covered so far. And that's the fact that it's not re-imagining. It's not creating things.
06:18What we can do with Claude design is actually use our inbuilt connectors that we already have in Claude code. Let me show you exactly what I mean. For example, we could scrape information about competitors or our websites.
06:29We can generate images ourselves within Claude design. And bear in mind, design is just one part of many in Claude code. So, if you want to get the full breakdown from foundation setup, building websites, power features, memory systems, Hermes, everything I have never covered on the channel, I'll put a link down below for the full Claude code course.
06:45With that as well, you also get access to the beautiful Claude code operating system, which is freaking unbelievable. And how you can take it to new level.
06:53Now, if I come back over and I land over here, I'm going to come back over now to the homepage real quick. And what I'm going to do is use a connector. I'm going to give it a very specific prompt.
07:03I'm going to say, "Hey there. I would like you to go over to glido.com and use my fire crawl connection, my fire crawl MCP, to extract the brand identity. And I want you to create for me an animation that is three pages long." Cool.
07:15And then what I'm going to do after I'm done that, I'm actually going to go ahead and say this. Go ahead and also use um an image generator to go ahead and generate some unique images or maybe one unique image based exactly on that style in that deck for me.
07:27Now, I'm going to deselect my design system here just for argument's sake and then come down and we're going to go ahead and choose animation. And then go ahead and send that one off. Now, for creating images itself, you could use Higgsfield.
07:38You could use something called Kia AI, which I think is probably the cheapest way to do it. Actually, uh once you connect that API key to your Cloud system. Now, the reason I love using Firecrawl is cuz you can actually extract information unbelievably easy.
07:50It is so cheap because essentially, if you scrape a website, you've got to take in all the tokens. With Firecrawl, you mess out all the HTML stuff. You can literally search, scrape, and track with it.
07:59I use it to get brand identities. It is super duper easy. All you do is literally connect it, and then you're rocking and rolling.
08:05So, if I come back over now to Cloud Design, you can see it's using Firecrawl to scrape and get that information, which is great because not every website is built for AI. Using tools like Firecrawl, we can actually get the right information way faster and do so much cool stuff.
08:17And just like this, guys, we now have our actual presentation. So, let's have a look at what it's designed for us here. And I'll tell you straight away, it has absolutely captured the Well, okay, this is cool.
08:26I like it. It's captured the actual font edge and the color scheme, which is all in type with your voice. That's very true.
08:30Speak naturally, it types out. So, it's actually grabbed this image. This is cool.
08:34Ah, that's really cool. Do you know, I'm actually genuinely impressed with this. I think this is really freaking decent. 20 hours a month saved.
08:39This is information it's going to have and grab from the website. It's also got the logo, which I think is freaking amazing, and giving it tools like Firecrawl absolutely crushes it. I do want to touch on actually what is going on here compared to Cloud Code and this because keeping this 100% real, to Cloud Design itself is just the ability to effectively edit it.
08:57It's this interface here and the ability to export it different things like PowerPoint and PDF. Cloud Design is using the Cloud Code model underneath. And so, by that virtue, anything you technically build in Cloud Design, you can, if you want to, build in Cloud Code.
09:11It's just trying to make it so easy. And if you're time poor, sometimes it's easy to go into Cloud Design and build the thing.
09:16Which interestingly takes us on to level four, which is the ability to basically pass information from Cloud Design back to Cloud Code. Now, you may want to do this if, for example, let's say that we build a dashboard, right? And then we actually want to take that dashboard and give it a database and build it out into a full system.
09:34Well, we can't do that in Design. So, for example, let's go over to our beautiful glido animation and let's share this number one. Now, you can export it to these different things.
09:43We don't want to do that. What we want to do is send it. Now, we can send it to Claude code, Canva, or Gamma.
09:48We're actually going to go ahead and send this one over to Claude code by clicking send. Now, two different ways. Now, there've been some complaints as well about it's not a clean crisp integration.
09:56You can send it to Claude code web. I wouldn't do that. If you're in the app, just honestly use the app.
10:00What you can do is literally copy this and effectively what it's doing is it's detailed where the files are living, which is super helpful. Or if you want to, you can just download it as a zip. That's completely cool if it just makes that a lot easier.
10:11But, I'm going to come down. I'm going to copy the prompt like so and then I'm going to head over to Claude code. And now, within Claude code, I'm going to literally paste that in and I'm going to say, "Do me a favor.
10:18Pull me together a very simple one-page website using the design principles in this with this video integrated into it, please." Send that one off and then we should be ready to rock and roll. So, we can bring it over to code when it reaches a certain level of complexity or if you just want to get the initial design done and then you can bring it back over.
10:35Beautiful guys. And then Claude has gone ahead and designed this. It's integrated the video into which is great and it's added some other beautiful bits and pieces, which is awesome.
10:44One interesting thing though, when I come back over here, is that when I actually exported it to Claude code, it was like, "That's cool." But, it couldn't find the video. So, what I did is I actually went back and I re-extracted it. I downloaded the zip.
10:57And actually, if you even listen to what Claude code tells us here, for example, at the moment the integration is a little dicey. When it downloaded it from the handover, it didn't have anything. But, when I took it from the zip, effectively it is the best way to go ahead and do that.
11:10So, just bear that in mind. And also, when you do download it as a zip, whatever you build in Claude design, you can take it anywhere that you want to and use by any single model that you'd like. Which interestingly takes us on to level five, which no one's really talked about when it comes to Claude code design.
11:24And before I show you that, just bear in mind, you always want to extract the zip. Extract the core code, then link it back up. I think the integration will pick up as time goes on, it's a great thing directionally.
11:34People have run into snags, so make sure you're going ahead and actually downloading it. Now, let's think about level five here. And we're talking about owning the entire stack here, right?
11:43So, how do we actually get to the point where we're not locked in with any specific model, but what if we want to use this design with a different model? What if we want to build on this with something else? Well, there's two ways that we can do this and I'm going to show you both and I want to make sure you got both of these in your arsenal so you're never caught short ever again.
12:01Now, firstly, we can head over to open design, which effectively is mirroring everything that Claude design does, but it runs locally on your computer and you can power it with any model you want to. To use this, come down to code like so, come over and literally copy this. You're going to open up a new session and say, "Hey there, I want you to download this repo and open it up for me in a local host." Ordinarily, when we get repos, we never give Claude this command unless you really know the repo that you're referencing.
12:24Ask Claude to always check it for you. Beautiful. Now that's done, I'm just going to go ahead and say, "Awesome, open that up for me, please." So, effectively, this is the software on your computer that you're now locally hosting and it just unlocks new capabilities.
12:35And when it opens up, you're going to come down and click on local coding agent, which is fantastic, and then we can pick all the things that we want to connect with. So, for this one, you can even use Claude code in it if you want to or you could use ChatGPT.
12:46So, use your ChatGPT $20 subscription to basically code anything you want to if you hit your limits, which is fine. We're going to skip all of this, come down, click on continue, and then we're ready to rock and roll on building a design system. And then, when you open design, I kind of I want to attach the exact same thing that we just built in Claude design and Claude code by coming down here, clicking on the plus button like so, and I'm going to attach a file.
13:07So, as you can see, I've got Claude as a and I'm going to come down and say, "Hey, on this website, I just want you to change the color from green to blue." I'm just doing this as an example, click off, send. But of course, before we do that, we can actually then go ahead and pick the model we want to. So, I'm going to go ahead with the Claude X CLI in this case and then send that one off.
13:22And CLI just means command line interface. It just means that on your computer you can access Codec, which is the chat GPT coder, just like Claude code is for Claude. It's just fancy speak for using different models, basically.
13:34An open design is a free repo. It's a free project people have built to let you use the kind of core ethos of Claude design, like it's kind of like skills, that kind of thing, uh in an open environment where basically you can use any model to power it. That's why this is so cool, and it's a great build on.
13:49It lets you keep on building if you hit your limit in Claude code. And then beautiful, just like guys, we've gone from green to blue. I think green is better if you ask me, but you get the idea of how this entire thing connects.
13:59And they get really creative, like here's an example of something that I built earlier. For example, you can see this is another instance of using Glado, using fire code coming down and connecting everything together, coming over and just seeing these beautiful basically these beautiful animations with this system. Now, one thing to bear in mind is if you do use open or tip, you can't export it like into PowerPoint.
14:18That is Claude design only. One of the really cool things that it does and why it's a great place to play around and build some stuff. And on top of that, you can also use GLM 5.2, which is around the same performance as Opus 4.8, but 1/6 of the cost.
14:31It lets you take it to completely new level, and you can do that by using it inside the terminal. And again, just build on any of the designs you've already built. But it does then take us on to a really important question.
14:42And that's essentially where do we actually go from here? Because a design is one thing, but it's only one part of a series of core things you need to understand with Claude code to advance your business and your personal life.
14:55So the next thing we need to do is learn how we can build those pieces together in a gigantic operating system, which we'll do right here in this video.
The Hook
The bait, then the rug-pull.
Claude Design 2.0 arrived with one headline promise: credits that do not vaporize on first contact. What the update actually delivers is a full five-level capability ladder — from importing your brand visual DNA to running the whole thing locally on any model when the bills get too high.
Named ideas worth stealing.
00:33list
Five Levels of Claude Design
- Interface orientation
- Build in your brand
- Live-data connectors
- Design to Code both ways
- Own the whole stack
A progressive capability ladder for Claude Design — each level builds on the previous and unlocks more ownership of the output.
Steal forAny tool walkthrough — structure as levels to let viewers self-select depth
01:07list
Four Big 2.0 Changes
- Credits go further
- Import a design system
- Design to Code both ways
- Edit right on the canvas
The core improvements in Claude Design 2.0 vs the original release.
Steal forProduct update video structure — lead with the complaint you fixed, then list the enablers
How they asked for the click.
VERBAL ASK
14:24next-video
“The next thing we need to do is learn how we can build those pieces together in a gigantic operating system, which we will do right here in this video.”
End-card CTA linking to Claude Code course; course also mentioned mid-video around the connectors section
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
