Claude Code Complete Beginner Course: Set Up, Build & Deploy

Hey, this is the definitive course on Cloud Code for beginners. I use Cloud Code every day to manage a business that

does over $4 million a year in profit. I also teach over 2,000 people how to use Cloud Code both for personal and then

corporate or professional tasks. So, this is more or less what I do all day. Once you understand what I'm about to

show you in this course, it's no small stretch to say that Cloud Code will augment your productivity. You'll gain

leverage in areas that you probably didn't even realize that you had. And that's both for software engineering and

also other parts of your life. The focus here is not software per se, so you don't need to have a technical

background to understand what I'm going to tell you. I'll make sure to start slow and build concepts on each other

naturally and gradually so that everybody here is on the same page. So, no fluff. Here's what you guys are going

to learn in this course. We're going to start with the basics by downloading and then setting up cloud code ourselves.

I'll then teach you all about integrated development environments or idees. There's several on the market and I'm

going to walk you guys through the three most commonly used ones so that we're all on the same page. Afterwards, I'll

show you how to set up your project brain, which is also known as the claw.md file. Once we're done with that,

we'll use Claude Code to actually build something because the focus of this whole course is on practical building.

We'll build a simple web app hosted live on the internet, which I'll help you guys learn by doing, not just sitting

around and listening to me. After that, we'll cover the Claude directory, the sub aents folder, and a bunch of

functionality that not a lot of people know about. We'll then cover Claude Code's various modes, including their

plan mode, which you guys might have heard about. Dangerously skip permissions mode, which gained a fair

amount of uh notoriety recently, and how to use them, as well as use them safely. We'll then cover complex project builds

using plan mode and what I just showed you guys. After that, we'll cover context management, which is quite the

term right now. I'll teach you guys all about how to manage your context efficiently, avoid context rot, and

ensure that your prompts are built and structured in a high ROI way. I'll run you through every slash command in Cloud

Code and how to use all of them. We'll then cover hooks, which are custom scripts that you guys can fire

automatically before or after every Cloud Code tool call. Very useful to know. I'll then talk about Claude Code

skills, which is basically how to create these skill files that turn Claude code into a bunch of different specialized

agents. We'll then cover model context protocol and how to set it up effectively. I'll talk about a handful

of automated systems that you guys can quickly build with model context protocol, including email managers. You

can build your own bookkeeper and more. I'll cover cloud code plugins and marketplaces. The Chrome DevTools

integration, which is a very slept on uh connection between Cloud Code and Chrome that enables you to collect data from

sources that don't have APIs. It's very, very valuable to learn. We'll then cover Cloud Code sub agents with scoped tool

access. I'll talk about their new agent team feature and how to use them productively. and then get work trees

and session mobility which essentially will allow you to spin up parallel cloud sessions without a lot of the downsides

and issues that things like claudebot or or open claude have unfortunately resulted in. Finally, we'll cover

scaling and deployment. Basically, how to take your automations and run them in production using modal web hooks, GitHub

actions, and cloud code on the web. So, we've got quite a lot to cover. Let's just dive right into it with the first,

which is how to set up cloud code as a total beginner. So, the first thing we have to do is we actually have to

purchase cloud code. And the reason why is because they don't offer it for their free plan at $0. In order to have access

to Cloud Code, you need at least their pro plan for everyday productivity. I'd recommend this if you guys are starting

out. The money that you spend on a subscription like this is so small compared to the massive

productivity benefits that despite the fact that it's $17, I personally would not even raise an eyebrow. It's no small

stretch to say that Cloud Code probably delivers me productivity benefits on the order of $10 to $15,000 a month because

it's not only just skilled as a developer might be, which allows me to build systems that alleviate stresses

and strain in my life, but it's much more than a developer as well. It's basically my second brain at this point.

After you click try Claude, it'll take you to a page where you have to log in. And once you're done, you can then

create your account for the very first time. So, I'd select both of these. I'm not going to subscribe to occasional

product updates because my email inbox is busy enough. And then you have an onboarding screen with some personal

information. So, I'm just going to fill that out and then once I'm done, circle back. Okay. So, I'm Canadian and

unfortunately our dollars convert quite poorly to freedom dollars. So, the $17 that we saw earlier is $28 in my own

currency. I'm going to click get pro plan and then walk through the payment details below. Cool. And now I have a

Cloud subscription. This is all that you need in order to get set up. Everything else is totally free from here on out.

The simplest way to get up and running with Cloud Code is just opening up a terminal instance. That'll seem pretty

intimidating to a lot of you. So, I'm not just going to show you how to do it in the terminal. I'm also going to show

you how to do it using what's called their graphical user interface, which they put together four or five months

ago. Any resource that I show you throughout this course is probably going to look a little different by the time

that you look at it versus when I'm looking at it. And that's because cloud code, anthropic, and just AI tools in

general change really quickly, especially since most of the developers are also using cloud code. So it kind of

multiplies the productivity here. What's important is not the specific layout, the colors, the the the words on the

screen. What's more important is that you just know how to find it. And so the number one resource that I personally

use to look up advanced cla features is in the cloud code documentation. It's at code.cloud.com/doccks.

Whatever language you speak, just pump in there and then it'll automatically translate that over to. So the cloud

code docs specify that in order to install cloud code in your system for the first time, you can run what's

called a curl command here. If you're running Windows PowerShell, you know, you can run this Windows cmd, you can

run that. Just so we're all on the same page here, when you have little snippets of text like this, what they're telling

you to do is basically to open up a terminal or a command prompt. So on Mac OS, Linux, or WSL, which are all

different operating systems, in order to open up a terminal, you just type terminal. When you do so, you then get a

terminal. Now, this terminal might look a little intimidating to you if it's your first time ever using something

like that. But don't worry about it too much. I just wanted to show you guys how easy it is to get set up with cloud code

in this. And then afterwards, as mentioned, we'll we'll do the graphical user interface stuff. Okay. So, this is

what it looks like on Mac. If you guys are on a Windows, then um you'll have to use the Windows key search bar. Then

it'll look up something like cmd or command prompt. At the end of it, you'll get something that looks pretty similar

to this. From here on out, all we have to do is we have to copy over the command that it gives us. So, because we

want a native install and I'm in Mac OS, I'm just going to copy over this command. You can also click this little

button over here and then alt tab back. I'm then going to paste it in and press enter. From here on out, a bunch of

complicated things are going to occur. If you don't already have it installed, may take you a little bit longer, but

now we're good to go. Claude Code is installed on our computer. Once you're done with all that, all you have to do

in order to use Claude is just type the word Claude directly into your terminal. It's really that easy. Now, if it's the

very first time that you're logging in, you'll also have to authenticate, and it'll ask you to do so automatically

when you open this stuff up. If not, you can also type back slashl i n. Once you've clicked this, it'll

tell you cloud code can be used with your cloud subscription or build based on API usage through your console

account. How would you like to set up? Now, in our case, we're using the cheapest, most effective method, which

is the Pro, Max, Teamer, or Enterprise subscription. It's also the most straightforward, which is why it's the

one that I used in this course. I'm just going to click enter, and then it'll then log you into your Claude account,

the one that you just set up a moment ago. Once we're done, you're all set up for Claude Code, you can close this

window, then alt tab back, and you'll see that it's going to say just press enter to continue. Now, just so we're

all on the same page here, all we've really done so far is we've just opened up a chat interface with an AI model.

It's just instead of it being in like a nice desktop application or on the web, it's in our terminal. And the value here

is instead of running an AI model on the web or in some distant cloud server, what we're doing now is we're running it

locally on our computer. So we actually have the ability to take this model and then locally modify files on our

computer, write scripts, write stories, write poems, restructure our file organizer, clean up our our PC or our

Mac. Like this thing is currently connected to my computer. And I'll run you guys through how permissions and all

that stuff work later on in the course as I talked about in the outline. But even this alone makes it extraordinarily

powerful. So this screen can look pretty intimidating for beginners. Most people end up using the terminal um flow, not

the GUI flow, but I'm going to explain to you what you guys see here just for simplicity. In the top lefthand corner,

you have that cute little claude code widget. I think it's I don't know if it was supposed to be a crab or like a

jellyfish, but it's adorable. Then you have claude code and the actual version up above. Underneath you have the model

that you're currently using. In my case, I'm using Opus 4.6. Then you have the plan that you're on. In my case, Claude

Mac. So this is a couple levels up from the pro plan. And then perhaps most importantly, you have the current

working directory. As I mentioned to you a moment ago, this is working inside of your computer in a specific folder. And

so Cloud Code currently lives inside / users/nixar, which is basically like the the home

folder, at least on my Mac OS. Here is your previous command. And so I just wrote clear because I wanted to clear it

all the way up and give you guys a fresh canvas. Here is where you actually insert the text. So when you type stuff,

it pops up. Underneath here, it tells you the model again. Then it gives you various modes. So in my mode right now,

I'm in bypass permissions. This is sort of like a dangerous mode. It's a mode that not a lot of people feel super

comfortable with, but it's the mode that I prefer for uh knowledge work and intellectually valuable tasks. And I'll

run you guys uh through more of that later on. But you can cycle through modes simply by clicking shift and tab,

which I'll show you guys how to do. And then there's some additional information here. There's a version, the latest, and

then over here is at least in my case, the the token readout. And you know what's really cool? You can actually

adjust this. This sort of thing is your your claude code status line, which I'm also going to run you through it. You

can make it all colorful and all wonky and really fun. You can have it display whatever the heck you want. So the very

first thing I'm going to do is I'm just going to say, "Hey, how's it going?" And immediately after, I'm going to take a

screenshot so I could show you guys some more information. So, opening this up in my drawing tool. What ended up happening

is immediately after we said, "Hey, how's it going?" You see that another prompt showed up called finagling. This

is one of like a thousand different words that Claude Code uses. Basically, anytime it's thinking, it's going to use

some funny term like finagling or processing or uh I don't know, rumpeting or considering or what whatever the

heck. They're pretty funny. And the cool thing is you can customize that. Next, you have the number of seconds that your

your query has lasted. So, I just said, "Hey, how's it going?" And then 2 seconds in, it's now produced five

tokens for me. And then finally, you also have the the token count. So, just so we're all on the same page, a token

is not the same as a word, but at least for the purposes of most of what you do, you can consider a token to be similar

to a word. For instance, I said, "Hey, how's it going?" Um, this is not 1 2 3 four. This isn't four tokens. It might

be four words. It's probably closer to six or seven tokens, but just think about tokens as being analogous towards

just a few more if that makes sense. You'll also see that an additional piece of information popped up down here

called context. And this is really important. Um context goes from 0 to 100% and that's how much basically um

conversation history you have in the current chat window with your current instance of cloud code. This becomes

really important later when you're designing uh better context management techniques which is a big portion of

what this course is going to be all about because at least as of the time of this recording context management is

sort of like the the big bottleneck in getting these systems to do more and better for you. You'll also notice that

on the right hand side my token counter uh my status line here it it went up significantly. And so basically what

this means is at about 20,000 tokens or so, we're about 10% of the way through um our entire conversation thread that's

allotted to us. What's really cool is Claude Code will take all of that history and at regular intervals, it'll

actually compress that for you by increasing the information density, taking a string of text and then making

it higher information density and higher information density and higher information density successively. So

that even if you wrote something in kind of like a you know a bloated way, a way that you know you could have used fewer

words to say um as your context goes up and longer um cloud will automatically manage that for you to ensure that

you're within the window. So that's how to set up cloud code in the terminal. Hopefully we're all on the same page.

Terminals are really similar to graphical user interfaces which I'm about to show you in a moment. I do

recommend that you guys get used to using it in terminal because when you use it in terminal you basically unlock

even more functionality. You can run a bunch of these side by side. You could run different terminal tools and whatnot

that give you guys faster refresh times and we'll cover that sort of stuff later. Um, but what I want to do now is

I want to show you guys how to run it in a graphical user interface. And these graphical user interfaces are typically

managed by what's called an integrated development environment. Well, that takes us to the next logical question

which is Nick, what is an integrated development environment? An integrated development environment also termed

is basically three things put together. Okay, it's a file folder organizer plus a

text editor plus an AI chat widget similar to what you get if you go on chatgpd.com or

cloud.ai. So, you know how on my Mac if I go Finder um I open up a basically series of folders where I can select

different files and open them up and so on and so forth. You can do the same thing on Windows if you just type in

folder or I don't know the C drive or whatnot. Well, an ID is basically that plus something like notepad or notes

plus something like chat GBT allin one. [snorts] And right now we have two major idees that the market is tending

towards. The first is called Visual Studio Code and the second is called anti-gravity. Visual Studio Code is sort

of like the OG one because anti-gravity is actually built on it. Um, it was developed a lot longer by Microsoft.

It's really, really extensible. It has great support and it's very straightforward. So, I'm going to show

you guys how to set things up on it, but anti-gravity I would consider to basically be Visual Studio 2.0. So, not

only does it have most of the same features now, although it is uh some of them are still kind of a little

beta-ish. Um, it's also a lot more modern, and then there's a much bigger focus on AI, which is obviously kind of

the whole point of this course. So, uh, I'm going to be showing you guys initially how to set things up in Visual

Studio Code. Then I'm going to do anti-gravity, and then for the rest of the course, we're just going to be doing

all of our work inside of anti-gravity. And anti-gravity is really cool. There's some additional functionality within

anti-gravity, not even tied to cloud code. So, the first thing we need to do is obviously we need to set up Visual

Studio Code. Um, in order to do that, just head over to Visual Studio Code on Google over here and then download for

whatever your specific application is. In my case, I'm downloading the Mac OS. I'm then going to have the download

appear in the top right hand corner. I'm then going to give that a click and then go download unverified file. And then

over here on a Mac, you again have to drag the little window over. So, I'm just going to do that. And once you're

done, you're going to have a page that looks something like this. So, remember earlier how I said it was like a file

editor? Well, that's what this little lefth hand side is about. If I click open a folder, I can actually go through

and I can open a folder on my computer. So, why don't I just go and open uh I don't know, leftclick contact. Okay.

Okay, so now I'm inside of the leftclick contact folder and you can see we have some files here, a git ignore, claw.nd,

contact, index, and a neti tl. We're going to go through all that sort of stuff in a moment. It's not super

important for now, but this is sort of like where the um file explorer functionality comes in. If I were to

click on one of these, as you can see, we've now opened up a big text editor right in the middle of the screen. And

so this is a bunch of CSS. It's a programming language. What's really cool is with cloud code, you don't actually

have to know how to read any of this stuff. It'll just tell you everything. And so that is the text editor

functionality. I can make changes. Hey, what's up? You know, I could um create a new file here if I wanted to called

message.md. And I could say, hey, how's it going YouTube? So just like in that way, we

basically have file editing functionality and then we can also select files to work on and stuff like

that. And then on the right hand side, you have an agent tab, which is where you have your chat interface with AI.

Now, right out of the gate, the VS Code chat interface isn't actually Claude Code. In order to access Cloud Code, you

have to download it as an extension. So, I'm going to run you guys through that right now. On the left hand side here,

click on these little blocks. Then, just type Claude Code. You'll see a variety of these. The one that you're looking

for is the one that's developed by Anthropic, the one with that little check mark in it. be very wary of

downloading extensions that are not from official developers and vendors like Anthropic simply because uh people have

been known to insert malware and and different things like that in these. It's very important that you're that you

preferentially use verified sources. In my case, I've already installed this, but all you have to do is go through

that little installation wizard here. Then once you're done, you will have access to cloud code. The question is,

okay, I have access to cloud code. How do I actually use it? Well, it's really easy. If you just go to the top right

hand corner of this little agent window, you now can just click on cloud code. But you'll also see that there's a

clawed logo up here as well. But what the hell does this mean? If you click on this, you'll open up just like another

window. And in my case, I open it up with a terminal default. Uh, so it's going to open up this in the terminal.

This can be pretty intimidating and kind of annoying to be honest, juggling all these things. Just going to zoom in so

it's easier for us to see. So my recommendation is at least for beginners, just stick to the one on the

right. That one's simpler. And as you can see, it's a different user interface than the terminal. Okay. So how exactly

do you use this? and what are all of the different features and buttons and stuff like that. Covering the interface,

obviously up top you have the past conversations tab. And so as you build up more conversation history, you'll

actually be able to jump back to any prior conversation you've had with Claude Code over here. You can do that

both locally and then on the web. Um I don't have access to either of these yet because I just set this up fresh for you

guys. Underneath that you have the Claude Code logo. Underneath that you have that cute little jellyfish or

lobster, whatever the heck it is. Underneath you have your little chat window. So here is where I can actually

talk to Claude. Hey Claude, what's up? Once we open this, you'll see that similarly to how we had before, we have

that little accomplishing fidgeting whatever we have that little like process uh text come up. After that, you

then have the response. The response comes in in this little window. Although you'll see it's different when it

accesses files and stuff like that. Underneath at the very bottom lefthand corner, you have the various permission

modes. Remember how earlier mine said uh dangerously skip permissions? Well, you can do the same thing here. If you just

click on this, you can cycle through all of the different possible modes. And you'll see that little window around the

chatbot also changes. So, uh in my case, I'm asking before edits, which means because this is running locally on my

computer before it makes any changes to any local files. I'm going to say, hey, just ask me to make sure. Now, this is

pretty safe and a lot of people, especially coders and and you know, developers that are a little more old

school, will usually work like this. But personally, given that when Claude's really in the thick of things, it's

asking me for edits every five freaking seconds. If you really want to unlock that productivity, as I talked about

before, you either use edit automatically or use bypass permissions. And I'll cover plan mode and whatnot

later as well. To the right of that is, and this is kind of intimidating for some people to understand, but this is

the file that is currently being fed in as context. So, for instance, do you see how here it says index.html? And if I

click this, I get this little eye icon. Well, if I leave this open, basically Claude is currently looking at this

file. So, what file are you looking at right now? It'll now tell me that it's looking

through the index.html that's open in my editor. It hasn't read through the contents yet because reading through the

contents of this massive file would feed a fair amount of uh tokens into context, which would charge me a fair amount of

money. So, right now, it's not doing any of that, but suffice to say, I can actually edit this in real time. Yes.

Change the title to Nick's YouTube example. And what it's going to do is it's going to go through my file. It's

going to find the title, which is listed right over here. Then it's going to change that for me. This is an example

of a really simple, easy, and straightforward change. But I could do way more. I could refactor this whole

thing from light uh dark mode to light mode. So, I'm actually going to ask it to do so. Refactor this index html from

dark mode to light mode. And if you don't know what this means, it's okay. Bear with me. We're actually going to

rebuild a whole app using cloud code and various design uh patterns in a moment. The first thing it'll do is it'll try

planning out the changes that it's going to make. And so it's doing a bunch of programmatic adjacent things right now.

Like it's filtering out a bunch of um you know different CSS snippets. It's doing a fair amount of work here. And

you don't need to be a programmer to understand what's going on. We basically now given this a task. It's

deconstructing the task into a list of highle steps. Then it's going to go through and it's actually going to

present this plan to me uh for me to say yes or no to. Now you'll notice that when I did this in addition to the

interface changing and now the colors being blue in the bottom right hand corner we now have sort of a little

pause button. This pause button is pretty important because it allows us to actually stop a claud code execution in

process. So like while it's working. So I could theoretically change this at any point in time. Okay. And I could

actually pause it and then maybe I could give it some more instructions or uh I don't know tell it to do something

differently. So, I'm actually going to click this little button. Then, I'm going to go to bypass permissions. I'll

say no plan, just do it. And what I've done is I've I've interrupted the process in the tool call. And now it's

going to go through and instead of having to do this big fat plan, I'm just going to say it's the wild wild west,

buddy. Just get in there and start making some changes. When I did this, you'll notice that there's now a

thinking tab that's open. If you click on this, you can actually peer into the internal thoughts of Claude as it goes

through and accomplishes your request. So in this case I said the user wants me to just refactor the dark mode to light

mode without planning. Let me read the whole file understand all the colors and then make the changes. And as you see we

just had some changes made which is what this little blue uh thing is here showing that we've made you know the

changes. So immediately after thinking it then did some more thinking. Then down at the very bottom it's now updated

a bunch of the sections of my code and it's continuing down some little to-do list. So this is how you interact with

cloud code through the graphical user interface. And there are a couple of additional things like you can click on

this button to attach files and folders and use the browser. You can also check all of the commands here which are

pretty powerful stuff and I'll cover them all in due time. So that's claude code in Visual Studio Code VS Code.

Let's now cover how it looks in anti-gravity. How to set that up and then immediately after we're going to

build an actual real web app using Claude Code. As expected, anti-gravity is pretty similar. They have a website

here called anti-gravity.google. It's very sexy and clean. Wouldn't be surprised they built this with agents.

You just click download for whatever your specific um you know operating system is. In my case, Mac OS with Apple

silicon. Going to give that a click. Then it'll go through that same process that we just did for VS Code. Once you

open up anti-gravity, it looks very similar to what we just saw a moment ago with VS Code. And that's because the two

were sort of built on each other. So, just like VS Code was both a file explorer, a file editor, a notepad, and

an agent manager, you can see here we have those three same ideas. On the left hand side, we're going to have the

folders. On the middle, we're going to be able to edit the uh text of the files that we uh uh work with. And then on the

right hand side, we can actually talk to agents. First thing I'm going to do is I'll click open folder and we'll go back

to I don't know, leftclick contact just so you guys could see what we're dealing with. And you'll you'll understand here

that the UX is just slightly different than what we had earlier. Um you know, some things are indented. We have like

some little cool symbols in the lefth hand sides of the file. This isn't super important, but I just think anti-gravity

looks cleaner, which is why I like using it. In the middle here, if I click this index.html, HTML. You'll see that we

also have the text pop up just like we did earlier. And the only real difference between um anti-gravity and

VS Code. It's just what we have in this right hand side. Earlier we we could have used Claude Code really easily

because there was an actual dedicated Cloud Code button. Right now there isn't. In order to access Cloud Code,

assuming that you've installed it, so head over here, Claude Code for VS Code. Give that installation button a click.

Assuming that we've installed it, what we have to do instead is we have to double click somewhere here and then

click on this little claude icon. Okay? and then just delete the agent icon. And now you have the same layout that we had

earlier in VS Code. Just now you have it with uh with cloud code. The reason why is just because anti-gravity is a Google

product. So they try and push uh the Google Gemini series of models. That's what we had on the right hand side

earlier. And to be clear, this is a cloud code specific course. Um but you can also use whatever model you want to

do whatever purpose. Like the model type is less important than just the fact that you're really good at using it and

the fact that it's smart. So exact same layout here. Not going to cover it anymore. Let's get into actually

building some stuff. So, let's now build our very first app/web page with claude code. For simplicity sake, I'm starting

with probably the most straightforward build, which is just going to be a web page. And we're not just going to do the

hero header, which is the top or above the fold section. We're going to do the the whole website. And the reason why

I'm starting with this is because I just want everybody to understand how good Claude Code and similar tools have

gotten at being able to design highquality websites. This is a site up here called godly.ebsite. And what it

does is it basically just showcases really highquality design. And every single one of these, with maybe just a

couple of exceptions, is now doable in probably I want to say less than 10 minutes or so front to back using cloud

code. This isn't me just, you know, pretending. This is something that I have done myself dozens of times. I've

built really high quality websites. The other day I built like 15 or so for a project. um they all look just like

this. So, award-winning design, award-winning app functionality and stuff like that. These are just a few of

the things that you guys are going to learn today. In addition, you're also going to learn how claude.md, which is

the system brain file, affects your prompts. I'm going to run you guys through the three major ways that people

currently design sites and the various ways that you guys could use um these approaches to both design websites,

apps, and more or less anything else you want. Then, I'm also going to talk a little bit about deploying

So let's start with cloud.md. I have open in anti-gravity here. Um the same workspace that we were looking at

before with just a couple of changes. Namely, there's this node modules folder here, which you guys don't have to pay

attention to. Um this is automatically generated by cloud code every time we use a library or use some sort of um npm

package. And then underneath we have claw.md. Now claw.md as mentioned is the brain of your workspace.

To make it really really simple and straightforward for you because I think a lot of people misunderstand how cloud

identities work. Let's just look at a hypothetical conversation over here. Let's say you are on the

right hand side. And so what you do, okay, is you say, "Hey, research X for me.

Research, I don't know, the best trending posts on Twitter in my niche, whatever the heck, right?" And then what

ends up happening is the model afterwards claude whatever you're using whether it's opus 4.6 six or 4.5 or

sonnet or haiku, it'll respond to you in purple saying sure at one moment after it returns whatever you want then you

know you continue in this vein and so what I'm trying to get at is there's a pattern here right there's user and then

there's model and then there's user and then there's model the way that the claw.md prompt works is

basically at the very first message before you even get to that point what's hidden from you is the fact that there's

actually another prompt. Okay, this prompt is injected at the very top of your conversation string before you even

send the first message. And so this cloudmd being sort of the very first thing that the model reads and sort of

internalizes is really really important to help steer the output of the ship. Now what is steering the output of the

ship? Well, I often use an analogy here. Let's say you're somewhere on the east coast of uh you know, North America and

you're trying to go to I don't know, let's say the westmost coast of Africa or something like that. As you guys

know, these intervening distances are are really huge. These are I don't actually know how long it is, but

probably at least 10,000 km or so. Now, if you're a ship positioned right over here, okay, and this is your port and

your goal port is over here. Let's hypothetically say you have limited ability to steer the ship. For

whatever reason, the steering wheel or whatever the ship equivalent is, it just doesn't really turn that much. What that

means is if you wanted to make it as close as humanly possible to that X, what you would have to do logically is

you'd have to make sure you're very very accurate at least when you leave the the port. And the reason why is because if

you're not, okay, if you give even a very slight range of possible, I want to say angles that you could go, okay, it

may not seem like that big of a difference if you go, you know, from this line um to this line, at least

initially, right? But over an intervening distance of tens of thousands of kilometers, obviously this

goes, you know, a very very long way away from what your what your goal is. And so steerability in AI is basically

when you try and minimize the number of potential or the width of all of the potential options. And so

what clawmd does is it allows you to take this space of like, you know, a really wide angle of ways that the AI

could go. Okay? And it's like I don't even know where the hell we're going to go if we take that topmost path and then

compress it down into a much more likely subset of possible options that the AI could go such that you know if you were

to be even slightly off here the impact on your final destination while you know you wouldn't make it to your goal you

still make it pretty close. So I want you to treat your cloud.MD MD is basically that initial trajectory that

you launch um all of your cloud sessions um whether in terminal or whether in the GUI tool like I'm showing up here. So

with that understood now that we're on the same page about how cloudmd is injected at the very front of any

conversation you start to realize that there's a tremendous amount of value in making that cloudmd as high quality as

possible. Okay. So including a file capital C cl a Ude.m MD in any workspace project directory means that this is now

injected at the front of our conversation. And so you don't talk to this any differently than you would

claude itself. This is just a file that standardizes it and makes it really easy to build in like conventions for

different workspaces. In such a file, you're going to want to be very concise and you're also going to want to give it

sort of the bounds of what this workspace is for. I could just as well actually copy this whole thing over,

okay, and then paste this directly into my cloud code and then just get rid of my cloud MD entirely. But the value in

having a cloud MD is I just don't have to do that every time. It's initialized very top of that conversation history

like we just saw. And so what's in here to be honest is not super important. I actually had another version of Claude

just develop this based off some um Twitter posts that I saw that talked all about how to build websites with best

practices. And you guys have access to all this stuff down below. I obviously have that template folder um that you

guys could use to to get this and anything else. But suffice to say um this is how or one of the ways rather

that you can currently design websites using claude code. So the three major ways that people are currently using

claude code and other agents to do designs are as follows. The first is that you give it a pre-existing design

and then you give it the ability to screenshot itself over and over and over and over again. And basically what

happens is the first variant that they create that cloud code creates will be like an 80% match. Then it'll screenshot

that compare it directly to the source image and then um list all the differences and then get 90% of the way

there. And then it'll get 95% of the way there. And it usually can't get 100% of the way there, but it can get like 99%

of the way. The value in this sort of approach is what we're doing is we're basically taking an inspiration website.

And so in our case, we're going to be using it on this site here. Um, and then we're using that to template out a bunch

of like design fundamentals. So like the size of the text, the colors, the the way the buttons look and stuff. And then

what you do is you just change the content of the site with cloud so that it's like whatever site you want it to

make. So in my case, you know, I run this business called Leftclick. This is my a automation agency. Um, you know, we

help people install growth systems into their businesses, typically B2B agencies. So what I would do is I would

basically try and rebuild this site using this design. And you know, I can make some minor changes afterwards, but

so long as I start with this nugget, Claude tends to do a really good job afterwards. The second way to build is

you basically just give it a massive voice transcript dump. For those of you that didn't know, there are now ways for

us to uh basically dump like a large amount of text using a voice transcript tool. I'll show you guys what that looks

like now, but if I just hold this Fn key, this little widget appears at the bottom of my screen. Now, this is

listening to everything that I say. And because I can speak a lot faster than I can type, I can actually say a fair

amount in a pretty short period of time. Most people type it between 50 to maybe 70 words a minute, but we talk closer to

200 words a minute. That's a two and a half to maybe 3x improvement. And because these models are so intelligent

and smart and capable of extracting the meaning from the text, you know, text is all they look at all day long. Um, what

you could do is you could just use a massive voice transcript dump to basically spell out everything that you

want on the website. Um, this isn't going to oneshot your website because we don't have a pre-existing design, but

then you can just go back and forth with it. And then in a fraction of the time of developing a real website using a

voice transcript tool, you can get pretty close. The third major way people are currently designing is they use

components. Now for anyone here um unsure of what components are, basically there are now services and tools out

there like 21st.dev where designers have created specific components on websites and there are features on these where

you can actually click on it and then click on this button up here, copy prompt. Okay. And then it will take this

entire web page, entire design, you know, this little animation flickering thing, this jump on a call button, this

sign up here button, whatever. And then it'll copy all the text needed to have Claude code reproduce that for you. And

so it's really straightforward and simple. You just make an account on one of these services. And then let's say

you're building a website. You scroll through and you're like, "Wow, I really like this background paths component,

right? With these cool sweeping things. I want that on my website." You would just copy the prompt, paste it into

cloud code and say, "Hey, install this thing somewhere up at the top because AI is great at language. Uh, you know, you

can get pretty close." So, you can do all sorts of things with this. You could do like cool button borders as we see

here. You could have like a sign-in component over here. You could have multiple cards. You know, this stuff is

okay. To be honest, I find it much easier just to go straight to u number one, which is just giving it a design in

a screenshot loop and just having it work off of something pre-existing. I don't want you guys to think of this as

like you copying a design as you'll see the end result will be quite different from this but it's just a good way for

you to like get a rough idea of the end design um and also not have to worry about things like the sizes of fonts you

know the the colors and so on and so forth. Okay, so we're basically going to use this as like our inspiration and

then once we have our inspiration in place um Claude's going to be able to design whatever we want whether it's an

app or a dashboard or whatnot uh very very quickly. The final thing that I have to talk about before we actually do

the designing is the difference between building something and then deploying. So when you build something, you're

typically building it locally. When you do a tool, an automation like we're going to do later on in the course or an

app or a website, you know, we're we're running this thing on our local computer. But if we want other people to

be able to access it, then obviously we need to deploy it. We need to push it onto the internet and there variety of

different tools that allow you to do so. So today I'm just going to show you how to build the stuff and then over the

course the next few modules as we get deeper and deeper into the course I'll also talk a little bit about tools like

Netlefi Versel modal and whatnot that allow you to pull to push both your software uh the tools that you make and

then even things like websites and and full-fledged apps to the cloud so that other people can access it on a domain

like you know nicksaw awesometool.com. Okay, so without further ado, how would I actually go about this design process?

Well, as mentioned, I had this claude.mmd file set up here. And this is just something that I had Claude uh

basically scrape through Twitter to find me the best practices of all of the different types of website designs out

there that people are currently using Claude and other tools to create. Uh, and then I just had it like write me a

little a little script, basically a little summary. And this is very squarely this give it a design

screenshot loop. It's just written in like a very particular way. You do not need to know how the tools work. You

don't need to know how anything works. You basically just need to know how to like find a resource out there or use AI

to find a resource and then use it to make your own claw.d D. With that in mind, what I'm going to do now is I'm

actually just going to go on the website that I want, I'm going to screenshot it. However, if you guys aren't familiar,

um, you know, if I just screenshot like one section of the site, like this for instance, on Mac, then I feed it in, you

know, I don't actually have most of the site, right? I only have that hero header. Okay. In terms of how to

actually build this puppy, um, use command shift I or right click on the page and then type inspect. This will

open up a window that looks something like this. Once you're done, change the dimensions to full page width. On

desktop, that's usually 1920x 1080. This is termed the widescreen aspect ratio. Then just hold commandshiftp. I think

it's control shiftp on Windows. You'll open up this little command bar. With this command bar in place, you can then

just type in screenshot and then go capture full size screenshot. It'll actually scroll through the whole site

and take an entire screenshot for you. If I click on this button now, as you guys could see, we now have a screenshot

of the entire website top to bottom. It's kind of a hack. Not a lot of people realize that you can do this, but you

can. It's pretty neat. And once we have this, we just have to do one more thing. It's pretty big right now. If you were

to send cloud code, you know, like 20 megabytes or something like that of file, um, number one, it would like

really massively eat up your token limits. And then two, uh, I think the API might have like a limit on this. So,

we just have to make this file significantly smaller. So, I'm just going to open up this resize PNG file

here. um page called resize PNG from i loveimage.com. You can use whatever the heck you want. Then I'm just going to

drag and drop this in. I don't know, 50% smaller, even like 75% smaller. And then click resize images. This is now going

to basically remap this for us. We can click download. What we're looking for is we're looking to get a file that's

less than about I want to say um I think like four or five megabytes or so. So it's not perfect. Okay, it's a little

bit blurry, but it's all right. Maybe I'm just going to go back and resize this one more time so that it's um I

don't know, maybe a little bit bigger. Let's do 50% smaller instead of 75%. Okay, once we're done, we can click

download resized images. This one is about 4 megabytes or so. If we open it up, you can see that it's still high

quality, but it's much much smaller than the other file, which is like three or four times. And now that we're done, we

just add this into cloud code. So, back to our cloud code instance. I'm going to go down here to bypass permissions.

Then, I just need to go find the file. So, I'm going to click this top right hand corner and I'm just going to see if

I can drag this in directly. Okay, so it's going to open this up. That's okay. Just zoom in, copy, and

then you can actually paste this in um directly. Okay, so just click that copy button,

paste it, and you actually have the whole file as context. Okay, and then we just have to do one more thing. We're

just going to head back to the website. I'm going to find actual, and then scroll down to this little body tag, and

then rightclick and press copy styles. This is going to copy the styles of the site, including the button colors and

sort of like the little gradients in the background and and so on and so forth. And paste that in. Okay. And then I'm

just going to press enter. Now that we've uploaded these, keep in mind that despite the fact that this might mean

nothing to you or I, um, keep in mind that there's that extra prompt that's been injected up at the top that

literally says when the user provides a reference image, screenshot, and optionally some CSS classes or style

notes, you should generate a website. So that's what it's doing immediately. It's analyzing the reference image and

building this website recreation. Let me start by creating the actual HTML file. So this will now walk through its own

little to-do list. Take screenshots of its created website, compare it with round one, basically do the same thing

over and over and over and over again until it gets to where we want it to go. And this is really what I'd consider to

be the core building philosophy um for cloud code. What you do is you basically give it a highle task which in

our case we did with the claw.mmd. Okay. Then we allow it to do the task and then we allow it to verify or

basically judge its results. I think the reason why a lot of people end up sucking at cloud code or maybe

they end up giving it instructions and then not being satisfied with its results is they'll just give it the task

and then it'll do the task and then their loop is kind of like this, right? task, do the task, give it another task,

do the task, so on and so on and so forth. If you don't give cloud code the ability to verify its own results either

visually through a screenshot tool or if you're building some sort of software through like um automated testing

mechanisms and and so on and so forth, test driven development, then uh you lose like the vast majority of the value

of AI. The reality is AI is not going to be perfect the very first time, but the value of AI is not in its ability to

oneshot everything 100%. the value of AI is its speed because you can have it get to 80%. Let's say this is like a I don't

know a little quality bar or something. You know what you can do is you can immediately, you know, it's not just

going to be like if this is time step 1 2 3. It's not just immediately going to be at 100%, right? That's just that's

not what it does. It's not going to go from here to here in like 2 seconds and be done. What it is going to do though

is it's very quickly going to start here. Then it'll go here. Then it'll go here. It'll go here. And then eventually

after two or three or four time steps, it'll it'll hit that 100%. And you know, we think that this is a really long

period of time. Okay? But in reality, this is like 5 minutes. And if you contrast this with how long

it would take a human to do that same, you know, approach, you know, humans will probably get closer to 100% quality

on their very first go, but it's not going to be like a minute or two. What this is going to be is it's going to be

like, um, I don't know, 5 hours. You know, we actually, believe it or not, tend to be a lot more precise in these

machines that we've built. Um, we can oneshot things to a much greater degree than they can, but their ability to test

and then retest and work really, really quickly, orders of magnitude times faster than we do, is the real value.

And that's something that I don't think enough people talk about. So, just make sure there's always a task, do the task,

and then verify the results loop somewhere in here, and you'll be fine. Now, heading back to our um cloud code

instance, you can see it's now actually completed the first round of its HTML. Now, it's um screenshotted it as well.

And then it's basically comparing the screenshot to the work that it's generated. And with this, it's going to

make minor changes. So, as you see, the very first thing it's done is it's replicated the get paid the same day by

setting a payment link or the most flexible invoice on the planet with the buttons and so on and so forth. Okay?

It's also replicated that top section. And it's used little placeholders here with these 160* 100 little buttons even

with like the right tilts and whatnot because it doesn't have access to the images. It then is uh you know entering

these little divs, right? It's even got this cool little post-it note which is really cool. And then it even has the

reviews. And so as sort of like rebuilding the design of this website, it's doing a really good job and we're

only a couple minutes in. What's cool too is if you check out the thinking tab, you can see that it's gone through

iteratively every section of the site. Okay. And it's um you know listing what it needs to do next. So better

decorative elements in hero, better floating band, fixing the blue dot positioning, improving the invoice cards

with map thumbnails. I don't know what half of the stuff means, but to be honest, for me, it's not super

important. Now, just because I want it to be a little bit special and then show you the parallel capacity of Cloud Code,

what I've done here is I've actually opened up another anti-gravity instance. And what I'm going to show you guys how

to do is actually design multiple of these simultaneously. Once we've built this test uh this do test and then

verify loop over and over and over again, which we already have in our cloudmd, it's actually really easy to

spin up multiple prompts and just have like 10 versions of cloud working on things simultaneously. So, just for

shits and giggles, why don't we head back over to our little website designer. It's then giving me a file

here called Twgate. Okay. And then I'm pasting it all in. And now my computer's really humming. Like, uh, you guys

probably can't hear this cuz I like to noise cancel most things, but it's making some noise. And the reason why is

because I now have two of these instances running simultaneously, both developing me a website. On the left

hand side of things, just expand this. Um, we see that it's taken multiple screenshots. There's screenshot one,

screenshot two, screenshot three. You guys see how it's getting closer and closer and closer to the end result?

Well, now it's doing some final editing. It's making some feature thumbnails better. On the right hand side, it's now

going through the initial development of that new index.html. And so, because you can run as many cloud instances as you

have tokens, basically, um, I can run as many of these website designers simultaneously in however many tabs I

want. And this isn't even the most efficient way to do this. I'm going to show you guys a much more effective

terminal management structure that'll allow you to do like five or 10 or 20 of these simultaneously. Okay. Okay, on the

left hand side, it's now saying it's done. So, I'm going to say open index.html. That's always just going to

be the actual website file. And if you just tell it to open, it's going to go through and do so in a tab for you.

Okay. And here is the demo of the website that we put together. So, I mean, it's not perfect. It's not

everything that I want, but it's good enough for us to start. So, what I'll do now is I'll go back and I'll have it

recreate. Leftclick. Hey, this is looking pretty solid so far. I'd like you to um check out

leftclick.ai. That's my personal website. And what I want you to do is to design uh or take

the information from leftclick.ai and then insert it into this website. I don't want this to be a clone of

leftclick.ai, but I want it to be pretty close. Use the formatting and everything that you've developed so far to help

place elements and stuff like that as necessary. Um insert images as well and make sure that any elements that um are

there look good. Continue doing a screenshot loop if necessary until you have something that looks very high-end,

very professional and and minimalistic just like you've already developed. Okay, so I just fed in a bunch of

information. Now it's going to go through fetch the content from leftclick and then help me design the site. On the

right hand side, we're creating that initial index.html. Now in this case, I obviously did the two website design

simultaneously manually. Uh but what you can do is you could actually work this into your website or app design process.

You could actually have it take in, let's say, three different examples of uh templates or of design inspirations,

whether from godly.e website or from I don't know dribble or one of these big design aggregators and then in the

cloud.mmd you could say hey I actually want you to develop three versions of this then you could give it some source

and then you could actually just like let it do its little test verification retry loop before giving it you know a

source website like in my case leftclquick.aii I to have it like do some modifications or maybe just doing a

big voice dump of what your website is, what it's for, the various audiences you serve and stuff. And then at the end,

you could actually have three websites simultaneously that Claude presents to you after 5 or 10 minutes and says,

"Which one do you like the best?" The options here are virtually unlimited. The other uh website developer so far

has made this, which actually looks pretty reasonable. You can see that there's still some things that it needs

to change. Uh some of the text looks like it's placed weirdly, some of the blog posts and stuff like that.

Obviously, the development is mostly hands-off at this point. I'm just monitoring it. And on the left hand

side, we've now taken four screenshots of this and gotten really, really close to that end result. Um, it's now

building like the leftclick site itself. Most of the time, I don't actually care too much about what's in the file

explorer. Um, so that is the third panel on the left hand side of both of these windows. So, for simplicity, what I do

is I actually just close it out. And then I usually have on the right hand side some sort of output that AI has

generated me. And then on the lefth hand side, I just have my my actual little chat window. I'm just going to zoom out

just a tiny bit here. So we're still all on the same page. We could see everything. Uh and then that way I can

now just orchestrate and kind of take a step back and see how things go. The leftclick design is also starting to

come together. As you can see, we've taken that initial website from actual as inspiration. So we have like the same

sort of buttons and the nice rounding, nice hover effects on things and then obviously we have the font. Uh but then

now we've actually replaced it with leftclick content. So, the definitive AI growth partner for fastmoving B2B

companies. Tens of millions of dollars generated and more saved criteria systems, real revenue, no fluff. As we

scroll through here, you can see it's even inserted like a little button-and-click video element. We all

have our case studies down below. We have some pictures of me and my business partner, although we're kind of cut off

at the middle of the head, so we could probably fix that. And uh yeah, we've even got some testimonials, which is

really, really clean. Let's see what happens if I click this button. Oh, nice. It's even gone to our discovery

page. So, we we we're actually like having buttonclick functionality and stuff like that in here as well. kind of

curious what happens if I click on this. Okay, nothing so far, but maybe I can tell it to do stuff. We also have an

about and then we have a case studies. That's really nice. So, yeah, I mean things are progressing more or less

exactly like we wanted them to. We even have our little logo. Um, from here on out, I'm just making minor changes and

um, you know, going to go back and forth with it until I get what I want. So, on the left hand side, I'm just going to

voice dump in my voice transcription tool. I can do this like this. I really like the output. I think the

logo in the top lefthand corner is a little too big. Make that smaller. The bolding of the hero header font is also

quite strong. See if we could try a Sarah font instead of a sans sarif font. Underneath the introducing leftclick

section, we have a button player um over the picture of myself and Alex Ramosi and Sam Evans. But when I click on this,

nothing happens. Either turn this into a light box or eliminate that little button in the middle. The rest of these

look great. My and Noah's profile pictures are currently cut off at around the middle of our foreheads. So, move us

down and zoom out of the photo slightly so that we're perfectly centered in frame. And everything else here looks

great. Meanwhile, on the right hand side, we see this index.html is now done. So, we can open this up. I'll say

open in Chrome. That's now going to open up the other version of that website for me. And it's looking like it's pretty

clean. It's pretty matched with what we have. So, because I want to do the same thing that I did with the other source,

I'm just going to scroll back up to where I gave it the instructions to basically copy over left click. And then

I'm just going to paste this in. And now I have this also customizing the site to my specs. You don't have to develop in

multiple tabs. Um, this is something that I think you learn how to do the more of these cloud code agents,

frankly, that you're orchestrating. The benefit to this is obviously you can develop basically however many times

faster as tabs that you have open. But the downside is you also tend to context switch a fair bit. The number one thing

that you don't want clog code to do is basically just sit around waiting for your instructions. So if you are going

to do it this way, just be honest with yourself and ask yourself whether or not there's always like cloud code operating

in the background. I find if it's not running because it's waiting for you for more than maybe 10 or 20% of the time,

you probably have too many tabs open. Personally, I cap out at about three or four. Depends on how intellectually

heavy the things that I'm building are. Um, and you know, it's a learned skill. It's not something that you're going to

figure out right away. There's a fair amount of like remembering that you have to do as well. Um, I've built a couple

of things to help me build things faster. One of them is a little hook. That's a chime that keeps on going off

that you've probably been like, "Hey, what the heck is that thing?" Um, that's something that you can do, and I'll show

you guys how to do a little bit later on in the course. With that knowledge, you can basically set different chimes for

different windows. And when chime one plays, for instance, you know that your top left window is done. So, you can go

give it some more instructions, look at the results. when chime 2 plays, you know, you can go to the top right window

and and do some work there as well. All this stuff in due time. Okay, now we've implemented all of the changes that I

want, including some changes that I didn't even mention. As you see here in the background, there's this very slight

little vertical line design um that it pulled from my main website, which is really clean. I like that. Makes it

makes it quite different. We also have a serif font instead of a sand serif. I like that. Makes me stand out a bit. As

we scroll down, you can see that we've since removed that little play button, which didn't really make any sense, and

it's looking clean. We have all of our profile photos. I like how it kind of inset us a bit. Looks like my buddy Noah

is still quite cut off, which is unfortunate. So, I'm going to have to fix that up. But the rest of this looks

really good, which uh you know, I'm a fan of. Let me just make sure all these buttons work. Again, cool. That goes

directly to our thing. With some minor changes, I think this website's basically ready to go. And looking at

the other option here, we've um more or less taken the same hero header. We have the calendar button working. We have

this nice noise background, which I like. We still have some issues with the photos and them being cut off. You're

gonna get stuff like this uh pretty pretty often to be honest with AI, but that's okay. You can also manually

readjust them if necessary. I don't really like how there are two logos, so I'm just going to do the same thing.

Hey, this looks great. I don't like that there is both an image logo and then a text logo. Just have the text logo. We

want a textgram just called leftclick in the top lefthand corner. The noise background gradient looks a

little bit blurry, so remove that. Only keep it on the social proof section. Myself and Noah's faces look fine. Just

move Nick Sarah's head down about 15% as it's getting cut off a bit right now. Center of the testimonials and client

review section. Right now it's a little bit weirdly set off to the left. And then change the 2025 copyright to 2026.

That's all. And that looks a lot cleaner to me. We have our case studies nice and centered. Both of our heads are visible,

which is really clean. We have our various services. And then down here, let me just click this button. Make sure

it opens that tab. Nice. So, I mean, you know, I wasn't juggling this and trying to show you guys how to do it

realistically. Hopefully, you guys could see. You could build your own super clean, high-end, sexy website in

probably less than 5 minutes now. Um, at least locally. Uh, later on in the the course, I'm going to show you guys how

to take this local website and then deploy it. That will similarly just take a few minutes once you know what you're

doing and the various platforms to use. So you could take the same approach. You could use it to build an app. You could

use it to build a dashboard. You could use it to build more or less whatever you want. Whether uh you are sourcing

websites from a repository like godly uh website ordesign or whatever. Or you're doing this maybe a little more manually.

Maybe you're actually going into apps that you really like and then you're using them as design inspo. Um either

way is perfectly fine so long as you start with that little nugget. Everything else as you guys see here

gets a lot easier. And worth noting, um, I just designed for desktop today, but, uh, if you wanted to design for mobile

or whatever, you do the exact same process. You would just do it with a mobile screenshot. Uh, if you are just

designing for a website, make sure that your websites are, you know, mobile and responsive and stuff like that, lest

somebody open it up on their phone and get treated with, I don't know, my giant ass forehead. Uh, you can also do that

in the agent. Really easy. Just say, "Hey, make sure this is nice and mobile optimized. I'm noticing XYZ image is in

a weird place." Okay, so hopefully you guys have now learned at least a little bit about the way to do a practical

build and practical design with cloud code. As you see, a lot of it's quite hands-off. It's not like extraordinarily

involved. What you do is you basically steer it like I I I talked about before. You carve out the the river and then you

just give it a boat and then it just goes along its way. So long as there's some sort of test-driven development

loop, some sort of screenshot or verification loop, uh the quality that you can end up with is orders of

magnitude better than not. And if you guys are ever wondering why you're not getting the results that you want, just

make sure you have some sort of verification loop built in. Next up, we're going to learn how to build

significantly more complex tools, not just websites and visually designed things, but also whole backends, whole

architectures, and things that you could use either to, I don't know, like launch your own SAS product, or build really

cool internal tooling for yourself, your own personal life, or for your team. All right, now that we've done a little bit

of building with Cloud Code, we put together what I would consider to be pretty solid websites with just a few

moments of work. Let's dive a little bit more into Cloud Code's advanced functionality. And I want to let you

guys know that what I'm about to talk about here, probably less than 10% of everybody that currently uses Cloud Code

understands. So, when you unlock what I'm going to be teaching you in this module, uh you'll know significantly

more about Cloud Code for one, and then you'll also be able to combine each of these cool different features in in

fantastic ways that uh I think you'll quickly see the value of. So, what is the claude directory? Just to be clear

here for anybody that doesn't know in programming convention, first of all, this is a folder. And in programming

convention, if you put a period in front of the folder, this basically hides the folder from view. And so if you just

open it up in a file explorer, you wouldn't actually see. For instance, you know how like um I don't know, in my

case, my computer is called Nick. And then underneath that, I might have some some other folders. Maybe I'll have like

a documents or something. Let's turn this off before that frustrates me. I might have a documents. Well, if under

Nick I stored another folder called hidden, if I were to open up my file explorer because it has a period in

front of it and because that just happens to be the convention, the file explorer wouldn't show it to me. So this

is sort of like the developer way of, you know, building folders that don't really muck around and ruin your nice

organization. So in Claude Codes's case, they have a lowercase C cla directory. And inside of this cloud directory,

there's basically support for like 10 or 15 cool advanced features um that once you know you can augment cloud code

significantly more than sort of vanilla out of the box. So let's run through all of them together. This is what like a

fully loaded cloud folder would look like. Okay. And there's actually two levels to this and I'll cover both of

them in a moment. But the one that I want to talk about first is right over here. So inside of thecloud folder, you

can add a settings.json JSON, which is team permissions and hooks. I'll talk about hooks a little bit later on, but

that's how I get my cool little chime noise at the end of everyone. Uh, you have settings.local.json.

Anytime you have a local inside of a file, um, this basically keeps it local on your computer as opposed to push it

pushes it to a uh, online repository. For those of you that are unaware, a lot of programmers and people that use cloud

code use um, GitHub to basically store all of their active projects. Now, because GitHub is a cloud service, there

are some instances where you don't actually want the cloud service to have access to the data inside of your repo,

particularly if it's quite sensitive stuff like, you know, tokens and and authentication keys and whatnot. So,

they developed this convention where you could just go local whatever um in order to kind of override that and then not

push it to GitHub. You have the same pattern here with claude where your claude.md lives and then

claude.local.md. This is again ignored. That just means it's not going to go over to GitHub. Then, interestingly, you

have an agents subfolder, you have a skills subfolder, and you have a rules subfolder. Then, finally, you have a

hidden mcp.json as well. You know, I think if you're somebody coming into this without a technical background,

you'd look at this and you'd like be like, "Oh my god, this looks insane." Like, what the hell's going on?

Settings.js, settings.local.jso, why is claude capitalized? What does MD mean? And I'm going to explain all that

stuff to you in due time. But for now, just know that these are basically the various buttons that Anthropic, the

developers of Cloud Code, have given you that you could press to sort of customize your own instance. And each of

these files you can customize to whatever degree. You can add whatever the heck you want in there. Some of

these files reference other files. Um, you know, it's really up to you and Claude because most people don't

actually develop this stuff on their own. They actually like kind of co-work with Claude to put together their own

settings. Um, but it's up to you how intense you want to go into. Personally, I just have a claude.mmd. Sometimes I'll

have skills and agents. I'll run you through sort of like my own 8020 setup um later on in the course. Okay. So

anyway, this claude folder actually lives inside of your claude code folder workspace wherever you're working. So I

mean I don't actually have a folder set up yet, but let me do it right now. And if you use this cloud folder, you're

basically like uh unlocking uh advanced functionality uh more so than just having a cloudmd in the root of the

folder. So, that's what I'm going to do. I'm just going to move over my docloud to sorry, I'm going to move over my

cloud.nd tocloud. And then, as you see, there are some additional folders here that I'm going

to put together as well. Inside of this, I'm going to go agents. Also going to go skills.

And over here, I'm going to go rules. And let's explain what all of these three mean. The first idea is this idea

of breaking up your big claw.md into different rules. And so basically what this slash rules folder allows you to do

is allows you to take everything that we've written here and then instead of just sticking it all into one file, you

can define highlevel rules that um correspond to different parts of let's say a build. So for instance in this

example there's a rule for code style, there's a rule for testing, there's a rule for security, there's a rule for

front end, there's a rule for, you know, within front end react and then styles as well. And so, you know, code style

might be a very simple kind of two paragraph thing that just explains how to organize your code. Security might be

a pretty simple few paragraph thing that explains how to, you know, secure your code bases and whatnot. Styles could be

a list of Tailwind CSS styles or I don't know, whatever, just like some some sort of formatting instructions to make

websites look a certain way. And so, for instance, if you look at our claw.md over here on the right hand side, you

can see that we've split it into a variety of sections already. There's like a workflow section. There's like a

technical default section. There's like a rule section. We can actually split these into their own uh rules files. And

that's what I'm going to have Claude do in a second. Split claude.md into its component rules. Use the Claude code

rule spec specification if you don't know what that means. And so what I'm doing is I'm empowering

claude code to basically go through our current folder for one. Then if it doesn't already know what you know rule

specs are, it's going to go read up on rule specs. And then it's basically just going to take this file and then split

it into what looks like three file rules inside of um the rules folder. [gasps] So now we have rules split into

workflow, technical defaults, and then design rules. Okay. And as you can see, this is a little bit more compressed

than we had earlier. Basically, the title of the file is sort of like that little heading.

Okay, great. anything else we'd need for efficient coding and you know it can go through and it

can create some additional rules for you. So now if you think about it, okay, and by the way, I don't actually

recommend just asking claude, hey, build me rules for efficient coding. It's not going to do a very good job. Usually the

best place to find like highle instructions and stuff like that. Um, that's sort of on the cutting edge. I

would recommend uh like scrolling through Twitter and then finding cloud code power users. It's like a real gold

mine. The reality is cloud uh code will actually like incorporate the most commonly used cloudmd configurations and

stuff like that into every successive generation. So a lot of the time, you know, you don't have to include the

stuff you had in your cloud node from like Opus 4 or whatever because nowadays it just sort of understands that

natively. And so if I, you know, talk about this example in the context of what we've already done, you know, over

here we had one monolithic claw. MD file, right? But imagine that we instead split this into I don't know, let's just

say three rules. You know, we have the workflows, then over here were the design rules,

and then the tech defaults. Okay, now instead of dumping it in as one big claw in default, we actually have a lot more

granular control over little things. Um, and so we can organize this to, let's say, evolve the workflow without

touching the design rules and so on and so forth. And in general, this form of segmentation can be useful, especially

when you're working with other people. you can give people access to let's say like the styles but then maybe you

actually have full control over like the top down workflow or as I'm sure you can imagine you could have a really really

long claude.mmd right a lot of people have cloudMDs that are I don't know like many many many thousands of words

sometimes tens of thousands of words so splitting it up in this way just helps keep you organized it also helps uh

allow you to see areas that like you don't really need anymore. It's one thing if it's a giant file that's 10,000

freaking words long. It's another thing if it's like pretty simple and pretty straightforward. So, we can similarly

create skills and agents and they're organized in very um um you know similar ways. I'm going to talk through some

specific agents that I'd recommend having and then ways to use the skills folder to basically automate large

portions of most knowledge work later. For now, I want to talk a little bit about the top half of this image. So,

the bottom half, okay, this is stuff that we've already kind of discussed. This is the cloud/folder. But it turns

out there was one folder that exists at an even higher level than the cloud in your workspace. Okay? And this is like

the global folder. Now, anytime you see this little squiggle, okay, in computer programming

or networking or in file in your file explorer, this basically refers to like your home folder, okay? And this isn't

the home folder of your workspace, not the specific one that we're working in. This isn't, you know, if I go back to

anti-gravity, my website design example copy folder. What this is referring to is this is referring to like the home on

your computer. And so this might be like the Nicholas folder or something like that on my computer. And basically Cloud

Code allows you to define settings that are both local, which corresponds specifically to the workspace that

you're in, and also global, which are are basically settings that are shared between all of your workspaces. And

that's where the second U [clears throat] sort of category bins into. And so what we do is in addition

to being able to set a cloud MD on the local level for instance aka have one that applies to all workspaces if we

were to expand this just a little bit. The way that this thing actually works if you think about it is we have the

claude.md that's over here and this is your local claude. Okay. But then we also have

highlevel other clamd files and rules and stuff like that. Maybe this is called tech rules. Maybe this is called

permissions, you know. Maybe this one's called um I don't know style guide. And these come from your global

little squiggly line slash.cloud. And the way that this is organized is very similar to the way that the

local.cloud is organized. it just exists in a different folder and it basically supersedes any local cloud

functionality. So this is another example of like splitting permissions. For instance, if you're working on a big

team, um you know, maybe you as the director of the team have access to like the global.claude

uh uh tilda it's called /.cloud folder and in there you put your like global settings. So these are highle rules that

the AI agent in all workspaces reads and and understands. Maybe things like, hey, you know, don't allow people to delete

these files or folders. When speaking with uh, you know, staff members, refer to them as X, Y, and Z, whatever. And

then every individual engineer on the team or every individual team member, they empower themselves with a local

dotcloud folder. And this is ways that a bunch of companies are currently starting to organize both their highle,

you know, home clouds or their global clouds and then um, you know, the ones that exist uh, per workspace. So to make

a long story short, there's actually three layers of claw.md that merge together. We've talked about two of them

so far and there's like one more that's even higher level, but basically the first is your personal global and that

is at the very top level here. That's in your home folder/cloud/cloud.mmd. Then you have the per project or per

workspace folder which iscloud inside of your current workspace/cloud.mmd. And there's also a third option

specifically for enterprise. This is like your manage system level cloudmd for enterprise licenses and stuff like

that. 99.9% of you will not have enterprise licenses. So I'm not going to talk about this at all, but rest assured

it's a very similar concept. You just define another markdown file that uh you know sort of exists in that ranking or

precedence level. Now if I open up a repo that we haven't looked at before, this is my own leftclick site where I'm

working using a strategy called git work trees. Again we'll chat about that later. But let's say, you know, I open

up a new file folder and I want to run cloud code in it and I don't actually have a pre-existing cloud code and you

know I want the model to help me with this. All I need to do is just open up that file folder. Okay, open up cloud

code and then type slashinit. We'll get into more slash commands in a moment. What this does is this basically allows

us to analyze the current codebase and then write a cla.md that summarizes what the current codebase does and then gives

some instructions to uh you know a future version of claude which is really cool. So what this is doing right now is

it's reading through all of the files. It's summarizing them. It's sort of looking through and you know seeing uh

what what stands out in the codebase trying to look for commonalities and patterns between them. And then finally

it ends up creating a a capital cloud.mmd and it does this directly in like the workspace route. So it doesn't

do this inside of a cloud folder. You have to you know do this sort of organization yourself if you want to go

any higher level. But as you can see here it just put that together and I can open it up and I can actually see sort

of like the way that it wrote its own cloud. MD. So this file provides guidance to claude code when working

with code in this repository. This is a premium marketing website for leftclick. It's an a automation agency targeting to

B2B companies. Here's how to deploy it to Netlfi. Here's the architecture. Here's the design system. Here's the

Netlefi config, etc. Why is this valuable? I mean like it technically has access to all this information anyway,

right? So like why are we getting it to summarize it all? Well, we're getting it to summarize it all because one thing

we're going to talk a lot about in this course is context management. And that basically just means um all of the uh

tokens currently in a prompt. As you've seen, there are multiple levels to this, right? There's like the global cloudMD

that's injected. Then there's the local cloudMD that's injected. There's the enterprise level cloudmd that's

injected. We're then going to talk a lot more about the tool calls and various tool definitions. Those are all

injected. And then finally, at the very end of it, you actually have your own prompt that you're sending, which is

also part of the context. >> [snorts] >> Well, if in addition to that, you force

Claude to read through every single file every time that you initialize to know what the hell you're talking about,

obviously you have to add significantly more tokens to any prompt, right? And by doing so, a couple things happen. One,

the quality of Claude on average will go down because there's a negative relationship between the length of the

prompt and then the quality of Claude's outputs. That's just sort of the way that it works statistically with these

models. But two, um, you're also paying way more because now instead of consuming, you know, let's say 10,000

tokens at a time, you're consuming a 100,000 because this thing had to read through your contact. HTML, it had to

read your index.html, it had to read your message. It had to read everything. And so, cloud.MD, MD if you think about

it in addition to providing high level instructions and you know uh uh some guidance and and steering of the ship

also is a mechanism by which you can significantly reduce your token usage and then increase the average quality of

cloud because it'll just know everything especially when you use uh back/init like I just showed you a moment ago

before actually having to read through the files. You know it'll know that index.html uses an inverted light color

scheme. Okay. It'll know that you know there's a contact.html html which is a contact page. It'll know how it's

hosted. It's not going to have to like do a bunch of API calls to various services to figure this out. It it just

already knows all this stuff because that's what the slashet just did. So, if you don't already have a claw.mmd, I'd

highly recommend go into your folder, generate one. Um, once you have it generated, then you can continue making

additions and changes as necessary. But literally just having a description of the way that the folder works is like

honestly the the the 90% of the battle. So, for simplicity, I've compiled the top recommendations into a quick do and

don'ts guide for you. The first thing to do is just run backslash init first anytime you're working in a new folder.

The second is I just use bullet points and short headings. Try and compress information as much as possible.

Basically write in like a high information density style. Don't [snorts] just voice transcript dump into

your cloudmd. If you wanted to write a cloudmd for instance using as help actually voice dump into cloud and then

say turn this into a very high information density summary of rules and stuff. Put the most important things at

the top. there's anything that like it absolutely shouldn't do like never delete XYZ file or whatever, mention it

up at the very top. The first few things that AI learns, it tends to remember. It's sort of like the middle gap of the

prompt. If I were to show you guys what this actually looks like, basically goes like this. It remembers a lot of the

beginning. It doesn't really remember much of the middle and then it's more likely to remember some of the end. Um,

so this is called your uh primacy bias. Human beings are like this too, which is really interesting. And then this is

called your recency bias which means you know Claude and and us are biased towards um remembering things at the

very beginning of a stretch and at the end of the stretch but more so the beginning which is why you put very

important guardrails at the top. Um periodically review and prune this like treat it like living code. If you have

claude constantly update the cloud MD you will find over time it adds things that aren't really super necessary. Some

super precise instructions it starts changing sort of the way that it talks to you and stuff. So I treat it sort of

like technical debt and then I reduce it over time. Uh what not to do is don't dump entire style guides and API docs

into it. This is an unfortunate habit that I've seen a lot of people do where they basically are like oh you know I

want this to be my I don't know let's just say a Panda do companion. So they go to the Panda API and then they

download the entire thing and then they try and paste it into the cloudmd. It ends up being 10,000 tokens and then