Big Idea

The argument in one line.

Claude Design collapses the gap between brand idea and shipped product, but only if you front-load context and manage your two-meter session limit deliberately — skipping either step burns your weekly quota before you finish.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You have a paid Claude plan and want to understand what Claude Design actually does beyond chat.
You are building a side project or startup and want a pitch deck, landing page, and brand assets without hiring a designer.
You have burned through your Claude Design session limit unexpectedly and want to understand why.
You want a repeatable workflow for taking a brand from zero to a live deployed website using AI tools only.

SKIP IF…

You are already shipping with Figma and a professional design team — Claude Design constraints will frustrate you.
You need production-grade mobile app code, not a clickable prototype.
You are on the free Claude plan — Claude Design requires a paid subscription to access.

TL;DR

The full version, fast.

Claude Design is Anthropic's standalone visual tool with its own separate weekly session quota — distinct from Claude Chat and Claude Code — that drains fast if you ignore the two-meter system. The creator builds an entire brand (Tally, a personal finance app) live: design system first, then pitch deck, landing page wireframes converted to high-fidelity, interactive mobile prototype, launch video via HyperFrames, and finally a GitHub and Vercel deploy through Claude Code. The core skill lesson is to front-load context before touching the canvas and to switch to Sonnet 4.6 for iteration, reserving Opus 4.7 for the initial high-fidelity pass only.

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 – 05:24

01 · What Is Claude Design

Introduction to Claude Design as a distinct Anthropic product, its positioning vs Figma, and overview of what will be built in the masterclass.

05:24 – 08:55

02 · Why Design Systems Matter

Explanation of how a design system acts as a brand multiplier, ensuring every downstream artifact uses the same visual language.

08:55 – 11:33

03 · Ideating the Tally Brand

Live brand ideation for a fictional personal finance app called Tally, defining audience, aesthetic direction, and core brand values before touching Claude Design.

11:33 – 19:50

04 · Creating the Design System

Building the Tally design system in Claude Design: logo, color palette, typography, iconography, and design guidelines doc.

19:50 – 34:01

05 · Pitch Deck Build

Building an investor-ready 17-slide pitch deck for Tally using Claude Design with the design system applied, covering problem, solution, market size, and traction slides.

34:01 – 40:45

06 · Landing Page Wireframes

Sketching low-fidelity landing page concepts in Claude Design before committing to a high-fidelity pass, demonstrating the wireframe-first token-saving workflow.

40:45 – 57:51

07 · High-Fidelity Website Build

Converting the wireframes to a full high-fidelity Tally website with hero, features, testimonials, and pricing, with live iteration and negative prompting techniques.

57:51 – 1:09:00

08 · Mobile App Prototype

Building an interactive mobile app prototype for Tally with tappable flows for onboarding, dashboard, and transaction screens inside Claude Design.

1:09:00 – 1:22:03

09 · Launch Video with HyperFrames

Using Claude Design's HyperFrames feature to generate an animated launch video for Tally, prompting frame-by-frame motion without leaving the canvas.

1:22:03 – 1:32:01

10 · Final Live Build

A real-time complete build session demonstrating the full workflow under session limit pressure, showing context management and mid-session export techniques.

1:32:01 – 1:49:26

11 · GitHub and Vercel Deploy

Exporting the completed Tally website from Claude Design, loading it into Claude Code, pushing to GitHub, and deploying to Vercel including debugging a 404 error live.

1:49:26 – 1:57:00

12 · Stretching Your Session Limit

Breakdown of the two-meter system, what drains Design quota fastest (design system creation, long threads, Opus 4.7 for everything), and the model-by-stage strategy.

1:57:00 – 1:57:56

13 · Final Thoughts

Wrap-up with next steps: watch the Claude Code website hacks video, use the free resource guide in the Skool community.

Atomic Insights

Lines worth screenshotting.

Claude Design runs on a separate weekly quota from Claude Chat and Claude Code — treating it like regular Claude leads to quota shock by the second build.
Building a design system before any artifact means every subsequent pitch deck, website, and app prototype inherits the same fonts, colors, and logo without re-prompting.
Wireframe first, high-fidelity second: converting a low-fidelity sketch uses fewer tokens and produces better first-pass results than prompting high-fidelity from nothing.
One visual change per prompt — asking for six changes at once gets you one done well and five ignored.
Negative prompting (telling Claude what you do not want) prevents the correction loops that drain your weekly quota faster than the initial build.
The design system spec exports as a ZIP you can load into Claude Code, so a depleted Design session does not stop your build.
Referencing a real product by name produces more precise output than adjectives like clean or minimal.
The entire flow from brand idea to live Vercel URL stays inside the Anthropic ecosystem: Design canvas to Claude Code to GitHub to Vercel.
On the Pro $20/mo plan, one substantial website build plus one design system creation can nearly exhaust your Claude Design weekly quota.
A fresh context window seeded with an exported design file outperforms a long exhausted thread trying to iterate on the same project.
HyperFrames generates animated brand videos frame-by-frame inside Claude Design without requiring a separate video tool.
A Vercel 404 on launch resolved in one Claude Code prompt: Claude identified the repo root lacked index.html and renamed the file automatically.

Takeaway

Front-load context or waste every token after it.

SESSION STRATEGY

Claude Design rewards preparation: a brand spec, a reference URL, and a wireframe before the first high-fidelity prompt saves more session budget than any other optimization.

01What Is Claude Design and Design Systems

Claude Design runs on a separate weekly quota from Claude Chat and Claude Code. Treating it like regular Claude leads to quota shock by the second build.
Build the design system before any artifact. Every subsequent pitch deck, website, and app prototype inherits your brand automatically without re-prompting.
The wireframe-first workflow consistently uses fewer tokens and produces better first-pass results than prompting high-fidelity from nothing.

05Pitch Deck Build

Drop a slide-by-slide outline into the prompt before Claude touches a pitch deck canvas. An investor-ready structure shapes the first pass correctly.
One change per prompt. Asking for layout, color, and copy changes simultaneously results in one being done well and the others silently skipped.

06Landing Page Wireframes and HF Build

Sketch the page structure in low-fidelity mode before requesting high-fidelity. The structural diff between wireframe and HF is where you catch layout mistakes cheaply.
Negative prompting prevents the correction loops that drain your weekly quota fastest. State what you do not want before describing what you do want.

08Mobile App Prototype

Claude Design produces interactive mobile prototypes with tappable flows. Useful for investor demos and user tests before writing any code.
The prototype answers whether a flow feels right before you commit to a build. Do not expect it to survive production load.

09Launch Video and Final Live Build

HyperFrames generates animated brand videos frame-by-frame inside Claude Design. No separate video tool is required for a launch asset.
Iteration speed inside Claude Design degrades as threads get long. Export the current file and restart in a fresh session rather than continuing in a polluted context.

11GitHub and Vercel Deploy

Export the HTML from Claude Design, open it in Claude Code, and prompt your way to a GitHub push and Vercel deploy without leaving the Anthropic ecosystem.
A Vercel 404 on launch resolved in one Claude Code prompt. Claude identified the repo root lacked index.html and renamed the file automatically.

12Stretching Your Session Limit

On the $20/mo Pro plan, one substantial website plus one design system will nearly exhaust your Claude Design weekly quota.
Switch to Sonnet 4.6 for refinement passes. It handles layout tweaks and copy edits competently at a fraction of the Opus 4.7 token cost.
When your Design session runs out, export the project ZIP, load it into Claude Code, and keep building. The weekly Claude Code quota is separate.

Glossary

Terms worth knowing.

Claude Design: Anthropic's standalone visual design tool, separate from Claude Chat and Claude Code, optimized for building websites, slide decks, prototypes, and brand assets through natural language. Requires a paid Claude plan and runs on its own weekly session quota.
Design System: A reusable brand specification (logo variants, color palette, typography, iconography) that Claude Design applies consistently across every artifact it generates for that brand.
Two-meter system: The dual quota structure in Claude where regular Claude usage and Claude Design usage are tracked on separate weekly meters. Exhausting one does not affect the other.
HyperFrames: A Claude Design feature for generating animated launch videos by prompting sequential frame compositions, producing motion graphics without leaving the Design environment.
High-fidelity (HF): A fully designed, pixel-complete mockup as opposed to a wireframe. In Claude Design, high-fidelity generation is powered by Opus 4.7 and costs more session quota than iteration prompts.
Wireframe: A low-detail structural layout generated before the high-fidelity pass, used to lock composition and flow with fewer tokens before committing to the expensive visual render.
Tally: The fictional personal finance brand built live throughout this course. Tagline: Money, on the level. Used as the end-to-end demo project covering design system, pitch deck, website, mobile app, and launch video.

Resources

Things they pointed at.

00:00productClaude Design ↗

1:32:01productClaude Code ↗

1:32:01toolGitHub ↗

1:32:01toolVercel ↗

1:09:00productHyperFrames

00:00productSkool AI Automation Society (free) ↗

00:00productAI Automation Society Plus ↗

00:00toolGlaido (voice to text) ↗

00:00toolHostinger VPS ↗

Quotables

Lines you could clip.

00:00

“Cloud design is one of the most powerful design tools that I've ever used because it makes everything insanely consistent, branded, and professional, and all you have to do is use your natural language.”

Strong opening claim, no setup needed, immediately validates the premise→ TikTok hook↗ Tweet quote

1:52:46

“If you're on $20 a month, after one big website and one big design system, you might already be almost done.”

Concrete, surprising, directly relevant to the largest Claude plan user segment→ IG reel cold open↗ Tweet quote

1:55:00

“Sonnet 4.6 is really good. And if you are super clear and super specific about what you want, then you can probably get a lot of the way done with Sonnet 4.6.”

Counterintuitive — most users assume you need the most powerful model for everything→ 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:00Cloud design is one of the most powerful design tools that I've ever used because it makes everything insanely consistent, branded, and professional, and all you have to do is use your natural language. So in this master class, I'm gonna take you from a complete beginner, maybe you've never even opened up Cloud design before, all the way to an expert who can ship websites, videos, app demos, prototypes, whatever you wanna do with Cloud Design.

00:21I'm gonna show you guys the full process of me actually coming up with a company, building the branding, building the logo, building the guidelines, and then creating a pitch deck, a website, mobile app prototype, and a launch video. And we're gonna do all of this step by step in cloud design, and it is super simple, and it's a lot of fun.

00:35I'm also gonna be throughout the video talking about how do you actually get your money's worth, and how do you make sure that you're not going through your cloud design session limit really quick. I've been playing around with this tool every day since it came out, and I'm just gonna be showing you guys everything that I know about how to get the most out of it.

00:48There's time stamps down below. Make sure you save this one so you can come back and jump around whenever you need, and let's not waste any time and just get straight into this video. Well, let's just go ahead and jump right in.

00:58So Claw Design, this is gonna be super fun. What is it? It is basically a separate product.

01:03So it's almost like you've got your Claw Chat, you've got Cowork, you've got Claw Code. This is a different app within sort of the Anthropic ecosystem called Claw Design, and it's specifically made for people to work on designing things, whether that is websites or slide decks or, you know, prototypes.

01:18A lot of people when this was released was calling it the Figma killer. You can share design systems across your team. You can export designs from Claw Design into Cloud Code or to Canva or as Zips or as HTML.

01:29So we're gonna be diving into all of that today. So we're gonna be looking at sort of three different acts, different stuff gonna be going on. We're gonna be starting with foundations.

01:36So looking at what's actually going on inside of Cloud Design, getting set up. We're gonna do some builds. So I'm gonna go through some real scenarios.

01:43We're basically gonna set up a brand together. So I'm gonna show you guys how I ideated on a new brand, a new business, and then I used a combination of cloud design and some other tools in order to really bring that brand to life.

01:54We're also gonna be going over some really important habits and the ways that you can get the most out of Claude design without burning through your session limit. Because the important thing about Claude design to note is that it is a separate limit than your regular Claude or Claude code usage.

02:08You can see we've got our current session, We've got all models. We've got SONNET only, and then we have a Claude design specific limit.

02:14So we have to really be careful because we don't wanna just blow through this if we're not using it efficiently. So I'm gonna talk a lot about that in this master class as well. And then we'll talk about what comes next, but this is gonna be really cool.

02:25I'm gonna take you guys on a full journey, like I said, of building a brand. So anyways, just to get started off here, what is Claw Design and what is Opus 4.7? So here was the release blog from Anthropic about Claw Design on 04/17/2026.

02:38Today, we're launching Claude Design, a new Anthropic Labs product that lets you collaborate with Claude to create polished visual work like designs, prototypes, slides, one pagers, and more. And you can even use it to create, like, animations and videos, which I'm gonna show you, of course, today, but it is just really powerful.

02:52It's also being powered by their most capable vision model, is their most recent model, Claude Opus 4.7. And once again, you're not starting from scratch because you can import your current brand assets, your current websites, your current apps, and you can create design systems around those so that every single thing you build in the future feels branded with the colors, the font, everything.

03:11Collaborate with Claude to create polished visual work, a vision model backed design surface. And it's really interesting because this thing is pretty much powered by OPUS 4.7. You have the ability inside of Claude design to switch which model you use, which I'll talk about as well, because you do wanna be a little bit strategic.

03:26But OPUS 4.7 has the best vision, and Cloud Design does something really cool where it basically validates and it looks and uses its eyes to see what's going on on the page to make sure that it didn't mess anything up. Cloud design was released pretty much the day after Opus 4.7 was released, which was pretty cool. And, obviously, if you're using Opus 4.7, it goes through tokens quicker.

03:44It's more expensive than using a model like Sonnet or Haiku, so you have to be strategic there. And something else that's pretty interesting is Krieger left Figma pretty much right before the announcement of Cloud Design, and Krieger was on Figma's board and is now Anthropic's CPO. So that's also kind of interesting to think about, like, where are these tools headed?

04:02But, anyways, let's go ahead and get set up and figure out what actually is going on. But first, let's just talk about how to get set up. So you have to be on a paid plan for this.

04:10This is available for pro users, max users, and team and enterprise users as well. So if you're on the free plan, you will have to upgrade in order to test out cloud design. You're also going to be getting more usage as your plan increases, obviously.

04:22So if you're paying more per month, you're gonna get more of that claw design usage as you can see right here. And I'm pretty sure that this is a weekly reset. So if you hit the limit, you have to either wait until it resets, or you could go ahead and purchase some extra usage, which would just be, you know, coming out of your actual balance.

04:38And as you can see, I've been using a ton of this extra usage because if you're not careful, you hit the limit pretty quick. But that has helped me learn what helps me, you know, manage that limit better. So I'm gonna be sharing all that with you guys today.

04:49Okay. So let's actually go ahead, open up Cloud Design, and let's start building a brand, and I'll show you guys what I've been up to. So if you're in your regular chat in Cloud on the web, you'll see over here on this left hand side, we've got this little button that says design.

05:00So that's what you're gonna wanna click on, or you could just Google Cloud Design, and that's gonna pull up an actual separate app which looks like this. And this is kind of the interface that we're gonna be working out of for cloud design. Now a few things you're gonna notice.

05:11There's kind of this thing on the left hand side, which is how you launch a new project. You can see that we have prototype. We can choose between wireframe and high fidelity.

05:17We have slide decks that we can create. We have different templates or other. On the right hand side, we have all of my previous designs or design systems that I've built.

05:26We also have a bunch of examples to look through. So organic loaders, we can take some inspiration from. We can look at text streaming.

05:32We can look at things like a globe and some shaders. So there's ways right here to basically just use this prompt and inject that into a project that you wanna work on. And then, of course, you can look at your design systems, which we will talk about as well because this is the first thing that I want you guys to do when you get into Cloud Design.

05:47Now building a design system is kind of token intensive, but it is in the long run gonna save you because then everything you build, for example, my AI automation society design system, everything that I build will have this branding, the logos, the typography, the colors. But you don't wanna go crazy building, like, five different design systems.

06:04You just wanna start with one and then iterate from there. So if I open up this design system real quick to show you guys, what's in here is, like I said, everything about my UI, my brand.

06:14So it's got my website. It can look through, you know, the different fonts, the colors, the way that our buttons are, the way that our little banners are, and it knows everything about this website. And it used this to basically create typography.

06:26So it knows our brand. It knows, like, you know, when to use primary, when to use secondary. It also knows colors, so accents and gradients are neutrals, also our primary colors.

06:35It understands spacing, so we have these little glows behind buttons. We also like to have, like, you know, different sizing and different types of shapes. And similarly with components, which I think is awesome, look at it.

06:46It has all of these badges. It has all these tags. It understands what our buttons should look like, what our cards should look like.

06:51It understands all of this, and this is all translated into our websites, our videos, our slide decks, our, you know, landing pages, whatever we wanna build. Now we don't have to repeat this, and that is why this is so awesome because this can be shared across your team.

07:06If you have you know, if you're on a team plan, everyone in your organization will be able to access this design system, which means consistent visuals, whether that's internally or externally, LinkedIn posts, whatever it is, it will always be consistent, which is really important. You can also go ahead and download this as a ZIP, as a PDF, as an HTML, and you can put that into Claude code, or you can bring that into Canva, or you can even give it to Chad GBT's new image model.

07:29Whatever you wanna do with it, you can take this and bring it somewhere else. So that is why this is the first thing that I want you to do when you get into Claude design.

07:37So let me show you guys how we're gonna set this up. What I did here is for my AI automation society design system, it was easy because I already had a brand. I was able to give it my logo.

07:47I was able to give it to GitHub repository of my website and my website URL, and it was able to scrape through all the stuff that we already had existing and turn that into a brand design system. Now if you're not in that boat and you're starting from scratch, then it's a little bit different because you have to figure out, okay, what is my design system?

08:03What are our colors? What are our typography? And what's the feel?

08:07So that's kind of the scenario that we're going through today. So what I did is I came into Claude, and I said, hey. I need to create a brand.

08:12I'm working on a project where I'm gonna create a new brand, and we're gonna create, you know, like a pitch deck, a logo, brand guidelines, website, all this kind of stuff. So help me figure out a good brand concept that I can use so it feels consistent. So this is basically just me brainstorming with Claude.

08:25And the reason I'm doing this in chat is once again because we don't wanna eat through our Claude design limit. We only want to use Claude design when we're actually ready, when we have an idea, and we're ready to move forward with that plan. So don't ever brainstorm in cloud design.

08:39There's just no point. You get way more usage over here. So, anyways, it starts to sketch out.

08:43It asks me some questions, and it starts to give me a few concepts of, like, you know, what the type will look like and what the logo could look like and, you know, the vibe and the colors. So it gave me a couple, and I liked this one. So I I said, okay.

08:54Cool. Let's kinda move forward with Tally, and let's let's build out some more of this brand. So I said, okay.

08:59Let's run with Tally. I want you to build a brand around this. What's the product we're selling?

09:02Who does it appeal to? What's the mission? What's the offer?

09:05And I just said, figure all of that out for me. Now, obviously, you're gonna weigh in a little bit more if you're building a real business or if you've already got something in the works, but this is just me showing you guys how we can ideate with Claude. And what it did is it created this whole brand concept.

09:16So it created, you know, the product, the audience. It created some avatars as well, the mission, positioning, brand pillars, voice, and tone.

09:25So a lot of, like, conceptual stuff about the brand and the promise, but then it also got into some important stuff down here like the visual identity. So we've got a color palette with four main colors, and that's really important to give to our design system obviously. It also went into some typography, so our primary font as well as our secondary font and some other logic with, like, you know, the way that we do our hierarchy in our hero section and different things like that.

09:49So if I was to give this concept to Claw Design, it would build a really, really nice website for us in one shot just because it already has so much info right here. And then after I created that, said, yep. Let's ideate on the logo as well.

10:01So how can it fit the overall vibe? And it gave me a few different options. It gave me this cross with the three or sorry, four tallies and then the fifth and the text, and it gave me a few other variations.

10:11I ultimately ended up saying that I like this logo, but I like having the green dot, the green period at the end of the word.

10:20So I basically went with a hybrid of this and this. And then I basically asked for like a full typography, almost like a mini brand guidelines thing.

10:27So it gave us this logo, it gave us this typography, and it just showed us what this could look like. So the brand is really starting to come to life a little bit now, and we're probably in a much better spot to be able to actually create a design system out of this at this point.

10:41So back in Cloud Design, I'm gonna click on design systems up here, and I'm gonna go ahead and click on create a new design system. Now real quick, just for context, let's take a look at where we're at as far as our usage. So in Cloud Design, we are at 4% of our usage, and I'm on the 20 x max plan, so $200 a month.

10:59Let's see how much this design system creation eats up out of our design. Now it won't be as much as, you know, if you were importing a bunch of code bases because you can link in folders and files and GitHub repos. So the more that you import right now, the more usage it's gonna take up, obviously.

11:14But still, let's just see what this does. So company name and blurb. Well, the name of the company is Tally, and let's just take a look at what our blurb is gonna be.

11:22I'm probably just gonna go ahead and grab the mission of our company, so I'm just gonna grab this. Okay. We don't have a GitHub repo at the moment.

11:29We don't have any code. We do have some assets to import, so I'm gonna go ahead and add the Tally logo. And I also wanna add this file.

11:36So I'm actually just gonna download this as, hopefully, markdown. Yeah.

11:41So we've got our brand concept. And you can also see if you already had a Figma project that you wanted to bring over, you could import that right here. So any other notes for now, we're just gonna leave it like this.

11:51I think the one thing that we might wanna call out is we haven't built a website yet, so we don't know what our buttons and what our feel is gonna look like. So if you wanted to add any notes about that, you could. So I'm just gonna add a real quick sentence.

12:02I'm gonna say, when we're building out assets like, you know, a website or things like that, I want the buttons to feel very modern.

12:11I want them to have sort of a, like, a slight glow behind them, and I just want it to feel very polished. Now that's not really a very good prompt. Like, that's pretty vague, but just adding a little bit more context there.

12:23And let's go ahead and click continue to generation. This will take about five minutes, so I'm gonna hit generate, and I will check back in with you guys once we get this wrapped up.

12:32Actually, I lied. While this is loading, I did wanna show you guys something else that you could look at doing. So ChatGPT's new image model, image two, is really solid.

12:39You know, you could have taken some of the, you know, information from here and some of the colors and stuff that we had built, And you could also ideate with Chatty Bitty a little bit to see what those images or the logos and stuff could look like. So I basically said, hey.

12:52I need a professional and minimalistic logo for this brand. I said what the brand is. I talked about the audience a little bit and sort of the palette, and it gave me this as the first version, which is pretty cool.

13:00You know, we've got the little green mark right there. And then I also asked for more of an icon based one, and it gave me this. So I didn't love this one.

13:07I really just like the actual tally marks that Claude initially came up with, but that is another thing to think about is that GPT Image two is pretty solid at helping you build some of this stuff. And I'll show you something else as well, which we will come back to later after we've sort of built out our website with this brand.

13:23But I actually just built my brand guidelines for AI Automation Society with GPT Image two. So I gave it the logo, and I said, hey, this is basically like what our brand is.

13:32Here's some variations. Here's our color palette. Here's our typography, and it created this for me.

13:37And it's really good. This is the actual official one that we're using internally. However, you can see it messed up some of the fonts.

13:43Now it is pretty good with text in general. Oh, you can see you can see all the other font is fine, but because it was trying to pull in Roboto Mono and was trying to pull in Monsterrat, it messed it up a little bit.

13:54So even when I said, hey. You know, that didn't work. Oops.

13:56I can't get out of this. Even when I said, hey. That didn't work, and I tried to have it do it again, it just didn't work.

14:01And honestly, was like, know what? That's fine. I'm just gonna throw this into Canva, and I'm just gonna go ahead and grab the fonts and just put it in myself.

14:07So not a huge deal. It might have trouble with certain fonts. But as far as, like, the spacing and everything that did here, this looks really good.

14:14So like I said, we're going to do one of these with Tally, with the brand that we're building right now, a little bit later on in this video. So don't panic if you're like, how do you do this? I wanna do this.

14:24It's gonna be simple, and I'll show you. Okay. But looking back at our design system, we've got some stuff to look at here.

14:29So Clauda's still working, but you can start giving feedback. It's missing the brand fonts, which is totally fine. You could upload them if you want, but it's also gonna be able to pull them out.

14:37As you can see down here, it's got type. But we see the brand mark. So we have the mark, the word, and the tagline.

14:43You can see this got a little bit messed up. The tally should be going across all four. Cloud design has been historically bad with logos.

14:50For some reason, it sort of re like, it it tries to change them a little bit, which is not great, obviously. So I'm gonna say no. That needs work.

14:59The logo is not appearing as it should. I dropped in a PNG of a logo, and you should just keep it exactly as is. There's no reason to change that.

15:08So that's a little feedback I'm gonna do. I'm also gonna say everything else still looks good. The colors and the font is fine, but the icon logo is not correct.

15:19So we'll submit that. Same thing here. I mean, these all like, from a color scheme perspective, I don't mind it, but it just doesn't look right.

15:27And this is something that, like I said, Cloud Design has been doing historically bad. Same feedback here. The logo has been changed.

15:33The colors look good, but the logo cannot be changed from the original PNG that I gave you. I'm gonna shoot off that feedback as well. See, this one looks good.

15:42This is the actual logo that I believe we uploaded. So I'm gonna go ahead and say this one does look good. These also look good.

15:48That's great. And I like the way that this looks as well. So you're basically just gonna keep going through this design system to make sure that all of these look great and the way that you actually want your brand to look.

15:58And definitely spend some time here because like I said, this is going to be your design. Md, your spec for everything that you build in the future, videos, promos, landing pages, everything. So this is looking much better.

16:10I'm starting to become more confident in what we're building with this design system. So I'm just gonna keep approving stuff or giving feedback, and I'll check-in with you guys once we have our finished design system. Alright.

16:19So we're getting all of this pretty much finished up. And what you'll notice here is on the left hand side, we can see that Claude is verifying. And this is it actually looking at what it built to make sure that everything looks alright.

16:30As you can see, it's kind of going down through the different elements. Now this is for us to review. So here it's even mocked up what a landing page could look like.

16:38And you can see that all of this feels very on brand. We've got the text based logo on the top left, and we can scroll down and see the way that it uses our different colors with these little little cards and stuff like that. I think that this feels really nice.

16:49I love the way that this is looking. I'm gonna say it looks good, and I like this mobile app sort of preview. That looks good too.

16:55And what it did is it created a bunch of these different things. So obviously, marketing for our UI kit. Right?

17:00But it came through and it also thought about the buttons, which I thought was cool. We've got these different buttons that it can use and the way that they highlight when they're you know, when you put your mouse over it or when you click, it's got a bit of a drop shadow with a glow. We've also got these input fields.

17:13We've got icons where the icons go down here. We've got these that it's gonna use. So now we have just some really cool elements that we can always have consistent with our brand.

17:23So all of this looks good, and I'm gonna go ahead and say that we're good to move on. So I published this. I could make this my default if I want to.

17:29I'm not gonna do that right now, but we could go ahead and now use this design system to build whatever we want. You can also click on design files up here at the top, and this is where we can see different assets, like the things that we've uploaded, different previews that it's generated, and different documents. And this is what we could go ahead and export if we wanted to bring in a design system and actually give it to a Claude Code project.

17:49We could give it to Claude Code, and then it would also be able to use the same design system. So that is where this is super powerful. Okay.

17:55Now if we go back to the home screen, you'll notice if we wanted to create a new project, we could click on our tally design system instead of our AI automation society design system. We could also go ahead and not use one if we want, but that's why we just built the tally one. But real quick, let's go ahead and go to my usage.

18:10We are at 10%. So on a $200 a month plan for max, that design system took about 6% of my session limit already.

18:19Now that's really not too bad. If you're on a pro, it's obviously gonna eat more. But keep in mind, we didn't give it a ton.

18:24If you were giving it a whole code base or GitHub repo to search through and scrape through, it would have eaten more. So be selective about what you give your cloud design.

18:33You you saw how well it did with just markdown and a pretty vague idea. So it really just needs, you know, key elements like the colors, the logo, the typography, and if you already have some buttons and things like that, you don't actually need to give it an entire GitHub repo unless there's really important info in there.

18:47So think about that when you're building your design system. Okay. So we've kind of started to build our brand.

18:51Right? We took a concept from Claude. We were brainstorming.

18:54We ideated a little bit. We created our logo. We created all that, and now we essentially have a design system.

18:59We have a a design MD that we could export anywhere and a design MD that we can use for any of our future projects. So let's actually get started here. What do we wanna build first?

19:08Well, we're gonna go through the full journey. So we're basically gonna start with a pitch deck, and then we're gonna move into, a product landing page, and then we're gonna build a mobile app prototype, and then we're gonna go live with a launch video at the end. It's all gonna feel on brand.

19:20And throughout the course of this video, we're gonna really bring this brand to life by building all of these elements, all in cloud design. Real quick, guys.

19:27I know we're going over a ton of information in this video, so what I wanted to do is break all of this down into a very simple PDF resource guide that you guys can use. And that way you can reference that later if you ever need to look at some stuff I said about, you know, token management or prompting, things like that rather than having to scrub through the video every time.

19:42So if you wanna access that completely free resource guide, then head to my free school community. The link for that is down in the description. I'll see you guys over there, and let's get back to the video.

19:50So let's go ahead and get started with our pitch deck. I'm gonna go ahead and open up this cloud design, and I'm gonna go to slide deck. I'm gonna make sure to use the tally design system, and I'm gonna call this tally oops.

20:01Tally pitch deck.

20:04And we're gonna go ahead and click create. Now right here, what do we have? We have basically kind of a lovable like interface.

20:13On the right hand side, we have our preview. We also can see our files. We can do sketches.

20:18And the left hand side is where we will chat with the AI, or we will leave comments and things like that. We will drop files in, that sort of stuff. So it's really interesting.

20:26For this use case, all I'm gonna do is I'm gonna drop in the brand concept markdown file, which if you guys remember was basically just this markdown doc that we were looking at earlier that Claude generated, and it has all the information about the business and sort of like the mission and the avatar. And all of this information is really all that I need in order to make this actual pitch deck.

20:46And if it has any questions, that's the thing is Claude Design will also iterate with you, and it will ask you things to make sure that it understands your end goal. Now one thing that I might recommend doing is if you're not very clear on what you want to be communicated in your pitch deck is don't waste time, like I said, brainstorming here.

21:02Go over to Claude and brainstorm in this environment. Say, hey. I wanna build a pitch deck.

21:06Here's a little bit about, you know, information about my business. Help me lay out this pitch deck. Help me understand the structure of it.

21:12And then take that file or, you know, copy and paste whatever it gives you there, and then bring that back into Claude design and move forward with the actual creation. So you can see the little inputs here are to make a deck. We have the Tally design system, and we also have the Tally brand concept markdown file.

21:26Now I did realize though before I actually give this to Claude Design, I maybe do wanna do a little bit more market research. So I'm gonna open up Claude again.

21:35I'm going to come into this chat where we already have all this context, and I'm just gonna ask it to help me structure that. So what I wanna do now with Tally is I want to create a pitch deck for an investor presentation.

21:47You know, and I want to basically explain what Tally is and why I believe in it, and also look at the market and see why it is a good investment and why people might want to, you know, come on the the Tally team and the vision that we're pushing for.

22:03You know, we wanna get them to be bought in. So with the brand concept spec that you already have for me, build on top of that with a pitch deck sort of structure and also do any research about the market and the strategy for actually getting Tally to a place where it's starting to adopt a lot of users. So it started doing some research for me, which is great, but then it actually said that it wanted to actually build the deck, so I had to stop it.

22:24I said, you don't need to build the deck. Just give me markdown outline so that I can put this research into cloud design, and then it can do it. So I want you guys to be thinking about AI as a specialized tool.

22:36And even if you're using AI, meaning like Claude, how can you have a separate chat for each individual type of request? How can you make each session as specialized and specific as possible to give you better outputs?

22:49Because in this case, we're using Claude right now for the research and to create us, the markdown outline, but then we're gonna bring that into design to actually do the design. I think even outside of the scope of this master class today, that's just a really important mindset when you're using AI tools.

23:03Okay. So now we have our pitch deck outline. This is pretty comprehensive.

23:07There's a ton of slides here, and I'm just gonna go ahead and copy this. And now what's cool is that was basically the heavy lifting. So the idea is, hopefully, that is going to make it so that cloud design doesn't actually eat as much of our session limit than it would've if we just dropped in, hey.

23:22Build me a pitch deck. So I have dropped you in a tally dash brand dash concept markdown file, and that just has some overall information about our business tally and, you know, like, the mission and the positioning.

23:35And I'm also going to paste in some information about how we want to structure this pitch deck. You don't have to follow it to a t, but there's a lot of important research and information in there that I want you to use in this pitch deck as if we're trying to convince investors to invest into our business.

23:50So and when I just pasted in that stuff, it came through as the text right here, so I'm just gonna clarify. The 372 lines of pasted text that you see is the information about the pitch deck structure.

24:02So I'm gonna shoot this off, and we're gonna go ahead and see what we get. If you guys are curious about how I'm able to just talk and the text appears, then check out the tool in the description. I'm I'm using a tool called Glido, and I'm actually a part of the Glido team now because it is significantly faster and more private than Whisper.

24:17And I think that there's a lot more Agencik stuff that we're gonna be doing with it, which I'm very excited about. So definitely go check out Glido. Windows support is coming very, very soon.

24:25So while this is running, I also wanted to just bring your attention real quick to this stuff down here. So this is where you could change the model.

24:32You could see by default, you're gonna be on Opus 4.7. You could switch back to Opus 4.6. You could even use Opus three.

24:37I don't think I I will. But you could also go to Haiku and Sonnet. And so for the most part, when we're doing sort of like the initial planning and we're starting out, I'm pretty much always going to be using Opus 4.7 here.

24:48When I may be doing some tweaks and feedback later, that's where I would, you know, reduce the model to Sonnet or Haiku for the little iterations and things. But especially once you've really nailed the way that you have your design system and the way that you like your landing pages or decks to be built, you could very likely get to a spot where you're just using Sonnet all the time once you feel comfortable with the flow and with the outputs that you're getting, especially if you're using Claude on the front to actually do the help with, like, strategy.

25:14Because you can use Opus here and you can figure out the outline of what you want and then just say, hey, Sonnet inside of Claude design, take this information and just throw it on a deck for me. And that's how you're gonna be able to stretch your limit a lot farther. Okay.

25:26So this is done. I did do one round of feedback, but I wanna show you guys why, and I wanna show you guys some other important things. So this is our prompt.

25:33It started to read everything and dig into it. Right? It planned out the structure, and then what happened is it started building it out, and it was able to verify and look at stuff.

25:42So you can see here it says the verify agent check completed. Now what that means is it was looking at each slide visually to see what happened, and it said, okay. Let me fix slide six because there was this wrong, and let me fix slide 10 because this was wrong.

25:54So then it fixed them, and you can see that it was able to run the verifier agent. Now I did have a little bit of feedback to give. So I said, hey.

26:01The logo's wrong here, blah blah blah. And once again, it's able to view the stuff. So it took a screenshot, it looked at it, and then it was able to fix it.

26:08So that's super, super cool. But now let's take a look at what we got. So we have Tally, money on the level.

26:13We've got the nice navy background with the regular font here and the logo. So let's continue on. I'm gonna use the arrow keys here.

26:21Most finance apps want to change you. Tally shows Tally just shows you what's happening. Okay?

26:26And you can see in the bottom left, we've got the logo, both the icon and the text, is pretty nice. The category lectures, people don't want a lecture. They want a clear picture.

26:3320,000,000 Mint active users at peak. More.

26:36The replacements compete on more, more AI, more features, more coaching, and about 50% of fintech app users churn within their first year. So then it goes over some converging trends. It goes over three things, connect your bank, get your Sunday digest, run an affordability check.

26:51The weekly is the product. So there is some sort of mobile app here. Once a week, Sunday morning, you get this sort of report.

26:57Interesting. And as you can see, it's sort of going through the pitch. Now, obviously, we don't want this to be super wordy because this is a pitch deck.

27:06There's gonna be someone speaking over all this stuff, so we don't want it to be too distracting. But it's feeling very on brand. Everything is consistent with our font, our colors, our logo, stuff like that.

27:15And then we get into some of this other stuff that Claude design wouldn't have probably done by itself. This is some of the research that regular Claude was able to pull in for us. So things about, like, the market and the gap.

27:25And, basically, this is where you start to convince the investors to invest. I thought this slide was really nice.

27:30A really nice visual interpretation of where Tally solves a gap that the current other tools don't solve.

27:37And I'm not saying that this is the best launch strategy for a SaaS product. I'm not saying that this is even a 100% accurate because I didn't, you know, I didn't validate this yet.

27:45I just built up this brand in, like, the past ten minutes. But this is what it can start to do. It can start to tell a story for you.

27:52$8 a month, one plan, no tiers. How we get there, so phase one, phase two, and phase three over the course of three years, it looks like. And from beta to $3,000,000 ARR right here.

28:04So as you can see, this is where you would also put in some information about the founder. We got the logo here changed. We got some other hires that are being planned.

28:12And, yeah, for a first pass, I think that this is really, really good. Obviously, what you do here now is you would start to iterate a little bit.

28:19So there's lots of ways that we can iterate. We can click on edit, and that would let us actually edit things ourselves. So I could maybe I don't wanna call this a founding designer.

28:28Maybe we wanna just call this the founding graphic designer, and I could go ahead and do that. And what's important here is when you make these changes, Claude applies them, but what this does is it helps you actually be more specific on your changes, and it will save you session.

28:42It will save you tokens in the long run. Because if you wanted to prompt all this by natural language, you could, which is awesome, but there's more room for error there.

28:49Whereas here, we can actually click on the exact specific element that we want. We could change the sizing. We could could change the color, and we can be more specific by doing the actual edits.

28:59What else we can do is we can use the draw. So let's say we don't want I don't know.

29:04Maybe we want this logo to be bigger. So I would draw a circle around this, and then I could just type and say, I want this to be larger.

29:13And then I could send that off. And what that does is it injects that drawing. Oh, wait.

29:17It said it couldn't capture it. What happened? Okay.

29:20Let me try that again. I could circle the logo down here. You can't see it because this thing covered it up.

29:24And then I could just say, I want this to be larger. And when I send that off, it basically injects that screenshot into the chat right here.

29:33And so it knows what I just circled, and it sees the the comment that I left. It's a little bit buggy down here, unfortunately. And now we'll go ahead and actually implement that change.

29:41So it says, the user circled the small tally mark inside the interesting. Okay.

29:47So that actually didn't work. It seems like yeah. That didn't work here.

29:51The draw might be a little bit buggy right now. Keep in mind this is in research preview, so you might see a bug like that.

29:57I, in the past, have been using draw and it's been working fine. But that's just another example of like, maybe you don't even need to draw because if it's a specific element, just highlight it. You know, if I wanted this to be bigger, why don't I just grab this and make it bigger myself.

30:09You know? Draw is probably more useful for something that doesn't actually have an actual like div tag or an actual element.

30:16So let's say, you know, maybe we wanna go to like the last slide.

30:21And let's say this background was like a gradient or something. Maybe there's a really weird the gradient's too dark right here, and I would circle this and say, hey, can you make this section a little lighter? That's probably a better use case of the draw compared to drawing around something that actually exists as an actual element.

30:36And what's what's cool here, kind of interesting, each one of these tally marks is its own individual component that we could change, which is kind of interesting.

30:44I could change the color of just this one if I wanted to, so that is pretty nice. I'm not gonna do that. I want to make sure I don't do that change, but that's pretty cool.

30:55Now that's a little bit annoying. There's not like a reset button, unfortunately. So or like an undo.

31:00So if I wanted to change this back, I would have to grab the actual color from there and come into here and then change that. And now I could edit that and it would fix, but that was a little bit like, I think that there should definitely be, like, an undo button, or maybe I'm just missing that. And then we have the ability to add tweaks, which is pretty cool.

31:16This basically just means that we could change the way that the slides actually look, and we could do this rather than prompting. We could just do it in an interface. Let me show you.

31:25This looks really nice. There are some slides that might feel just a little bit bland, though, so I might wanna be able to add some more color or just a bit more of our brand feel on top. So could you give me a couple different tweaks that I could play around with for this whole slide deck?

31:41And what I like about this is there are some moments where if you're not super creative, you might just feel kind of stuck. But what you can do is you can let Claude Design be the creative one.

31:50You can say, hey. Give me a bunch of tweaks. Let me play around with things, and that will let you actually figure out what you like or what you don't like.

31:56Okay. So now we have our tweaks available, meaning I can click on this toggle and we see some different things that we can change. So the first one that we'll take a look at is the cover.

32:04We could go ahead and change it from default to bold mark, which means that this would be bigger and that would be bigger. We could also do word mark only, which would give us this. And, I mean, I honestly like the bold mark, so this was the default.

32:15I like how it's a little bit bigger like that. Now let's take a look at what else we have. We have texture of the background.

32:20So we could do a dot grid, which honestly, I'm not really seeing. I think the dots are just like they're very, very light.

32:27We could also do a hairline, which is kind of just like a graph paper background. I don't know if you guys can see we've got like that sort of grid, which adds a little bit of texture, which is nice. But my favorite honestly is this warm haze, where we kinda got the green up here, a little bit of orange.

32:40And this I think just looks very very nice. It gives it some more depth. And I don't know if I would have thought to prompt Claw Design to do this.

32:45So this is one of those scenarios where, especially behind this app, I think that this warm haze looks really, really nice. We've also got an accent, so we could do vivid green, which looks like it just changes.

32:57All I saw was this thing. If I go default, that goes away. Vivid green adds that little hash mark or whatever that's called, m dash.

33:04I don't know. Warm, I'm not really seeing what that's doing. Maybe we have to go to, like, a different page to see what the warm would do.

33:10So you definitely have to kinda click through to see what's actually going on, or you could ask cloud design as well. But I I like the vivid green, so we'll stick with that. And then we have the slide chrome.

33:19It can be default, it can be minimal, or it can be emphasized. And I'm really only seeing the difference here. So the slide number in the top left, minimal takes that away, and emphasized makes it a bit of a darker color.

33:31And I think that for this sake, we wanna just leave this on default. I like it as default.

33:36So there's other tweaks we could add, of course, but right now, this is where we're sitting, and I like how we were able to just play around with a few different things and see what we like. So at this point, let's say we're good with the copy, we're good with the way this looks, we would go ahead and we could either present it right from here, or we could go ahead and, you know, invite our teammates to it.

33:53We could duplicate it. We could create a template. We could export it.

33:56We could give it to Claude Code. Whatever we wanna do now with this pitch deck, we can do. Okay.

34:01So that was our first project that we did together. That was the startup pitch deck. Let's say now what do we need is a product landing page.

34:08We are going to build out just a real simple one page landing page for this product. But real quick before we do that, I wanna do a quick usage check. Let's see where we are with our cloud design usage after setting up our design and building this pitch deck.

34:21We are now at 32% used, so just keep that in mind. But what we're gonna do now is we're gonna build a landing page.

34:29And the good news once again is we already have what we need for the most part because we have this whole brand concept guide. And this is basically gonna be a lot of the copy that goes into our website. So let's go back into cloud design.

34:41We're gonna go we're gonna start a new prototype. And what I wanna show you guys is how the wireframing works. So I'm gonna click on wireframe.

34:48I'm gonna change this to our tally design system, and I'm gonna call this our landing page mock ups.

34:57Because what we're gonna do here is before we start designing and actually building our website, we're gonna do a wireframe to see kind of a canopy of different approaches, different styles that we could take. So I'm gonna click create, and we're gonna start to prompt this thing on what we want.

35:10So I'm gonna do the same thing once again where I drop in the brand concept, and I am going to just start to ideate here. I'm gonna say, so we have a product called Tally, and that's the design system that you're looking at.

35:21I also just dropped in our brand concept markdown file, which is attached right there. And the point of this project is a wireframe project. I want you to give me a bunch of different concepts, a bunch of different mock ups of how our landing page could be set up.

35:35We will probably have a hero section. We will have some specs.

35:40We will have our pricing. We will have some testimonials. You can fill all of this in with mock data.

35:45The point of this right now is to help me figure out the theme, the the style. How should the website feel? How should it look?

35:51You know, who are we appealing to? What is the journey of the website? What are the different colors?

35:55You know, dark mode or light mode? Or how do we make it feel modern? How do we make it feel on brand?

36:00So what I want is just a few different concepts so that we can actually take this wireframe into a different project to build us our landing page. So this step isn't absolutely crucial. If we dropped all of this into a regular high fidelity project and said, hey, build me a website, I'm very confident that it would look amazing, and I'm very confident that we could take the tweaks and change it the way we want.

36:21But sometimes it's nice to be able to look at a ton of different concepts. Maybe also when we're doing something like building a mobile app, we would wanna do something like this as well. And what's nice here is it's gonna ask us a lot of questions.

36:32So how many distinct concepts should I sketch? Let's just go ahead and do three. Wireframe fidelity, these are pre designed.

36:38How rough do you want them to be? Sketchy hand drawn vibe, clean wireframe, mid fi, or mix.

36:44I'm gonna go ahead and do mid fi. I think that's gonna give us a better feel.

36:49What vibe which vibes and directions should I explore? I'll cover at least three. I'm just gonna go ahead and say decide for me.

36:56I don't wanna give the input there. I want it to be creative. Then it's also asking lights or dark.

37:01We're gonna go ahead and do mostly light with one dark concept. What stands in for imagery, app screenshots? I'm just gonna go ahead and say decide for me once again.

37:11And beyond all of these, what else do we want? Probably FAQ, probably, yeah, sure, a founder note, a comparison table would be great, and a sample of the weekly privacy data.

37:21Yeah. Sure. All of this stuff is good.

37:24So you can see this is helping us get more refined on our goal. Now, of course, you could do this mock up section in a regular Cloud chat. There's nothing wrong with that.

37:34It would do something very similar to what we did earlier, right, where it was giving me these different mock ups and giving us different visualizations of what we could do. And honestly, from a token perspective, that's your better call.

37:44I But definitely just wanted to show you guys what this wireframe can look like. And for the rest of these, I'm honestly just gonna say decide for me for all of them so we can see what we're gonna get with minimal input. So I'm gonna shoot this off, and let's see what we get.

37:56Alright. So this has finished up. We've got three different styles.

37:59We've got the honest mirror, we've got the receipt ledger, and we've got quiet night. So this basically gives us, like, a board, you know, kind of like a Figma or, you know, even like a Google Stitch that we're able to, like, zoom in, pan around, and comment on things, edit things. So let's just take a look at this first one.

38:16We've got kind of the light bone background. We've got a big hero section. Honestly, this interface is just a little bit, like, wonky.

38:22You see if I open it up full screen, I'm able to, like, get in there a little bit because now I could actually scroll down and see the full journey of what's going on in this site. So that's actually a lot better to be able to look at it like that. So here's that first one.

38:33We can see the hero section, the weekly. We can see the scope and, like, a comparison table versus others, which is pretty cool. And then looks like a a note from the the team, all that kind of stuff.

38:43And then if we go over to that last one, this was more of the dark mode. So this looks very similar to that first version, except for I think the only difference really is the dark mode.

38:52I mean, I think there's a few other changes, but this is basically something that we could now take into the next section to build our landing page. Let's see what's down here though. We have what you're choosing between.

39:02We're choosing between the mode being light bone, light bone, or dark navy. We have a different type of voice, whether that's, you know, editorial documentation or modern fintech. We've got imagery.

39:12We've got page length, and we've got different audiences that we're going towards. If you guys remember in our original spec over here, we had two different types of audiences. We had Sam, and then we also had freelance Frankie.

39:22So So it's pretty cool that it was able to take that into account, and it shows us which website is kind of appealing to which of our avatars. This one could feel preachy.

39:31This could feel cold. This could feel generic. So we could continue to iterate on here and take one of these that we like into the next section of actually building us a landing page.

39:41Now to be honest, for this specific use case, I think that was probably a waste of my session limit. I think maybe this would have been better to do a wireframe for planning out, like, a full funnel, you know, maybe where you've got page one, page two, page three, and, you know, like, you're you're you're actually visualizing out the journey.

39:57I think that could have been more useful. I think also if you're designing, like, an actual desktop app or a mobile app, then doing a wireframe could have been better as well. We've used it actually for helping figure out like some of the branding for different logos and different packaging.

40:10So that was pretty helpful. But when it comes to just designing a landing page, I think you're probably better off to actually just do that in high fidelity right away. But I just wanted to show you guys that concept.

40:21So what I did is I just exported this as HTML. So if I just open this up, let's see what that looks like in HTML. So it basically just gives us that exact thing that we could scroll through and look at.

40:31I wonder if it lets us still open that up. So, yeah, we basically just have this project now as HTML. But anyways, what I'm gonna do now is we are going to just basically start fresh.

40:42So I'm gonna switch over to a new one. We're gonna do Tally. We're gonna do high fidelity, and this is going to be the tally landing page.

40:50So that was a waste of time. That was a waste of my session. Let's see how much we actually used here.

40:54That used 41. I think we're at 34 before, so it used about 7%. So definitely a waste of 7% of my session, but I'm glad that I still showed you guys that.

41:02Okay. So let's go ahead and create this landing page. Now what I wanna do here and what I'm gonna show you guys is something pretty cool.

41:08I wanna add a little bit of an animated element to the background. So what I went ahead and did is I took our logo and I went to cling, and I went to make a video. I gave it a start frame as the bone background blank, the end frame as our logo, and then I basically said that I wanted to animate this.

41:22So I said, you know, I'm not gonna read this prompt, but if you guys wanna read it, I will just kinda slowly scroll right here so you can see. But basically what we get is this output where it looks like the actual logo is being kind of like hand drawn in and then the tally mark goes across.

41:38So I thought this would be cool to have sort of like on the right hand side of the hero section just kind of playing on an endless loop in the background. So I've downloaded this, and we're going to make sure that that is implemented into this part of the website. So what I'm gonna do is I'm going to go to my downloads, I'm gonna grab that animation, and I'm gonna put that in right here.

41:56You can see it's being attached as tallyanimation.mpfour. It should already have access to our logos and everything else that we need. I'm also gonna give it that brand concept doc because that has some important stuff about the positioning and the pricing.

42:07But before we actually build this, I do wanna do one thing. I wanna do a sketch. So I'm gonna click on new sketch.

42:12I'm gonna grab a square, and I'm just gonna give an overall kinda 16 by nine landing page. So this is the overall site.

42:20So this is our landing page. And the reason I'm doing this is because I want to align with Claude on the way that this is gonna work before it actually starts trying to build.

42:31Because what I wanna do is you guys saw this video. Right? It is kind of a I think it's a square aspect ratio, like one by one.

42:37So I want this to appear on the hero section, but I don't want it to be covered by text.

42:43So what I'm gonna do is try to do my best, like, one by one ratio thing.

42:49And inside of that, I'm gonna mark this as the tally animation dot m p four, which is what this shows up as on the left hand side right there.

43:00And then what we'll do is we'll grab another square, and we can just make this one green. And this will actually be like the hero text section.

43:07So I can just label this as the hero text and maybe like if I do one more hero subtext.

43:16And then what I can also do is we probably wanna have some sort of nav bar up top, so I'll just grab orange, and I'll just do this. And I'll go ahead and grab one more text, and I'll just say, like, the logo can go in the top left corner.

43:28And then maybe we have, like, a nav sections.

43:35And then maybe on the right hand side, we have, like, a call to action over here. So now I'm able to sort of give it just a better rough outline of what we want, and the sketch is being referenced down here right there.

43:47Sketch, you know, 04/29/2026 napkin, whatever. So at this point, I feel more comfortable about giving it a plan that it's able to kind of more of one shot.

43:57So I'm gonna start talking here. Okay.

44:00So we want to design a landing page for Tally, which is our product. I've given you a sketch attached in this chat, and that's kind of the way I'm imagining this hero section at least looking for our website.

44:13I'm imagining a nav bar up the top. I'm imagining hero text and hero subtext on the left side of the screen, and I'm imagining the tally animation dot m p four on the right side of the hero section.

44:26But what's important is that the tally animation, the color is the bone color, so I want the whole background of the site to be bone, at least for the hero section.

44:37So it looks like it naturally and seamlessly fits in to the rest of the hero section. So we'll also have hero text, we'll have hero subtext, and then as we scroll down, I want you to design the other sections of this site using our Tally design system and using the Tally brand concept markdown file that I gave you.

44:54You can fill all of this in with mock data at the moment, and if you have any questions, feel free to ask. So that is what I'm gonna do for the initial prompt.

45:03We're gonna shoot that off. We're using Opus 4.7, and I'll check-in with you guys when we get any questions or if we have some sort of POC.

45:09Alright. So here's what we got. I think it looks pretty nice.

45:13I can sort of tell that the color of the background doesn't perfectly match the color of, you know, the video background. You know, it's a little bit off, but for the most part, it's not bad.

45:24What we could do is we could actually make sure we get the exact hex codes and match them if we want it to really be seamless. But as a first pass, the concept, I like the idea of having this animated, and it got it right based on my sketch.

45:36You know, the hero text, the subtext, we've got the video over here, we've got the nav bar with the logo, the nav, and the CTAs over here. So that looks all very nice.

45:44As we scroll down, we start to get some elements now that Claw Design built in itself without me having to ask. So we've got, like, connects via Plaid, 256 bit encryption, read only access, no data resold, iOS and Android.

45:56Some nice things that we want on a sliding banner. We have four steps. None of them are homework, so we can see connected bank.

46:03I like how it shows the average setup time, so how easy it is to actually get this stuff plugged in and set up. I really like with the sample weekly, we can see that it says like Sunday twenty seventh, but as we scroll, this stays locked, but this keeps moving, and that gives it sort of like a dynamic feel, which I really like.

46:18You can also see that it's throwing in our green accent, which is really nice. And as we continue to scroll down, we get more green accents. We get more copy here.

46:26I do think it would be nice to maybe switch up the color. Like, if this one was navy and then this one was bone and then this one was navy again, just to give a bit more of, like, you know, structured sections. But I like the way that this navy one looks sort of like that.

46:38Right? Like, I like the the difference there, and I like this call to action with the actual logo, and this button sticks out really nice. So as a first pass, think that this looks really, really good.

46:47Now same thing I'm gonna do here is say, hey. I like this. Give me a bunch of tweaks.

46:51Let's play around with some stuff. Okay. So we got these tweaks back.

46:54Now I would zoom this in a bit more. I guess I'll do this much, but the reason I didn't was because earlier I was this zoomed in and the video was going down there. So let's do a 125%.

47:03But anyways, we can do some tone things. So right now the background is warm to match the video.

47:08We could also switch this to dark, and obviously that would change the video, that's why I don't wanna do that. So we'll go back to warm. For texture, we could do subtle noise.

47:17I don't really see too much of a change there. It's a bit too subtle. We could do a dot grid.

47:22Once again, I'm not sure how much of a change I'm seeing there. We could do ledger lines. I'm definitely seeing those ledger lines.

47:28And it's interesting because if you can tell, it doesn't look like those are fixed to a section. They kind of are like an absolute ledger line which kind of adds a lot of like three d depth which I think is kinda cool.

47:39We can also do graph paper or we could do paper fiber. I kind of like the paper fiber and that really shows the depth.

47:47Okay. Yeah. Let's say I like the paper fiber.

47:49Texture strength. Okay. Here's where we could make that stronger or weaker.

47:52So if I go back to like the dot grid, now we can definitely see the dot. Actually, you know what?

47:56I might like the dot more. I like the strong dot background. So we'll stick with that.

48:00We can add a veneer. I don't really think we need that.

48:05Okay. So for the hero layout, we could do split. We could do stacked.

48:08We could do video left. I don't like that. We're gonna stick with split.

48:11The headline font, we could go, nope. I like the sans. Headline size, we could change we could change the text right here.

48:17So money on the level or it could just be money. Yay. We could change the video frame.

48:23So none, hairline border, corner ticks, card plate. I'm just gonna leave this as flush. I think that that looks the best.

48:29An ornament dot. What is an ornament dot? Let's turn that off.

48:32Okay. So ornament dot is basically just like a a caption of what we're seeing. I'm gonna leave that there.

48:38We can also get into what the accent should be. So for, like, these colors up here, if I change this to a different color, it would change that. However, I did like the default, so I'm not sure if I'm gonna be able to get that perfect where it was.

48:49It was right about there. We could change the intensity. The tally mark watermark, where is that?

48:55I assume that's gonna be somewhere down here. Right? Like, where is there gonna be currently a watermark?

49:02Ah, I found it right here. That's pretty cool. You see how as you as you scroll down, you see this in the background?

49:08I mean, I think that's awesome. I'm gonna leave that. Ledger numerals.

49:11So I'm assuming each section has some sort of number right here. You can see three, and that gets turned off.

49:17I'm gonna keep that on. And then we can do you know, we can change the sections. So the sample weekly, if I turn that off, it just completely removes that section.

49:25But all of these I like. So those are the tweaks that we were able to make, and if we wanted even more, we could go ahead and ask for more. But I think that this looks really solid as just a first pass.

49:35I'll go ahead and click on present, and I'll do it in this tab so we can get the full screen experience. Now there is a bit of a gap here, and I think that it should probably be more flush like this, but that'd be a really easy fix. We would be able to do the edits or we'd be able to do the draw, and we'd be able to iterate in order to make this better.

49:49But, yeah, I like the feel of it. You know, for basically a one prompt, maybe, you know, two or three iterations, we're already at a spot where this is really good.

49:57It feels on brand. It matches our pitch deck. It matches our brand guidelines.

50:01And anytime we wanted to make another sub page or, you know, a certain promotion or a different landing page, we would be able to keep this style. And I really like this watermark how it only stays on that background.

50:12If we go into navy, we don't get it, but it comes right back. I think that adds a lot of depth and a lot of texture that I really actually enjoy on the site. So at this point, if we wanted to be able to take this and push that onto our live domain, we would basically take this, we would export it to Cloud Code.

50:27So we would just copy this command into Cloud Code, and then we'd push it onto our GitHub and then push that into Vercel, or we could just export it as HTML, or we could download this product as a zip and get that onto a Vercel or, you know, wherever we wanna host that however we want. And I'm not gonna show you guys that right now.

50:43Later in this video, there's gonna be a section where we do another full build and we actually get it into Cloud Code and we push it. So if you wanna see that how that works right now, just kinda scrub over to that section and then you can hop back. But there's so many different things you can do here with this sort of website.

50:58So the video that you're gonna watch later, I actually do a live build of this website, which is kind of similar. Right? We have an animated video on this right hand side.

51:06You can see with that. And then we scroll down and we get the different elements that fit our brand. And then I also built this website, kind of the same feel.

51:16Right? And we've got this was built once again in Claude design. And And then we also did this one, which I've iterated upon a little bit, but I was able to use Claude Design to put a video in the background.

51:26And this one is more of a parallax scrolling effect rather than having it be an endless loop. And it's just as simple as saying, hey. I want to have this video be on the background.

51:35I want it to be parallax scrolling. I want it to be smooth. As the user scrolls down or scrolls up, the video should play in that order.

51:41And we have these three d dynamic sort of glass morphism cards as well. And I was able to pull some inspiration for all of this kind of stuff from a few different sites that I wanted to show you guys real quick. So the first one is motion sites.

51:53This one has a lot of cool backgrounds and elements that are animated. And this is actually the exact one I pulled inspiration from for my AI automation society website. And you can actually just copy the prompt and give that prompt to Claude Design, and it will recreate it for you.

52:07So I could have copied this prompt, and I could have said, hey. Build me this website, but use our Tally design spec, and it would have just done it.

52:16It would have been super cool. We would have obviously had to give it a background video to play, but it could have just done that. And then there's also tons of other ones as you see, which you can use for inspiration.

52:25There's also other sites like godly. Website, which has basically an on the scroll of more inspiration. There's also something like awards with three w's.

52:33There are tons of different sites that you can use for inspiration. And then when you really wanna get more granular, you can use something like 20first.dev, which has a bunch of components.

52:42So if I go to the components, we can see that we have, like, announcements. And you could pull an individual element by copying the prompt and put that into your website.

52:50You could also get some animated backgrounds like these pills or, you know, that background path or these different, like, animations and things. You could also grab borders and buttons and, you know, different things that you wanna put. So once again, all of this kind of stuff is gonna be good for you to go get some inspiration from.

53:08And the coolest part about all of this, you know, agentic coding and AI website building is that these are all basically just prompts. You can copy them and put them straight into your own site. So definitely look at some of these sites and play around with how they work.

53:22Okay. So real quick before we move on to the next section, is gonna be building a mobile app prototype, let's just build a quick brand guidelines for this for this brand. So this project is super trained on our website and our guidelines.

53:36So what I'm gonna say is, can you please output just a text based version of these brand guidelines?

53:43I want you to include things like the logo and the spacing and the fonts and the colors and the typography, and just be as specific as you can about the way that the buttons are, about the way that the accents work. Give me a full text breakdown of everything that's important to know about the guidelines for design when it comes to this specific brand.

54:01And so the reason that I'm doing this is because I wanna be able to take this guidelines in text and give that to OpenAI GPT image two and have it create was one of those brand guideline docs that you saw earlier, like when we did this for AI automation society.

54:15Now what you could do if you don't wanna do this in your design session limit, which is probably wise, would be to export this as, you know, a ZIP or HTML or export this in some way where you can see all of the individual elements because as you know, in the files, this is what everything is.

54:31This is what we need in order to make the actual brand guidelines. So if you exported this as a ZIP and then you had Claude analyze it or you had OpenAI analyze it and then turn that into a design guidelines, you know, then that would work just as well.

54:46But for the sake of the demo, I'm just gonna do this in complete natural language just because right now, it's a bit quicker.

54:53And let's go ahead and do a quick Cloud Design usage update. We are at 51% used so far after the first demos that we've been working on today in this video.

55:02Alright. So it came back with a pretty large breakdown here. Let me just go ahead and go all the way to the top and copy this.

55:08You can see this is very, very holistic. It really didn't skip anything. I'm gonna go ahead and copy all of this.

55:15I'm going to bring this over to ChatGPT. I'm gonna click on create image, and I'm gonna paste this in.

55:21And then I'm also going to grab the Tally logo, the text or sorry, the icon one, which is right there. And I'm grabbing the text based version of the logo. And, yeah, I think we should be good.

55:32I'm just gonna say I've attached two logos, the icon version and the text version, and then I've attached the brand guidelines in text.

55:41And what I want you to do is create me basically a one pager for the Tally brand guidelines.

55:47So I'm gonna shoot that off, and hopefully we get something back on the first pass that we don't have to fix. But if we do have to fix some font stuff, it's not a huge deal. Alright.

55:55So here's what we got for Tally. You can see that it decided to make it vertical instead of or, yeah, vertical instead of horizontal, which is completely fine. If we wanted to change it to landscape, we could.

56:05I don't necessarily need to right now. But let's go ahead and take a look at this. So we have the logo up top.

56:10We've got the icon. We've got the word mark, the name.

56:14We have the logo here with spacing, which all looks good. So far, as I'm looking through all of the text, nothing seems to be off. I like how it has the don't.

56:23You know, don't has it says don't recolor, don't remove the period, don't do this, don't rotate, don't do that. We've got all of our color scheme stuff, so bone. We've got navy.

56:33We've got the the green signals. It's also giving us some different mapping things. Here, we've got the typography, which all looks good, I think.

56:43Berkeley Mono, free substitute. There's maybe a little thing off right there, but it's not too bad.

56:50And we also have this secondary font, which all looks good. We've got spacing and layout, and we've got UI and icons right there.

56:57So you may not like this. You may not you may wanna iterate on it a little bit, but I think that this is pretty incredible that you can just generate this that quickly.

57:06If you needed to make some custom tweaks, you could take this into Canva and change a few things. Or, of course, right here, you could say, hey. I want this to be, you know, less wordy or make it landscape or whatever you wanna do here, but this image model is really good at building stuff like this.

57:19And you might be asking, okay. Well, why would I even do that if I already have, like, my design system in Cloud Design?

57:27And it's a good question because you can, you know, export the design system and you can give it to Cloud Code or even Codex or whatever you want. But maybe, you know, sometimes it's just nice to have an internal one page document that you can just look at and kind of get some inspiration from, or even maybe you need to send it to an external vendor or a designer or something like that.

57:45So it's nice to have, and it also takes, like, two minutes, so why not? But let's go ahead and move on to this next section.

57:52So what we're gonna do now is we've done a pitch deck. We have created our landing page, and now we wanna build a prototype of the mobile app. So this is another scenario where I'm gonna be doing the brainstorming inside of actual Claude rather than in Claude design.

58:07So I said literally just this, give me a full spec for a mobile app. I want this to be a requirement doc, and I want to turn this text based request into a live high fidelity breakdown of how the app should look and feel. So it gives us all of this information.

58:22You can see this is a massive, massive doc. I mean, this is pretty large.

58:28It's pretty comprehensive, so I'm assuming that this is going to have a lot of data. Now this is going to use a bit more input tokens on the way in in order to, you know, have Claude design process it, but I think that it's worth it because those input tokens are not as as expensive as Claude outputting tokens and going down the wrong path.

58:47So we're gonna go ahead and just skip the wireframe in this case. We're gonna go high fidelity. We're gonna call this tally app layout.

58:55Actually, we're just gonna go Tally app design, and I'm also gonna make sure I say that this is for a mobile app, not for a desktop app. We're gonna make sure that we switch our design system to Tally design system, and let's go ahead and get started.

59:07So I'm gonna first of all just paste in that whole spec, which was 804 lines, and I think that's basically it. I mean, I think I'm just gonna say, I just dropped you in 804 lines of a mobile app spec, and you already have access to our Tally design system.

59:24Go ahead and build this out. If there's any questions that you have about this, then feel free to shoot. Otherwise, I will check-in with you when you're done.

59:31So that is my amazing prompt engineering that you guys just witnessed or heard, and now I'll check-in with you guys when something interesting happens. Alright. So Claude does have some questions for us.

59:42How much of the spec should I build? I wanna do all screens, I think.

59:47Yeah. Let's just go all screens. Presentation format, design canvas, all screens laid out side by side in iOS frames.

59:53I like that. How interactive should this be? Yeah.

59:57I want this to be interactive. Variations and tweaks, light and dark mode toggle, two to three layout takes of this, variations of everything.

1:00:06Yeah. Let's just go for a lot of those. Should the ask sheet actually think, wire to Claude, natural language in, real answer out.

1:00:13I can wire it to call Claude with context about a fake user or just hard code clever answers to the suggestion chips. We're gonna just go ahead and hard code stuff for now, but it's nice because this is kind of giving you a nice idea of what could happen once you actually build out the back end of this app.

1:00:29How real should the fake data feel? We're just gonna go with, yeah, reasonable is fine.

1:00:34How many insights on the weekly three is good, flowchart visual treatment. So I think you guys understand the points of how this works. It's going to help get very clear on the vision before it starts building.

1:00:43Okay. So this just came back. You can see the agent is still going through and verifying to make sure that everything is looking alright, but we've got all of these tasks have been done.

1:00:52So let me just kinda go over here and zoom out a little bit, and we can take a look at what we have on this board. You can see that this is a full mock up of all of the different kind of, like, scenes and sections that we'd be having in this app. What else is cool is you can see that the verifier agent apparently found something, and it's fixing what it found.

1:01:07So let's just still continue to go and look through this. So each of these individual components, we could go ahead and move around, it looks like. We could also open them up full screen if we wanted to scroll down, and you can see that they're interactive.

1:01:19So I know this might be a little tough. Let's actually just open this up full screen in this tab. So what's really cool is as we open them up, we're not just being able to look at them, but we can actually click on the buttons.

1:01:28You can see that we could come in here and type. We could use this button, which asks about, like, what we can afford, which is pretty cool.

1:01:35We can open up one of these expenses, and we can see the different elements of design throughout the app and how this would actually function. We could mark this as cash. We could hide from totals.

1:01:46This is pretty nice. We can also switch between the different sections. So here's home.

1:01:50Here's flow. We can see how these aren't actually functional right now, but that's what the way the buttons would work. But we can expand all this stuff, which is just really awesome.

1:01:58We also have a dark mode, and then we also have one that's already open on the weekly. Let's see what else we got down here. We have the onboarding flow.

1:02:05So I don't know if there's too much to scroll through here, but, basically, you get started with an honest look at your money, and then you connect your bank account, and then there's three quick questions to answer. As you can see right here, one notification a week, you can allow notifications. That looks really nice with a little drop shadow.

1:02:19And then it basically starts organizing everything and setting up your app. It's also giving me some variations for the actual hero. Now what you'll notice here is that the app is pretty bland.

1:02:28Like, it's basically the the bone color all the way throughout, which I don't really love. I mean, it it has a nice polished feel and the elements look decent, but I don't love how bland and how dry the whole site feels.

1:02:41But this is super cool, all of the different elements that it's able to show us on this app, especially considering we basically just gave it one prompt. It's even showing us what the notifications would look like on their iOS device, and we can see some more dark mode changes down here.

1:02:57So once again, I'm really gonna heavily lean on clogged designs creativity and the tweaks feature. I think that these look really good. From, like, a structural point of view, I like these, But what I've noticed as I scroll down, as I scroll through, is that it's very bland.

1:03:11You know? The onboarding feels very dry. The home variations of the hero section, everything about it is just very bone.

1:03:19There's not many accents. There's not much, you know, depth.

1:03:22It doesn't feel very dynamic. Could you just upgrade this a little bit? You know, make some polished changes, give it some more texture, and give me a bunch of things that we can tweak in order to play around with what we want the final design of this app to look like.

1:03:35Awesome. So we got a few things that we can play around with here as far as tweaks go. Let's start with the accent color.

1:03:40So we've obviously got green as the main. We could also do Terra. We could do amber.

1:03:45We could do indigo. We could do rose. I mean, think green probably fits the best with the accent, so we'll keep that as green.

1:03:51We could use the accents more. So quiet, medium, or loud. I think that I like medium.

1:03:56It's got a bit of a little bit of a, like, gradient within the text. We could add some more texture whether that is paper or grain. Hero scale could be increased or decreased.

1:04:05I think big is fine. The tally mark, really do like. You can see right here in the background, we've got, like, the tally.

1:04:11It's not really being spaced the right way. Like, if it it was shifted over a little bit more, I think that that would look good, which we can obviously tweak. The card style, lifted flat paper.

1:04:20Let's go somewhere where we can actually see those cards. Uh-huh. I found one where it's talking about the cards right here.

1:04:26So these can be flat, they can be lifted, or they can be paper. It's kinda hard to tell actually like that, but you can sort of see the difference when you're zoomed out a little bit more. I like lifted for sure.

1:04:35Subscriptions can be either plain right here or it can be a bar, and I like the bar better. So there's lots of little things that we can tweak. But also, let's say we wanted to change a few things, like, pretty specifically.

1:04:44So I'm gonna try the draw function again. I'm gonna go ahead and draw right here and basically just say the, you know, iPhone time and battery are covering up some of the UI, which is not good.

1:05:07So that's one of those where I don't think this is a specific element that we would have been able to edit ourselves or or move and drag. So using the draw here should hopefully work better. You can see that this has been applied with our circle there.

1:05:20But I guess it actually designed these elements as part of this mock up, but it didn't realize that it shouldn't probably have them overlap, which is interesting.

1:05:28The other thing is the watermark. You know, I really do like this, but it just feels like it is kind of off the edge of the page. So I'm gonna give some feedback about that too.

1:05:36But they really need to fix this bug when you draw and you start typing that give feedback. You, like, can't see the actual note. It gets stuck down there, and that's pretty annoying.

1:05:44So I just made a couple tweaks. You can see it was able to fix this issue right here. It also fixed the logo and bumped it over to the left a little bit more.

1:05:51And you can definitely tell that after that first iteration, it's been, you know, spruced up a little bit. Like the onboarding I think looks better.

1:05:57It has a little bit more depth and it feels more polished, but there's still a long way to go. And, you know, it's gonna take more than thirty minutes to actually design a full app, and I'm not gonna be able to show you guys that in this master class because iteration is the name of the game.

1:06:11Because even as you start to develop the back end and as you, you know, actually put, you know, your first 500 to a thousand users going through, you're still gonna be making changes. You're still gonna be getting feedback and changing things. Like, for example, if I was clicking in here through the settings, first of all, I don't like that icon for settings.

1:06:25I don't know why it wouldn't just be a gear. And also, like, these things are coming through wrong. Like, they're all out of bounds.

1:06:31The toggle's out of bounds. The text is out of bounds. So there's a lot of little bugs and things like that that we're still gonna need to fix.

1:06:37But when you think about how much context we just dumped in to claw design, you know, like 800 plus lines, and we get this to start, and now we just have to actually take the time to QA and go through and make those changes. But this is really starting to bring something to life.

1:06:51If you think about where we started at the beginning of this video, we basically just had a very very vague idea and now we have, you know, our pitch deck, our website, and we're starting to bring the app concept to life. And also, honestly, most of the app, I think that the dark mode looks better.

1:07:04I think that the green is a little bit more dynamic here, and I think that the shadows and like the watermark, and I think that other elements will just actually kind of appear in a more aesthetic way throughout the rest of the app. So I'd probably from here, you know, maybe take these dark mode concepts and I'd keep iterating on this version of the app.

1:07:22But this is another good example of showing you how Claude Design is able to give you all of these different mock ups on a board. Let's do another quick check on our actual usage here. Alright.

1:07:33So after everything that we've done so far today, we are at 85% of our cloud design limit has been used up.

1:07:40Okay. So let me walk you guys through a different journey real quick of what I did when I first hopped into cloud design. So I built my design system for AI Automation Society, and then I was able to have it help me build the AIS website.

1:07:51And then from there, I pretended, okay, what if we're having a promotion for, you know, like a first agent type of workshop? So then I used that design spec and I gave it some information about this promotion, which is a fake promotion.

1:08:04But I gave it information and it built me this landing page, which feels exactly like our website, which was great. Right? I think if I wasn't zoomed in weird, it would it would format a little bit better.

1:08:13But then we had this landing page, which feels exactly like our website. And then from there, I was like, okay. Cool.

1:08:18What else can we do here? Let's actually make a release video for this promo. So then I threw that into here, and look what we got if I start this from the beginning.

1:08:26I mean, this is really impressive. We've got animations. We've got motion graphics.

1:08:29What if you could build an agent this weekend? Your first AI agent. The bar comes in in an animated way.

1:08:35There's a scrolling banner at the bottom. These load in really nice. And we also have this little terminal style animation, which is super cool.

1:08:42We see text coming in, and we see all of these animations and elements coming in. Now all of this is actually you know, it has all the context of the website, so it was able to make this accurate. But also, this is definitely something you could throw on your socials in order to promote this, you know, promotion.

1:08:57So what we're gonna do now is the fourth and final thing that we're doing as far as this live build is we're going to make a launch video for Tally. Now when I did this one that you guys just saw, all I did was I just told it to do it, and it just animated the HTML.

1:09:11But what we're able to do to make this even better is we're able to use something called hyperframes, which I've actually made a lot of videos about on my channel so far, Cloud Code and Hyperframes, to create animations that look like this. I mean, it's basically just being able to use the AI to write the HTML and then have it animated and be able to have it rendered.

1:09:28So, like, for example, this launch video from Heygen, who created Hyperframes, was built in Claw Design using Hyperframes. You know?

1:09:36So if we just click through here, you can see the way it's able to animate stuff. It's it's amazing. So all we have to do is go grab this skill right here, which I will link in the description of this video, and I'm just gonna go ahead and download this raw file.

1:09:48This is going to download it as markdown. You can see a cloud design hyperframes. So we're gonna go into cloud design.

1:09:54We're gonna open up a new project. I'm gonna click on from template, and I'm gonna click on animation. This is going to be tally launch video, and we're gonna change the design system, of course, to Tally design system, and we're gonna create that.

1:10:07Now what I'm gonna do is I'm going to grab that skill right there, so that markdown file, and I'm basically just gonna say, the goal of this project is to, you know, make an animation.

1:10:18I want you to make a launch video for Tally. So you have Tally Design System. I'm also going to give you the Tally brand concept, which I just dropped in as another markdown file.

1:10:28And then you have the claw design hyperframes markdown file, which is going to teach you how to actually create the motion graphics and render out this animation or this, sorry, animated video. So that's what we want. We're targeting a landscape video.

1:10:42We're hoping for maybe, you know, twenty to thirty seconds of fast paced information. The ultimate goal is to announce tally, announce what it does, and, you know, at the end, a big call to action for people to sign up and start their free trial.

1:10:55So that's what I want you to do here. So that is my prompt, and I'm gonna go ahead and shoot that off. We'll see if we get any questions, but otherwise, I will just show you guys that finished output and see what it looks like.

1:11:05Okay. So we got a twenty five second video. Let's give it a quick watch.

1:11:10Tally, money on the level. No budget, no goals, no envelopes. No coach, no streaks, no pep talks.

1:11:18It just shows you what happened. Little swirl out animation. I like that.

1:11:25Weekly, can I afford a $400 jacket? Yes. But tight, rent hints in eight days.

1:11:29$8 per month or $72 a year tally. Okay. So it's nice.

1:11:33I like the CTA at the end. It feels on brand obviously, but it's very bland. Right?

1:11:37Like, it's not very engaging. I wish there were more dynamic elements. And Cloud Design with hyperframes should be able to make things a little bit more dynamic.

1:11:45So we're gonna definitely make some iterations here. The logic of all this is good, but let's make this more fast paced. Let's keep our audience's attention.

1:11:53Let's make it engaging. Let's add certain elements, you know, more animations, more motion graphics.

1:11:59There should be more going on on screen than just a couple bullet points coming up. That's boring.

1:12:04Tell a story here. Make this exciting. You know, it's a big day.

1:12:07We're launching an app, and we are inviting people to be a part of the journey.

1:12:14And so that's what I think is so cool about all this kind of stuff is as humans, we're very good at knowing what we want and we're knowing when we don't like something, but we don't always know the vehicle to get there. So what you just saw me do is as if I was talking to like, you know, a human video editor or someone like that.

1:12:29Right? Like I'm telling the end goal and I'm just hoping that Claude Opus 4.7 is able to understand and translate my request of like more engaging, tell a story.

1:12:39I'm hoping that it's able to translate those kind of high level vague ideas that are a little bit more emotional into something objective, into actual code that we can render out. So let's see what we get back.

1:12:51Alright. So the agent is still verifying, but let's go ahead and give it a watch. Wow.

1:12:56I mean, that's already much better. That was pretty cool. I like that.

1:12:59An app that doesn't try to change you. It just shows you what happened. Very nice.

1:13:04I like that fade out. I still like this scene. Can I afford a $400 jacket?

1:13:10Yes. That's way more engaging. Found a few you forgot.

1:13:14Okay. So there's a little bit of an issue with, like, the pacing on some of the stuff. It's very quick.

1:13:18But overall, I mean, that is so much better. And another small small issue is it keeps doing this thing with the logo.

1:13:24If you guys saw here at the end, that logo isn't right, and it keeps doing with this with Tally. So that is one of the major flaws I've noticed with Cloud Design so far is it messes up the logo. Luckily, my AIS logo, it's just the letters AIS and it never messes that up.

1:13:37But if your logo is more of an icon and there's some, like, delicate detail things in there like this slash, it might mess it up, which is kind of annoying. But usually when you correct it, it's able to fix it, but it does use more tokens to do that. But I mean, this point, can you imagine and think about how long would this have taken you to hand this off to a designer or for you to go ahead and animate yourself?

1:13:57Like, that is incredible. And all I had to do was say, tell me a story. So I love this.

1:14:02And at this point, what do you do? So you can't actually export this. You can't render it right here as an m p four, but you've got options.

1:14:09You could hand it off to Cloud Code, and Cloud Code could render it. You could do the same thing with a ZIP file or the HTML. But, you know, also for, like, a twenty five second video, you could also just make this full screen and then just screen record it.

1:14:21Like, that's also an option you have. So I'm sure at some point they're gonna add, like, a native m p four render in this platform. But right now, you've got a couple other options if you actually want to be able to use the video.

1:14:33But I absolutely love that the first couple seconds. I love that animation. That is just a scroll stopper for sure.

1:14:40Now another pretty important thing to be aware of is how Claude actually uses your tokens. Right here you can see it says, start a new chat to save a 110,000 tokens of context. This uses your rate limits more effectively.

1:14:50So if you were to wanna keep iterating and iterating and iterating, it probably would be smarter to, you know, export that HTML and open up a new project and continue to make some changes there. Because we've talked so much in here that this is going to pollute this window, and it's going to make us use more and more of our sessions.

1:15:09So that is just something that you wanna keep in mind if you're planning on iterating on a certain project, like, over and over and over and shooting more messages and more messages and more messages. That would also be a reason why people are finding that they're just running through their limit in, you know, like, twenty minutes or something.

1:15:23And I wanna show you guys something else that's really cool. So we're using a tool called Hyperframes. Right?

1:15:27So Hyperframes is kind of the framework that we just gave Cloud Design to understand how to create these HTML graphics and stuff. Without Hyperframes, Cloud Design could still do it.

1:15:36Don't get me wrong. But Hyperframes just has a lot of elements and makes it a little bit better. So hyperframes has a really cool catalog where you can look through different things, and you could just copy the code into cloud design.

1:15:49So we've got like a follow notification. We've got a Mac OS notification. We've got all these things.

1:15:53We've got different transitions like a chromatic radial split. We've got a cross warp morph. We've got a glitch.

1:15:59We've got all these different elements that we can pull in. And what's really cool is that Cloud Design can search the web, and it can look at GitHub repos, and it can do stuff like that.

1:16:08So what I did is I pulled in this one called the app showcase where we have three different mobile phones come out and there's some sort of animation within each. And all I literally did was I took the URL of this exact website, this page we're looking at, I gave it to Claude, and it fetched it. So it looked at the page, it browsed the GitHub repo, and it was able to pull those elements in, and then I told it to add another scene in this video.

1:16:28If you guys remember, it was twenty five seconds, now it's thirty seconds. So it came through and it iterated on the way that the phone needed to go in there. I had to prompt it one more time to fix it.

1:16:37But now if we go about halfway through and I'll play this, watch this new scene that we just got with the mobile phones. Right here, your money in your pocket, all of those phones animate, and we get a little bit of a bounce with a glow. So it was just a really nice animation and a really cool scene that I was able to add in here super easily because I was able to leverage one of those catalogs that already exist.

1:17:00Even maybe if I didn't copy in that code or the URL and have Cloud Design pull it, then that catalog still has a lot of good stuff for inspiration. So I definitely wanted to show you guys that Cloud Design can fetch pages, can search the web, and that catalog has some pretty cool gems in there.

1:17:17So now we have our launch video. I I swear I didn't plan this, but those four builds, setting up a design MD or the design system, took about 95% of my cloud design.

1:17:26So almost all the way, we were still able to get pretty far. Obviously, none of that is, like, perfectly polished to the point where we'd go live with everything, but it just gives you a little bit of an idea of how far that will get you. But I mean in the past, you know, couple hours or so, we were able to take absolutely nothing, you know, a very rough idea of a brand and we turn that into an actual concept, an actual business idea, a logo, brand guidelines, a design spec.

1:17:52We built a pitch deck. We built a landing page. We built a mobile app prototype, and we built a launch video, all with our natural language inside of cloud design.

1:18:00Now from here, what else do I wanna talk about? So four moves that compound. The first one is to reference, don't describe.

1:18:07So give real screenshots of things. Give real specific advice. You know, highlight the elements you wanna change.

1:18:14Make the changes yourself. Draw things. Add the tweaks.

1:18:16Being as specific as possible with your prompting is what's gonna help you, and that's also why maybe doing a lot of your planning inside of regular Claude and then bringing that refined plan into Claude design is gonna help you out a lot. We've also got don't use defaults.

1:18:31You know, that's where you get the AI slop. And that's why we have things like, you know, front end design within Cloud. We have all these other things that we can do.

1:18:38But if you're not giving it your own spin on the copy, your own design system obviously, then it's gonna feel way more generic. And that's what leads us into number three, is to just do the design system first. Don't go build five, but build one, build it well, and share it with your team so that everything feels consistent.

1:18:53You can obviously iterate on that. If later you have a different type of button that you wanna switch out, just switch it out in your design system. If you end up changing your logo or your colors, just switch it out.

1:19:03And then what I would say is to iterate in chunks. I found it best that if you try to make Claude make, like, five changes in one prompt, it kind of loses track of those, and it doesn't do a great job.

1:19:14So iterate one feature at a time. So let's talk about some limits.

1:19:19What's going on here? Obviously, the more you pay, the more usage you're gonna have. So if you would have been on pro or max five x and you were trying to follow along with exactly what I did in this masterclass, you would have hit your limit much quicker than I did because I'm on the $200 a month plan.

1:19:34Now a lot of people are complaining about how fast they're eating up their limits. Here's what some people are saying. I burned 80% of my weekly pro budget on one web page.

1:19:4195% of my quota is gone after a single design system iteration. And, yes, I will admit, the usage is a lot less than I would have hoped, but there are a lot of things to play with, a lot of levers to pull. I've already talked about a lot of these throughout the whole video, know, you talking about little things that we could do.

1:19:57I also don't know why this is referencing me. I did not tweet that. But, anyways, those are a lot of the tips that I went over, and I didn't even show you guys how you can switch the model.

1:20:05You know, we didn't do anything besides Opus 4.7 so far, but you can definitely play around with Sonnet and Haiku to make little tweaks as well. Now I'm about to hop into a different segment where I do another live build and I talk about some other things as well. And at the end of that, we go into some more stuff about how to make your session last even longer.

1:20:21But a lot of the stuff that I've shown, like I said, is just the mindset shift of cloud design is separate usage. So only use cloud design if you specifically need cloud design. So when not to use cloud design?

1:20:32Well, if your work falls into these buckets, you might just burn your quota and it's just not worth it. So here are some things that I listed down here. But what else I was thinking about too is, you know, when you get to the point where cloud design has been used up, well, you can move that into cloud code, of course, because you can take that design spec, bring that into cloud code, and now you're just burning through a different session.

1:20:54So you're not even eating into any of the Cloud Design limit. And sometimes you might get to a point where there's something that actually would be easier to iterate upon in a manual way.

1:21:04So for example, let's say this was a static site. Right? Or let's say you were trying to create like some sort of poster or a PDF.

1:21:11If you were wrestling with Claude code trying to get the logo to look right on here, why not just do that in Canva? You know?

1:21:18Why not just replace that in Canva? Because it would take you five seconds, whereas here it would take you probably a few minutes and it would also take you it would eat tokens. Right?

1:21:26So, like, AI is great and you wanna use it, but sometimes it's just easier and quicker to just go do it manually. And if you get to a spot where you can already export it to PowerPoint and make your tweaks or export it to Figma or Canva, then just do it.

1:21:39So from here, what I want you guys to think about is when does Cloud Design fit into your workflow, and what elements do you already have that you can use Cloud Design to make better or make more consistent? So pick a real artifact that you wanna ship, write your own design dot m d or your design guidelines, And then after you've done some iteration inside of Cloud Design, then bring it somewhere else.

1:21:59Bring it to Cloud Code. Bring it to, you know, Figma, whatever you wanna do. Now this last section that we're about to hop into is going to be another live build, but this time at the end, we're actually going to bring it into Cloud Code.

1:22:09We're gonna sync it to a GitHub repo, and we're gonna have that automatically sync to Vercel so we can put that on a real domain. So from a design perspective, it's very similar to what we've been doing throughout the you know, earlier in this video. But at the end, we're adding on some extra elements if you wanna make these things live.

1:22:23And then once again, I'm gonna cover some other things about how to make your session last longer. So I'll see you guys over in this next section. So 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.

1:22:37We 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. And as we keep scrolling, we're going more through the journey. We've got this next slide.

1:22:46We keep going here. We'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.

1:22:55We've 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. And 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.

1:23:11So it has all the same important information, but it's just a much more interactive feel. And then twenty minutes later, was able to do the exact same thing with my personal website. Here you can see it's got sort of like dark vibes.

1:23:21It's got a bunch of statistics. It's got different things that I'm up to. And I just kind of transformed it to be a little bit more dynamic.

1:23:26You 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. We have the same copy.

1:23:34We have the same feel. But now it just has a lot more depth, and it just feels a lot more polished. So what I'm gonna show you guys today is how we set up websites like this using Claw Design.

1:23:43We 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.

1:23:51You can see I've already eaten through my design quota, and I've already spent over $200 in extra usage just playing around with the 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.

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

1:24:11So 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.

1:24:22All 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?

1:24:37And 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.

1:24:51What 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.

1:25:11So 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.

1:25:18I 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.

1:25:30So 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.

1:25:51So 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.

1:25:58I 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.

1:26:07This 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 C 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.

1:26:26The 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.

1:26:35So 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.

1:26:42Could look pretty nice. Okay. So now we have those initial elements.

1:26:45I'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.

1:27:03So 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.

1:27:10So we could literally come in here and say, okay. You know, here's gonna be our website. This is where oh, I wanted it in the square.

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

1:27:25And I could come in here and say, like, this is the hero background video.

1:27:31And 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.

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

1:27:51That's not how you spell logo. And then we could also have like, you know, shop or something like that.

1:27:56And 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.

1:28:06Obviously, 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. But for now, let's just leave it like that.

1:28:16And what I'm gonna do now 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. Now this was an eight second video.

1:28:26It's not gonna let you upload videos that are, like, thirty seconds long. There's a cap, and I believe it's around thirty or forty megabytes. Just keep that in mind.

1:28:33I've gotten away with uploading fifteen second videos. I tried a twenty second video and it worked, but just keep that in mind. So now what I wanna do is Cloud already did all the hard heavy lifting for us.

1:28:41You know? If 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.

1:28:57And that gets pasted in as, like, a little bit of an artifact because it was a long bit of text. So now I just explained what I wanted to do.

1:29:04Hey, Claude design. I've given you a couple things. I've got a sketch, which is just my basically idea for the hero section.

1:29:12Gonna 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. This 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.

1:29:27And 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.

1:29:34And just go ahead and write all the copy for for now. We can make tweaks later. Okay.

1:29:39So 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.

1:29:46I'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.

1:29:53But 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.

1:30:03If 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.

1:30:17We 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.

1:30:26We'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.

1:30:34Because 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. So you might as well stop it and kind of refresh or recorrect it before it wastes all that time.

1:30:46Now 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.

1:30:55He 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.

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

1:31:16So 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.

1:31:26And I said, hey. This is a cool concept. I want you to replace the background image with or sorry.

1:31:31Not the background image. I 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.

1:31:43So that's basically all I had to do to turn my AI Automation Society into this. And there's so many other ones. Most of these are free.

1:31:50I am on the paid plan, which is literally just $99 for for life, so that's pretty cool. But 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.

1:32:06And 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.

1:32:16I 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.

1:32:27Considering 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 if you guys remember my Nate Hirck 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.

1:32:43You 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. You certainly can.

1:32:50But this is just a good way to sort of get a little creative and get some inspiration. Okay. But we are back in cloud design now, and what we have is we have our first iteration, which I mean, this looks awesome.

1:33:00Like, this text lull, this text right here, this all feels very on brand. We can see here that as we scroll down, the image is a little bit dynamic.

1:33:08Or sorry. Not the image. I keep saying image.

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

1:33:15We 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.

1:33:22And this is incredible. Just 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.

1:33:33Now 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.

1:33:48But 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.

1:33:56Let'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. Make it a gold accent.

1:34:07And so now I can just say, hey. Send this to Claude, and it gets the exact comment 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.

1:34:16So if I came here and I was like, okay. I don't want this em dash. That looks very AI.

1:34:19I 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.

1:34:29So if I wanted this all to be a little bit smaller, I could just come in 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.

1:34:40You can also draw. So 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.

1:34:55Add a transition overlay or gradient so it feels smoother.

1:35:04And 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.

1:35:10That'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.

1:35:18Okay. So you can see that that button changed colors. I like that.

1:35:21Everything else that we have changed has been changed. And it hopefully, you can see it added a little line here.

1:35:27So that's not exactly what I wanted. I 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.

1:35:35Okay. So 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.

1:35:42But now if you are not someone who's creative, you might be like, okay. What 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.

1:35:52But let's say you just wanna know what else is possible, and you wanna see what Claude can come up with. Watch this. You come into here.

1:35:58This is a really great iteration one. I wanna see what else is possible. I wanna see how this website could be improved.

1:36:04So 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. And 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.

1:36:21Right 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.

1:36:35Real quick, guys. I know we're gonna be going over a lot of information today, so I'm gonna throw in everything that 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.

1:36:48This will take you to AI Automation Society. 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.

1:36:59If you guys wanna extract it and understand how it works and how the scrolling animations work, you can dive into it and you can let Cloud Code or Cloud Design dive into it. But it's really quite simple. Like I said, I basically just said, hey.

1:37:09Here'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.

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

1:37:27We 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.

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

1:37:39We can get sort of like a green. We can get more of a brown. We have more of a light mode here.

1:37:43So 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.

1:37:50I kinda like the brown. But anyways, what else? We have the accent hue.

1:37:54So 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.

1:38:01For 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.

1:38:10And 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.

1:38:23We 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.

1:38:33I'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.

1:38:38Obviously, 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.

1:38:45We 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.

1:38:51I 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.

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

1:39:04We have the ritual card style. I'm not sure where the rituals are. Here they are.

1:39:07So flats, bordered, or big numerals. I think I like the big numerals.

1:39:12So, yeah, I'm sure you guys get the point by now. We'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.

1:39:20Actually 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. Because 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.

1:39:38I wonder what it would look like if the background was blue. And then you would have to go submit the prompt. Cloud Code would change the background.

1:39:45It would put it on a local host, and then you'd look at it and be like, I actually don't like that. So then you would have to, like, revert back to the old version. And so that could potentially be two prompts.

1:39:54Whereas 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 in Lovable. You can just like revert back to previous prompts, which is nice.

1:40:06I 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. I wonder what it might look like if the spacing between sections was smaller.

1:40:19And then if you don't like it, it's as simple as just not doing it. So once you're good with the tweaks, you just turn that off.

1:40:25If 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. Whether 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.

1:40:46So let's say we have this that we love, and maybe down here, we wanna have like maybe a video of someone sleeping. That would be really creepy.

1:40:53But but now if you basically just break the website into sections, so hero section. Okay.

1:40:59Cool. Section one. What can we do to section one to make this cool?

1:41:02Maybe 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? We can just kinda keep taking it section by section.

1:41:15In that way it's not so overwhelming of oh my gosh, 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?

1:41:30And 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.

1:41:39And I think you'll find that it's really, really fun. You 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.

1:41:47You 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? Well, 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.

1:42:03So if that makes no sense to you at all, I'm gonna explain it all, so don't worry. What 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.

1:42:14You could also just hit hand off to Claude code, which would give you a command. You 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.

1:42:24It's been getting a four zero four error. So it's worked in the past. This will probably work by the time you see this video, but that's also an option.

1:42:30But the other option is you just grab the ZIP file. Alright. So here's that ZIP file.

1:42:35I'm gonna go ahead and extract all, and I actually wanna place this into a folder. So I've already created a folder on my desktop, and it is called lull website. So I'm gonna click into lull website, and I'm going to select that folder to extract it into.

1:42:48It kinda sounded like I was saying lull website as if website was a wrapper, like lull website. But now we have lull website, and this is the folder that we wanna open up inside of Cloud Code. So here I am.

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

1:43:04So 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. So this is basically our full project from Claude design, but now it's inside of Claude code.

1:43:20And I'm literally just gonna say, hey, this is a website project for our brand called Lull. All I want you to do is push this to a GitHub repository, push it to a private repository, and call it whatever you want.

1:43:34And 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.

1:43:45You'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.

1:43:52Just 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.

1:44:00And 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.

1:44:10And 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.

1:44:25So 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.

1:44:30I 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.

1:44:39Now 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. Now I'm actually glad that I had to do this because you you'll notice I said local host.

1:44:52So what does that mean? Local host is just a local host that will basically display our website.

1:44:58And 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.

1:45:06It 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. So here is the local host.

1:45:21It opened up our website. You can see we have the video playing. We have all of the text coming in dynamically.

1:45:27So everything is basically being transferred over from Cloud Design over to Cloud Code seamlessly. No issues.

1:45:34And now that this is actually 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. You click on add new.

1:45:46You 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. It's looking through my projects.

1:45:56It'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.

1:46:05Now 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.

1:46:22If So 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.

1:46:40So 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.

1:46:47Push that public, and then Vercel will grab it, and then it will be live in, like, thirty seconds later. So anyways, congratulations. You just deployed a new project on Vercel.

1:46:55I'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. And if I open this up, uh-huh.

1:47:05Okay. So when I open this up, it says 404 not found. So what do we do here?

1:47:10You 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.

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

1:47:26It was able to find the cause right away. Vercel 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.

1:47:35So the fix is it needs to rename lull website to index dot HTML. And then look. It pushed those changes to GitHub.

1:47:42So 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. And then what happens if I go back to Vercel so back here, 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.

1:48:03So 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. And everything should be coming through properly because we've made that fix.

1:48:14Now 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. So 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.

1:48:33So this is actually what we'd be seeing if I open up the site on mobile, which obviously is not good. So 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 sorry.

1:48:45I 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.

1:48:53So 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.

1:49:13And 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.

1:49:25So 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.

1:49:33But 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.

1:49:50You 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.

1:50:04But, 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.

1:50:10You 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.

1:50:17And 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.

1:50:23First of all, Cloud 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.

1:50:30You have all models. You have Sonnet only, and you have your own Claude Design usage. And this is what I blew through pretty quick.

1:50:37And so what do the burn rates look like? People have been complaining that they're getting their session eaten up really quick. So if you're on $20 a month, after one big website and one big design system, you might already be almost done.

1:50:48If 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 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.

1:51:04So what actually drains your limits the fastest? Well, there 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.

1:51:16I 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.

1:51:31And I see that makes sense. I mean, if you're in Cloud Code, I always talk about how the planning phase is so important. So get clear on your idea.

1:51:38Give 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.

1:51:54Also, 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.

1:52:09So 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.

1:52:24So 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.

1:52:42And 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.

1:52:53If 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.

1:53:04And now you could say, hey. This is the design system for AI Automation Society. Help me build some other stuff.

1:53:08And you could do that then in Cloud Code as well. It's really nothing new. The whole concept of having, like, a design system or a design MD, it's not a new concept.

1:53:16It's just kind of the way that it's packaged up here in Cloud Design makes it a lot easier. And then of course, like I showed you guys, the ability to tweak stuff in the canvas. We talked about this.

1:53:25Right? Being 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.

1:53:42I 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.

1:53:59You'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.

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

1:54:19We'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.

1:54:27So okay. So best practice is to stretch limits. We kind of already talked a lot about that.

1:54:31I 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.

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

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

1:55:06And 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.

1:55:16Now 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.

1:55:33So 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. It's also good to do negatives. So tell it what you don't want.

1:55:45Tell it if you don't want these fonts or if you don't want these color schemes. That way, you don't have to correct it later. You can also reference real things.

1:55:51So saying something like linear twenty twenty three with higher density rather than just saying, hey. Make this clean or make this minimalistic. Obviously, pointing and commenting on things and drawing on things and then asking for prototypes, flows, demos.

1:56:03And then, of course, you can go ahead and export that entire HTML. You could export it to Figma. You could export it to Canva.

1:56:09You could export it to PowerPoint. You 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.

1:56:19File uploads. So I have been able to upload m p fours like you guys have seen.

1:56:24I've been able to edit some videos, but there is a cap. And I think it might be 30 megabytes. It might be 40.

1:56:28It might be a little more. But 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.

1:56:39But for the most part, you can upload lots of different assets. And 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.

1:56:52Not 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. And like I said, that free doc that I drop in the community will have a lot more of this kind of stuff as well.

1:57:04Alright. So 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.

1:57:12Because 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. Export 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.

1:57:28But that is going to do it for today's master class. I hope that you guys enjoyed. And if you did, please give it a like.

1:57:33It helps me out a ton. Don't forget to join my free school community if you wanna check out the resource guide from this video as well as every other free resource that I've ever given out on YouTube. Once again, that is completely free to join.

1:57:44So go ahead and consider subscribing if this helped, and check out a ton of the other videos on my channel where I break down very similar stuff. So as always, I appreciate you guys making it to the end of the video, and I will see you all in the next one. Thanks, everyone.

The Hook

The bait, then the rug-pull.

In two hours, a brand goes from a name on a whiteboard to a live Vercel URL — pitch deck, mobile prototype, and launch video included. The catch is a weekly session quota that most users burn through before they finish the first build, and this masterclass teaches the two-meter system that prevents that.

Frameworks

Named ideas worth stealing.

1:50:37model

The Two-Meter System

Regular Claude usage meter
Claude Design weekly usage meter

Claude Design runs on a separate weekly quota from all other Claude products. Tracking both meters independently prevents unexpected lockout mid-project.

Steal forAny tutorial about AI tool cost management

34:01model

Wireframe-First Workflow

Low-fidelity sketch
Structure validation
High-fidelity conversion

Sketch composition in low-fidelity mode first, validate the layout, then convert to high-fidelity. Catches structural mistakes cheaply before the expensive Opus 4.7 render.

Steal forAny AI design workflow, landing page builds

1:51:00model

Model-by-Stage Strategy

Opus 4.7 for initial HF generation
Sonnet 4.6 for iteration and refinement
Export to Claude Code when Design quota runs out

Use the most powerful model only for the first high-fidelity pass, then drop to Sonnet 4.6 for all iteration to preserve weekly quota.

Steal forAny multi-stage AI workflow where cost management matters

CTA Breakdown

How they asked for the click.

VERBAL ASK

1:57:00next-video

“Watch this video right up here where I talk about other website hacks and specifically in Cloud Code.”

End-screen card pointing to a follow-up Claude Code video, combined with Skool community plug for free resource guide. Clean and relevant — the recommended next video is the logical continuation for anyone who burned their Design quota.

MENTIONED ON CAMERA