Big Idea

The argument in one line.

Claude Design makes professional scroll-animated websites accessible to non-designers, but its separate weekly quota depletes fast on Opus 4.7 -- front-loading context and back-loading iteration is the only way to protect it.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You want to build a polished landing page or personal site without hiring a designer or writing CSS from scratch.
You are already using Claude Code and want to understand how Claude Design fits into or extends that workflow.
You have tried Lovable, Framer, or Webflow and hit the ceiling on visual creativity without spending hours iterating.
You are on a Pro, Max, Team, or Enterprise Claude plan and have not yet explored Claude Design.

SKIP IF…

You are on the free Claude plan -- Claude Design is not available to you.
You need a production e-commerce store or CMS-backed site with a content management layer.

TL;DR

The full version, fast.

Claude Design is a canvas-based AI design tool built on Claude Opus 4.7 that generates scroll-animated, visually polished websites from a sketch, an uploaded video, and a brand brief. The workflow runs in three stages: generate a high-fidelity prototype with Opus 4.7, iterate inline using comments, edits, and the tweaks panel rather than re-prompting, then export the ZIP and deploy through Claude Code to GitHub to Vercel. The session-limit trap is the biggest practical risk: Claude Design has its own separate weekly quota, it depletes fast on Opus 4.7, and users who fire off broad prompts exhaust it in one build.

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

01 · Cold open / result demo

Shows the finished AI Automation Society and personal site transformations before explaining the workflow.

01:02 – 02:10

02 · Workflow overview

Two entry points: hand Claude Design an existing codebase or start from scratch with a brand brief.

02:10 – 04:22

03 · Brand spec + asset generation

Claude chat generates a full brand brief for a sleep supplement called Lull; Key.ai and Kling produce a looping hero video.

04:22 – 08:14

04 · Building inside Claude Design

Opening a new high-fidelity prototype, uploading assets, and sending the first generation prompt with sketch + brand brief + video.

08:14 – 10:33

05 · motionsites.ai for inspiration

Walking through the scroll-animation gallery and copying prompts to replicate effects in Claude Design.

10:33 – 13:31

06 · Iteration techniques

Inline text edits, canvas comments pinned to specific elements, drawing circles to describe problems, and the tweaks panel for zero-prompt iteration.

13:31 – 19:24

07 · Asking Claude to suggest improvements

Prompting Claude to generate its own tweaks panel -- a delegation strategy for when you do not know what to add next.

19:24 – 25:44

08 · Export to Claude Code to GitHub to Vercel

ZIP download, Claude Code push to private GitHub repo, Vercel import, deploy, and debugging the 404 caused by a missing index.html.

25:44 – 27:05

09 · Mobile responsiveness

DevTools device emulation reveals Claude Design does not auto-generate mobile layouts; a single follow-up prompt fixes it.

27:05 – 27:53

10 · Claude Design overview (structured)

Slide-based breakdown: launched April 17 2026, built on Opus 4.7 vision, generates prototypes/slides/landing pages/animated promos, paid plans only.

27:53 – 28:29

11 · The two-meter system

Claude Design has its own weekly quota completely separate from normal Claude chat and Claude Code. Both meters show in Settings > Usage.

28:29 – 32:14

12 · What drains your limit fastest

Opus 4.7 on every prompt, skipping wireframes, design system setup without pasting a live URL, long agentic threads, and context auto-compaction.

32:14 – 33:52

13 · Best practices to stretch limits

ZIP export hack, model-by-stage (Opus for generation / Sonnet for iteration), one visual dimension per prompt, negative prompts, concrete reference products.

33:52 – 35:04

14 · File uploads, extra usage, limitations

~30-40 MB video upload cap, extra usage billing, and a flag of known limitations in the research preview.

Atomic Insights

Lines worth screenshotting.

Claude Design runs on Opus 4.7 -- the most expensive publicly available Claude model -- so every prompt costs significantly more than a standard Claude chat message.
Claude Design has a completely separate weekly quota from your normal Claude usage; blowing through one does not affect the other.
On the Pro $20/month plan, one large website build plus one design system can exhaust the entire Claude Design weekly limit.
The tweaks panel lets you test palette, font, spacing, and layout variations in real time without sending a single prompt -- protecting your session budget.
Inline canvas edits (click and type) cost zero prompts; the only thing that burns quota is sending a message to Claude.
To avoid long-thread context rot, export your project, start a fresh session, and import the ZIP -- you are iterating on existing work, not starting over.
Claude Design can ingest GitHub repos, local folders, uploaded videos, sketches, and pasted brand briefs in one shot -- the richer the first context, the fewer correction cycles you need.
motionsites.ai gives you copy-paste scroll-animation prompts you can feed directly to Claude Design to replicate any effect.
Deploying to Vercel from a Claude Design ZIP takes under five minutes: ZIP to Claude Code to private GitHub repo to Vercel import to deploy.
The most common beginner error is sharing a localhost URL -- localhost:3000 only resolves on your own machine.
Claude Design does not auto-optimize for mobile; you must explicitly prompt for responsive layout after previewing in DevTools device mode.
Design system creation eats 10-15 minutes of session because Claude must ingest and spec the entire brand -- paste your live site URL instead of setting it up from scratch.
One visual dimension per prompt outperforms mega-prompts: Claude Design tends to ignore all but one or two items when you combine typography, color, and layout in a single ask.
Reference real products with version numbers (Linear 2023 with higher density) rather than adjectives like clean -- Claude interprets design references better than mood words.
The /clear command may reduce context bloat in Claude Design, but the proven method is the ZIP export and fresh session start.

Takeaway

How to build with Claude Design without burning your session in one go

WHAT TO LEARN

Treat Claude Design's session limit as a finite resource -- the difference between a finished site and a wasted quota is almost entirely front-loading context and back-loading iteration.

01Cold open / result demo

The finished product (scroll-animated 3D cards, looping video hero) was built in twenty minutes -- not because the tool is magic, but because the right assets and brand context were in the first prompt.

03Brand spec + asset generation

Use Claude chat to generate the full brand brief before opening Claude Design -- the spec becomes part of the first prompt, not a series of correction cycles.
Generate your hero video asset externally (Key.ai for the still frame, Kling to animate it) before opening Claude Design; uploading it with the first prompt avoids a separate iteration round.

04Building inside Claude Design

A rough sketch uploaded alongside the brand brief and the hero video gives Claude Design enough spatial and brand context to generate a high-fidelity first pass without guessing.
Opus 4.7 is the right model for the first generation and the design system; switch to Sonnet 4.6 for all subsequent iterations to protect your session budget.

06Iteration techniques

Inline text edits and the tweaks panel cost zero prompts -- use them for every micro-decision (color, font, spacing, copy) before sending a message.
Pinning a comment to a specific canvas element is more precise than describing the element in prose; Claude receives coordinates, not a description it has to interpret.
Drawing a circle around a problem area with the sketch tool is faster than writing out which element you mean -- especially for layout and transition issues.

07Asking Claude to suggest improvements

Asking Claude to generate its own tweaks panel is a useful strategy when you have run out of ideas -- it produces exploratory options you can test without committing any tokens to implement them.

08Export to Claude Code to GitHub to Vercel

The full deploy path is ZIP to Claude Code to private GitHub repo to Vercel import -- the only non-obvious step is renaming the HTML entry file to index.html so Vercel finds it.
Never share a localhost URL with anyone -- it only resolves on your own machine; Vercel gives you a real public domain in about sixty seconds.

09Mobile responsiveness

Claude Design builds for desktop by default; always check the site in DevTools device mode before deploying, then send a single prompt asking for mobile optimization.

11The two-meter system

Claude Design has its own weekly quota completely separate from your normal Claude chat and Claude Code usage -- track both in Settings > Usage or you will be surprised when Design maxes out while chat still works.

12What drains your limit fastest

Every prompt sent on Opus 4.7 is expensive; the tweaks panel and inline edits exist specifically so you do not have to send prompts for visual micro-decisions.
Setting up a design system by pasting a long brief manually eats 10-15 minutes of session; paste your live site URL instead and Claude scrapes the brand automatically.

13Best practices to stretch limits

Front-load context and back-load iteration: richer first prompt equals fewer correction rounds equals lower total token spend.
Keep each prompt to one visual dimension -- typography, color, or layout, not all three -- because Claude Design consistently drops all but one or two items from multi-change requests.
Reference real products with version numbers rather than adjectives; design references give Claude a concrete visual target that adjectives cannot.

Glossary

Terms worth knowing.

Claude Design: Anthropic canvas-based AI design tool (research preview, April 2026) built on Claude Opus 4.7. Generates interactive prototypes, slides, landing pages, and animated promos from prompts, sketches, and uploaded assets. Available on Pro, Max, Team, and Enterprise plans.
Two-meter system: The dual quota structure in Claude usage settings: one weekly limit for standard Claude chat and Claude Code, and a completely separate weekly limit for Claude Design. Both are visible under Settings > Usage.
Tweaks panel: A sidebar in Claude Design that exposes real-time sliders and dropdowns for palette, font, spacing, and layout. Changes apply instantly without consuming any session tokens or sending a message.
High-fidelity prototype: A pixel-accurate, interactive design that includes final colors, fonts, and motion -- as opposed to a wireframe. Claude Design generates these directly from a first prompt without requiring a wireframe step.
ZIP export hack: Exporting a Claude Design project as a ZIP file and opening it in Claude Code, allowing continued iteration using Claude Code quota while the Claude Design weekly quota resets.
motionsites.ai: A gallery site of scroll-animation websites and CSS backgrounds. Each entry includes a copyable prompt that can be fed directly into Claude Design to recreate or adapt the animation effect.
Context rot: Degraded output quality that occurs as a Claude conversation accumulates too many tokens, causing earlier context to fall out of the effective window or become uncached, leading to repetition errors and ignored instructions.
Kling / Klingai: An AI video generation platform (Kling Sea Dance 2.0 used in this tutorial) that animates a static image into a short looping video, used here to create a hero background for the website.
Key.ai: An AI image generation platform (using the Nano Banana 2 model) used to produce the initial still-frame background image before animating it with Kling.

Resources

Things they pointed at.

02:10toolKey.ai ↗

03:20toolKling / Klingai (Sea Dance 2.0) ↗

08:14toolmotionsites.ai ↗

14:05linkAI Automation Society (Skool community) ↗

20:32toolGitHub ↗

21:30toolVercel ↗

27:05productClaude Design ↗

Quotables

Lines you could clip.

01:57

“I have already spent over $200 in extra usage just playing around with this stuff -- so not only am I going to show you the tips and tricks, but how to not drain your limit faster.”

honest cost disclosure hooks skeptics→ TikTok hook↗ Tweet quote

32:43

“One visual dimension per prompt. Don not try to throw in a mega prompt with x y z a b c -- it only does one or two of them well and the rest get disregarded.”

immediately actionable rule with a clear before/after→ IG reel cold open↗ Tweet quote

15:30

“In Claude Code you would have to submit the prompt, wait, see it on localhost, and then revert. Here we can test so much stuff without sending more prompts.”

direct product comparison that sells the workflow→ 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.

analogy

00:00So in just twenty minutes, I was able to transform my AI Automation Society website from this to this, where now as I start to scroll, we go on this journey. We go through this scene where we have these different cards that pop up, and you can see they're kind of three d. They're interactive.

00:13And as we keep scrolling, we're going more through the journey. We've got this next slide. We keep going here.

00:18We've got this one, everything you need to master AI automation. And you can see that this is a much more interactive and polished feel than the way that it used to be. We got the final call to action to join the movements, and you can see we've kind of went through the journey of, like, an evolution of technology, which I just think was super, super cool.

00:34And what you'll notice is I was able to take the brand feel and the vibe and the colors and all of the copy, and I was able to just move it over really easily. So it has all the same important information, but it's just a much more interactive feel. And then twenty minutes later, I was able to do the exact same thing with my personal website.

00:49Here you can see it's got sort of like dark vibes. It's got a bunch statistics. It's got different things that I'm up to.

00:54And I just kind of transformed it to be a little bit more dynamic. You can see it's me sitting on some floating island in the middle of space, and I'm working on a computer. But as we scroll down, we have the same elements.

01:04We have the same copy. We have the same feel. But now it just has a lot more depth, and it just feels a lot more polished.

01:09So what I'm gonna show you guys today is how we set up websites like this using Claw Design. We can have different elements, we can have different feels, and everything is designed in a way that is just way more engaging and professional. And I've been trying a lot of different things here.

01:21You can see I've already eaten through my design quota, and I've already spent over $200 in extra usage just playing around with this stuff. So not only am I gonna show you guys the tips and the tricks that I've learned, but I'm also gonna go over some important stuff like how do you actually not drain your limit faster, and how do you get the most out of what you're doing here.

01:37I don't wanna waste any time today. Let's just go ahead and get straight into the video. Alright.

01:41So I'm about to show you guys everything you need to do step by step to take an idea from your brain onto an actual website and deploy it so that other people can actually view it and access it. Okay. So let's say you wanna transform a website.

01:53All you would really wanna do is if this has some sort of code base in GitHub or Cloud Code or wherever this actually lives, you can basically just grab that GitHub repo or you can grab the folder with all of the contents and just give it to Cloud Design. So that's kind of like the first method. The other method is, what if you just have an idea?

02:07And what if you just need to build a website from scratch? Well, let me show you what I'm doing here inside of actual Claude chat in order to give us an example to build together today. So I said I wanna build a website using Claude Design, and I'm looking for some inspiration on the type of website that I should build.

02:22What is the product or service that we're offering, and what should the hero section and actual copy be like? Help me basically build a brand, and I'll you know, give me the spec for this. So we came up with this idea of having a nightly wind down drink, one scoop of magnesium glycinate, blah blah blah, but the brand is called Lull, and it gives me the positioning in the voice, visual identity, and what the site should look like.

02:42So that's awesome. And then I come back and I say, cool. I wanna create a video that will play in the background of the hero section, and it will just be on an endless loop.

02:49I need the video to fit the vibe and I want it to have a wow factor so that when people go to the website, they're like, oh, wow. This is, you know, professional. There should not be any text, but it should also have room where we could insert a block for the hero text and the subtext.

03:01So what I'm asking it for is an image prompt for the background and then a video prompt to animate that. So it spits out an image prompt right here. So basically the theme, the concept is a dark ceramic mug with a warm liquid inside, and then just kind of having that be, you know, steaming in the background, which would give it a nice feel, and it will fit the vibe of, like, you know, sleepy time tea or whatever this is supposed to be.

03:22So it gives me the image prompt, and I'm gonna go over to key.ai. I'm using Nano Banana two. So I drop in the image prompts right here.

03:28I make sure that it's a 16 by nine ratio, and then I get this image, which as you can see is basically just a mug with some sort of liquid.

03:37This is where we put the hero text and the subtext, which is nice, and then it's steaming. And then I take this image and I go back into a different tab and key, and I go to Sea Dance two point o, and I put that image in as the first frame and the last frame, and I go ahead and I grab that prompt down here for the video prompts in order to animate the image.

03:56The key thing here is that the camera isn't moving. It's basically just a still frame or a still video of this coffee or whatever it is being animated.

04:05So here's what this looks like. As you can see, it's just steaming and it looks really nice. Now imagine this is the background of a website when you have got text over here.

04:13Could look pretty nice. Okay. So now we have those initial elements.

04:16I'm gonna open up Claw Design, and I'm gonna go ahead and do a new prototype, and we're gonna start with a high fidelity prototype. I'm not going to use a design system because in this case, we're kind of starting our own new brand, and maybe we can build a design system around this later. But for now, I'm just gonna go ahead and say none, and we're gonna call this LOL website because that's the name of the brand.

04:34So I'm gonna hit create. What it's gonna do is it's gonna spin up this little lovable like interface. If we wanted to, we could start with the sketch over here.

04:41So we could literally come in here and say, okay. You know, here's gonna be our website. This is where oh, I wanted another square.

04:49This is where we're gonna have, like, the main video. So it'll be the background of the hero.

04:55And I could come in here and say, like, this is the hero background video.

05:02And then we want another box over here, which will be, like, the hero text and subtext. Hero text. And then I'll come down here and just say, hero subtext.

05:13We could also probably want like some sort of nav bar up top. So this is like, you know, the logo might be over here.

05:21Oops. That's not how you spell logo. And then we could also have like, you know, shop or something like that.

05:27And so this is just a way for us to sort of visually get on the same page as Claude. And then of course, you can see down here, it would be looking at the sketch. So let's just go ahead and keep this for now.

05:36Obviously, if you have a better vision, you can put some more time and attention into this. You could also lay out the rest of your site down here too, and then you can add, like, notes and stuff.

05:45But for now, let's just leave it like that. And what I'm gonna do now is I'm gonna drag in that actual m p four that we got from Cdance. You can see that it's uploading the file, and it's right here.

05:54Now this was an eight second video. It's not gonna let you upload videos that are, like, thirty seconds long. There's a cap, and I believe it's around 30 or 40 megabytes.

06:02Just keep that in mind. I've gotten away with uploading fifteen second videos. I tried a twenty second video and it worked, but just keep that in mind.

06:08So now what I wanna do is Claude already did all the hard heavy lifting for us. You know?

06:12If I come back all the way up here, it basically gave us the brand and all of this stuff with a visual identity, the different sections, the footer, and you can see that it also has like, you know, colors and stuff. So I'm gonna take this, I'm gonna go back into Cloud Design, and I'm just gonna paste that in. And that gets pasted in as like a little bit of an artifact because it was a long bit of text.

06:33So now I just explained what I wanted to do. Hey, Claude design. I've given you a couple things.

06:38I've got a sketch, which is just my basically idea for the hero section. There's gonna be a lot of little sections beneath, which you will be on your own to figure out what that should look like. I've given you the sleep background dot m p four.

06:50This is a video that I want you to be playing on an endless loop in the background, and you should see that the hero text will be on the left side compared to that. And then I pasted in 23 lines of text, which is kind of the brand identity, the feel for the website, and how you should write the copy.

07:05And just go ahead and write all the copy for for now. We can make tweaks later. Okay.

07:10So I'm gonna paste that in, and go ahead and shoot that off. If you guys are curious about how I'm doing voice to text, check the description for the tool.

07:16I'm using extra usage, by the way. But it's gonna start to build this out. And if it has any specific questions for us, it will come back and it will ask those questions.

07:24But right now, it looks like it's just gonna run. And also keep in mind, this is right now using Cloud Opus 4.7. So honestly, like the planning phase, I like to use Opus 4.7.

07:34If we wanted to later make some iterations and we wanted to do other things, we could bump the model down. But keep in mind, this is going to use Opus 4.7, which is the most expensive model that is publicly available to us right now. But I love how we still have the feel of of Claude over here because it's telling us what it's thinking.

07:48We can see what it's doing. It makes a to do list, so it's very easy for us to just check-in on how how it's going and where we are. It's creating a design system here, so we've got kind of a color palette.

07:56We've got text right here. And it's honestly best practice, especially when you're getting used to cloud design, to just watch what it's doing and go ahead and stop it if it's going down the wrong path. Because if it's going down the wrong path, it's going to build stuff, and that's gonna use a lot of your session limit.

08:10So you might as well stop it and kind of refresh or recorrect it before it wastes all that time.

08:16Now while this is running, I wanna show you guys the way that I was able to get some other inspiration. There's this really cool site called motionsites.ai, and shout out to my guy, Aidan.

08:25He showed me the site, I was like, this is awesome. So the way this works is you can basically look at backgrounds and you can look at actual other sites for inspiration. So what you'll notice here, if you guys remember my version of AI Automation Society, so this website where we have this kind of scene in the background and as we scroll through, we have these visual cards.

08:41It's like a journey for the POV of the actual end user. I was inspired by this one.

08:47So if I open this up, you can see this is a scroll journey. It's got these three d dynamic elements in the cards. And I was able to literally just copy this prompt and I gave this to Claude Design.

08:57And I said, hey. This is a cool concept. I want you to replace the background image with or sorry, not the background image.

09:02I want you to replace the background video with this background video, and I dropped in mine. And I said, want you to update all of the copy and the brand colors and feel to my brand, and then I gave it in like a design system. So that's basically all I had to do to turn my AI Automation Society into this.

09:18And there's so many other ones. Most of these are free. I am on the paid plan, is literally just $99 for for life, so that's pretty cool.

09:25But some of these are gonna be premium, some of these are gonna be free. But like I said, you basically just find the ones you like, find the ones that fit your brand, hit copy, give that to Claw Design, and it will recreate it, and then you're able to just tweak from there.

09:36And then if I go to backgrounds, you can see that there's just a bunch of backgrounds that we can look at. So for some reason, it's not registering that I'm a premium member. But either way, let's say we really like this background.

09:46I could copy this. If I open up a new tab and paste that in, it basically just gives me that animation, which I could obviously go ahead and download and then display behind the text on my website, behind the different sections on my website.

09:58Considering that most of the stuff here is free, head over to motion sites and just play around. It's gonna give you some inspiration and there's a lot of cool elements in here that you can work in. So also, like, you guys remember my Nate Hirc one, I'm sitting here on a floating island and I'm working on who knows what, and I was inspired by some of these.

10:13You know, this one was kind of an abyss. This one was someone working. So I'm not necessarily recommending you just copy these elements and put it on your site.

10:20You certainly can. But this is just a good way to sort of get a little creative and get some inspiration. Okay.

10:25But we are back in cloud design now, and what we have is we have our first iteration, which I mean, this looks awesome. Like, this text lull, this text right here, this all feels very on brand.

10:35We can see here that as we scroll down, the image is a little bit dynamic or sorry. Not the image. I keep saying image.

10:40The video's a little bit dynamic. I think this all looks, I mean, just amazing. It feels very on brand.

10:45We keep going down, and we can see we get some background. We get some context as far as, like, what the product the the problem that it solves. And this is incredible.

10:54Just once again, all of this was generated by Claude. The idea, the design, the prompts, not the actual images and videos, but the prompts, and I I love this.

11:03Now what's really cool about this and a great way to save tokens is that you can just iterate right here. You know, if you put this prompt into Claude code, you would maybe get something that visually looks like this. But in order to go back and forth and make tweaks, you would have to, like, take some awkward screenshots or you would have to be very specific.

11:19But right here what we can do is we can add comments. I could basically just click on something, and we can change how it works. So for example, the how it works button.

11:26Let's say I wanted to make this a different color, maybe like the gold color. Go ahead and make this button the color of the comma in the hero text.

11:35Make it a gold accent. And so now I can just say, hey, send this to Claude, and it gets the exact comments about the exact element that I was referring to, so it's not going to get confused. We can also do edits straight in line.

11:47So if I came here and I was like, okay. I don't want this m dash. That looks very AI.

11:50I could just delete it, and then I could just close that out, and it's going to make that change for us because I was just able to edit it right there. So I can change the text. I could even, you guys noticed, change the size.

11:59So if I wanted this all to be a little bit smaller, I could just come into here and I could just go, okay, make that 15 or make that 10, and it's gonna change it right in real time. And then Claude just makes the change for us. You can also draw.

12:11So like right here, let's say I don't love the way that the video just kind of ends so abruptly. I can just kind of make a circle around this, and then I can type and just say, I don't like how this ends so abruptly add a transition overlay or gradient so it feels smoother.

12:34And I shoot that off by hitting send. Now when I do the drawing thing, the little comments get stuck down there, so sometimes it's hard to see.

12:41That's just kind of a UI bug. Once again, this is in research preview, so little kinks will get ironed out. But that's a really nice feature to be able to just draw.

12:49Okay. So you can see that that button changed colors. I like that.

12:51Everything else that we have changed has been changed. And it hopefully, you can see it added a little line here. So that's not exactly what I wanted.

12:59I would iterate a little bit. I was kind of hoping for sort of like a gradient transition, but either way, at least it knew exactly what I was referring to. Okay.

13:06So, anyways, at this point, we would read through all the copy and we would iterate. And like I said, I think that this looks pretty solid. But now if you are not someone who's creative, you might be like, okay.

13:16What do I even add? If you are someone who's creative, you're probably gonna have a lot of features that you wanna add, and at that point, you'll iterate, make some changes, make some prompts. But let's say you just wanna know what else is possible, and you wanna see what Claude can come up with.

13:27Watch this. You come into here. This is a really great iteration one.

13:31I wanna see what else is possible. I wanna see how this website could be improved. So just add a bunch of things that I can tweak and put those on there for me, different colors, different sliders, different panels, and just give me a bunch of things to play with.

13:43And this is one of the biggest benefits and things that I love about Cloud Design even compared to other, you know, website builders is that we have this tweaks panel right here. Right now we have none, but it's going to add a bunch of tweaks that we can just play with in real time. And that way we're able to see, okay, I love this, don't like this so much, and it has helped me feel a lot more creative in times when I'm kind of sitting there lacking inspiration.

14:06Real quick, I know we're gonna be going over a lot of information today, so I'm gonna throw in everything we're talking about here, all of the different things to keep in mind into a free resource guide that you can access for completely free by joining my free school community. As you can see, join the free community. This will take you to a automation society.

14:21You will go into the classroom, and inside of all YouTube resources, you will be able to find everything. The document that I'm referring to, and I'm also going to include basically the zip file of this website.

14:30If you guys wanna extract it and understand how it works and how the scrolling animations work, you can dive into it, you can let Claude code or Claude design dive into it. But it's really quite simple. Like I said, I basically just said, hey.

14:40Here's the video. But instead of just playing it, I want you to only associate each frame with, like, a scroll position so that as I scroll down or up, the video goes forward or reverses. So anyways, let's get back to the video.

14:50Okay. So our tweaks are here, and you can see on this right hand side, we have a ton of things that we could play with, which is just gonna be so cool. So let's start up at the top.

14:58We have a palette. So this was the default. We could also go to more of a blue or more of a brown and more of a green or whatever these is.

15:04I'm sure you guys can't tell a ton, but the colors here are changing. Now you can see more. The background is changing.

15:10We can get sort of like a green. We can get more of a brown. We have more of a light mode here.

15:14So this would let you play around with what you think fits the brand the best. And obviously, don't like this because the hero looks weird. So we could tweak that.

15:21I kinda like the brown. But anyways, what else? We have the accent hue.

15:24So we can change this. You see how the hue was kind of like a gold? We can change this to see what other colors might look good with our main color scheme.

15:32For now, I really like the default, which was kind of over here, more of like a golden bronze, so we'll keep it there. We have the text as well. So I could switch this around or sorry, not the text, the font.

15:41And I could play with different fonts to see what I actually like, and we can see where else it changes. So it looks like this is changing kind of the primary font everywhere. This is kind of more of a secondary, but this is changing the main text everywhere.

15:53We could also see the headline slider, so this can make it bigger or smaller, and we can play around with the way that it wraps and everything, so that's nice. The headline could be right in all uppercase. It could be lowercase, which actually I like.

16:03I'm gonna keep it all lowercase. And then we can change the actual text right here, of course. The hero layout we could play around with.

16:08Obviously, I don't want it centered. We want it left aligned because we made the video that way, so we're gonna keep that. But hopefully you guys are starting to understand what I'm talking about now.

16:16We have sort of like this overlay we can play around with. We have the video dim that we can play around with. I'm sure you guys unfortunately, you can't really see.

16:22I wish that they could move. Like, I wish you could drag this tweak slider anywhere, but I'm sure that'll come. We have something called section rhythm, which I probably have to scroll down to see what that is.

16:30Okay. So this is basically just like the gaps between the sections. So we could make that smaller or larger.

16:34We have the ritual card style. I'm not sure where the rituals are. Here they are.

16:38So flat, bordered, or big numerals. I think I like the big numerals. So, yeah, I'm sure you guys get the point by now.

16:44We're able to just play around with the tweaks, and, of course, we could just hit reset, which would reset everything. So there's really nothing to lose here. Actually making tweaks and then saving those changes is going to save you more time and also more of your session limit than if you're just having a conversation back and forth with Claude because we all know how that can go if you just shoot off prompt after prompt after prompt after prompt.

17:03Because also think about the fact that if you were doing this in Cloud Code and you had all these tweaks that you wanted to play with, this is basically like, hey. I wonder what it would look like if the background was blue. And then you would have to go submit the prompt.

17:14Cloud Code would change the background. It would put it on a local host, and then you'd look at it and be like, oh, I actually don't like that. So then you would have to, like, revert back to the old version.

17:22And so that could potentially be two prompts. Whereas here, we can see so much stuff and test it out in a way that doesn't actually make us send more prompts and send more prompts. Now one thing I noticed is I don't think there's like a revert button.

17:33In Lovable, you can just like revert back to previous prompts, which is nice. I don't see that here. But once again, this ability to do tweaks saves us from having to do a lot of reverts because we can say, I wonder what it might look like if the font was changed.

17:45I wonder what it might look like if the spacing between sections was smaller. And then if you don't like it, it's as simple as just not doing it.

17:54So once you're good with the tweaks, you just turn that off. If you made any changes, it would just go ahead and start making those changes for you. And now what's awesome is you have this project set up.

18:01Whether you're doing this in Cloud Design or in Cloud Code, you can keep iterating because you understand the idea of how do you get a dynamic element like this, or how do you do one of those scroll things where you just tell it that as you're scrolling, you want it to, you know, play the frames backwards or forwards. So let's say we have this that we love, and maybe down here we wanna have like maybe a video of someone sleeping.

18:23That would be really creepy. But but now if you basically just break the website into sections, so hero section.

18:29Okay. Cool. Section one.

18:30What can we do to section one to make this cool? Maybe we just add like a dynamic background where there's like shooting stars or something like that. And then section three, maybe we have like a little dynamic video of someone stirring coffee, you know?

18:43We can just kinda keep taking it section by section, and that way it's not so overwhelming of oh my gosh, I have to build a whole website. Just take it section by section and just use these principles. Use Claude to help you think of, okay, for section two, help me figure out like right here where what type of video should I have or what type of elements should I have?

19:01And then, okay, cool. Make me the prompts, and then I'll go into Key, and I'll make the the images, I'll make the videos, and then I'll bring them back into Claude, and you'll just keep iterating. And I think you'll find that it's really, really fun.

19:11You have the fundamentals, you understand how the tool works, and now you keep going. But now you're at the point where let's say you're good with this website. You know, you could also click on present, you could open it up, you could make sure it feels good, you could make sure the buttons are linking to the right spots, and then what do you do next?

19:25Well, what we wanna do is we want to get this into Claude code so we can push it into a GitHub repository and so that we can push that GitHub repository to Vercel. So if that makes no sense to you at all, I'm gonna explain it all, so don't worry.

19:37What we're gonna do first is we're gonna click on share, and we're just gonna go ahead and download this project as a ZIP file or a ZIP folder. So I'm gonna download this as ZIP. You could also just hit hand off to Claude code, which would give you a command.

19:49You would copy this, give it to Claude code, and then it would be able to pull everything in. Today, this morning, I've been having issues with this command. It's been getting a four zero four error.

19:56So it's worked in the past. This This will probably work by the time you see this video, but that's also an option. But the other option is you just grab the ZIP file.

20:04Alright. So here's that ZIP file. I'm gonna go ahead and extract all, and I actually wanna place this into a folder.

20:09So I've already created a folder on my desktop, and it is called Lull website. So I'm gonna click in the lull website, and I'm going to select that folder to extract it into. It kinda sounded like I was saying lull website as if website was a wrapper, like lull website.

20:23But now we have lull website, and this is the folder that we wanna open up inside of Cloud Code. So here I am.

20:29I'm using it in the Versus Code IDE, and I'm gonna go ahead and open up that project. Okay.

20:34So now that we are in here, we're gonna open up Cloud Code, and we're gonna get started. You can see basically over here what we have is we have the background video, we have scraps, which was our sketch, and we have the uploads, and we have the HTML.

20:46So this is basically our full project from Claude design, but now it's inside of Claude code. And I'm literally just gonna say, hey, this is a website project for our brand called Lull.

20:58All I want you to do is push this to a GitHub repository, push it to a private repository, and call it whatever you want.

21:05And because I've already used GitHub with my Cloud Code, it's gonna be able to just push it and it's gonna be able to create that repo. But if you've never done this before, all you wanna do is go to github.com. It's free to create an account.

21:15You're gonna log in, and then basically, you would just need to connect this to your Cloud Code. So if you ask Cloud Code to connect it, it'll say, sure.

21:23Just let me pull up the authorization page. You'll have to sign in. And now Cloud Code can talk to your GitHub, push changes, create repositories, things like that.

21:30And then the second piece of this is you're gonna need to create an account at Vercel. So Vercel is basically just a place for you to host and deploy your web apps and your website, so it should look like this.

21:40And when you sign up for Vercel, you can sign up with your GitHub account, which makes it super easy because then you can just sync a GitHub repo to Vercel. Because if you think about it, when you have a GitHub repository, all this is basically is is its folders and its files and its code, and GitHub stores them.

21:55So what you need to do is you need to get that code somewhere on the web, and that's what Vercel does. And there you go. Super easy.

22:00I didn't have to do anything. It says your website is now a GitHub repo. I can follow this link to open it up, and this is the actual repository that we just pulled in from Cloud Design.

22:10Now honestly, before we push this, we probably should have made sure that it worked. So make sure that the website actually works as expected and open it up in a local host for me to view.

22:19Now I'm actually glad that I had to do this because you you'll notice I said local host. So what does that mean? Local host is just a local host that will basically display our website.

22:29And so if this comes back with something like local host 3,000, if you tried to give someone that URL, it wouldn't open up for them.

22:36It It would open up whatever they have running on their own local host 3,000, which could be nothing. I actually saw some funny tweets where it was like a a beginner getting into Cloud Code saying, look at this awesome web app I built, and they sent out the local host URL, and everyone was obviously, they couldn't open it.

22:50So here is the local host. It opened up our website. You can see we have the video playing.

22:55We have all of the text coming in dynamically. So everything is basically being transferred over from Cloud Design over to Cloud Code seamlessly.

23:03No issues. And now that this is actually a GitHub repo, let's connect this to Vercel to put it on the web so that I could actually give you a URL and you could view my website. So back in Vercel, you guys are gonna be shocked at how easy this is.

23:16You click on add new. You click on add new project. And then right here, because I'm signed in with my GitHub repo or my GitHub account, I basically just click on this website and I say import.

23:25It's looking through my projects. It's gonna pull in this project, and then I basically just say deploy. This will take maybe sixty seconds, and then it'll give us an actual URL for our website.

23:35Now the cool part about this is if you ever make changes to your site, you basically now have a practice environment and a real environment. So if I'm on my local host here, you know, and I'm working inside of Cloud Code and I'm doing things, basically what happens is I can make changes and I can iterate, but only I will see these changes.

23:52So if I wanted to change the copy or if I wanted to change the background video. But then once we're good with those changes, I come back into here and I say, hey, Cloud Code, push all of these changes to GitHub. And then when the changes come to GitHub and they come over here, ForeSell automatically grabs that and deploys it to the live site.

24:10So you have a very clean separation between what you're practicing with and changes that you might wanna make, and then saying, hey. Cool. We love this.

24:17Push that public, and then Vercel will grab it, and then it will be live in, like, thirty seconds later. So, anyways, congratulations.

24:23You've just deployed a new project on Vercel. I'm gonna go ahead and click on continue to the dashboard, and now we have an actual domain. So this is a, you know, lol-website.vercel.app.

24:33And if I open this up, okay. So when I open this up, it says four zero four not found. So what do we do here?

24:40You go back into Cloud Code and you say, so I just pushed that to GitHub, and then I synced that to Vercel to host it on the web. And when I opened it up, it gave me this error message.

24:51What does this mean? How do I fix this? Do you need any more info from me in order to actually help me fix this?

24:57It was able to find the cause right away. Forsell serves this from the root of your repo by default, but the repo has a different path instead. So that's why it can't find anything.

25:05So the fix is it needs to rename lull website to index dot HTML. And then look, it pushed those changes to GitHub. So if I now go to the GitHub repo, which was this one, and I give this a refresh, we should see here that we have two commits, which means that we've made two different pushes, so we've made a change.

25:21And then what happens if I go back to Vercel so back here, you can already see the website is now rendering properly. And if I also click on deployments, we can see once again that we have a change that was made one minute ago, which was renaming to index.html. Now I could click on this domain, and I could see that we actually have our real site just the way that we saw it on our local host.

25:40And everything should be coming through properly because we've made that fix. Now one other quick thing I wanted to talk about when it comes to actually deploying your site is that you built this to be optimized for a laptop or for a, you know, a computer.

25:54So if you come into your site on the local host before you deploy it and you hit f 12 or you just open up your developer console, you can click this button right here to switch to mobile view. So this is actually what we'd be seeing if I open up the site on mobile, which obviously is not good.

26:08So you would need to go back and iterate a little bit and tell Cloud Code to optimize this for mobile. Maybe we want the image to be or I keep saying image. Maybe we want the video to be kind of down here instead, or maybe we just want the font to be displayed in one line and then have more stuff down here.

26:23So that is something to think about. You need to be thinking about how will this actually look if I'm on a mobile device compared to if I am on my computer or even like a tablet and stuff like that. So the point being, Claude Design and Claude Code don't automatically optimize for mobile, but if you tell it you need to optimize for mobile, it will certainly help you figure out the way to restructure it.

26:44And you can do all that without having it actually impact the way that it appears on the web on your computer version. So just something else I wanted to make sure you guys were aware of. And you can see right here that we're using a .vercel.app domain.

26:56So if you wanted to change this, you would just have to bring in your own custom domain. It takes maybe five minutes, and you can just talk to Claude to figure out to do that. It's super simple.

27:04But let's hop into some of this other stuff now and dive a little bit deeper into how to get the most out of Cloud Design. So Cloud Design is its own product. It it kinda feels like what they did with Cloud Cowork, how they basically packaged up different workflows and different functionality into something that's a little bit more accessible.

27:20You know? Because everything that Cloud Design does, you could easily do in Cloud Code, but not everyone wants to, and they're keeping all of this in the same environment. It's built on top of Cloud Opus 4.7, which has much more advanced vision capabilities than the previous models did.

27:35But, of course, the Opus 4.7 model does come at a bit of a cost, so keep that in mind. You can build prototypes. You can build slides.

27:41You can build landing pages, animated promos. So much stuff with design. Obviously, today, we mainly looked at websites, but there's a lot you can do.

27:48And in order to use it, you have to be on a paid plan. You cannot be on a free plan. So let's talk about the two meter system.

27:54First of all, Claude Design has its own weekly quota. So if I go back into my usage, you can see you have a current session for your plan. You have all models, you have Sonnet only, and you have your own Claude Design usage.

28:05And this is what I blew through pretty quick. And so what do the burn rates look like? People have been complaining that they're getting their session eaten up really quick.

28:13So if you're on $20 a month, after one big website and one big design system, you might already be almost done. If you're on the max five times plan, then you're gonna have, you know, maybe four to five series prompts and you might be able to, you know, hit the limit pretty quick. And then if you're on the 20 x plan, which I'm on, I was able to build probably a few different video projects and a few different websites, and then I started to get really close to the end of my limit.

28:34So what actually drains your limits the fastest? Well, are a few things. First of all, if you do every single thing with 4.7, then you're obviously gonna be eating more tokens than if you were on Sonnet or even Haiku for some very minor changes.

28:47I personally haven't done this myself. I've haven't really jumped into the wireframes. I always just started with a high fidelity, but I have seen some people on x talking about that if you do the wireframe first, you're able to basically convert it better to high fidelity with less iteration.

29:02And obviously, that makes sense. I mean, if you're in Claude code, I always talk about how the planning phase is so important. So get clear on your idea.

29:09Give as much context upfront as far as, like, a sketch and, you know, maybe like that Claude spec that we saw earlier in the live example. This information was able to make it so much easier for Claude design to build what we wanted on the first try rather than having to iterate so much because that's where you're gonna burn a lot of tokens.

29:24Also, setting up a design system without a URL, in general though, design systems will eat a lot. So if I go back to the app and I go into, like, creating a design system, which if I went right here, what this does is it lets you set up a system for your brand.

29:40So your name, you can put in a GitHub repo. You can put in other folders, other files, and other logos and assets, and it will create you basically a template so that if you ever wanna make anything, videos, slides, websites, you can create it with that brand.

29:54So for example, I made one with AI Automation Society, which is what you see right here. So every time I use this design system, it's going to make everything with that typography, with those colors, with that background, the color scheme, all that kind of stuff. Now when you create a design system, once you put in all this information, it has to ingest it and it has to create that actual spec.

30:12And this can eat a decent amount of tokens because it's gonna take, like, ten to fifteen minutes. Now what's interesting is if you actually export this, you can put that into Cloud Code, and you can get all of that value already.

30:23If you come into your design system, you can see the type of information that's in here. You can iterate on it, But you can actually go ahead and share this with your team, but you could also just download this as a ZIP. And then you could give that ZIP to Cloud Code sort of like we did earlier.

30:35And now you could say, This is the design system for AI Automation Society. Help me build some other stuff. And you could do that then in Cloud Code as well.

30:41It's really nothing new. The whole concept of having like a design system or a design MD, it's not a new concept. It's just kind of the way that it's packaged up here in Cloud Design makes it a lot easier.

30:51And then of course, like I showed you guys, the ability to tweak stuff in the canvas. We talked about this. Right?

30:56Being inside of a project and using tweaks and using, you know, the comments and the edits, that's going to be more precise and it's gonna give Claude a better idea of what you actually wanna change so that it doesn't go down the wrong path and waste your time and your session. And then just think about the fact that you might get into some really, really long threads.

31:13I haven't proven this for a fact, but just based on the way that Claude uses tokens, what I found is that if you are in a project, right, and it's getting really, really long and you're still not getting where you want, maybe you want to export this and then open up a fresh session, and you're kind of not really starting at square one again.

31:29You're iterating upon something that's already been built, and you're making some changes, but now you have fresh context. Because this is likely all starting to pollute the context window, and it might be leading to some rot, and it might be leading to tokens becoming uncached, and then you're basically just processing them again.

31:45So that's something to keep in mind. Now you could also come in here and do a slash clear, and it says, hey. Cleared.

31:50We're ready for the next instruction. So that's something else to also play around with, but I can't say with certainty that that actually clears all of this from the context window. I haven't seen for sure yet.

31:58So okay. So best practice is to stretch limits. We kind of already talked a lot about that.

32:02I just showed you guys the zip export when you're zipping either your actual project or a design system. We talked about model by stage, so maybe you can use Opus 4.7 at the beginning to plan a little bit or when you need some really legit changes. But switch over to Sonnet 4.6.

32:16I was on Sonnet 4.6 for a lot of a different build, and it was able to generate the video. And it was able create the animations and create the slide decks, and it was working just fine. I think at the end of the day, like, Sonnet 4.6 is really good.

32:28And if you are super clear and super specific about what you want, then you could probably get a lot of the way done with Sonnet 4.6. So So it's definitely worth testing out.

32:37And then some other real quick tips, one visual dimension per prompt. So don't try to throw in a mega prompt with, hey, change x y z, a b c, d e f, and g.

32:46Now I know that some people might disagree with this because sometimes in Cloud Code, you wanna send off one big prompt so that it can create its to do list and it can start to iterate. But what I found here is that when I ask for multiple different big changes in one prompt, it only actually does like one or two of them well, and the rest of them just kind of get disregarded.

33:04So I've found more success, and when I talk about being efficient with my prompting, I found more success doing one main big change per prompt.

33:12It's also good to do negatives. So tell it what you don't want. Tell it if you don't want these fonts or if you don't want these color schemes.

33:18That way, you don't have to correct it later. You can also reference real things. So saying something like linear twenty twenty three with higher density rather than just saying, hey.

33:26Make this clean or make this minimalistic. Obviously, pointing and commenting on things and drawing on things and then asking for prototypes, flows, demos. And then, of course, you can go ahead and export that entire HTML.

33:36You could export it to Figma. You could export it to Canva. You could export it to PowerPoint.

33:41You can get it out of there and then make the tweaks you need to if you don't actually need to use Cloud Design for things that you could do pretty easily and pretty quickly by hand. So some other things to keep in mind. File uploads.

33:51So I have been able to upload m p fours like you guys have seen. I've been able to edit some videos, but there is a cap.

33:57And I think it might be 30 megabytes. It might be 40. It might be a little more.

34:00But if you try to go and upload, like, a five minute video, it's probably not gonna let you. There also might have just been a bug because this is in research preview and because everyone's using it. But for the most part, you can upload lots of different assets.

34:12And the more things that you're able to upload right away, the more context it's gonna have and the less you're gonna have to repeat yourself and fix things. And then here are just some other quick limitations to flag. Not gonna read all these off because I feel like I've hit on a lot of these already, but take a quick pause if you wanna look at this.

34:28And like I said, that free doc that I drop in the community will have a lot more of this kind of stuff as well. Alright.

34:35So that is going to do it for today. Now what you can do next is watch this video right up here where I talk about other website hacks and specifically in Cloud Code. Because what might happen is if you burn through your limit in Cloud Design, but you wanna keep iterating, you wanna keep building, just do what I showed you.

34:49Export your Cloud Design project, get it into Cloud Code, and now you can just keep working on Cloud Code because you have more usage. And then just wait till your usage resets on Design, and then take it back into Design. So like I said, watch that video on screen.

35:00I'll see you guys over there, and thanks for watching. Give it a like if it

The Hook

The bait, then the rug-pull.

In twenty minutes and a single Claude session, a static dark-mode homepage became a scroll-animated 3D journey with floating cards, a looping video hero, and a live Vercel URL. The tutorial does not stop there -- it also pulls back the curtain on the quota system that makes that twenty-minute win possible to repeat or impossible to replicate, depending entirely on how you prompt.

Frameworks

Named ideas worth stealing.

27:53concept

The Two-Meter System

Claude Design has its own weekly quota entirely separate from your Claude chat and Claude Code quota. Both meters show in Settings > Usage. Burning one does not affect the other, but both reset on different weekly schedules.

Steal forexplaining Claude billing to clients or team members who wonder why their chat still works after Design is maxed out

30:00model

Model-by-Stage

Opus 4.7 for design system creation and first HiFi generation
Sonnet 4.6 for wireframe exploration, slide iteration, and copy edits

Switch from Opus 4.7 to Sonnet 4.6 after the first high-fidelity pass. Sonnet handles iterations and copy at a fraction of the token cost.

Steal forany AI tool workflow where expensive models are used for planning and cheaper ones for execution

32:14concept

ZIP Export Hack

Export your Claude Design project as a ZIP, open it in Claude Code, and continue iterating using your Claude Code quota while your Design quota resets. The exported project is the new starting point.

Steal forany situation where one AI tool quota is exhausted but related work needs to continue

CTA Breakdown

How they asked for the click.

VERBAL ASK

14:05link

“join my free School community -- in the classroom under YouTube resources you will find the document and the zip file of this website”

Mid-video soft CTA at 14:05 directing to a Skool community for the resource guide. Executed cleanly with screen demonstration but slightly long-winded delivery.

MENTIONED ON CAMERA