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 treats design as code, so any brand system you teach it once becomes infinitely replicable across slides, sites, and apps without ever opening a design tool.
Read if. Skip if.
READ IF YOU ARE…
- You build content, client decks, or websites and want repeatable branded output without hiring a designer.
- You already use Claude Code and want to understand where Claude Design fits in the stack.
- You run an agency or freelance practice and want to know whether Claude Design can scale to multiple clients.
- You are comfortable with basic prompting and want to add design automation to your workflow.
SKIP IF…
- You need pixel-perfect production design -- this is prototyping speed, not Figma-level precision.
- You are on a $20/month Claude plan and plan to do heavy design work -- token costs on Opus 4.7 will hit fast.
The full version, fast.
Claude Design is a code-first visual prototyping engine built into claude.ai that turns your brand assets into a reusable design system. Once that system exists, any prompt inherits it: slide decks, website prototypes, ROI calculators, video animations. Output can be exported as HTML, PDF, PowerPoint, or handed directly to Claude Code for deployment. For agency-scale output, bypassing the web UI and using Claude desktop Routines allows automated generation triggered by external asset updates.
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 – 01:20
01 · Intro
Host intro and overview of what the video covers.
01:20 – 03:10
02 · What Claude Design actually is
Code-first visual prototyping engine definition. Claude Design = personal designer, Claude Code = developer.
03:10 – 07:45
03 · Building your design system
Live demo: upload Figma files, GitHub repos, logos, fonts, brand notes. Iterative review loop for colors, gradients, typography.
07:45 – 10:30
04 · Anti-slop mode + token caveat
Custom design system prevents generic AI output. Honest warning: Opus 4.7 burns $20/month subscriptions fast.
10:30 – 14:00
05 · Creating slide decks
ClickUp brand demo via URL + HTML extractor + screenshots into a branded interactive deck in one shot. Introduces vibe designing.
14:00 – 17:20
06 · Replicating any brand style
Export as PDF/PowerPoint/Canva/HTML. Present mode. Draw-annotation feedback loop for live iteration.
17:20 – 20:15
07 · Building a full website
High-fidelity prototype from a single broad prompt. Export to Claude Code. Deploy to Vercel. HTML needs framework upgrade for production animation.
20:15 – 22:00
08 · ROI calculator use case
Interactive HTML calculator built inside Claude Design, styled to the loaded design system, then embedded into an existing website.
22:00 – 23:53
09 · Scaling with Routines
Export design system as zip, open in Claude desktop, set up a Routine to auto-generate designs when an external script or asset updates.
Lines worth screenshotting.
- Claude Design is a code-first prototyping engine -- encode what great looks like once and every future output inherits it automatically.
- A bad design system fed to AI produces worse outputs than no system at all, because you program it to replicate your mistakes.
- Opus 4.7 burns through a $20/month Claude subscription fast -- plan for 1-2 large animations per week before hitting the cap.
- Vibe designing: drop in URLs, screenshots, and extracted HTML and Claude reverse-engineers any brand style without a written style guide.
- An HTML website extractor tool (search on Google, paste any URL) gives Claude the full DOM structure of any site to replicate its design logic.
- The Claude Design to Claude Code handoff is a single copy-paste command; the output lands as HTML and needs a framework upgrade for production animation depth.
- Design systems in Claude are multi-tenant -- one account can hold separate systems per client, project, or brand aesthetic.
- Claude desktop Routines allow fully programmatic design generation -- update a script online and a Routine fires to output a branded deck or animation automatically.
- The real ceiling of Claude Design is individual UI usage -- agency-scale throughput requires bypassing the web interface and driving via the desktop app.
- System 1 thinking is why design quality converts browsers to buyers faster than copy -- good design removes the cognitive load of deciding.
One design system, infinite branded output.
WHAT TO LEARN
Teaching Claude your brand once unlocks on-demand generation across every format -- the bottleneck shifts from design skill to prompt quality.
- A personal design system is the prerequisite: without it, every Claude Design output defaults to a generic aesthetic that looks like everyone else AI work.
- A bad design system is worse than none -- feeding Claude flawed brand rules programs it to replicate mistakes at scale.
- Vibe designing works by giving Claude a mix of reference URLs, HTML extracts, and screenshots; Claude infers the brand logic from examples without a written style guide.
- The HTML website extractor hack lets you paste any URL and get back the full DOM structure, giving Claude the design logic of any site without source file access.
- Opus 4.7 is token-intensive -- a $20/month subscription supports roughly 1-2 large animated designs per week before hitting the usage cap.
- Claude Design exports are HTML under the hood -- they need to be rebuilt in a front-end framework for production-level animation and interactivity when handed to Claude Code.
- The programmatic ceiling of the web UI is real: agency-scale throughput requires bypassing it, exporting the design system as a zip, and driving generation via Claude desktop Routines.
- Routines allow event-driven design automation -- connect an external asset update as the trigger and Claude generates the corresponding output and delivers it automatically.
- Design quality converts visitors to action faster than copy because System 1 cognition processes visual signals before the reader engages analytical thinking.
- The Claude product stack maps cleanly: Design generates the visual, Code builds the functional, Routines automate the pipeline -- treating them as separate layers prevents confusion about which to use when.
Terms worth knowing.
- Design system
- A reusable set of brand rules stored in Claude so every new design output automatically inherits the same visual identity.
- High fidelity
- A fully interactive, visually complete prototype that can be clicked through, as opposed to a wireframe which is just the structural outline.
- Vibe designing
- Feeding Claude a mix of URLs, screenshots, and extracted HTML from sites you admire and letting it infer the brand style rather than writing a formal guide.
- Claude Routines
- Automated workflows in the Claude desktop app that trigger design generation when an external asset or script is updated.
- Anti-slop mode
- Having a personal design system loaded in Claude Design -- it prevents generic-looking AI outputs by giving Claude specific brand constraints to follow.
- Hand off to Claude Code
- An export action inside Claude Design that copies a terminal command; pasting it into Claude Code pulls the design files into a local project for framework-level development.
Things they pointed at.
Lines you could clip.
00:52
“Think of your Claude design system as a code-first visual prototyping engine.”
05:15
“Every design that you create is likely to look like more or less like everybody else design.”
13:03
“A bad design system is actually worse than no design system.”
22:50
“This is a user-based product... if you want to do agency work that going to scale massively, you run into the last limitation of this.”
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:00Club design just dropped, and it can now make beautiful slides, websites, apps, videos, graphics, and so much more.
00:08And in this video, I'm gonna show you exactly how to build any of these designs in minutes. Build professional design systems for your business and use cases, I've not seen anybody talk about on YouTube and how to build these programmatically on autopilot.
00:21And if you don't know who I am, my name is Jack Roberts. I built this on my last tech startup with 60,000 customers, and now I run several AI businesses. I'm currently in LA drinking this beautiful coffee.
00:30So if you haven't grabbed yours yet, do that, and let's dive straight up. Now Claude Code Design is available on the online app. If you come into claude.ai, on the left hand side, you'll see this beautiful design thing, you click it, and then it will literally appear for us.
00:43Now the first thing that we're gonna do is build your your own unique design system, that means whenever you're creating anything, it's going to crush, and then I'm gonna show you some credible use cases on that.
00:53But first of all, we just need to take a step back and understand what this design system is, so you know when to use it and how to use it. And it's best explained with the following. And that's the fact that if you think about your Cloako design system, okay, as a code first visual prototyping engine.
01:08Jack, what the hell does that mean? It basically mean the idea is that if you think about design as code, when it's code, and once you kind of program what great looks like, you can effectively build any design you want to on autopilot for any system, presentations, slide decks, websites, you name it.
01:24It's powered by Opus 4.7, the best model on the planet right now, and it bridges the gap between any code that you make and beautiful design. That's kind of like the general idea of it. So when you're thinking of this, think of it as , and it's only ever gonna get better.
01:38Now, let's talk about the stack. Think about in the cloud ecosystem, you have cloud design is think of that as your personal designer now. Cloud code is your developer, and then all the other things that we talk about connect to your world.
01:48This is how we connect to things like your emails and like any other part of your planet, which is awesome. Now, what can we build? We can build effectively anything with this stuff.
01:56So I think probably the best way just explain is to do one together, but on the left hand side, if you can see, this is where you're gonna pretty much decide what you want to build whenever you're building anything. It could be a wireframe. High fidelity just means something that you can actually interact it and use with.
02:09And on the right hand side, you'll have all the recent files, you'll have all the designs that you've saved, and under examples, these are a list of things, the kind of things that you can build. If you copy the prompt and enter it in, you'll then be able to get the exact same output, like this is a really good idea, text particle effects, you know, it says something and it shows it, organic loaders, you get a sense of what you can do.
02:27Effectively now, we're only limited by our imagination. But then the question really becomes, okay Jack, that's great, but what should I do and how do I go about this? And there's so much you can do, it can feel a little overwhelming.
02:39And this leads us on to the biggest thing that's gonna save you the most time with this Claude Co design system, and that's effectively building out your own design system that you can use for anything you're building with its apps, websites, or systems, and it is actually unbelievably easy to set up. And I'd like you to think of this as your anti slop mode.
02:57Every output that you create can inherit the style, and we can create as many of these styles as we like to within the design system, which is cool. So let's think about what that looks like and how we can do it together. Wonderful.
03:07So now we have cool design. What you're gonna find on the left hand side is this thing that says set up design system. So to set up your design system, again, click on this button here.
03:14It says set up design system, ironically, and we can start to give it a little bit of information, which is cool. Starting with company name and blurb, so this could just be for you Jack Roberts design system. Wonderful.
03:24And by way, this is Glide I'm using, I'll put a link down below so you can get a month completely free if you wanna check it out. Now we've link for code on GitHub. So effectively what we can do here is feed it in existing design reports that we've got.
03:36If you've got a GitHub project, for example, I have a design system with a iwithjack.com, right, this is a specific thing that I have. I might I might like this.
03:44I may wanna bring this into my system for me to play around with and use, in which case I could just easily do that for us. So again, if you have a GitHub repo, you can add that in. I'm gonna add in a Figma file for my design system.
03:54So I've got mine here, has my background and a few different colors and things. So to do this in Figma, I'm gonna come down here and grab this. The point is it doesn't matter exactly where it is.
04:02The the point is it whatever your design system is, we can now bring it in. So let me save this a local copy. Alright.
04:07I'm gonna come over and just drop this file in here. Cool. And we say, yeah, that's great.
04:10We're gonna attach everything we downloaded. That's wonderful. And we can add fonts, logos, assets, essentially anything you want to.
04:15So for example, if you have a folder on your desktop, which I highly recommend that you do, drop in your company logos, drop in all the information on one folder on your desktop called design, and then just throw this in here, and then Claude can use this when it's building things up, and then we can give it some notes.
04:29So I might say something like, for my design system, I like to keep things simple and visually easy to understand. When I'm building things like presentations, I like to do 1.1 slide, premium feel, but also like very visually engaging using beautiful subtle animations.
04:45Whatever your thing is. And then once you've given a prompt you're happy with, I'm just gonna prove this a little bit. Hey, Glenda.
04:50Could you just make this prompt slightly longer and more detailed to achieve my intended effects, please? Because I think it's important that you wanna get called specific instructions without being too specific. Yep.
04:58That sounds good. Let's set that one in there. And when that's all done, all we're do is come down here to generation.
05:02Then basically, it takes about five minutes to build your system. Just come down and click on generate. And as this is building, you'll see on the left hand side everything it's doing.
05:09Now, the reason why this is so important to do is that if you don't give or create your own design system, every design that you create is likely to look like more or less like everybody else's design. So really take a second to build out something that's unique, that's yours, in any style you want to, and then we can use it whenever we're building anything within Claude.
05:28And for example, if you do get a folder on your desktop with everything in, like I have one here for Jack's Essence, I've got brand guidelines, I've got my background patterns, I even have fonts I had created which are really handy, you can just upload these all to Claude and it will use them for you. And then effectively, you can go down here and review everything, if you think it looks good, we can say, hey, that looks great for me, do I like this, that looks awesome, and just go through and decide everything.
05:49And look, it's even pulled through the specific fonts I had, you can tell that because it's exactly what I have on my YouTube channel. And it's even pulled up my primary colors, which is the exact styles that I have, and again, you can see this right here at the top. The blue, the orange, and that font, and has called actually successfully pulled it through.
06:04Yeah, it's doing an awesome job. So it literally just goes through and approve or disapprove everything that you like. And so for example, this is suggesting a signature grading and say, hey, dude, there's too much blue and orange.
06:14I kinda want blue bottom left, orange bottom right, and then white in the middle with with kind of dots behind it, so it looks a lot better. And what's crazy, it's also even pulled up these specific logo style that I had. Obviously, I don't see ChatGibati or NA10, so need to give that feedback, but you get the idea.
06:28And unbelievably, it's actually come back and done the signature gradient, so let's give it a little more feedback. Hey dude, I want it to blend a little bit more, it's a bit too sharp. So again, I want like the gradient kind of like opacity to fade off off into zero, and obviously just increase the height on the left and the right, and increase the number of dots as well please.
06:45It should look sleek and beautiful. And voila, it's come back and give us a leg. I think that's actually pretty good.
06:49Again, you can spiral to go back and forth. And like this is that really worth the ten minutes it takes just to nail this stuff down, and once we're happy with it, we can sign them off. And again, you go back and forth, and look, it's pulled through all the arrows of my design system.
07:01And if you're finding it's not getting it correct, on the left hand side, you can just upload the images and say, dude, I really like this, and I like this and I don't like this, and it will add it in and you go through this review system to find something that's perfect. This looks fine, as you can see the number of things in each review just goes down the more that you feed it.
07:16Guys, look at these. This is fantastic. These app icon pills, you can see everything there.
07:21It looks gorgeous. And you can see on the right hand side now, it's got everything that's going through. It's like we're just reviewing this, reviewing that.
07:26Let's get everything complete. And once that's complete, you can click on this new design using the system. And one limitation to be aware of as well is the token usage of the sync.
07:344.7, for all its wonderful benefits, is really freaking hungry, which means that it can burn through your $20 per month subscription very quickly.
07:42Maybe you could do one or two big animations a week, but after that you'll need to wait till the next one until you've hit your limit, unless you're on the max plan. So that's just something that you may find based on how many things you're designing. So let's reiterate exactly what we've just done.
07:55We've given our kit, git a repo, screenshot, Figma like I gave it, or just simple screenshots, right? It could be a competitive site that you love, that you think, dude, I love this website, I would love a brand style just like that, it can help us do that now. Obviously, we can iterate with it just like I showed you.
08:10As always, few tips, you want to wireframe first, you want to name the components if you can, you want to kind of be specific as humanly possible. Again, design basically, tight design systems mean that it's gonna be replicable at the time, and then obviously what we wanna do is feed it your own website if you're using that.
08:26So once you've created an actual website design system, just to show what this looks like, it'll you can select these design systems here. So if you have several clients, can have several different design systems, or for different functionalities that you had. You're gonna pick whether you want wireframe or high fidelity.
08:40Wireframe's just the outline, high fidelity would be something you can use. So let's say we wanna do something like video slides, and then I come down here and click on create, and then effectively what we're gonna do here is go through and ask it to create something for us. So let's say for example we wanna give it just a test.
08:53I could say something like, hey, go ahead and create for me three slides specifically on ways that business owners could use AI to be more profitable or more efficient. And then what I might do come down here and say, I'd love you to use any graphical annotations, HTML styles, anything to give a little degree of interactivity inside the actual design stack itself.
09:13Now, obviously, we've got our own design system already preloaded into this, so we don't need to do anything. We can just hit send on that. And to get that up, we just click on design system like so, and you'll see there's a Jack Roberts design system, which is awesome.
09:24We're gonna go ahead and use that, and then come down and click off send. And then once that's done, we'll get a full deck that should match all our brand guidelines. I'm seeing the blue we've got the blue various different things, and it should be interactive.
09:34Again, just a random prompt, but you get the idea of how this all connects together. The cool thing with this slide decks, is it could be in any style that you want to. For example, I one that I built here was this beautiful thing from Claude Code full course that I'm doing.
09:45Look at the interactivity of this, like that I've got on my computer, you can get on, and it's just absolutely gorgeous, the kind of stuff that you can build. Now let's say for example, we came back over here to Claude, and I wanted to build something that wasn't the design system. I just want look let's say that I like the look of this website here, ClickUp, and I said, you know, I really like the design of ClickUp.
10:03How could I use the ClickUp brand very easily in the design? Well, we come back over, we're just gonna copy the URL of the website, come back over here, no design system, come down here and call this one something like, let's call it ClickUp design. Alright?
10:16Come down here and click on create, then it'll start here, which is cool. Now what I'm gonna do is give it a few different things. So we can give it a screenshot, I'm gonna drop in the URL really quickly as well, just say, I would like you to, based on the design systems in this particular website, quote for me a gorgeous slide deck, maybe call it five or so slides.
10:33Right. Then let's start dropping in some screenshots for inspiration. So I'm gonna click up site, I can come down here, let's just get some gorgeous screenshots here.
10:40That's really nice and tasty, just copy that one. Alright. And this also looks really cool.
10:43Let's come down and just copy this for example, and then come straight back over to ClickUp, drop it in. Then I'm gonna give it a little additional prompt, I'd like you to really look at kinda like the interactivity and subtle HTML animations as well. And you can also basically decide what model you're by clicking the little cog, and you can see you've got all the different models here.
10:59If Clawd 4.7 Opus is very particularly token hungry for you, but it is obviously the best model. When we're done with that, we can just cut off and click on send. But we're gonna wanna have to give it a little bit of an overview first, so what I recommend that we do is come over to ClickUp and let's just copy all of the text on the page, come straight back over here, and then we can drop it in.
11:14One little hack you can do as well, but I don't see I haven't really seen mentioned, is if you come over to ClickUp, you copy the website, and then go over to Google, and just type in HTML website extractor.
11:24Okay. Click on this website here, and then if you just enter in any URL, you will get the HTML version of that website. What that effectively means is that we can pretty much just recreate the website on our computer, but when we give that to the Claudico design system, which I'll come over here and do for you real quick, come down here, just gonna upload that, beautiful, and then I can be like, one thing I'd like to do is on these slides, just give me like a tilde art overview of ClickUp and why it's so valuable.
11:47Now this think about the use case of this. You've got a presentation for anybody or maybe you're doing a YouTube video and you want slides to talk through, you can drop in scripts of video, ideas, websites, and turn anything into any other format. Basically, can just switch them around easily just by what I would call vibe designing.
12:03Right? Drop things in that you think are pretty cool and do it. Now, it does pull out the question why design is really important in the first place.
12:10It comes down to how we think. Right? System two thinking, your intellectual side, and system one, your ape brain, it just sees red equals bad and green equals good.
12:18The less that we can make people think, the better well, the more quickly they're gonna make decisions. So for example, we just wanna make that process as easy as possible. Good design systems like this help us do it, which takes them from a no to a yes much faster.
12:31Beautiful guys, and look at this, one place for all your work. They have crossed the gradient pretty quickly. Let's have a quick look at what we're dealing with here.
12:38If I click on the next slide, let's have a look. Workflows everywhere, not a once, so different floating logos. I would like to have added some logos in here, but again you can do that just by providing the logos to Claude.
12:48Replace a drawer with one workspace, so we've got a little bit of a mini overlap issue, which we can fix there, but again it's got everything down, and it's kind of actually captured the identity and the gradient so well. Like this is a gorgeous design.
13:00There's no question about that this is a gorgeous design, and that was one shot. I've done not a single edit to this.
13:07And one thing I'd call out as well is that when you're giving AI your design systems, a bad design system is actually worse than no design system because you're kind of instructing it to do like things that aren't actually correct. So unless you're really short on the thing to definitely gonna give it, I would let it run free a little bit, but obviously it's better to have your own thing.
13:25This is really cool, I love the look of this. Honestly, really impressive, you can build design systems like this, and then basically, if I save this as a style, I can now whip it up anytime I'm doing any kind of content. And then obviously, if it's something we don't like, and obviously get the font, the sizes, you can play around with this all as you like, And we've also got this draw functionality where you can literally highlight things like this, and then basically give it comments.
13:45So I might say, hey, this is being cut off, and they click send. And then we can get everything amended and then proceed as we like. And when we have a design we think is really cool, couple things that we can do to get out, obviously, can always change the percentage of viewport, you can draw on it, you can edit, you can drop comments.
14:00Also tweaks, which is cool if you wanna like ask it to improve it like, hey, I think this could be a little bit simpler, we're really over complicating this slide, give that feedback to Claude as you go through, and then it'll actually go ahead and start working on that. Then, always at the end, you can export at the top PDF, PowerPoint, send it to Canva, or export a standard HTML, which we're gonna come back to later in this video.
14:20And then once you've done that, effectively, you can hand it back off to Claude, or basically progress as you like. Now if you're presenting this, you may just open it up as a full screen. Just come on present mode here, uh, in this tab or full screen, and now we can go through and just present this to people as we go through in our content, and we have this gorgeous beautiful animation for that.
14:36One little thing as well, if you do export as HTML, it's probably the best way to do that. If I export a standalone HTML, you'll basically have this thing down here to download the ClickUp TLDR standalone as HTML.
14:46You just click on save that for example, and then here, once I click on open here, you'll see it's now in its own unique page. So for example, if I'm then presenting, I go, hey guys, welcome, and then I just go through the whole presentation just like that. So now we've covered beautiful presentations.
14:59One of the biggest use cases we can actually do with Cloud Design is one of its most powerful applications, and that's building beautiful websites. Now, of course, there are a million ways to skin a cat, but what we're gonna do in this one again is come back to prototype, and we can do wireframe, so basically a wireframe version, which is cool, and move to high fidelity, completely our cool.
15:17But let's go for high fidelity, we'll call this one something like Framer two point o, come down and click on create. So let's say for example, I really like the look of this website, I thought it was gorgeous, I think it's a style that I really like, and I wanted to replicate it.
15:30Well, of the things I might do first of all is come back over to our wonderful thing here, and what I'm gonna do here is just, you're gonna select the design systems that you want, right? So let me bring this over, and we're gonna add in different informations, okay? It's gonna come down here, I'm going to drop in the website link, I might actually go and grab some of the HTML from the website to help Cloud Designer if it wants, and then we're gonna come back over, drop in screenshots, do everything we want to, and then I'll just say something like, hey dude, could you build me a beautiful, gorgeous website based on all of this structure and design principles, and I'd like you to do it for me based on a business that helps businesses build beautiful websites to drive various different value to their business and lots of AI services.
16:06So pretty broad prompt, you get the idea. I wanna show you really just how this actually go ahead and construct a website, then how you can take that website to actually publish it online for whatever you want to. So come down here and click on send, and then just like that on one shot, this is what we've got.
16:19Look at this gorgeous font, book studio cool, and we've got these tweaks down here in the bottom right. If I want to tweak from orange to green to pink, I mean, it's really cool. I think it's really decent that they've kind of really thought about how you'll actually go and design, because design capability and then how easy it is to design are two different things sometimes.
16:35So I think that's fantastic, and then obviously we got the website headline, really sweet. They brought this across very nice, and then got this trusted brand, very cool, every service your business sells on. We've got different things here, very crisp.
16:48I'm liking the look of this, then come down here, it's very sweet. And now we've got the full beautiful website here, to rock and roll. And obviously, just like before, if I want to change the way that something looks, like I want to draw on something, I might say I really, you know, I like I wanna come down here, select the draw icon, I can just click all this, and be like, I don't know, let's say, can you make this slightly more interactive for me?
17:07And that's send that one off, and then off the back of that feedback, it's actually gone and changed it, and of course, we can just move this in any direction we want to. This is just an example, very broad, very top. Now at the top, let's say I want to actually take this and build this into a website.
17:20How would I do that? Well, the first thing we do is come down to export, number one, and you can export it as many different things. What you're going to do here, okay, you can hand off the call code at the bottom, or export as project as a zip.
17:31We're gonna come down to hand off the Claude code, then what you're do is click on copy command like so, and then you're gonna open up the Claude desktop app. Now when you're in the Claude code desktop app, you're you be encoding the top right hand side, and you're just gonna paste in that command like so, hit enter, and then Claude Code will be able to go and grab that for you because it's all connected to the same account, and then within Claude Code, we can open this up at what's called a local host, which just means that all the files live on your computer.
17:57Right? And then you just open up, and then from that, we can post it onto Vercel, which is a place that hosts our website. If you want a full guide on doing exactly that, I'll put a link on screen so you can click that and get started.
18:08And one thing to bear in mind is when you do export it into Cloud Code, it will be in HTML. So what you're gonna wanna do is build that out into various different front end design frameworks that Clued can do beyond just a simple HTML framework. So that's just one thing to bear in mind when you do export it.
18:23And the reason we do that is because then we can get different levels of animation and design, and it just will look to a complete different level. Now websites are just the beginning. We can go so much further thinking about apps and product demos and various different things that can apply to pretty much any area of your business.
18:40For example, on the homepage here itself, we have these wonderful organic loaders, like these are different animations. And like a good example is this calculator here, right? But let's say I wanna use this prompt, right, but what I wanna do is I wanna integrate into my website a ROI calculator, like, hey, you work with me at JL Enterprises, this is how much return on investment you can expect to get.
19:00So I've just said to use this prompt, but what I'm gonna do is highlight this prompt, and I'm just gonna use Glider here. Hey, Glider. Could you rewrite this prompt so that it would apply for a return on investment calculator for an insurance's business, please.
19:13Because one of the things really interesting is we can design HTML within the Clorico ecosystem, enter on that, that's awesome. Go ahead and click on send.
19:20And then effectively, once we've done that, we can just embed it into our exact website. Now, the reason why it's cool that we're doing that within the Claude code design system here is because we can preload all of our design preferences.
19:33So I think the way that this is going to go is that you're going to start here, build it initially, and then it will branch out. Will branch out into Claude code for your websites and apps to build proper stuff, or maybe branch out over here, and then we'll just embed it in websites. So this will be the starting point, and in many cases, you may never need to leave.
19:49But in some cases, we just end up exporting it somewhere else. And then beautiful, we have this great design system here, so we can pick up a diversity of things, and you can see interactive moving on the right hand side. So projection completion 73.2%.
20:01This is really cool. I mean, obviously, you can play around with it, like your premium, maybe this goes up a little bit, maybe they've got like a million dollars, all this great stuff, and then we can embed this into our website as something interactive they can use. To do that, once again, if we wanna present to the client, we just do this and we can share that.
20:15So maybe you've got a call and you're running through some ideas and projections. Well, we can spin these things up now on core design and just say cool. Let's just say your length is forty years or whatever it is, and we can like work this together and workshop it, or we could just embed the entire thing in our website.
20:30And the reason we can do that is because it's basically code, and we just take that code just like I showed you before, all you're gonna do is let you come down to explore. You're gonna basically hand off the Claude code, and then from that you can do that. If you've already built your website with Claude code, and that's already integrated like in the videos I share in my channel, you can just connect it straight away.
20:46In addition to that, Clue can also go ahead and make Chris videos. So I can come down here and say YouTube video, I could come down to high fidelity, click on create, and then I could come down to prompt and say something like, hey there, I'd like to create for me a brief ten second animation for the below section of my video script.
21:02I want it to be minimalistic, beautiful HTML animations, simplistic, and almost like a black background, very simple.
21:09Thank you. And then I'll just drop in some text, so that could for example be any information. And just like this guys, now we have this full system for like a basically video animation, which is just the intro of this slides, website.
21:19Look at the beautiful animation that all pops up. I think that is really gorgeous. And that was just off basically one prompt to design this and just goes through, and now we're basically building videos with this exact technology.
21:29What we can do to get this thing is come over here, click on export at the top, and just like before, we can hand off to CluedCode if we want to, or export it as various different things. So this means that we've looked at websites, which is awesome. We've looked at how you can build simple aspects to apps, not the full apps, but just some slight interactivity.
21:44We've covered the animations and decks, and we've also seen how to get it out of ClaudeCode design and onto your computer to basically integrate with anything. But when it comes to actually how do I scale this up programmatically, Jack?
21:57How do I get my design system do something awesome? Well, let me show you exactly how that works. So if I come back over now to the system, I'm gonna come back over to the home, and what I want you to do on here is click on design systems at the top, and then you'll see all your design systems.
22:09What you're effectively gonna do is come over, select the one that you want, so in this case it would be the Jack Roberts design system, I'm gonna open that up, and when it's open, what I can actually do is come down here and export it. I'm just gonna export this, download it as a zip like so. Now once you've exported it, here's the key difference, alright.
22:23If you want to do agency work that's going scale massively, you run into the last limitation of this. This is a user based product to get someone who's fairly new and fresh with it to make design incredible. And it also makes things a lot easier, If you wanted to scale this systematically, say that you built something really beautiful within Claude Design, we get the design perfect, we export it just like I've showed you, then effectively, we're gonna basically skip the general interface, and we're gonna ship it from the app itself by downloading the Claude desktop app and opening it up.
22:53Then once you're here or in anti gravity, for example, you can come down here and upload the exact thing that you did, or you could just say, hey, I want you to grab the files from the last thing that I downloaded. And then from here, what we can basically do is just say, I want you to create these for me programmatically.
23:08We can even, if we want to, click on routines on the left hand side, and then come over and click a brand new routine, and we could click on local or remote if we want to, say remote. I've done a full video, I'll put this link on screen for you to check it out, but effectively then we can programmatically create this, and we can set up an automation such that I create a video script that lives like online for me, and the second that that's updated, I can have a routine that triggers that and turns that into a video for me, and either saves it on my desktop or sends it to my team, and so we can link Clawd Design with anything else that we want to.
23:38And that is how you programmatically scale us up to get ten, twenty, 5,100 different ones running for you whenever you want to. And you can't really scale your design systems unless you actually understand how to use that routine's function, which we're gonna do by watching this video right here.
The Hook
The bait, then the rug-pull.
A single click on the new Design button inside claude.ai, and suddenly the gap between idea and polished output collapses. That is the promise made in the first five seconds -- and this video is the proof run across slides, websites, apps, and automated pipelines.
Named ideas worth stealing.
01:30model
Claude Ecosystem Stack
- Claude Design (personal designer)
- Claude Code (developer)
- Everything else (connectors to your world)
Three-layer mental model for how the Claude product suite fits together.
Steal forAny presentation explaining the Claude product suite or AI stack positioning
03:30list
Design System Setup Checklist
- Company name + blurb
- GitHub repo link (optional)
- Figma file (optional)
- Fonts, logos, brand assets folder
- Design notes / style preferences prompt
Five inputs to seed a Claude Design system that locks in your brand style for all future outputs.
Steal forOnboarding checklist for any client design system setup
11:00list
Vibe Designing Inputs
- Target URL
- HTML extract via HTML website extractor tool
- Screenshots of design you admire
- Additional prompt context
Four-input method for reverse-engineering any brand style into Claude Design without a formal style guide.
Steal forAny competitive brand replication or rapid prototyping workflow
12:25concept
System 1 vs System 2 Design Rationale
System 2 (intellectual thinking) vs System 1 (intuitive: red=bad, green=good). Great design reduces cognitive load, moving people from No to Yes faster.
Steal forAny pitch justifying design quality investment
How they asked for the click.
VERBAL ASK
23:35next-video
“You cannot really scale your design systems unless you actually understand how to use that routines function, which we are gonna do by watching this video right here.”
Hard cut to end card with linked video. Classic YouTube watch-next CTA with a genuine knowledge gap setup.
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
