§ 01 · The Hook
The bait, then the rug-pull.
Faljic opens with a thesis disguised as a welcome: design is splitting into a world of executioners and a world of orchestrators, and the four hours you're about to spend are the on-ramp to the second one. No engineering background required; he doesn't have one either.
What the video promised.
stated at 00:08 "We are moving from a world where most designers are primarily executioners to a world where most designers will need to become orchestrators. This is a comprehensive guide for designers of all disciplines and all seniorities who wanna become fluent in agentic design." delivered at 267:10
Where the time goes.
00:00 – 04:43
01 · Intro — executioner to orchestrator
Sets up the thesis: design is moving from doing the work to directing agents that do the work. PMs+AI+design-systems can already ship 80% interfaces, so designers must speed up or become the bottleneck. The window is 'Figma in 2016' wide open.
04:43 – 07:20
02 · Course curriculum
Three buckets: (1) understand the tech, (2) bring your own context, (3) put it to work. Plus what's NOT covered: design taste, judgment, traditional craft — that's still on you.
07:20 – 31:47
03 · What is Agentic Design
Chat (you ask, AI answers, you copy-paste) vs Agent (you direct, AI does). Live demo: parking-permit form UX review — chat reads HTML and lists 15 generic issues; Claude Code spawns Maria + Jake + heuristic sub-agents that fill the form live in Chrome and report back with a 14/40 UX health score. Then maps the tool landscape: legacy Figma vs agentic design tools (Stitch/Make/UX Pilot) vs general agentic (Claude Code/Cursor).
31:47 – 49:07
04 · How AI Agents Work
Defines the agentic loop: you give direction, agent executes, you review, you redirect. Talks about tool use, sub-agents, memory, context windows. Why 'AI is not a silver bullet' — competence without judgment is dangerous.
49:07 – 94:01
05 · Setting Up Your Agentic Environment
Pricing/plans, installation (Claude subscription + IDE software + Claude Code extension), 'Your Controls' walkthrough of the Claude Code UI, file system orientation, what auto-accept / plan mode / bypass permissions actually do.
94:01 – 109:22
06 · Your System Prompt (CLAUDE.md)
Show-and-tell of CLAUDE.md as a 'design brief that runs before every conversation'. Same LinkedIn-PDF -> personal site demo, but with brand colors/tone/rules in CLAUDE.md gets a way more on-brand result. Markdown vs PDF — token economics, why .md is the LLM-native format.
109:22 – 134:09
07 · The 3-Layer Architecture
The reliability unlock: instructions (rules) -> orchestration (skills) -> execution. Two-layer (just rules + execution) breaks down as complexity grows. Skills are .skill.md files with YAML frontmatter — recipes the agent invokes by name.
134:09 – 157:17
08 · Connecting Your Tools
MCPs and tool calls — bringing Figma, browser, Slack, your email into the agent. 'Tech context' as a separate slide section. How an agent picks which tool to use.
157:17 – 166:35
09 · Discover (build research skills)
Builds the Color Thief skill in ~12 min. Then lists 8 more skills you could build the same way: Review Miner, Tone Scraper, Heuristic Audit, Jobs-to-be-Done Mapper, Business Model Mapper, Survey-to-Persona, Strategy Mapper. The constraint is imagination, not capability.
166:35 – 201:41
10 · Create (build a portfolio site + multiplayer game)
Three creation demos: (1) make the LinkedIn-derived personal site live with Netlify free tier, (2) build the Color Thief skill end-to-end, (3) build NumberDrop — a multiplayer estimation game for his students that uses Google Maps as the core UI element. Iterates with plan mode + 'simulate 7 teams' to stress-test the UI before real players touch it.
201:41 – 240:54
11 · Systematize (AI-native design systems)
Hands off to Tom (program director at the MBA). They built an AI-native design system because they finally needed one — and designed it so any agent generating new code automatically produces on-brand UI without a human reviewing every component. Two-host segment.
240:54 – 267:10
12 · Automate (weekly Slack status reporter)
Builds a real automation: a cron'd Trigger.dev job that DMs each team lead asking for a status update, then summarises the responses into a clean Slack post for the whole team. Live setup of GitHub auth, Slack scopes, the .env pattern, and the deployment to cloud infra.
267:10 – 269:39
13 · Outro + Agentic Design Community CTA
Acknowledges the space moves so fast even this video will age. Soft pitch for an Agentic Design Community (paid, domain already bought) — but transparent he won't build it unless enough people sign up. Link in description.
Visual structure at a glance.
Named ideas worth stealing.
21:54
model
Three buckets of design tools
- Legacy design tools (Figma, Adobe) — pixel-to-pixel craft
- Agentic design tools (Google Stitch, Figma Make, UX Pilot) — text-to-pixel, faster pixel work
- General agentic tools (Claude Code, Cursor) — text-to-anything, the real scope expansion
Maps where every tool sits and what it actually replaces. The point: general agentic isn't competing with Figma — it expands what a designer can ship.
Steal for Mod Boss pricing/positioning — same three-bucket logic works for transcription tools (Wispr/Glaido = legacy, Mod Boss = the orchestration layer).
109:22
model
3-Layer Architecture
- Instructions (CLAUDE.md / brand / taste / rules)
- Orchestration (skills — .skill.md recipes)
- Execution (the actual file edits)
The reliability unlock. Two-layer setups (instructions + execution only) get unreliable as complexity grows. The orchestration layer is what makes agentic workflows production-grade.
Steal for Every Joe agent. JoeFlow Sessions = orchestration layer. SOUL.md = instructions layer. The actual edits = execution. This maps 1:1 to how Paperclip should be structured.
03:20
concept
Executioner -> Orchestrator
The career-shift framing for designers. Same shift Joe is teaching for solo creators — stop renting tools, stop executing every step yourself, become the conductor.
Steal for Killing Excuses script angle: 'You're still doing the work. The people winning are directing the work.'
162:40
list
Eight discovery skills you can build
- Review Miner (G2 / Amazon scraper)
- Tone Scraper (competitor voice analysis)
- Heuristic Audit (Nielsen 10)
- Color Thief
- Business Model Mapper
- Strategy Mapper
- Jobs-to-be-Done Mapper
- Survey-to-Persona
Ready-made shopping list of skills any team can build in an afternoon. Each takes 10-15 min once you have one working skill to copy from.
Steal for JoeFlow batch templates — ship a 'starter skills pack' as part of the product. Each one is a tangible time-saver Joe can demo.
233:20
concept
Fresh-instance code review
After Claude Code builds something, open a NEW chat to review it. The original instance has confirmation bias; the fresh one doesn't. Bonus: hand the same code to a different model (Codex) for a third pair of eyes.
Steal for Sessions panel feature — auto-spawn a 'reviewer' session whenever a 'builder' session marks itself done. Different model, fresh context.
Lines you could clip.
00:08
"We are moving from a world where most designers are primarily executioners to a world where most designers will need to become orchestrators."
58:20
"It's almost like learning Figma in 2016."
61:40
"Being fluent with AI agents is a huge advantage on the job market. But soon it might be a hygiene factor."
113:20
"CLAUDE.md is almost like a design brief that runs before every conversation."
90:00
"PMs with an AI tool and a design system can draft an 80% interface, something that's 80 to 90% good enough."
191:40
"The constraint is just your imagination and also your use case, and it's so easy to build this."
How they spent the runtime.
Hook length283s
Info densityhigh
Filler8%
Things they pointed at.
142:20toolUX Pilot
How they asked for the click.
269:00
newsletter
"I'm playing with an idea I call an agentic design community. I even bought a domain already. It's a place where we would regularly do trainings, where we would break down new tools as they drop. I don't know if I will build it yet — depends whether enough of you actually want it. If this sounds interesting, click the first link in the description and join the wait list."
Soft, honest, last-90-seconds. No newsletter pitch, no sponsor through the body of the video. The transparency ('I might not even build it') is the strongest CTA mechanic — it makes signing up feel like a vote, not a transaction.
Word for word.
HOOK opening / re-engagementCTA the pitch metaphor analogy
00:00HOOKWelcome. This is a comprehensive guide for designers of all disciplines and all seniorities who wanna become fluent in agentic design.
00:09HOOKWe are indeed entering a new era of design, so we are moving from a world where most designers are primarily executioners to a world where most designers will need to become orchestrators. Orchestrators who can direct agents to do a lot of that design work for us.
00:28HOOKAnd this isn't just about UI. Whether you are in UX, research, service design, whether you're leading a team or you're design ops, that shift touches all of us.
00:44HOOKwhich is a business school for designers, and we have had over 1,000 alumni so far. I am also an ex IDO business designer.
00:53HOOKI have no engineering background, but over the past year, I have spent hundreds of hours inside AgenTik AI tools, and I have built over a dozen of internal products and automations that run our business. So So everything you'll see in this course, we use in our company.
01:16HOOKall of a sudden need to learn how to use agentic AI? In other words, why is agentic design relevant? Well, let's start with the fact that
01:27HOOKmost business departments, if not all, are speeding up with the use of AI. So if you think about legal, if you think about
01:39HOOKAnd if we, as a design function, don't, you know, also speed up, we can become the bottleneck, which is not great, obviously, especially because nondesigners
01:51HOOKcan now produce what they think is good enough design. So a PM with an AI tool and a design system can draft an 80% their interface,
02:07HOOKAt the same time, tools are getting better. So this thing is not stopping in terms of the progress. But, you know, this is very important, but
02:24HOOKand building this into a system. So while PMs and others can create a one off design, really building this out into a system and managing the system is basically why design
02:38HOOKstill matters and how it will matter even more in the future. At the same time, I do wanna say that human craft and human made design will still matter. It will just come in smaller doses.
02:51HOOKAnd the reason the main reason for this is because most companies, especially in tech, are not adapting the fast and good enough approach. Meaning, they're not trying to go slow and be perfect, but they are just launching fast and quickly. And the reason for this is, again, AI.
03:08HOOKEngineering teams and other teams are adopting AI tools, and they can launch things faster. And as soon as you have one competitor in your industry doing that, there's pressure on others to adapt.
03:19HOOKBy the way, if you're in a slow moving industry or even if in a slow moving, let's say, geography, you know, where AI adoption is not as high for whatever the reason, you might not face that pressure yet, but it's just a matter of time until something clicks. Maybe one competitor starts adopting it, and that puts pressure on everybody else.
03:38HOOKSo even in this case, it's a good idea to start learning agentic design because it's coming. This also means that design rules are being redefined in a big way, and we'll talk about this in a bit.
03:50HOOKBut just in a nutshell, design systems are becoming AI native. Design ops is getting automated. Research and discovery is getting faster, and so is creating visuals and wireframes.
04:01HOOKSo, yeah, all business processes are getting AI fight, and the same is happening with design. Now the good news is this window to learn this tool is wide open. It's almost like learning Figma in 2016,
04:14HOOKand designers who get fluent using this will set the standards of how it's done community wide, but also company wide. Right?
04:22HOOKSo if you're the first person or among the first person in the company, you can really set the tone, and that's why this is a huge opportunity for all of us. And I would even say that these days,
04:32HOOKbeing fluent with AI agents is a huge advantage on the job market. But at the same time, I have to say that maybe soon it might be a hygiene factor.
04:43Okay. So now let's have a look at what we will cover in this course. As you can see, we have three bigger buckets.
04:50We have part one, which is the understanding the technology, how it works. Part two, which is about how do you bring your own context into the tool, so how it can do a good job for you instead of just giving you AI slop.
05:00And then we'll show you some of the ways you can build with it. So we'll talk about in the first section about what is agentic design. So we'll define this term.
05:09We'll define how it affects different design disciplines, and what are the tools of agentic design. We'll talk about how AI agents work, which is all about understanding the technology of AI agents.
05:21Then we'll also set up the agentic environment, which means if you have never used Cloud Code, that's totally fine. We will go from zero, from installing it well, installing everything you need on your machine to get it up and running.
05:34And then we'll go into how to bring your own context, which is creating your system prompt. We'll talk about a three layer architecture, which is a really important lesson here, and it's we'll talk about the how to use these agents to get reliable and good results as opposed to something that
05:53feels unreliable. And lastly, we'll talk about connecting your tools. So how can you bring the tools you are using on a daily basis,
06:01such as Figma or a browser or your email perhaps into these tools to be more productive. And lastly, we'll talk about the building part, so we'll put it to work.
06:11We'll show you a few examples of how we and and others have used this tool in different phases from discovery phase, which is we'll show you how to, for example, do a competitor research really fast and really thorough, how to obviously build design systems, build designs, build apps
06:28with agents. We'll talk about systematizing, so how to build an AI native design system, and how to automate things, which is how to build automations that will make some of the design ops
06:40just much faster. At the same time, I do wanna mention what we will not cover. We will not go into any design skills, which is the traditional design process or design judgment or taste.
06:52So knowing what's good is still on you, and frankly, that's what makes you valuable. Second thing I wanna mention is that, obviously, as the title of this video suggests, we will be using Cloud Code, but don't let the name fool you.
07:06It's not just a coding tool. It's a general purpose agent that just happens to work through text and files.
07:16Okay. Having said that, it's time to jump in into the first section, which is what is even agentic design?
07:24Well, the best way to explain it is to explain the difference between a chat AI and an agent AI. So what we have here is two screenshots. On the left is a screenshot of a Claude chat,
07:36and on the right is a screenshot of a Claude code as an agent. So here on the left, you could also swap this image with a ChatGPT or Gemini. It's the same thing.
07:48So what I wanna talk about is the difference. So the way chat works is that we ask questions and AI answers.
07:58So and it's back and forth, back and forth. And when we get the answer that we like, that we need, that we can use, that's when we get into what I call the copy paste phase,
08:09which is we take the answer, and then we use it in the environment where we wanna use it. That might be Figma. That might be some kind of Google Doc or whatever.
08:18Right? But it requires a lot of us bringing context into it and then out of it. And it's still us who is doing the work.
08:25We're just outsourcing some of the thinking to AI. Now with agent, it's a little bit different.
08:32So we are actually leading, and we are asking or giving it directions, and AI is doing things for us. Right?
08:39And that is a huge paradigm. We're no longer bringing context into it. It's already there.
08:44An AI agent just does things with that context. It's best for me to just show you this through a live demo so you understand the example.
08:56I was trying to find something that's very illustrative as an example that a lot of designers could identify with. There's plenty more, and we will cover more also throughout the session.
09:07So let's just imagine that we're trying to design or we have designed a form, a form for a city council where residents can actually apply for a parking permit.
09:20As you can see, it's a pretty standard form.
09:24It has all the personal information, address information, vehicle information, and so on. So it looks very solid. It doesn't look the most modern, but it just looks like a lot of government
09:34forms do. So what we would do in this stage of the process as designers is test this.
09:41We haven't launched it yet. We need to now see if it's actually everything is working. So, obviously, we would use it ourselves, but maybe as a first filter because of AI technology, we would also hand it over to
09:53AI as well. So if we were to use
09:59chat, what we would do, and obviously, will do this now, is we will bring in this file.
10:07Right? In this case, I'm actually bringing in the HTML file. I could have also brought in a screenshot,
10:14but, actually, HTML gives more information to AI to work with. So what I will do now is I will use a voice to text software, and I will talk about it later just for you to know what's going on.
10:29Hey, Claude. I want you to review this landing page or a form page that I have built.
10:35I want you to review it from the UX perspective, find any glaring usability
10:41issues. There we go. So
10:47we'll hand this over to chat. And while this is doing its job, let's hop over to our
10:55Cloud Code agent, and let's do the same thing.
10:59In this case, I don't have to bring any files in. That's the big advantage also because it's already here. I have given it access to my project folder,
11:09but that's not the only difference. Hey, Claude. I want you to run the UX review for my
11:16form that I have just built. So just run my usual skill.
11:26There we go. It doesn't matter if there is some typos as well because as a language model, it's pretty good at predicting and understanding what I actually wanted to say. Okay.
11:36So what it will do now, it will invoke a skill that I have built, which is a special sequence of steps, a recipe of how I wanted to actually review a page like this. And, basically, it will do
11:51the following. It will actually host this page on my machine as a server, so my computer will serve as a server.
12:00It will open up a few Chrome tabs, Chrome Windows. It will create a few agents, sub agents who will actually fill out this form and then report back to us what was wrong.
12:14So there's a big difference between what chat is doing, which is basically just reading the HTML, and what is happening here, which as you can see, we are launching three parallel review agents. There is someone called Maria, Jake, and then Heuristic.
12:29And basically, they will all actually be using this exact page and filling it out to find visibility issues.
12:38So the survey is now up, and I should see the Chrome opening up very soon, and then I will share it with you. Oh, it's already here. So I'm not doing anything.
12:47As you can also see, my hands are up. So this is now a agent who is
12:54who has a task to fill this out as Maria, and then there's another agent who has a task to fill this form out as a Jake,
13:04and both of them will fill it out and then come back to us with results. Okay.
13:11So Maria just finished that. Jake just finished that. So both of these are gonna close, both of these crumbs.
13:18And when they come back with all the results, our main agent will summarize, synthesize all the results, and get back to us with results.
13:27So let's, for now, just jump back into
13:34chat and see what it has found. So we have how many? We have 15
13:40issues, and I'm not gonna even read through it.
13:45What I just wanted to show you is the depth of the file the of the things it have found, which is 15 issues plus what it is based on.
13:56So you can see that it's based on reading the code. Right?
13:59It didn't actually it could not actually run this page and actually fill it out because that's not how chats are built.
14:08I would now have to go through all of this and implement this into the design in the CSS or code. Okay?
14:15Now let's go back into our Cloud Code instance,
14:20and what we will hear and what we will see here is a completely different depth of analysis and also
14:29what this analysis is based on, which is actually having agents filling out the form. Maybe while this is still finishing the work, let me actually visualize what has happened.
14:40So in this case, we have started a chat, and we just told it to do something. And because this
14:47particular skill asked the agent to actually spawn sub agents, so this is our main so called parent agent,
14:57It actually spawned three additional agents. One was Maria, one was Jake,
15:04and then there was one more whose job was just to check for main, like, 10 main heuristics if
15:12the form is following this, like, 10 best practices in terms of how the form is and how design should look like. And when these were done with their tasks, they reported back to the agent like this.
15:24And now the agent is summarizing this, and it will create a report. This is, let's just say, slightly more advanced tactic. What we could also just have done is just told CloudScope to, hey.
15:36Just review this page and just give me feedback, and then the main agent would just do this itself. Also, at this stage, I don't want you to be confused about the user interface that we're looking at. We will actually get this very, very soon, and I will explain how to set this up, how to use it.
15:53For now, I just wanna show you how different tools give you different results. So let's give this a few more seconds, and then when it's back, I will show you the results.
16:06Okay. Here we go. Here is the full report.
16:09We have the executive summary on top with even some UX health score, 14 points out of 40 only. That's not good. Let's see what it found.
16:18So error prevention is catastrophic. Permit zone selector is unusable. Legal tax is invisible, and so on.
16:28So a lot of the stuff that actually the chat could not find because it requires actually using the form.
16:35We have a amazing table as well. We're showing what issues both of the personas found. By the way, what were the personas based on?
16:44I believe Maria was, like, a senior citizen, and Jake was, like, a younger tech savvy user, something like that. I could go and check it out, but doesn't really matter.
16:53So we have this overview here with the issues both of these found. Oh, it's here. Maria cautious 68.
17:00So these are all the issues that Maria found, all the issues that Jake found, and then this is our third agent who actually went through this form
17:11with the heuristic glasses and just
17:16look to these best practices and if we're actually doing well on them or not. So we can just obviously read through all that.
17:25And then we have top five fixes we need to fix. And if I wanted to, I could just tell it, hey. Fix it now.
17:30HOOKAnd this is vastly, vastly different from us getting the suggestions here, reading all of these, and being like, okay.
17:44HOOKthings to improve. Like, it was just a not a store of analysis. Also, now it's on us to do them.
17:50HOOKSo, hopefully, that really illustrates the power of this agentic workflows, of agentic work,
18:04HOOKdoing things necessarily we're not doing all the things ourselves, but we are handing over him to agent some of the things that it can do for us.
18:14HOOKWhat it means is that the role of designer is, well, changing. I have already talked about us moving away from doing less execution
18:24HOOKto doing more orchestration where agents are doing that work for us. That means that we're not the ones that are building things, but we're more like evaluating. And when I say building, what I mean is like we're not
18:36HOOKphysically or manually, like, doing things, but we are more like steering the wheel. So we are still building.
18:41HOOKWe're like, mentally, we are paying the picture. We are setting the strategy and direction, but it's manually building, like, screens and code.
18:50HOOKIt is actually agents that can do this for us. What this means is that a lot of us are actually gonna be moving, especially those who are, like, earlier in their career, from individual contributor roles to almost everybody being in, like, some sort of a design director or team lead
19:07HOOKrole where maybe you're not managing people, but you're managing agents. Just a side anecdote on this, I have seen some people take this to a very, very
19:24HOOKthey have at the same time, like, this is six, but let's say eight of these running. So they have, like, one, two, three, four, five, six, seven, eight.
19:34HOOKSo just imagine this screen just being, like, basically each of these screens. So they're, like, basically running eight instances of Cloud Code at the same time because while one agent is doing something, they can hand over something else to another one, and it's just huge boost in productivity.
19:58HOOKas a team, we can do way more, and we can just ship more things. Again, I wanna remind you that my point of view is not that human craft will go away. We will just use it where it really matters.
20:11HOOKIt's just a matter of fact that most companies will optimize for speed and for cost because this is cheaper and faster. And then the human made graphics will use sporadically where it makes sense and when it makes sense. And so those might be illustrations.
20:33HOOKthere will be some concom some combination of that, and it's still the jury is still out how this will actually shape. But there's no doubt in my mind that most companies will be moving more and more into agentic design and, in general, agentic departments and workflows.
20:50HOOKSo what does that mean for tools that we are using? Let's have a look at the most prominent, more popular legacy design tool, which is Figma.
20:59HOOKSo what are the all the things that we're doing in Figma? We do a lot in Figma. We're doing basically exploration,
21:10HOOKWe're actually designing things. We're handing over them to developers. We're also enforcing design systems.
21:30HOOKSo if we just try to visualize let's say this is currently like the old school Figma, and I know there's Figma Make and UX pilot and Google Stitch, and I'm getting to this. Right?
21:41HOOKSo Figma is a legacy design tool where the way you work is , meaning you are basically moving your mouse and keyboard for it to do all of these things. There's a new breed of design
21:59HOOKThat would be UX pilot, Figma make. Where actually, you can do all of these things, but you're doing them while you're doing them text to visual.
22:42HOOKAnd these tools can do all of these things that Figma does just way, way faster. So you can explore different variations of your design cheaper and faster.
22:54HOOKYou can do wireframes. You can do prototypes. You can more advanced prototypes can be done.
23:04HOOKYou can review. The only player, the only part where maybe Figma still has the traditional Figma still has an upper hand is like more this, let's call it the craft part where you're still trying to by hand do a certain,
23:32HOOKwhat these tools, so design agentic tools do is basically just make us much faster at doing design. But the point of this whole course is that there's actually a bigger story here,
24:20HOOKBut because the graphical user interface that plot code uses is very text based, that's why we will still, as a community, need some sort of design dedicated genetic tools such as Google Stitch, Figma, and Make.
24:36HOOKAnd the bigger story here is what these suite of tools we will be using in the future actually enables us to do as designers.
24:47HOOKSo if we look at our role as some kind of creative directors or orchestrators, what we have here is the old school traditional legacy Figma Adobe and Son, which might be still there to help us do the craft part, right, pixel to pixel.
25:04HOOKWe will also be using these new tools, so agentic design tools such as Stitch, FigmaMake, UX pilot that will help us do some of the stuff that we have done previously just faster and more effectively. But
25:26HOOKout more stuff that we couldn't do so far. And let me actually show you what I mean. So here's a list of stuff
25:40HOOKtools like ClothCode. We can start building and shipping software, actual working software.
25:47HOOKWe can automate design operations. There is a lot of scripts that ClothCode can help us write where we can automate some of the tedious tasks. We can analyze research data at scale.
26:10HOOKWe could connect Figma with Sheets or Slack, whatever we need. We could create self enforcing design systems. So design systems that are AI native that actually if anyone else in the team uses
26:21HOOKor writes new code, actually, it creates great design. And as we have seen, we can also test our designs as real users. And this is not a definitive list.
26:31HOOKThis is just to give you some, like, ideas for what is possible because what we're getting into our hands and everybody is if is basically a very, very capable, very, very powerful tool that makes
26:45HOOKour job easier, but it also expands of what we can do, and that means that also the value of our work can go up if we actually adopt these tools.
26:55HOOKAnd I think that's the very positive way to look at these tools as opposed to just them taking our job. So if we now jump into which design disciplines that will this will impact, it's basically all of them.
27:09HOOKSo, obviously, UI and visual design, we have tools that can generate layouts, components, variations of that at very high speed.
27:18HOOKWe also have the same thing for prototypes and for wireframes. We have well, obviously, we can do synthesis at scale if you're a researcher. If you're a researcher, you can also, like, build some simple prototypes that maybe previously you had to ask a developer to build something for you.
27:36HOOKNow you can just do it with cloud code and maybe have something you can use in a research that otherwise you wouldn't have you would never build because you didn't know how. Then the work of people building design systems is gonna be different. It's gonna be way more about how to build AI native systems.
27:51HOOKSo not systems that humans can can, like, work with, but something that will work well when replicated by agents.
28:02HOOKThen we have design operations will definitely change. A lot of, yeah, manual tedious work can be automated. The brand identity will need to be written in a machine readable
28:13HOOKway so that it can be read by agents and reliably put out. And, also, all this work, strategic work around that's understanding the product strategy, understanding to what to work on is also getting augmented with AI because we can do competitor research.
28:28HOOKWe can build dashboards. We can also quickly do reports with the help of these tools. So they're very powerful.
28:40HOOKIt is, yeah, a huge, huge paradigm shift. The last thing I would like to focus on before we move into how this technology works is just Cloud Cowork versus Cloud Code. Actually, you can skip this if you haven't heard of either, but for those of you who have maybe started playing with Cloud Cowork,
28:59HOOKI just want to explain why we're actually just talking about Cloth Co here. So just as a quick intro,
29:10HOOKif you have a desktop app installed by Cloth, you can actually see something like this. So on top, there's basically three products that they have. One is the chat.
29:24HOOKSo if we draw a line like this, this is basically the chat side of AI, and this is basically the agent side of AI. Meaning, co work does fall under agent as well.
29:38HOOKSo this is the user interface you see if you click on co work, and this is the user interface for code.
29:45HOOKNow the big difference between co work and clot is the way they're working. So, actually, co work
29:53HOOKuses your screen to move around and do things, which means it takes screenshots of your screen, it clicks, and it just takes ages to do anything. And, yes, it will get faster,
30:05HOOKbut this so the reason this is this way is because CoreC was meant to be a light version of ClothCode for people who will never touch a tool that looks like this because it does look a little bit intimidating.
30:21HOOKAnd again, we will actually cover all about this tool, how to install it, what you actually use it, and what you see on the screen when you open it. So we'll get back to this.
30:33HOOKBut, yeah, Corework was built to just serve as a simple version of the code, and it's built into its very nature that it uses the graphical user interface to actually work and to you work with it through it, and also it works through the graphical user interface, which means it's way slower, and it can do fewer things because of that.
30:55HOOKOn the other hand, Cloud Code can actually work through your file system, and it's not working by seeing what on the screen, but actually just reading the command lines and text.
31:06HOOKSo it can just do things way faster, and it can do more things. So it's way more capable of a tool, and if you're investing your time in learning anything, you should definitely be learning the Clot code. It just gives you way, way, way, way more leverage.
31:20HOOKAnd, again, we will cover everything about how to install it and how to use it. Don't worry. My main point of this section was just to tell you that
31:28HOOKthere's a huge difference between using AI in the chat function and in agent function. Agents do things for us. And if we actually adopt this as a community and you individually,
31:38HOOKyou will just have way more leverage, you will be able to do different things and way more things that have, yeah, more value. That's it in this section, and in the next one, we'll learn how AI agents think and how they work.
31:53So if you think nothing else away from this course but just this fundamental framework and principle, you will be a much better user of AI regardless of if you're using chat or agent or if you're using cloth code or anything else. This is the fundamental nature of AI and agents,
32:10which is that they are probabilistic in their nature. In other words, if we ask AI,
32:16an agent, to do something, it actually runs through a probability
32:23machine, and it just gives us an answer which is gonna be different every time. It's very, very rare we're gonna get the same answer even if we ask for exactly the same thing every single time. This is because
32:36in their nature, they are probabilistic. They are
32:40calculating the probability of what is the right answer for that request.
32:46So just to show you this, I will just say, hey. Hey, can you write a song, a short song about designers using plot code?
32:58And not plot code, but plot code. And let's do this three times.
33:06Boom. Boom. And
33:11boom.
33:15Control ship it. Verse one, chorus. Oh, verse two, chorus, bridge.
33:20Oh, true. Okay. I'm
33:22not gonna read it or even sing it. Another singer. Okay.
33:29Here's a short song about design discovery in Cloud Code. Verse one, I used to push pixels all day long, tweaking shadows, la la la. Let's compare this to here.
33:36I used to pixel. DrewBox is a Figma. Okay.
33:39So we can see it's already slightly different even though the structure it's following is pretty similar. Ultra, bridge, chorus, verse. Same here, but we can always see that it only has one verse.
33:51Verse, chorus, verse, chorus. Yeah. There is verse, chorus, and then verse, chorus, ultra.
33:56Why do I feel like there's a bit less text here? So verse, chorus, verse, chorus, ultra. And here we have verse, chorus, verse ah, bridge.
34:05Okay. So bridge is missing in the last one. Anyway,
34:09you get the point. Right? It's probabilistic,
34:12and that's awesome because it's very creative. It can solve problems it hasn't seen before.
34:19It can brainstorm. It can be creative. It can really cover a lot of ground, and that's why we
34:26all of us are using it. However, sometimes
34:31in business and in life, you want something that's much more deterministic. And what deterministic means is that if you put the same input in, you get the same output out. Right?
34:43So if I give you the same input, I wanna exactly same thing out all of it. An example of that would be a code like a Python script.
34:52So just imagine a script that takes an image that we have created, and in the code, it's encoded that each time we run this script, we get three different variations of that image
35:06in different sizes. I don't know. One that's maybe focused or, like, specialized
35:12optimized for LinkedIn, one maybe for Facebook, and one for Instagram.
35:17Okay? So let's say we are marketing team, we just need this. When design team gives us an image, we have this Python script that just always
35:26cuts out different sizes. Now when I want these different sizes, I don't want my tool, AI tool to be creative.
35:34I just want it to do the thing that it has always done and just deliver the right result.
35:42So our job when we are working with AI and we're designing AI systems and orchestrating AI agents is to understand when to use which
35:52nature. So when to use AI's probabilistic nature
35:57and when to use scripts. The good thing about AI is that AI can act, and by nature, it acts as a probabilistic
36:05tool, but we can use it to help us build scripts
36:10quote. And that's why it covers both, and that's why it's so amazing. And that's why, yeah, it just has such a big impact.
36:18But I will actually cover more about how we can use AI to build codes and scripts and when to use it as probabilistic and deterministic
36:29in the fifth chapter of this video. So more about that later.
36:34For now, the main point is just that in its very nature, when you're using an AI, it's probabilistic, which is good, but also bad, and you need to know that this is its nature and when to use it. Great.
36:47Okay. So the next thing to understand is that especially this is important for us as designers is that AI is a language machine, but at least
36:58most of the well, definitely LLMs are language machines. There's also video models and image models. But in this course, we're covering plot code, which is using language models.
37:10So it's a language machine, not a visual machine.
37:14So even when you drop a screenshot into ClothCode,
37:19it does not see images. What it does, it basically tries to translate this into words or code or CSS.
37:29Right? And through that, it tries to understand what you're actually trying to
37:35tell it to do or what you're actually sharing with it. And that's very important for us as designers to understand that when we are sharing screenshots or when doing anything visual, it's very important that we don't just show things, but we try to describe that.
37:52And this can be in words. This can be well, it could be code if you have an HTML version of your visual. One tool I wanna share here that really helped me a lot is to use
38:03these voice to text tools. If you just go on Google or any AI tool and just type in, hey.
38:10What are voice to text tools? You will find a few. Don't wanna promote any.
38:15So what they do is that you have a hotkey, like a shortcut on your keyboard. Whenever you press that, it's just going to start recording your microphone or, yeah, headphones,
38:25and you can just talk instead of write. And I just find it just much easier to talk out loud than to write out. And this way, I just share also what's on my mind and what am I seeing, what I wanted to change.
38:39So what I'm trying to say is you can augment this process by adding more words to your visuals when working with AI, if you actually wanna work with it this way. And one way to do this in a efficient manner is to use these voice to text tools.
38:57Next thing to always remember, I mean, we have all experienced this, but AI will give us false facts with full confidence.
39:05The it never hesitates. It doesn't really understand what is true and what is wrong.
39:11It's, as we said, probabilistic in its very nature. So it will just create something that
39:18and be very confident about it that isn't true or isn't working. So it's very important to always keep this in mind and not get fooled by the confident voice that AI gives us, We always need to have some kind of loops to review things.
39:33This is fundamentally the role of a design agent or the
39:40employee working with agentic tools. It is to be that you know, like, a line
39:49like a filter for AIs to really know, is this making sense or not? At the same time, to also use AI in a way where there is less chance that you're getting the wrong answer.
39:59One example of that was us. Remember? When we did the usability testing, we actually spawned out three different agents.
40:07So when three different agents go through the same process, you are just having more probability that you're covering more ground, and you actually find the right answer.
40:18So if we had, I don't know, one if you would be looking up a doing, a competitor research and you just ask one agent to do it, it would cover less ground and maybe uncover some fake facts.
40:31But if you ran five agents and let them come to a consensus, you could be much more confident in that answer. So this is how you can use AI
40:39to and it's very nature of the AI to actually get you better results. But at the same time,
40:45it's us on us as people who are orchestrating this to also review in the end or create a system that reviews. And honestly, this is also the additional value of of designers in this process is to visually always review the output if your nature of work is visual.
41:01If it's more research or service, then it's just different type of thing you're reviewing. But ultimately, it is on us to give a green light.
41:12Okay. How to work with AI? So this is a ladder
41:18of how you can get more and more confident using AI and how you can be more and more confident in the results that you're getting out of it. So at the bottom, we have total and utter chaos,
41:33which is, yeah, using AI in a way where we get very probabilistic well, very creative answers.
41:41And then on top, we have something we can fully trust. And at the bottom of this ladder, we have the way most people are using AI, which is you open a new chat.
41:50It doesn't have any understanding of who you are or what you're trying to achieve, and you just give it a prompt. Right? And this is where a lot of the slob comes from.
41:59We are just getting different answers every time, and it just it's also pretty generic. The way we get out of this is that we add some kind of rules to it. So
42:11if we are designers creating like visuals, what we could do is add certain like brand visuals, or, like, we could take our PDF of the brand guidelines and
42:21extract out of it the colors, the spacing, and so on. And we will write this in something called clot MD,
42:29and we will cover this later in the course. But it's just a system prompt that
42:34AI reads every time you open a new chat regardless yeah. Every time you open a new chat, it preloads this as context.
42:41So if you will write in this Claude MD file, if you will write the colors that you wanted to use whenever you ask to design something, the spacing, the logo, and so on, it would follow those much better. But if you really wanted to
42:56repeat exactly the rule every time and to just have
43:03yeah. Just have a a output that is much more deterministic and that
43:09you can trust more, then we need to get into the code. Right?
43:13Into the scripts. Meaning turning our design elements,
43:18our design ideas into CSS, into components, into language like, hey, spacing needs to be 16 pixels, and so on.
43:27Right? So the more we can get towards the code, the more we can trust the output of a tool like
43:35cloth coat. And mind you, look, sometimes we do want this because we want the tool to be more creative and
43:43cover more ground, and sometimes we wanna be here. But in general, most of our work should be
43:51especially the repetitive work, like the production work is all about moving up the ladder. Again, we will cover what ClotMD is, so don't worry about this.
44:02The main message right now is just repeating also this probabilistic and deterministic nature, and that we need to understand what we want when.
44:12And if we if we want AI to follow our taste, we need to encode it and use code. Next thing to remember is that the more instructions we give to AI, the less likely it is to follow all of them. So if I went into
44:26an instance, so open up a new chat, open up a new agent, and it gave me 12 things to do, as opposed to giving it maybe three things to do, it's very more likely that some of these would be skipped, not done. Has happened to me a lot, so the longer the prompt, the more chance it is that it's actually not gonna do one of those things, and then I have to do even more work of reviewing.
44:47So the practical and pragmatic rule is to just give it a few tasks at a time, one to three maybe, and then review the work and then move on to the next stage. Next one is context, Rod.
45:00Extremely, extremely important concept. Not a lot of people are aware of this.
45:06So a year ago, I think there was this notion that, hey. The more context we can give to AI, the better. Right?
45:13So I'm just gonna cram everything, all my documents, all my PDFs into this chat, and this way, it knows everything about me and give it can give me a better answer. It turns out there is something called context, which is the more tokens we spent,
45:29the more messages we sent, the worse the performance of the model.
45:35Meaning, like, after a 100 messages, the model might be performing just at 40% of its, like, peak quality.
45:43And in the beginning, the first 10 messages, you know, it's around, like, 100%. Well, it's never a 100%, but basically, it follows this kind of
45:51graph where first, it's for the first
45:54majority of the conversation, it's kind of acting okay, but then it just degrades very quickly and very drastically. So the whole idea of this is that when your chats or your conversations with agents get longer,
46:07then you just should open up a new agent, open up a new instance. Just I'll show you later how what I mean with this. But, basically,
46:16in an agentic workflow or, like, in a chat workflow, this would mean after I had a long conversation with chat, I would just open up a new chat. And the same thing's in is in agent because we can open up new chats with an agent, so it's the same thing there.
46:32So, yeah, the way you can also measure this is that these tools do show you what percentage of context you have already used. For example, if you have, like, 200,000, 200,000,
46:43which is
46:46some models give you 200,000, some give you 1,000,000. Once you get close to a certain number,
46:55then you basically just it's better for you to start a new chat. The general consensus right now with Cloud Code is that it starts to degrade around 100 to 200,000
47:06tokens. It's also a topic of big debate because there is new research showing that it's getting better and better.
47:15So maybe by the time you're watching this, you can just have a look at the context rod. You could just maybe go on and even ask cloth, or we could just go on Google and Google for context rod, cloth,
47:26opus model, and so on, and just have a look at what is the current the current rule of thumb.
47:34My rule of thumb is just you kind of get a feeling for when it starts to degrade, when it's not really following instructions anymore, and I generally just refresh or start a new agent around 100 to 200 k tokens. That's
47:48that's as of April 2026.
47:53Okay. Actually, maybe just one last thing on why this is the case, why context rod happens.
47:59Well, it is exactly because these tools are probabilistic. So the more input we give it, the more well,
48:08the wider the net it needs to cast in terms of the options. Alright? So if I just give it very, very pointed prompt,
48:16it only needs to consider maybe, like, this, like, 10% of things. But if I give it a lot more context, it needs to start considering all of these other maybe, let's say, that's, like, 60 per 60 degrees
48:30angle, and it just needs to think about many, many more options. And then it just starts to hold too many tokens and too many information in its
48:40context window, and it just starts to degrade in terms of performance. So that's why this happens. And this is built into the very nature of LLMs, and
48:49we'll see how far we can correct this. So that's that maybe is going to be one of the big advantages of humans over AIs and LLMs.
48:56It's just that we are able to hold in more context than they are. But let's see. Okay.
49:04So that's how AI agents think and work. Next one is setting up our agentic environment. Okay.
49:11So the first thing we need to talk about is three different environments or user interfaces that you have available when you're deciding to use Cloud Code. And these three environments
49:23or UIs are terminal, Cloud's desktop app, or something called IDE, which is integrated development
49:31environment. And if you've never used this or any of these, that's fine. I will go through them now and explain
49:37what they are. So first is the terminal. This is Cloud Code's native environment in the sense that when it was introduced, when it was developed, it was developed to be used in the terminal.
49:48And if you have never used terminal, that's completely fine. We will not be using as a part of this course. By the way, you get access to terminal is that you use your
49:56Spotlight search if you're using Mac and just type in terminal, and then you will get this kind of command line interface where you actually are talking to your computer by typing in commands.
50:09So it's command line interface, which is completely different from the graphical user interface, which is what we're all used to and we're all using day to day. So while I do have to say the terminal's version of Cloud Code is usually the most capable.
50:25Why? Well, because all the new features that come out, they come first to terminal. Sometimes they're also directly available in the Desktop app and IDEs,
50:35but usually, they're not right away available also in these two options. But they usually trickle down to these in, like, couple of weeks. So it is definitely most capable and most recent version of Cloud Code,
50:48but it's the hardest to master just because of how we are used to using software, which is more graphically. One big downside is also the fact that terminal doesn't have any, like, file previews. So the things you're working with, you actually can see those files, whether that's CSS
51:05or maybe that's web page or anything else. You just have to always have terminal and then another software open next to it. So that's the downside, and, yeah, frankly, these are all the reasons we will not be using terminal in this course.
51:20Now the next option is the desktop app. So this is the native Anthropix desktop app in which we can see that we have option to do the chat, to do co work, and do coding.
51:31Now we're in the coding section, and you can see that it looks very familiar. There is a chat
51:37field where we can chat with the agent. There's also a way to choose a file because the way agents work is you do need to dedicate a certain space on your computer. So that would be a folder in which it works, and then you can just chat with it in this
51:53environment. So it is easiest to use, but, again, it doesn't have the file preview, so that's another downside.
52:00And that's why we will actually be using IDE, which is
52:05examples of that would be anti gravity, which is Google's IDE. We have Versus Code,
52:11and then we have Cursor, and there's more of them. But the one we will be using is anti gravity. An advantage of these
52:18is that they do have file previews, we can actually go through our folders, and we can actually work through them. We can see the changes that we make into the files.
52:29So when we're actually talking to the agent, it actually asks us, hey. We wanna make this change, and it actually visually shows us the change it's trying to make, so it's just easier easier to know what you're actually changing. It is simple to use, and it's interoperable.
52:43And that's a big point, which is if at any point in your journey, agentic journey, you don't wanna use anti Cloud Code anymore, you can actually just switch you can have the same folders, the same files, and just switch to another model.
52:58For example, Codex. You can just use Codex to OpenAI's basically competitor product to ClothCode, and you can just use OpenAI's models to basically do your work.
53:08So it means you're not locked in into Anthropic's way of working. So
53:15for all these reasons, we will be using antigravity and IDE as the environment. And, again, don't worry if you have never used this.
53:24I will explain everything how it's used. What I will say, and just as a last thing here is that this is definitely the best starting point in my opinion. But then later, once you get more comfortable with using Cloud Code, you will then also be able to use terminal,
53:38and you can also use Desktop app for certain use cases. But let's just simplify for now, and let's just focus on
53:44this one. K? So
53:48next step for us is to set this up, so to actually be able to use anti gravity and cloth code within it. So we need three things to be able to do that.
54:00The first is the subscription. So cloth code only works if you are a paying customer.
54:07So they have four, essentially, plans. First first is free, then it's pro, and then there is max, which comes in two different
54:17tiers. One is $100, and then one is $200.
54:20Essentially, it's similar to the pro version. It just gives you more usage. I would suggest you start with a pro
54:27just to get to know Cloud Code and see how much you're using it. And then if you, like, constantly are hitting the usage limit, then you can
54:37upgrade to max or the super max, which is the 20 times more usage than in the pro. But, yeah, for this course and for you actually starting to play with it, pro is completely enough.
54:50I will not go through the whole flow of you subscribing. I'm assuming that's that's something that you're all comfortable doing.
54:59You could just click on dry cloth and just go through the flow, add your credit card, and then you have a subscription. One thing I would mention here is just that if your company doesn't let you use these
55:13models from Entropic or OpenAI for privacy or GDPR reasons, which is a case for a lot of companies in Europe, I've spoken to a lot of friends who just are not allowed to use this unless they are, you know, using it on their own machine and maybe for not working.
55:32Luckily now, there is some companies that are trying to solve this. Let's call them AI wrappers. So they basically have all the latest models available from
55:42Entropic, from Google, from OpenAI. So this OpenAI,
55:46this is Google, this is Entropic. So there's all the latest models. You can see Sonnet 4.6,
55:52opens 4.6 as well here. And it basically means that you can use these models, but in between
56:00you, let's just say that this is you, and this is Entropic.
56:06So clot. This is you. In between, there is this company.
56:11An example of that would be Langdoc or Elo GPT, and there is more. So whenever you send a request, you are actually sending a request through your chat message first to Langdoc, and they are actually making sure that there is no sensitive data on that. They're also making sure that this data is being
56:28only transferred to European servers and so on, and only then it goes to the models, and then it comes back, and then you get your answer. So essentially, it is just a way to make sure that you're using it in a safe manner and also compliant manner.
56:43So if that's a problem you're hitting within your company, maybe just have a look at the options. You don't have to use these specific ones. These are the two I have heard of.
56:52I think they're both German, but there might be more many more depending on the country you're from. So no excuses. Okay.
57:00So we have the cloud subscription. Let's go to IDE software. In other words, we now need to download Antigravity.
57:09So the way you download Antigravity is you just go on Google and type in download anti gravity, and you will get to a page that looks like this. So you can decide which download you need.
57:22If you're in Windows, you download here. If you're in Mac, just make sure that you're downloading the right version.
57:28If you just go on here and type in about this Mac, you'll basically see what kind of chip you have. In my case, it's m one.
57:37So if you see m something, it means you're an Apple silicon, and you would download this one. And if it says Intel,
57:44then obviously it's Intel's chip, so you download this one. After you click here, you will get the package on your downloads folder, and then you just open it up and finish the installation.
57:57After you have done installing it, bum.
58:02This is check mark. Then now we go through the list or to the steps of setting it up.
58:08And I will not be sharing my screen because I have already set this up, and I have rather just use my wife's computer to set it up also for her and took screenshots so that I don't mess up my own setup.
58:22But for you, it should be the same experience. You will see exactly all the steps you need to take in order to, well,
58:30start using anti gravity. So at this stage, at this screen, I'm assuming that you have installed anti gravity and opened it. And this is the first thing you will see.
58:39Welcome to anti gravity. Let's get you set up. You obviously click
58:43the button next, then we move on. Now you choose your editor theme.
58:48You can use the dark modern on any other that you like. Then, again, you click next. Then you choose how you wanna use anti gravity agent.
58:57I suggest you just go with review during development, then you click next. Again, here, just click next.
59:04It means it will download some of the extensions that are going to be useful when you're actually using this,
59:11and then you have to sign in to Google. So AntiGravity is Google's
59:15product, so you do have to sign in with your Google credentials. So you just click here, and then it's gonna open up your
59:24Gmail or Google Workspace page, and you just authorize
59:30Google to sign in, and that's it. By the way, if you don't wanna use and if you're not a user of Google and if you don't like their services, everything I'm saying here, everything I'm saying here, it's equally useful,
59:45equally applicable to Versus Code. So these two tools look essentially the same, almost the same.
59:52There's minor differences. So if you don't wanna use Google's products, you can also just use Versus Code. The whole process is going to be very, very similar, if not exactly the same.
60:03And if you get stuck using or installing it, you can just use, well, Clot Chat or Gemini Chat to just get you unstuck,
60:14which is also what I suggest to you if you're watching this video and some of the screens have changed and you're not sure what to do. Just take a screenshot, put it in a AI chat, and just ask it to help you.
60:24So next thing you will see is, obviously, you will need to accept the terms of use, then Entegravity will ask you to install OSCA script, OSAS script on your machine. That is necessary.
60:36So just click okay here and put in your password for your computer, and then you'll get to the first screen.
60:43But we're not done yet. Right? Because what we have done now is we have just set up antigravity,
60:48but what we still need is an extension to use clot code within antigravity. Okay?
60:56So we do have anti gravity setup, but now we need to almost, like, add a plug in, you know, almost like a download an app on a phone to for this anti gravity to be compatible with cloth code.
61:11Well, actually, just a minor detour. What you will see here on the right hand side is an agent that's a built in agent by Entegravity.
61:19And if you click through well, if you click here, you will see that, actually, you can also choose
61:26SONET 4.6, and you can choose Opus 4.6, which are essentially
61:32Anthropix models. But I would suggest you don't do that because it's not doesn't have the same features as using Cloud Code natively within its extension.
61:43Okay? So what you have to do to add this extension is on the left hand side of our anti gravity, you will see this kind of menu, and your job is to click
61:55this option. This is extensions. Okay?
61:59Once you have done this, you need to type in clot code into search, and then you need to look for this kind of looking
62:08icon and option. Make sure that it's Anthropix. Alright?
62:13So there's some who some plugins and extensions which aren't Anthropix native, so just make sure that when you're actually reviewing this page and before you click install that it says Anthropix here.
62:25Alright. I'm just gonna highlight this again. It says Anthropix here, and you will see millions of downloads.
62:30You click install and also make sure auto out of the update is selected so that it's going to be updated automatically. The next thing you have to do is you have to click trust publisher and install. And the the way you know that it's installed is that you will now see uninstall button instead of install,
62:48obviously. And we're almost done. The next thing then is basically
62:54you will yeah. Next thing we have to do is you have to click this button here.
63:01Let me actually be a little bit more clear. All of these have have such a big thickness.
63:09So this this is Anthropic's logo.
63:13You have to click here in order to see a screen like this.
63:19Okay? So what we do now is we click on
63:24Cloud AI subscription because what we're doing now is we are connecting the extension with our own username, with our own plan. You know?
63:32If you have bought Pro or if you have bought Max, now we need to tell it who you are that you can actually start using your tokens. So you click here, and it's going to ask you to open a page. Obviously, click open.
63:46The next thing you will see is in your browser, you will just there's gonna be a page open up by Entropic, and it's going to ask you to connect your clot code with your clot account.
63:58And you just click authorize, and then you will see a screen like this, and then you're ready.
64:04Welcome. Alrighty. So
64:08that means is that now we have everything ready to actually start using Cloud Code. We have the subscription.
64:15We have the ID software, and we have the Cloud Code extension within our IDE.
64:21Okay? Alrighty. So if you decided to use desktop app, you wouldn't have to do any of that.
64:27You could just jump in. But, again, I think for if you're serious about using agentic tools, that is a good investment to just go through this process.
64:37Okay. Now I want you to I will guide you through the controls. What do you actually see when you open up your anti gravity
64:46instance? So let me just open it up. So this is what we're exactly seeing.
64:53So in the middle, basically, we need to choose what folder
64:59we'll work with. And on the right, we have this agent, which as I said, for now, let's just ignore it and let's just close this. But
65:08because agents do stuff on our computer, we need to give it a dedicated space. We need to give it a folder within each within which it will actually be doing its job.
65:21So you click open folder, and then you basically choose one of the folders you have. I suggest you create a new one.
65:28Let's just call it in my case, I'll call it demo. You can call it whatever you want, cloud codes,
65:34whatever. So just create it and then select it.
65:40Okay. So you can see that the view has slightly changed. Again, I'm going to close the agent.
65:46And here on the left, can see that now we have this my folder open. Within this folder, there is nothing yet.
65:54But as we now start building things, there's going to be more and more stuff in it. Okay. So what we need to do now is we need to open a cloth coat, and I'm just gonna click here.
66:08Actually, let's say it differently. So just type in command n and click here.
66:16Entity Guarantee frequently changes certain yeah, buttons to open things.
66:23But the most reliable way to open Cloud Code instance, if there's nothing on your screen, is to just click,
66:31command and letter n, command n, and then just click this button, and then you will get a Cloud Code chat. And this is what you wanna see.
66:40This is how you know you're actually talking to Cloud Code. There we go.
66:46So you just first send the first message, and you see if it's working. So what I wanna do now is just show you some of the first commands and how everything looks like. So what you can see, obviously, as a at the bottom, we have the chat function.
66:59We are typing stuff in, and this is pretty, I think, familiar to to most of us. One thing I wanna do is just have this open.
67:11Yeah. So this is the file preview view, and I suggest you have this open most of the time. And then on the right, you can have your chat with ClothCode.
67:21You can obviously have multiple chats. You can open as many as you like. You can also use use hotkeys to move between these.
67:28So option command and left takes you left. Option command and right takes you right. Command w
67:36closes it, and you can also close it like this, obviously. Also, you can open the history here.
67:44If you just click here, you can see some of the previous sessions, and you can just also reopen those. And, also, you can open a new
67:51Claude code instance just by clicking the plus here. Right?
67:56That's another option. Instead of clicking it here, you can also click it here. Alrighty.
68:02What else do we have? So we have the chat, then we have,
68:05well, these commands. So whenever you type in slash, you will just see options
68:11of the things that you can do. We will just go through some of the most basic ones. And I think once you get more fluent, you can also just learn
68:20and add yeah. Learn how to use more of these.
68:23The most important ones are switching the model. Right?
68:27So by default, you will have Opus 4.6, which is their most capable model.
68:34You can also switch to Sonnet or Haiku, which are two of the less capable but also cheaper ones. Actually, let me just show you
68:44all the options. So as I was just saying, we have opus, we have sonnet, and we have haiku. And
68:55as the name suggests, you know, it's taking its analogy from the, well, poems. So Opus is the slowest but the most capable.
69:05Right? But also the most expensive. Sonnet,
69:08it's pretty fast, but it's much cheaper. Let's say, quite a bit cheaper than Opus.
69:15But it has, like, 80 to 90% of the capability in terms of the thinking that Opus does. And then there is Haiku, who is just very, very fast and very, very affordable,
69:26but it's not as capable in terms of the thinking. So depending on the task at hand, you can just choose whichever you actually want.
69:34You can see there's a huge difference also in the prices. So $15 per million tokens in Opus, $3 per million tokens for Sonnet,
69:43and a quarter of a dollar per million tokens for Haiku. If you are a pro or max subscriber,
69:52you will not be paying for this exactly these prices because you're heavily subsidized. But if you actually use their API tokens,
70:01which is a different kind of product, and let's leave that for another video if we ever do advanced version of this video. So this is just for us, like, illustratively to understand how many tokens we are burning, but we're not exactly paying these prices if we have the pro and max accounts.
70:19Okay? But it's important because Opus
70:22spends most of our tokens, and if we need to save some of that, we can just use Sonnet. My suggestion is that you start with Opus.
70:32You see how fast you use it, and then you slowly start to get a feel for what to use, which model for. Some of the most advanced users have a good feeling for, like, for example, Opus. They only use Opus for more advanced coding and for planning, and then they leave the execution to Sonnet.
70:48And then for certain very simple, agentic
70:53tasks, you could use Hike. For example, I have one automation where I use agent to label all my emails so they it goes through my emails, and it just puts them into right sorting it into the right how
71:05is that called? Not extensions, but labels. Yeah.
71:07Labels in Gmail. And I just use Haiku for that because it's way faster. And then I use Sonnet and Opus for other
71:14things. So, yeah, going back to
71:20anti gravity, we just spent some time talking about models, which is this. So the way you actually switch models is, well, you can just click here and click switch model, and you can choose the one. And you can do this mid
71:34mid session. Right? I can start chatting with it first in Opus.
71:38Hey. This is Naya talking to Opus 4.6. Now mid chat, I can also change and go into model, and I can just use Haiku.
71:49And it says switch to Cloud Haiku. Okay? Then you can just do that.
71:54You can do the same also just with a slash command model, and you get to the same page. Next thing that's very, very important is also
72:05this, which is permission mode. And
72:09this is what most people are worried about, which is if I give a task to an agent, what will it actually do? Well, there's four different now there's fifth one, but let's, again, leave that for now.
72:22Four main ways, four main permission modes, ask before editing is basically whenever
72:30Cloud makes any change, any file, even delete like, not even deleting it, but moving it, editing it, creating it, it will always ask you.
72:41Next option is edit edit automatically. Let me just maybe zoom in so you can see who it is. So we have ask before edits.
72:48We have add it automatically, which is that once you give it a green light for that specific task, it will do that specific task without asking you for permission all the time, but it will ask you permission as soon as it goes outside the scope of that task or that file.
73:05Then we have the plan mode, which is a very, very important feature, especially for the beginning of chat when we're starting a new task. I typically use plan mode all the time.
73:16So when I'm starting a new task, think of a new build, I always use the plan mode, which means it's just a simple injection of a prompt that tells Cloud Code to not act right away, but to first try to understand the context, which means it will ask you questions. And I'll show you how this looks like in a bit. And then the last is called bypass permissions,
73:35which means you just letting Cloud Code do whatever it thinks it needs to do. I don't recommend using this
73:44all the time, but I do use bypass permissions a lot after I have done the plan mode. But, again, I wouldn't recommend you do this right away or at all. Disclaimer, I'm not
73:59liable for any the yeah. Any work you do with Cloud Code, obviously, but I'm just sharing how I use it.
74:06So when I use it in the beginning, I used ask before edits all the time because I was trying to understand what is Cloth even doing. And after I got a little bit more comfortable with that, I have switched to edit automatically, then I have switched to bypass permission once I get the feel for once I got the feel for how it's working.
74:25But I again, the way I usually use it is that I first do the plan mode on the on the build on what we're trying to do, and then I click bypass permission, so it just runs faster. And the reason we do this is speed
74:38and also interruptions because if you ask for edit yeah.
74:43If you tell Cloud Code to ask you for permission for every single edit, it will just be clicking approve all the time. So it kind of defeats the purpose of also having an agent.
74:54So, yeah, that's on the permission modes. There is a fifth one, which conveniently is already available on terminal, but it's not available on the IDE.
75:05So just as a reminder, I was telling you that new features are first released to the terminal, and then only later, they make their way into desktop app. And, usually, IDE is the latest one.
75:16So in the anti gravity, we do not have the fifth permission mode, yes, which mode yet, which is called auto mode,
75:26which basically just means that Claw decides on its own when it just bypasses
75:33permissions and when it feels like it's doing something a little bit more critical, and then it asks you for your permission. So I would say this is probably much safer than bypass permissions. And once that fifth option is available,
75:47that's the one that you should use instead of the bypass permissions once you get to that level of comfortability. I don't know if that's a word, but you know what I mean.
75:55Comfortableness. Again, not sure if that's a word. Anyway, so that's the permission mode.
76:02Where we have let's see. This is this is my list of things we should go through. So permission modes
76:08covered. Model switching covered. Slash commands
76:13partially covered. So slash commands where we have the switch model, you can also click here and see your account usage.
76:22The one the one the last one I will share with you is just slash clear,
76:28which means you clear a conversation of all the well, of everything you have set so far. And the reason this is useful and important is for
76:40context route reason, which we have just covered. Right? So at a certain point of the conversation, once the performance of the model degrades,
76:49what I do is just I ask it to recap the conversation so far to me. Hey. I just want you to recap this conversation because I will hand it over to a new agent.
76:57It writes a nice summary. I copy that summary, then I do slash clear. I clear the conversation
77:04and paste what I talked with it in the last session, and then I just continue the build. So that's why this slash clear is useful.
77:14And there's many other commands. I will not be covering all of them. They might also
77:20pop up while we are in the third section of the video where we're actually sharing how we're using it ourselves. But for now, I think these two are most important. So so slash models and slash clear, I think, are the two most important ones you need right now.
77:33And if I have forgotten any well, you can also use slash compact, which means it just compacts the conversation from, I don't know, if you had, like, thirty, forty messages, it will just try to compact that so that its token
77:46usage is less. But my approach is just to clear the conversation because it just gives you better performance. Already, tabs, we have talked about.
77:57Right? So you have you can have multiple tabs here of Clothes Code, and you can have three, four instances, and you can work on different things at the same time.
78:05You can see the past conversations.
78:09Let me just copy this. Copy this over. Hot keys, have talked about.
78:16And then, yeah, what you can also do is you can copy paste screenshots. So, basically, one way to bring documents into the conversation is to obviously bring them into this file or the folder that we have now dedicated
78:29for Cloud Code to work with. Right? Another option is to just,
78:33let's say, I take a screenshot of something. So I'm gonna take a screenshot of a another desktop here, and I'm gonna just do command v, and now the image is added to this conversation.
78:46So you can also do that as well. And you can also upload things from your computer.
78:52You can add some context, and you can also ask it to browse web, but you can browse web even without you clicking this. So, okay, I think that covers the most important initial things that we need to know about how to use
79:05Cloud Code within anti gravity. So now let's do something with it.
79:11And I will just use a simple demonstration of what it can do. Don't take this as, oh, this is so simple.
79:20Why are you not showing us something more complicated? Well, I'm not showing you something more complicated because I'm not trying to show you something more complicated, but I should show you how this tool works. We will be showing you a little bit more advanced
79:31builds and examples a little bit later in the video. For now, just follow me. Okay?
79:36So what I want you to do is maybe go on
79:41let's turn our LinkedIn page into a website,
79:45into a VC or portfolio website. So my challenge to you is if you have gotten and if you have followed me so far, go on LinkedIn,
79:55find your profile, and then click save to PDF.
79:59What this will do is it will just save this page as a neat PDF as your CV. So that was just done for me. And what I will do now
80:12is I will bring this into my folder, into this demo folder. Right? So what I need to do is I need to go into finder.
80:21Where are you finder? Oh, here. Okay.
80:24So in my downloads section, I have profile, and then I would just carry it over here to the demo. I could have done the same thing also just in finder.
80:36Why? So I could just where is it?
80:41Yeah. I could just have taken this profile PDF and just, you know, carry it over to the folder that I wanted. It would also show up here if that's the folder that I have opened in anti gravity.
80:51So the first thing that has happened, as you can see here on the right hand side of the screen, we now have a preview of this document, which is what I was alluding to before about
81:01the fact that you have file previews and you have, yeah, more visual graphical user interface if you use a tool like anti gravity. So you can open PDFs, you can open files, and you can just review things here without switching context all the time and opening more tabs. So what I want you to do
81:21now is basically turn this into a website. So let's
81:26change the permission mode to plan mode, and let's tell Claude to do this for us. Hey. I want you to turn the my my profile, which is a PDF with my
81:38CV into a, like, a website, a website I can share online and that introduces who I am, and maybe there's a contact form at the bottom. Yeah.
81:52Since we're in the planning mode now, what will happen is Cloud will not automatically build anything, but it will think. It will then also ask me questions, and we will together build a plan.
82:03And then I will approve the plan, and then, basically,
82:09it will only then it will build the website. It seems that it's looking for the PDF.
82:16I just found it. So one thing I could have sped this up was to actually tell it where this profile is, and the way to do this is to copy path.
82:26So if I just copy this over and I told it, hey. The profile PDF
82:32is here, then it would now look through my whole computer to find it. But it did find eventually,
82:39and now it's making a plan. And it's going to open this plan and probably ask me a few questions.
82:48Okay. Just finished planning, and it opened a plan here on the right hand side so we can review it and
82:55basically decide if that's good. Basically,
82:59it's telling me where it will create this output file, so where this HTML is going to live, which is exactly in this folder demo, which is great. And
83:12let's see the sections. There's gonna be navigation at the top. Great.
83:15There's gonna be hero. There's gonna be story, experience, education, contact, footer.
83:20All looks great. It's giving me some values for colors. But at this stage, actually, I think I would just accept this
83:28as a plan and just rather review it visually. So let's just do that.
83:33So what I did now is accepted it, and now I will switch to bypass permissions, and Cloud Code will
83:42create a single index HTML, and then we can have a look at it. What I wanna show in the meantime is also what is actually happening
83:51once you are giving a command to Cloud Code. Mhmm.
83:56So one big differentiator and advantage over other models is that it's really clear about its thought process. So
84:04here you can see that we have asked it something, and then here, if I wanted to, and here, Todd for this many seconds, I can click into it and actually see how it's thinking. And we can see that it's think going through a thinking process saying, hey. Now I have all the content from Alan's CV.
84:22Let me plan a personal website, some of the information. I'm thinking this should be a narrative driven personal brand rather than a full CV dump.
84:30I agree with that. Minimum modern, la la la la. And then it had a comprehensive plan, la la la.
84:37Okay. Actually, it's already done. So
84:40we can open this in a browser and see what it has done. I will actually ask it. Please
84:46open it up in in Chrome.
84:54There you go. Okay. So
84:58this we can see the navigation. We can see the color scheme.
85:05Yeah. I mean, pretty solid. It's not gonna be in any design awards for sure or not, but it's pretty solid.
85:13Can you create two more versions just with different visuals.
85:21Don't do dark mode again.
85:27And this is where the power of this agentic workflow comes in. It's just it's so easy to actually review, get a feel for it, give it new instructions.
85:37It has all the context it needs to have, has all the tools it needs to have in order to, you know, for you to be building with it. So in this case,
85:47I don't know exactly what I'm looking for, but I just wanted to create more versions, and then I will be able to choose one, and then I will be able to, yeah, deploy one. Actually, let's do that.
85:57We can even deploy this website online and have it online in, like, ten minutes. So let's just wait for it to create two more versions. We'll pick one of those and then just put it online for you to see,
86:10yeah, how easy this has gotten and maybe why we all don't need Squarespace anymore. Let's see. Okay.
86:17So we have one more version here, and I guess I guess we're waiting for another one.
86:25Alrighty. We have two more versions. Open them up in Chrome.
86:33Okay. We have this version.
86:38So it's basically the same layout. It's just different colors, which is what I asked for, but it's actually I don't like this layout.
86:46But, anyway, I mean, I could have gone deeper into the conversation and give it feedback for how to improve this. What I wanna do inside is actually show you
86:56the real power of this, which is the following. Could you actually create a
87:03portfolio segment on this website? Because you have access to all my
87:09files. Right? So just review all the files, everything I have built with Cloud Code so far, all the AI tools, or just pick a few, and just highlight them, write a short description on this website just to convey to potential
87:26employers that I have been playing with Cloud Code, and I know how to use it. So, yeah, just pick a few, maybe four or five, and make a new section on the website.
87:36Just let's choose index lite as the one we're taking over into the next stage.
87:43So just work on that one.
87:49There we go. Clot. It's sort of cloud.
87:57So what I have now is at the more you're using ClotCode and the better you
88:06well, the more things you can build together and better you understand how it actually works, you understand it has access to the files to your whole computer. We don't give it the access to write files all over our computer.
88:19It can only write and create stuff within this folder, but it can read files all around our computer. So it's actually now going through all of my computer to find all the things we have built together.
88:32It has the intelligence to be able to do that. And based on that, it will go create a section on the website, which is going to work as a very simple portfolio.
88:41Obviously, we would wanna make it a little bit more visual, and I would maybe take some screenshots.
88:47Actually, I could even ask you to take screenshots. Maybe that's gonna be the next stage. Actually, can you
88:55bring in some of the screenshots of these projects into it? I mean, just take a screenshot of the maybe, like, a landing HTML for those of the projects where this can actually be done.
89:06So that's gonna be my next message to it, but let's first see what it has done in this stage. Okay.
89:16Just finished up adding a new section and open up a new Chrome tab for me. And we can now see that there is this section called work, which was not here before because we can also see the previous version, and there is none here. And we can see five of these examples.
89:34Let's see actually what happens if I click in. No. This would this is broken.
89:40But this is really cool. I mean, it just went through my files and just created this out of nothing, basically. But now let's try to make this a little bit more visual.
89:49So I'm trying to go back and asking it basically to make a
89:57to to bring in some screenshots. I mean, just take one screenshot of maybe, like, a landing HTML for
90:05each of those projects.
90:08Yeah. So let's see how we can also bring in some visuals. I'll be back with you when it's done.
90:16Okay. Took, let's say, roughly two minutes to do this. And you can also see that within this folder demo,
90:24there's a new folder called screenshots, which means it has tried to capture screenshots of these
90:31portfolio examples. Let's see what we have in Chrome.
90:36So if I now scroll on to work, there we go. We have some images here. So this one looks good.
90:43This one looks semi good. I mean, this white
90:47border here, it's probably just actually, this could be that the screenshot includes
90:54below the fold, which is the white ribbon or the next section is white. We could have worked on this to make it nicer.
91:01This one looks good, and these two do not look good. And I assume this is because it took a screenshot before the page was fully loaded, and this is something I could easily now also tell it to improve, and the next version would have that as well.
91:17But I'm gonna stop here because my point here is just to show you what you can do with it and that this is not just a tool that is slightly better than a chat, but it's a completely new way of thinking and working. And the last thing I wanna share within this section is just
91:37what we have just done now, which is the basic way of working with agents is this loop where we are the director, where we set the goal, where we tell it what to do. Then we have the agent who does the work, and then we review it. We evaluate the result, and then we give it another direction.
91:57So that's basically what we're doing here over and over again. There is a more advanced version of that where actually, just go go just to go on a slight tangent, just imagine this is the more advanced version
92:11where agent also evaluates the result. So it's not us, but it's an agent also evaluating the result.
92:19But in this case, we are living somehow outside of this loop. So that's
92:25us. And we are creating this loop, and we are just reviewing the loop and the results of this loop improving over and over again. An example of that would be using something called auto research skill,
92:38and that's far beyond the scope of this video. But it's just a skill that basically lets you build a loop where agents are trying to optimize for a certain result, let's say, the page load speed.
92:52It's making tweaking, making small changes onto the code and onto the website, and it's just trying to make it load faster and faster. And, actually, because the objective
93:01of the objective is very measurable, so the
93:06the load speed, it can actually just review itself. And then we're just reviewing the process, and then we tell it when to stop and when it's good enough.
93:14So that's the more advanced version of this. But for all the intents and purposes of
93:20this course and this level, I think it's just important to know that the agentic loop is basically us giving it giving the agent some work, then agent does the work, and then we review it, and then give it another direction. So that's basically
93:34the basic agentic loop we'll be using over and over again. This also means that we have now finished the first section of this course, which is the technological context, which means now we understand how technology works and things.
93:47Now And we can go a little bit more into well, I mean, actually hide this for now. We can go into our own context. How do we bring our own work into it, and how do we actually get
93:59work done for us? The first thing we'll have a look at is something called a system prompt. But maybe before we jump into this, just to give you some context, which is gonna be useful.
94:11What we have done now is basically we have used ClotCode in the most rudimentary way basic way. So we basically asked it to do something without giving it any constraints or
94:24real rules in terms of our taste. Right?
94:28And that's why the result we have gotten at the end was pretty generic. It is what some people would also call AI slop, visually speaking.
94:37Visually speaking, it is quite, you know, basic. Nothing special.
94:43So what we wanna do now is we wanna basically go to level two. And the way you bring some rules in natural language into
94:52the AI or into agents is through something called system prompt, and a system prompt within Cloud Code is done through this Cloud MD file.
95:05So if you have never heard about it or seen it, don't worry. I'll show you everything. So I think maybe the best way to get a feeling for what it is is to maybe just show you the power of it.
95:16So let's head back into anti gravity. And what we will do now is we're still inputting the same folder demo, and we'll just ask it to ignore some of the things it has built, and just now follow this Claude MD file.
95:30So if you notice, now I have uploaded a new file Claude called Claude dot MD, and I will just ask you to follow it
95:39and basically create a new layout for the page or a new version of this personal page. So I
95:48have triggered the plan mode. So it's gonna take some time to go through the plan and build it out.
95:54So I'll be back when it's built out, the website. So here is the result. I mean, even just a quick glance just gives you completely different feeling.
96:05Definitely looks way more modern,
96:09also aligned with the rules I have given it. So, like, this color here and this accent and this color here, that's all, like, the brand colors of what I have defined. I wanna be I wanted to be using
96:23paddings. Yeah. Just just gives me a completely different vibe.
96:27Definitely looks something that I could use. And well, don't get me wrong. It's not, you know again, it's not gonna win any design awards,
96:36but we have now gotten to, like, level two of this of the result. Visually, we have defined certain things through the system prompt, and we have gotten a way better result.
96:47So let's have a look at what I actually fed into the Cloud Code by
96:54giving it Cloud MD. So if I click into this, what you will see is that I'm reading a simple text document. That's all it is.
97:03It has sections like project, so it tells Cloud more about what this folder is about. It has section about architecture,
97:12so how this folder is organized. There's code conventions. There is design system based on the d m b a
97:20branding. We have the content and the tone, so what kind of tone of voice we wanted to be using, and some rules. Right?
97:27And just with that additional input, he was able to create something that's way more aligned with what I actually wanna use. Right?
97:38So what I wanna do now is explain how this is how you can build your own and how this is even used. So if we go back to
97:47our board here,
97:55you will see that this is just a screenshot of a ClothCode chat. So every time I have a new chat with ClothCode,
98:04I'm writing, you know, something. I'm telling it what to do.
98:09And most people think that this is the only prompt that chats and agents are getting. But, actually,
98:16what happens is that every time I send a message, clot m d is basically inserted
98:23before that. So every time I open a new chat, clot reads clot dot m d. And that's why it's a system prompt because it's read every single time.
98:34So the hierarchy is as follows. First, it reads ClawdMD, and we could have some information
98:41about the brand. We could also have some other information in the ClawdMD. Then it reads our prompt,
98:47and only then does it give their response. Right? And that's why if we don't have CloudMD and we just tell it to do something, it's going to be very generic like we have seen with this website.
98:59But with CloudMD, we get basically something that feels on brand. It feels something like we would actually want to use.
99:07So the way you can think about it is almost like . So now just a few words on what even is dot m d. And the best way to explain is to
99:23explain the difference between maybe a PDF, which is the most common way we would usually work with documents, and MD.
99:31So PDF is optimized for rendering, meaning it gives us a reliable way to show text, to show document on different screens and also on printers when we print things.
99:43That's why it has way more metadata, way more tokens, way more information
99:50for agent to read than MD. MD is basically marked down, stripped down text file.
99:57So it only contains text, and the formatting is very, very basic. So formatting is
100:04basically only these, like, hashtags and these stars here. That's basically what formatting is, and you can see that it's way shorter than maybe a metadata information that is needed in a PDF.
100:18And why is that important? Well, it's important because of the context route. So the
100:25more context we feed into the model, the worse the performance. Right? There's a certain drop off.
100:31So that's why with markdown files, we're trying to be as optimal in terms of the file that we are putting into the LLM. And MDs are just very native,
100:41very yeah. Very condensed file types that are just optimized for agents and chats to use.
100:50So if you have PDFs with a lot of information and you want it to be more optimized for working with AI, you just can transform this into MD. There's free services online.
101:01You can ask ChatGPT. You can ask any tool you're using, either chat or agent, actually do this for you, and it will gladly assist you. You can also build MD natively.
101:12And right, but the the way you build it is you can even ask Cloud Code, hey. Can you actually help me build an ND file? I will feed all the information into you, and you just help me build it out.
101:24So that's on the file type.
101:28So now we know basically what it is and why it's important. So now what would you typically put in it? So if you work in a technological context,
101:37working on a technological product, the main buckets would be the architecture
101:43of this project. So how is code base organized,
101:49where this where are the API keys stored, things like that. Then we would have code conventions, then we would have design system.
101:58Right? This is the part that we would own. And then also, we'd have content and tone, so tone of voice, and things like that.
102:06So what you can see is that in a bigger project, you have different teams owning different parts of the CloudMD, and it would be shared among the team. Right? So we might be owning this part.
102:16Somebody else is owning the other part, but we're all sharing the CloudMD together because we're, like, basically encoding it with our taste and with the preferences and yeah.
102:25Of not preferences, but also just the logic of this project. Now this is for
102:34technological context. If we would just strip down this to the most important parts of what we want in Claude MD, it is basically
102:42the what. It is the why and how.
102:48Okay? So we would talk about what is going on here, what is the goal of this, which is the why, and then how are things structured, how are things built.
103:01So one thing that's very, very important to talk about is also the recommended length for these things. The shorter, the better, I would say.
103:09So, like, 40 to 80 lines would be ideal. You can go up to a 150 lines, but be be above that, you need to split out so your CloudMD is getting too long. And what you do if you wanna split it out is basically the following.
103:23Right? You can see the CloudMD as kind of a hub hub and spoke system where it just basically tells agent, hey.
103:31If you ever need information on this, read this document. If you ever need information on that, read this document. In other words, hey.
103:38See brand guidelines here. You can see component rules here. You can see tone of voice here.
103:44So, yeah, CloDMD is read every time, and then it basically just tells the agent what it can find where. So what we would typically, as designers, put into a project, let's say, more like a product project, would be, yeah, like design system stuff, topography rules, naming conventions, tone of voice,
104:04component library, and so on. Now there's two additional things I wanna mention.
104:10One is call them these on different levels. So if we have a file called let's just say that,
104:19you know, I have this folder called demo, but let's say you called it clot. So on your machine somewhere, there is a folder called clot,
104:28and everything you will do with clot, you will just do in this one. So typically, in this root folder, you would have different
104:38file folders. Let's say one is called project.
104:43There is some other stuff. Doesn't really matter. But one of these here also would have ClotMD.
104:49Okay? That would be our main ClotMD.
104:54But then within each project, you know, we can have a project x, project y. Within each project, we can have another CloudMD,
105:03right, which talks just about that specific project. This is getting hard to write, but, you know, you get the point.
105:12So this is CloudMD, and this is CloudMD. So what would happen now when I open a new chat? Well,
105:18if if the root folder of accessed so if I open a Cloud
105:23code and I tell it to open this whole folder, it will by default just read this one. Right?
105:30This is gonna this is going to be what it's reading every time it opens you open a new chat.
105:38But if it realizes that actually you wanna work on project y, and project y has Claude MD, then it's and only then it's going to read the second one. Okay?
105:48So the message here is you can have multiple Claude MDs on different levels of the project, and then
105:57Claude will only call the correct one when it actually needs it. Additional side story here is that these CloudMDs on project levels usually do look like this, but then you might have a CloudMD which is more on a personal level.
106:11So if you're using this folder for all of your business work, this CloudMD could be more of an issue where actually you tell it about who you are, what are your goals, like KPIs,
106:22who is your team, I don't know, where you live, what kind of tech stack you have, all the context you would want it to have every time you open a new chat. Right?
106:30So it might be more personal, and then these are little bit more technical. But, yeah, basically, you can use this with the wherever whatever way you want and whatever a way it works for you.
106:41These are just some, like, basic fundamentals of how this actually works. Last thing that I need to mention here is that,
106:50obviously, as the name suggests, this is something that works with Cloth. So only Cloth code will actually read ClothMD
106:59by default. If you actually at any point of your work, actually
107:05I need to go back here. Let me just take this out. So if I actually at any point want to
107:14use this same project, not with Cloud Code, but maybe with Gemini 3.1, which is something I can do in Entegravity by using this agent sidebar,
107:24and just click Gemini 3.1, it will not read CloudMD by default, but it will read something else. It will read something called
107:33oh, this is gonna be a huge font, but it's going to read gemini.md. Okay? Gemini.
107:42Md.
107:45And if you actually use OpenAI, OpenAI, it will actually read something called agent dot m d.
107:55And it's not as simple as just just changing the name of Cloud MD to Gemini MD and having duplicates. It's slightly more complicated, not way more complicated, But my suggestion would be that if you ever actually wanna jump out of Cloud Code into another agent,
108:10you just ask it to help you prepare this document, and it's going to know what to do, and it you will be able to then use it also in other agentic tools.
108:20Alrighty. So that's how you bring your context in. I think maybe one last thing of this is that I would suggest that you don't start with that.
108:30So I don't feel like the best way to start your project is to build out the CloudMD. It's better to just start building and start using this tool. And maybe where you get to a certain point, then you ask it to maybe remember those things and help you create CloudMD.
108:45Unless you already have a huge running project that you wanna transfer into Cloud Code, then you can just open the folder and maybe ask it to help you build CloudMD with you.
108:57Also, last thing maybe oh, I have said so many last things in this section, but I think this is gonna be the last one, is that this is not necessary. This is just a way to get better results, but also there's other ways around it, which is just like you always provide better context when you are chatting with it. So it's not like a a must have.
109:17It's just a good practice to do, especially if there's more people working on it so that you're getting more reliable results.
109:24So that's it about the system prompt. Next on is the three layer architecture. So the first thing we need to talk about is the fact that AI is not a silver bullet.
109:37However, most of us treat it as such. We just give various tasks to AI and just expect it to magically do its job.
109:46And the reason that a lot of us are unhappy with the results is that we are forgetting that AI is very probabilistic in its nature, meaning that even if we give it the same exact prompt, there's gonna be slight variance in the answers.
110:00So it's not deterministic, and it's not highly reliable in terms of the output that we will get, but we use it that way. And if we know that it's probabilistic in its nature,
110:12there is a very important lesson about how we should actually be using AI. Let me illustrate this with an example of a designer working for an ecommerce brand.
110:24So just imagine that there is a photographer who just took 30 images of a few products, and now it is our job as designers to filter through those, choose images that we will use, and, you know, give them certain names because we have a certain convention naming convention that we're following. For example, each product maybe needs to have an SQ
110:45number, and that is basically the name of the file. So the SQ number, SQ,
110:51and then dot j pk is, let's say, our naming question. So we have to now, you know, manually also type this in. The next thing we have to do is we have to do the background cleanup.
111:02If the background is not good enough, we need to cut it out, add new one. We need to then export these images in different variants because
111:10the product images are placed on different, well, different sites, and we just need different frames and ratios and sizes.
111:20And then we need to upload all of this to our asset library, and then we also need to do this well, we need to import these images to the I believe this is product placement
111:32product page product description page, I believe this is. Anyway, just on on our website where basically these images
111:41will live. So what I see all of us doing
111:46is we give several step process to an AI and hoping that we'll be able to just do it right. Sometimes we actually ask it to do all of this in one shot.
112:00We just give it, like, basically a list. Hey. Do this.
112:03Do that. Then do this. And we're hoping that it's going to work.
112:08And or sometimes, more frequently, we see that this isn't working, so we just give it this task,
112:15maybe this task, this task, this one, and that one separately, and then we have to do a lot of reviews, obviously.
112:24And then, again, it's almost like using chat because all of these tasks then mean that we have to manually stitch this together and bring it to the environment where we actually need it, which might be a website or any other tool. So the reason that a lot of us are not getting good results with AI
112:42is because of its probabilistic nature. So let's say that for each of these tasks,
112:49AI has a 95% chance of getting it right. So let's just do 95%
112:55chance. Right? So what does that mean?
112:59Well, that means if we stitch all of these five together, we get zero nine five to the power of five chances
113:08of getting it right. So that would mean that basically, we have roughly 70%
113:1477, I believe. I did the math upfront.
113:18I'm not a math genius. So roughly 77%
113:21chance of AI getting this full process right if we just, you know, give you the full thing.
113:31And this goes to the core of why a lot of us are, you know, not
113:39happy with the results, and it also goes to the core of how we should actually be using it, which brings us to the three layer architecture.
113:49And the best way to explain the three layer architecture is to first, you know, compare with how we're usually using AI, which is that we we are serving as some kind of instruction input, and then we are just asking AI to execute.
114:03And I and we're using AI here. And because of its probabilistic nature, we have a high variance in the answers. And, you know, in business, high variance, especially in the later in the pro product stage.
114:18So the closer you are to production, less variance you wanna have, the more reliability you wanna have, and the variance actually is a bad thing. It's good thing when you're trying to brainstorm and look for solutions, but it's bad thing when you're thing getting things ready for production.
114:34So I want us to think about using AI
114:39agentically. If we talk about using agentic AI, I want us to think in three different layers. One is there's instructions,
114:46which usually typically come from us, from user, and then there is orchestration, and then there is execution. So there's additional layer here.
114:54Right? So we only had execution here, and now we have orchestration as well.
115:00So let's break this down. So instruction is still us telling the system to do something.
115:07But now we're not telling the system, hey, you do it, but we're giving it options so it can orchestrate how it will do this. Here, we're still using AI.
115:17But then when it comes to execution, we give it two options. Either it's gonna use its
115:23brain, so it's gonna use its logic to try and figure out what to do, or it's going to use a script, you know, or quote to actually do it. Because script,
115:35in a lot of cases, you know, it's very close to 100% because we're building a script once, we're testing it, and we know it works as opposed to just letting AI execute this thing.
115:46So let me go back to our example here and explain how this would look like here with us trying to make these photos ready for the website.
116:00So if we were to use the three layer architecture, what we would do is we could build a so called skill, and I'll talk about skills in a minute.
116:10We could build a skill that basically tells AI to act as an orchestrator, and when it gets images, it can use its logic, so the AI part, to actually pick images.
116:21Right? Or actually, this could even be done by us, but you can choose. So AI can maybe pick the images, but then the renaming comes from the script because we really don't want any variation.
116:31We didn't we don't want AI to be innovative, creative with how it's naming our files because we have a very specific naming convention. And if we give AI
116:42the task to name our files, there's gonna be typos. There's gonna be some hallucinations.
116:47There's going to be mistakes. So we'd rather use a script. Next, in terms of the background cleanup,
116:54we again, we could use AI to judge if background is on brand or not. And then if it's not on brand, then it could actually hand this over to the script to actually flatten well, actually, when it's good enough to just flatten
117:09the image or all the layers in the image. Next, we go to the next step. Here, we have basically
117:16two things that, well, our scripts can do. So just resize the images and maybe name them.
117:23Maybe we could even have the AI step here where actually it defines, you know, what is the focal point of the image based on using using image recognition.
117:32It could define the focal point so that when we are resizing these things, we still have the product in the center. Then we have the asset library step where, again, we could have a script that helps us upload this upload this images, but then AI takes care of tagging based on what is an image.
117:49It could add tags to this
117:53product. And then in the last step, it could help us write the URL of this product description page. And so Script could help us do this, and AI could help write the alternative or alt text for the website as you optimize and so on.
118:10So what we have done here is we actually try to use intelligence
118:17and code for what they are best at. We didn't just give everything to AI. We really tried to define, hey.
118:26These steps there are certain steps in this process that need to be deterministic, and there are certain steps in this process that we need some intelligence involved. So let's just, like, build a world
118:38or a process where we have best of both worlds.
118:43And that brings us way higher from 77 closer to 90 or 95%,
118:49so we have fewer things to actually correct. Because in the end, we still need to a lot of steps involved. We still need to review this.
118:55We'll be what but we are going from a process where we are doing all of this by hand to having AI assist that assist us with a lot of these things. So that's the basic idea. The basic idea, just to make it more clear, is really try to figure out what we're using AI for,
119:15when do we want its intelligence, and when do we want something that's just very repeatable, very reliable,
119:22and then let's use code. And as I was also saying earlier in the course, AI can actually also help us build the code, so it can cover both sides. It can actually help us in intelligence
119:34use intelligence and build scripts. So one thing to talk about here is
119:43Cloth skills.
119:47But actually, maybe before we go into cloud skills, let's have a look at just one example of of of what I have built
119:56to help me in the DMBA. Right? So
120:00DMBA, as I was saying before, it's a business school for designers. And there is one really nagging process that we had to take after
120:11every student call. So what we have is each month, there is practice sessions and coaching calls, and the practice sessions are mandatory,
120:20meaning you have to be in a call. And if you're not in the call, then you need to rewatch it and send us in the report. So what we had to do or somebody in the team had to do was basically
120:30just review who was in the call. So what had to happen was just a lot of steps. So they had to log well, first of all, they had to log out of their personal Zoom and log in to our admin Zoom.
120:41They had to navigate to reports. They had to find the right meeting and then download a CSV file, which looks like this. So here on the first row, we have the name of the student,
120:51then we have how long were they in the call, and that's it. Now the issue with the first row here is that we wouldn't really get full names.
121:00Right? Sometimes we would just get their first name. Sometimes it's even initials.
121:05You know, like, for me, it would be AF. Sometimes it's a company name. So
121:10you have to use a lot of intelligence to actually figure out which students were in a call, and then because when we would have to open a spreadsheet, and we would have to match the name, find the right column, and then write yes or no if a student was in the call or not.
121:26So on the surface, it looks like a great tool for you know, let's just give this an AI to do, but we had to use the three layer architecture to build also the scripts to be able to actually do that.
121:41So the way it works right now is we have built a so called cloth skill, where the only thing I have to do is basically go into a cloth code instance.
121:52Just type in, hey. Run the attendance report. Here's the URL or the ID of the meeting, and here's the
121:59URL of the spreadsheet, and this is the column in which I want you to write your report. And that's it. And then
122:06this does it in thirty seconds, and it's highly highly reliable. As opposed to us needing to do this by hand, which was like an hour or maybe even sometimes two hours of work, just because,
122:17you know, there's a lot of steps involved and then you get interrupted and things like that, so it just takes way longer than what we would like to. Well, it used to. Not anymore.
122:30The way you build these kind of skills is in Cloud Code. So you open up a new chat, and you basically tell it, hey. I would like you to help me build an automation
122:41for the following thing, or I would help like you to help me build a skill. And then you just, in natural language, explain what you wanted
122:51to help you build. In this case, I'm just explaining what I just told you. I wanna I want you to build me an automation that checks who was in the zone.
123:01They need you to join for at least ten minutes. Then you I want you to mark it as attended in this spreadsheet. The hardest part is matching names from the CCV
123:11because not every time they have the right name. Also, ignore the t m DMB so DMB team members in the TCP file.
123:21There's just a lot of, you know, nuance that AI needs to get. Right?
123:26So what basically what basically
123:34I have done is build a script that is just highly highly reliable, that uses intelligence when it needs to, and it uses script when it needs to. So the way it uses script is that it basically connects to Zoom, catches the right TCV file,
123:48and then hands over to intelligence to figure out the names, so which name fits to which spreadsheet row, because that's the part where you cannot use a script because that is there's a high variance.
124:00There's new names, new students. They might change their display names, so you can't really use a script. It's just going to give you an error for people that is
124:08for new and for whom he it doesn't know which row they belong to.
124:15So it's a really good example where the script does the heavy lifting of extracting certain things, and then intelligence basically basically is used where it needs to be used, which is sorting the names to the sheets.
124:26And the way I build it is even to tell it to, hey. If you're 90% or more sure about
124:32this student being in the spreadsheet,
124:37just do it yourself. If you are unsure, then at the end, just give me a list of those names, and then I will tell you where they fit into the spreadsheet.
124:47And I want you to remember it so that it's written into the skill that this specific person with this display name is actually in the spreadsheet under this row. So if they ever show up in a call again, the script and intelligence knows where to put it.
125:04The thing I wanted to also show you here is that I have never built anything before that in in Cloud Code, and it's just really good in also walking you through the process.
125:15I didn't know that we we will actually need to have or set up a Zoom API between the script and our Zoom username. But it just told me, hey.
125:25Go to marketplace.zoom.us. Click here. Click here.
125:28Give me these things, and we build it together.
125:33And, yeah, really, if you're even if you're not a developer, you can do so many things these days with Cloud Code that it's just crazy. So this is obviously an example that doesn't have much to do with design,
125:47but you can think about other examples, other applications of this kind of thinking. For example, you could develop a Drift audit.
125:57So you would have a script that pulls all the computed CSS from your live site,
126:04maybe, like, every Friday. And then the skilled the skilled would hold the design tokens, and so you don't have to re explain them.
126:12And then the Cloud would basically run the script, and if it encounters any issues, if the audit actually throws out any errors,
126:21the Cloud itself could do the first round of trying to figure out what is actually wrong there. You wouldn't just see an error, but you would also see some kind of an explanation what has happened. So that's the Drift audit.
126:31The next thing we could do is research research synthesis. So you might build a script that feeds Claude one by one all the interviews because by now, we know that actually dropping all the scripts so if you I'd say you have done, like, 20 interviews.
126:48If you jump if you just, like, dumped all the 20 interviews or scripts of these interviews into Cloth Chat or Cloth Code, it's not going to do a good job because of the context window issue, context rot.
127:03So what we could do is build a script that actually feeds one by one this, well, these
127:12research transcripts and only extracts
127:17basically the most important things, and then we have intelligence in the end to basically help us synthesize the learnings. The next one might be, like, design ticket triage.
127:28So if you get a lot of, yeah, tickets about the things you have to do as a designer within your company, whether that's Jira or or any other tool, you could build a script that just basically communicates
127:41with that tool through API. Just gather all of those things, and then Clot could do some intelligence thinking for you in terms of what is the highest priority,
127:53or it might even be able to actually fix those things already if you have all the right skills set up. So there's just a lot of stuff you could do there. On a more personal note, you could also have, like, a inbox triage bot
128:06where, basically, if you give it access to your Gmail, it could just go through all the emails you're getting and maybe just already, like, putting the right labels, sorting them out in terms of do you need to reply, or can you just ignore? Maybe you can even draft emails for you. You could also do monthly reporting.
128:23I don't know if you need to report to a client or you need to report to internal team how many hours you have spent on something. You could, again, build a script together with Cloud Code and another tool that would basically, yeah, track what you're spending your time on, and it would just automate this whole process
128:43to a certain extent or fully automate the process of you creating that report and sending it to your team member or client. There's many other examples. You might also want to
128:55create proposals based on a client call. And so you might wanna have a you might have a call with a client, potential client,
129:04and you can have an AI listen to this call, and then you can just create a skill or a script that actually then just gives you a 90% there, 95%
129:14there proposal that you just need to slightly touch up and just send send over. So, yeah, you can see that
129:22once you have this mindset of having a three layer architecture, you just see it completely differently, like a new world opens up because, yeah, you use AI not just to do the thinking, but also to help you build scripts, and then you really unlock the whole new level of using AI,
129:41which is intelligence and deterministic code, which is a really good combination.
129:47Now before I close this section, let's just spend a few moments talking about cloth skills.
129:55So a few months back, cloth came out with this notion of skills, which are basically like reusable recipes. So in a way, cloud skills are these instructions.
130:07So instead of me needing to tell it every time, hey. I want you to do this, that, and that, I create let's call it a recipe, a reusable recipe
130:16where it just every time does certain steps. And what falls under Claude's skills is so called skill
130:24MD file, which is, yeah, the brain or, like, just a natural language file that explains what this skill does and how it does it, like the steps.
130:36And very importantly, skills also can include scripts. So this would be Python or any other code references
130:45and assets. Most people, when they talk about cloud skills or in general, when they talk about agentic skills, they only mention this part.
130:54And for some reason, they really forget about scripts and references and assets. I mean, they usually actually do talk about references or assets,
131:03but very rarely do anyone talks about scripts, and they're definitely part of that. So if you think about Cloud skills, they are in a way trying to,
131:14well, in a way trying to create a format for how CloudSkills actually fit. Well, actually, in other words, CloudSkills is already native to three layer architecture.
131:24Right? It has instructions. It actually uses AI as an orchestrator,
131:29and it also can include scripts when you actually need it to execute something. So I'm a big proponent of using skills, but just please bear in mind that sometimes scripts
131:39are a part of skills for a good reason. And as you have seen in my example, they're not that hard to build. Now where do they live?
131:48So they live in a hidden folder on your machine. So as soon as you download Cloud Code, there's gonna be a file that's created by
131:57that software, by Cloud Code, which is dot Cloud. And then within dot Cloud, there's gonna be a folder called skills. And then within that, you this is where you're gonna have all of your skills inside.
132:11An example of the skill that I just showed you here is so called attendance skill, which, as you can see, has a lot of additional
132:19files in here. Everything from skill m d to Reference MD, which has a reference to some important, well, URL paths and so on.
132:29Then we have the API keys, then we have scripts. Right? So there's just a lot going on here.
132:34And, yeah, I didn't build any of that. Right? I just told Cloth what I wanted to build, and we just built it together, and it just created this whole folder
132:42for me. Skills are also interoperable
132:47among different agents. So if you switch from Cloth to OpenAI or Google Gemini,
132:53they are going to work.
132:58Actually, they're definitely going to work. I'm just thinking whether they need to be slightly
133:03renamed or if the convention or where they live is different. Because, obviously, here, they live in clot dot clot.
133:12So, actually, that's something I have to look into. But, yeah, if you ever wanna switch from
133:19Cloud Code or, like, using Cloud Skills in another agentic environment, just ask Cloud Code. Hey.
133:25I wanna actually use this skill also there. How do I make it happen? Alrighty.
133:30So the big picture here is we can also use AI to write code,
133:38and then we can really use AI as an orchestrator of our skills, of our processes, where the AI can essentially
133:48act as a orchestrator deciding what basic where where and when it needs intelligence, and where and when it needs certain deterministic work, and then it uses scripts.
134:00And then we can package all of that into instructions, into cloth skills, which we can build with ClothCode. Okay.
134:08So the next thing we will learn is basically how to bring your own tools into ClothCode and how to use them within this tool. The first thing to talk about is why would we even want to bring our own tools into Cloud Code instead of just using them, you know, within the tool's native user interface environment.
134:29Because we did say that in the future, we still expect to use design tools
134:36within design tools. You know, we could have Figma, Figma Make, UX Pilot, Google Stitch, and so on.
134:43So what's the advantage of bringing these tools into this bigger harness, biggest bigger environment of Cloud Code or
134:54any other agent? Well, there's a few advantages to that.
134:59One is that, well, you can basically automate multistep work. So for example, if you also need to then report what you have done through Jira or any other system, you could have certain flows where this automatically happens.
135:14Or maybe you're using your browser a lot to check if the design that you have created actually looks the way it should look.
135:23Or maybe using email to, I don't know, talk to a client or something like that, so email. And there's plenty more.
135:31So the idea here is if we can bring some of these tools that we use most frequently into Cloud Code, we can be automating these flows. And as we have said also in the beginning of this course, bringing context into agent is one of the biggest advantages
135:48it has over chat because in chat, we have to drag the context into it, and with agent, the context is already there. So by connecting our tools, we are actually just by default doing that for a cloth coat. It also means that we can do more parallel work.
136:05So imagine opening up Cloud Code in the morning, and you can basically, within one user interface, maybe open three separate agents.
136:14And in this one, you are working on email. In this one, agent is doing some design work. And in this one, I don't know, you need to clean up the
136:24tickets for the week or whatever. So you can see that that's another advantage is productivity
136:31in terms of the parallel work. And,
136:36yeah, I think that's already enough benefits for why you should even try and play with that. I think with a lot of these things that we are covering in general in these courses, what I'm trying to lay out for you is just the landscape and the map for you to know what is there, and you will be able to build your own workflows, your own way of working with these tools.
136:57I'm just trying to give you an overview of opportunities. So how do you bring your tools into something like ClotCode? Well, basically, we have three options.
137:06There is something called MCPs, model context protocol, and this was actually created by Entropic to standardize
137:14how agents such as ClotCode.
137:20So that's an agent, and let's say this is Figma. How do they talk?
137:26Well, they can't talk directly. What they need in between is something called MCP server. Right?
137:32And what we need to do in order to use Figma or Gmail or something else inside Cloud Code is to connect it through MCP server.
137:44So in order to do that, what we do is we first need to see if the tool we wanna use within Cloud Code even has an MCP server. So you can just go on Google and type in Figma MCP. There's also some websites where you can have an overview of all the MCP service out there.
138:02By the way, one thing to that's important to stress is that not all MCPs are official.
138:10Not all of them are coming by the company that's actually creating the tool.
138:16So if I go back here, the Figma NCP, the one you're installing might be by Figma, but it also might be by another designer who just created their own MCP server just because they wanted to use Figma in Cloud Code.
138:31So, yeah, just keep this in mind. So one way to make sure you have a valid MCP is to just review website like websites like this one and just make sure that there is more people using it and it has some traction and some reviews. The way you install an MCP server is pretty easy.
138:52Actually, let's just do one now together. So this is a pretty well known MCP, probably the most popular MCP out there called Chrome DevTools MCP. It's basically just an MCTP that lets you
139:05control your Chrome. And it's obviously very useful because if you have Chrome MCP, you basically get access to all the all of the tools that you are or potentially could be using via browser, which is majority of them.
139:20So this one MCP is to rule them all, so I definitely recommend this one. So let me just show you how you install it. Well, basically
139:30hey. Can you install this for me?
139:37That's it. It's gonna do its job. We might need to accept
139:42certain actions. Yes.
139:49Yes.
139:56Okay, that's it. I will not restore to Cloud Code now, but
140:02that's how easy it is to install NMCP. Sometimes it's a little bit more complicated, but in general, basically, that's what you have to do.
140:09You need to give it access to the file where it can basically read instructions how to install it. Also, you go back to this page, there's a subfolder here called
140:20design category of MCP servers. So there's also Figma here. If I just, again, send this link to Cloud Code, it will be able to install it.
140:30Because in the README, it has this, which is the command line for installing this specific Figma MCP server.
140:39Okay. So that's one option we have, MCPs, probably most common, most commonly used, and also there is most of these.
140:49Second thing that is now up and coming is something called CLI, and it stands for command line interface.
140:57And you might remember that we actually talked about command line interface when we talked about terminal because terminal is a command line interface, meaning we are giving commands by typing them in a line. Right.
141:12So the same way you have MCPs, you might have CLIs for tools. They are, at this stage, less frequent, so less tools have them available,
141:23But they have one big advantage over MCPs, which is that the way most MCPs work
141:31is pretty token inefficient.
141:36For example, if we talk about the Chrome DevTools, the way Chrome DevTools works is that it actually opens up a Chrome instance. It types in the URL.
141:47It takes a screenshot, and then it reads the screenshot, which we know is very token inefficient, and then it decides what to do next.
141:55And then it needs to do this over and over again. And a CLI doesn't take a screenshot of the website, but actually just reads the accessibility version of the website, which is just language, which is more token efficient.
142:09And it just threw the language or the code, can figure out what it needs to click, and then it on the next page, does the same. So it is faster, usually.
142:18Right? I'm not generalizing, but it's faster and cheaper in terms of the tokens.
142:25However, it is much less popular at the moment, so less tools have it available. If you actually want to dive deeper into CLIs and if they are available for your tool,
142:37you can go under CLI anything, and there is like a nice one page. I wouldn't say this is comprehensive of all the CLIs out there, but it's just maybe a way to maybe get inspired about what is available.
142:50But the best way to figure out if there's a CLI for the tool you're using, then, you know, you just go on Google again and have a look at it. So the CLIs I'm using, just to give you some examples, is
143:02NotebookLM. It is Playwright
143:09CLI and Audacity. So the Notebook LM and there's also one for Google
143:16Workspace, which is amazing. Right?
143:20So you have for Google, for example, if you're using Google Workspace, you can well, you can use it, and a Cloud Code can use your Google through MCP or CLI. Obviously,
143:31giving access to your email, the work email through MCP or CLI, There is some risk involved, so just keep this in mind. But, yeah, you can actually use your
143:41you can connect Cloud Code to Google through MCP or CLI, and CLI, again, is faster and cheaper. Same for Audacity.
143:49That's the audio engineering software.
143:54And I want to spend just a minute talking about Playwright CLI, which is my favorite, the one I use the most. And it is the one actually you have seen in action
144:04when I did the demo in the beginning of this course where we did the testing, usability testing.
144:13The Playwright CLI was used there to basically open up Chrome and just read what's on the page and just use it. So Playwright CLI is basically just like Chrome Dev Tools, MCP. Instead of using Chrome through visual interface, it's just reading
144:30the code of the website and deciding what to do based on that. So it's way more efficient. Okay.
144:36So these are two big options, MCP and CLIs, way more popular but less token efficient and usually slower, and CLI,
144:45way less popular but faster and cheaper. But now they are, like, on the rise, so probably soon we will have more CLIs.
144:52Now the third option is connecting your tools through APIs, and this is what you have seen me do here when I ran this demo.
145:04So the demo was me basically telling Cloud Code to just fill out the spreadsheet of who was in the call. And you might remember that in the instructions of me building this demo, Cloud Code asked me to provide it with some
145:19APIs. In this case, the account ID, client ID, and the client secret. And it told me basically how to extract out those APIs.
145:28So what we're essentially doing is I'm giving access to Zoom. Oh, I'm giving access cloud code to my Zoom, but I'm giving it very targeted access.
145:39While MCPs and CLIs are, like, very flexible tools that basic can interact with your Figma or Chrome or Google in variety of ways, APIs are very targeted.
145:51Like, I can basically say, hey. Cloud Code, you can only read the meeting reports. You're only allowed to download this CSV file,
146:01which is obviously and and, like, it's way more token efficient because it only does that, but it's then less flexible.
146:10So I would say I mostly use APIs when it's about building a script, when I know exactly what I want and when it's repeatable, and when it's something more general where I just wanna have access to a tool inside Cloud Code, that's when I use MCP or
146:25CLI. Alrighty. So that's the context
146:30of well, in other words, that's how we bring our context into Cloud Code. So now we have covered, basically. We understand how the technology works.
146:39We understand how we bring more of our context into Cloud Code, and now we'll have a look at just some more concrete examples, use cases for how to actually use this in our day to day jobs. So in this section, we'll go through
146:54different kind of builds, different kind of things you can build with Cloud Code. We'll talk about more the research or discovery phase of design to how do you create
147:06things, how you systematize. He'll specifically will talk about the AI native design system and also about automating tasks, automating
147:16processes. So in this first one, we'll jump into the research phase, discover phase of the project.
147:24And what I wanna share here with you is a skill called competitor pipeline
147:31research. It's a skill I have built together with Cloud Code to help me
147:38basically very quickly I give it an industry, and based on an industry,
147:44it basically defines big players in that space, and it just has a look at their pipeline. You know, the acquisition, onboarding,
147:54activation, that kind of stuff. Actually, I can show you
147:58in the anti gravity. So this is the skill m d.
148:04Exactly. Right? So
148:06this is the skill m d, which is the markdown file explaining what this skill does. Here at the top, we have so called YAML. YAML.
148:15YAML is yet another markup language. Maybe that's going too deep, so let's stop here.
148:23The only thing you need to know is that these this text, which is in between these three dashes,
148:31is basically the description of what this tool or this skill does
148:37so that when we are actually talking to Cloud Code, it doesn't have to load the whole skill unless it figures out actually it needs it.
148:45And this way, it saves tokens. Okay. So here we have the name of the skill, and then the description is that we give it an industry.
148:52It finds five leading competitors, and then it goes to acquisition, onboarding, activation, core task, and pricing. It captures screenshots and compiles a comparison report.
149:04Pretty neat. Right? So you might need a different kind of research,
149:08but I basically just wanna share that I have built this skill in no more than ten minutes. So I just asked it asked Cloud Code to help me build it when I needed it, and now I have it whenever I need it, obviously. That's how that
149:23works. So what I want us to do now is basically just run it so you see how that looks like.
149:31Hey. I want you to run the competitor pipeline research skill and do it in the,
149:38let's say, form builder industry. So this is Google Form, Tally, and other players.
149:44So identify five biggest players and just do the the research.
149:54I don't know why I sometimes do this, but I capitalize things in the beginning, and sometimes I just don't correct typos at all. Anyway
150:07okay. Now it's asking me if I do wanna use the skill. The answer is yes.
150:11Absolutely. And what it will do now is figure out which companies it needs to actually
150:21research, and then it's going to actually open up a website. It's gonna use the Playwright CLI, which we have just covered.
150:29So also within the in this description is that it will be using command f, Playwright. Yeah.
150:40Playwright CLI, which is the tool of my choice when I need to do anything browser related.
150:48Oh, you can see that the job has started. Google Form, Tele, Typeform,
150:56Jotform, and so on. So
150:59agents will do their job. And while they're doing this, I'm just gonna stop the recording and come back when they're done.
151:06Or, actually, let me see if we forgot anything. So this is the Skill MD. It explains how it works.
151:13Oh, yeah. There is one thing which I wanted to show you, which is
151:19this. That when I created this skill, Cloud Code automatically also created scripts for me.
151:27In this case, it is a script or a code that just basically explains how we will do this through Playwright CLI.
151:35And, also, I have reference file, which explains the stages of the pipeline that I would like it to always research.
151:45So let's go back to anti gravity, and let's see if it's done. Actually,
151:53not yet. So I'll be back when it's done. Okay.
151:58Just done. So I can click into report MD and actually preview that. If you click on this button here, actually, will see a
152:08better representation of the markdown file. So we can basically see what this skill has done in just a couple of minutes of work.
152:17So we have today's date, the five companies it has identified, and we have a nice visual
152:25using the AASCI art,
152:30which is a terminal native way to do graphs, which you have seen all over this video also. A lot of these are actually
152:39exactly this AASCI kind of graphs. Just a slight tangent there.
152:46But So here now, we can have a look at this report. What what does it say? Four out of five
152:52companies gate their product behind a sign up wall. I guess only Google Form doesn't do it. Yeah.
152:58Oh, also, we can see exactly where this happens. So most walls are exactly the onboarding, which kind of makes sense.
153:08And we can also have a drop off funnel, which shows us how many companies show which part of the flow. We also have the screenshots here.
153:21Yeah. I mean, that was literally
153:25two minutes, two minutes of work to get really proper research on the competitors' pipeline.
153:33And, yeah, we could have gone a step further and actually gave it what I didn't do in this case was actually I didn't let it create accounts
153:45because I didn't want to spam those services with fake accounts. But actually, what we could have done is just create bots who would create accounts and actually also use the product to the extent where we could get gather some screenshots.
153:59And then we would just have even more comprehensive file report.
154:04And then we could also ask agents to delete those
154:09accounts. Right? So,
154:12I mean, this is just to show how powerful this thing can be. And obviously, this is just one example of that thing you can do. So you can build a skill in ten to fifteen minutes,
154:22and you can just reuse it all the time. What you could do with it, just to give you some examples of other design, like discovery slash research skills that you could build is review miner.
154:35So it would be a skill that will actually go on Amazon or G2 and just review, like scrape for reviews on your competitors' product, so you get ideas for, I don't know, the stuff you can build.
154:47A tone scraper, so again, maybe for having a look at analogous companies, competitors, but also companies from other industries, you could just scrape their language and get it analyzed to maybe get some ideas for what kind of tone of voice your product should have. Heuristic audit, we had that as a part of our UX usability here at the beginning.
155:08So one of the agents was actually a heuristic agent that went through 10 Nielsen heuristics of a good design. We can have a color thief.
155:18I love the name, by the way. The color thief is basically just having a look at companies or an industry
155:26of companies and just analyzes their color scheme. So you can see maybe what colors are still available in that space if you're trying to design a brand.
155:35You can have a business model mapper. You tell it to have a look at your client or your competitors to analyze who are players involved in the business model of that company.
155:47Same thing with strategy. You can have jobs to be done mapper, so you can have an agent go through the product and actually try to figure out what are the jobs to be done behind those. You can have survey to persona
155:57agents, so once you have all the service analyzed, you can tell it to help you shape some personas. The list is endless, really endless. So it's more your
156:09the constraint is just your imagination and also your use case, and it's so easy to build this.
156:15So really, I mean, the act of building this is not a problem. I think it's more about just polishing them, reviewing them, and sharing them with the rest of the team so you actually get the use case, like the value of it.
156:30I think that's it. That covers the discover build part.
156:35Next, although we're gonna jump into create and then systematize buckets. Now to the most fun part, which is how do we create things. So we'll have a look at three examples, and I think if you pay attention closely, you will understand the underlying principles of how you are building things and creating things with Cloud Code, and you will be able to apply this to other cases as well.
157:00What we will do is we will make our portfolio slash personal website live. So the one that we have built in the beginning, you're losing using LinkedIn profile PDF.
157:11So I'll just show you how to easily make it online and not needing to pay Squarespace subscription anymore. Then we'll have a look at how to build a skill.
157:21We'll build a skill called ColorThief, and I'll show you how to build some clickable prototypes of maybe an idea you have for your own business or ideas that you have for within
157:31your job. So let's first make our website live. So just as a reminder, this is the website we have built,
157:39the personal website. In this case, my my for for my LinkedIn profile. And now I just wanna make it live.
157:48There's a really cool service called Netify that basically lets you publish these kind of websites
157:57and more than just websites. But basically, what we are now doing is we will be using the free plan that they have available.
158:05It says free forever. Hopefully, it is. Let's see if they change it.
158:08But, basically, if you have any kind of personal portfolio or kind of website that doesn't have that much traffic, this free should be able to handle that for
158:18indefinitely. Yeah. So, basically, what we'll do is we'll sign up for the free version of this plan.
158:26Actually actually, I have already done this, but if you haven't, you can just sign up here, and then you will get to a page that looks like this. And what we need to do is we need to drag drop our project file, our website file in here. And what I have done is I have asked
158:41my cloud cloud code to actually just prepare me a project. It's called Netlify deploy where I have all the files that I need in order to be able to now basically make this website live.
158:53I'm just gonna drag drop it in here. And once it's done with uploading, which is already done because it's a very simple website, I have the website live.
159:03Right? If I just use if I click here, it is going to open the website. And, yeah, I could now share this link with anyone
159:11that I wanted to access it. Obviously, this is not the most representative professional
159:17URL, so you can also use your own custom domain. So you can buy one if you don't have one yet on any of the
159:25domain registries such as Namecheap, GoDaddy, and others. And you can just follow the instructions here to actually change this funky looking URL with your personal, maybe name+surname.com
159:37or whatever. So yeah. What I wanted what I wanted to do with this example is just show you how easy it is to build your own personal portfolio websites these days, and that's
159:49yeah. You can do this with Cloud Code and Netlify and just under well, it really depends on how much time you want to spend filling with design and how many sections you want to have in there.
159:59Obviously, this one is pretty simple, so we build it really quickly. But also, it's not just faster, but it's also cheaper. Right?
160:06No need to be paying that money to those services anymore.
160:13Yeah. Well, if we have spent more time on it, we could have also actually connected this contact form with some sort of notification system where we would get notified when somebody sends us an email, but that will be probably another few minutes just of connecting this to
160:31to our email so we would actually get it inbox when somebody reaches out to us. But yeah. That's
160:39use case number one. Done and dusted. And let's go to the next one, which is color thief.
160:46So what we wanna do here is build a skill, and I have talked about this skill just now, a few minutes back, which is basically a some sort of a recipe that when we tell it about
161:00an industry or certain competitors, It goes online and just scrapes and slash understands what their color scheme is. And if we are brand designers, if we're just creating a design, we can better decide maybe what kind of color scheme we can choose so we can really
161:19differentiate and stand out in this specific market. So that that's the fun little skill we can build.
161:27Might be useful to some of you. But even if you don't wanna use color teeth in the future, what you will learn is just how to build skills. So let's dive in.
161:36We need to go back into anti gravity. Need to create a new
161:42need to create a new skill, plot code. Where are we?
161:51Plot code. Boom. Boom.
161:55Okay. So the first thing I suggest you to do if you're trying to build a skill is to actually get a skill called skill creator.
162:05It's very meta. Basically, Entropic has created a Entropic skill creator
162:11skill, which you can download here. It's a skill that basically tells Cloud how to build skills or even evaluate them.
162:19So if you just take this URL and drop it in here, hey, help me install this skill.
162:29If I already have it, just tell me so.
162:35I already have it. That's why I'm telling it that it doesn't have to actually do that.
162:40But that's I just wanna show you how I actually install it, which is you just point to a link, and then it's gonna take care of everything for you. And it is going to save that under a folder called dot clot. And then within that, you're gonna have skills.
162:55So I have, as you can see, a lot of skills already. One of those is called Skill Creator.
163:01And within Skill Creator, you have a lot of assets and instructions. One of those is Skill MD, which is the one that if you really wanna get to know the skill, you can always read. Basically, just tell us Claude how to do it properly.
163:15Okay? So I would suggest you to use this one.
163:20Well, install it before you actually build any skills. Since I have it, we can jump straight into building them, building the one that I wanna build.
163:32Hey. I want you to help me build a skill, which I call caller thief. Whenever I run this skill, I want you to have a look at the main companies within a certain industry,
163:43or I would just give you the names of the companies that I want you to understand. Well, have a look at their website, have a look at their materials, and to give back their color scheme, primary, secondary, tertiary colors,
163:55call to action colors, give them in the hex coding,
164:02and maybe just also take a screenshot of their main homepage because I also wanna get a feeling for the portions and just for how it all all comes together. So, yeah, the end deliverable of this code should be a report,
164:14which can be an MD file as well. Yeah. Please use Playwright CLA, not Chrome Dev Tool.
164:23Yeah. Please build me the skill. So I have again used my
164:29voice to text tool. Play right.
164:35What I'll do now is I will basically put it into plan mode because whenever I'm building something, I do start with a plan mode. It's just a good practice that most people follow.
164:46Instead of it just doing whatever, it will ask you if it has any assumptions and it's not clear about something, it will ask you how to actually do it. And then after I have seen the plan, then I switch from the plan mode into bypass permissions because it's just faster.
165:02And frankly, that's how most people use it these days because yeah.
165:07If you're if you're not on bypass permissions, but actually maybe have asked before edits, the way this will look like is that you will just have to just have this screen on all the time and just be accepting accepting accepting every single edit that it's going to make.
165:22So it's just, at this stage, a good practice to really review the plan and only then do the bypass permissions. But obviously, there's also the auto mode coming out, which will give you the fourth option as well, which is
165:38the option where
165:41where basically cloud will decide what is okay to just run with and what actually it wants you to ask well, what it still wants to get your input or permission before it actually acts on it.
165:56Actually, I'm not 100% sure if I have talked about this already when we were in the permission modes. I might have, but I think this is so important that maybe I can just explain again.
166:08Permission modes. So we talked about permission modes here in terms of how you use
166:16Cloud Code. And I think I only talked about four options.
166:24There is now a new one called auto mode, which is a safer way to skip permissions. So most people will not be using bypass permissions
166:32soon, but you will be using the auto mode. So it's supposed to be just a fifth option here. We don't have it yet because right now, I think it's only available for the team and the enterprise.
166:46It doesn't say here, but I'm pretty sure right now, it's available just for enterprise customers, and it's all going to be available for the rest of us
166:55as well. Up until now up until then, the way I'm doing it here with just plan mode and then bypass permissions is the way to go.
167:06Okay. So we have the plan now, and the way you will know that it's done is you're also gonna have this pop up in the extension.
167:13So what I suggest is to carefully read the plan and then accept it. Or if you don't like it, then you can also tell Claude what to do instead.
167:23Okay. Let's see the context. So Ale wants to a skill that extracts color schemes from company websites.
167:29Yes. Yes. Yes.
167:30That makes sense. Deliverable create dot cloud skills. Yes.
167:36Skill MD, that also makes sense. JS call extraction strategy.
167:43Okay. So I'm not seeing any glaring issues that I would want it done differently.
167:49So I'll just auto accept and move to bypass permissions. And when it's done, then I will be
167:56back with you.
168:00Okay. So the skill is done. That took, like, twenty, thirty seconds.
168:04If I click here, I can also see and read basically how it works.
168:10So the input is me, the user telling the company name or an industry, and the workflow is it opens a browser.
168:17And for each company, it does this.
168:22Then it also closes the browser, analyzes, and categorizes, and writes a report.
168:27I mean, that's great. Let's just give it a go and let's see how it feels. Yes.
168:32Do it for, again, maybe like a form builder industry.
168:39So that would be Google Form, Tally, Typeform,
168:44etcetera.
168:47Yep.
168:52It's a big part of this process. It's also just testing things out,
168:57meaning that the process of building things basically follows this, like, cycle of
169:05you having an input. And there's gonna be a lot of writing now, so let me switch to this. There's gonna be
169:12your input. I'll just make this way bigger.
169:19Input, then AI builds it, then you review it.
169:24Right? Boom. Boom.
169:28Boom. So that's kind of the cycle. And a lot of this is basically
169:32us deciding what we wanna build, reviewing if the build is good, and then giving it more input to improve. So if I go back, still building, so I'll just be back when when it's done.
169:46Okay. I'm back maybe two, two and a half minutes later with,
169:52first of all, like a written report inside ClothCode. What I was able to see while I skipped this section was just how it worked, and I just wanted to show you one little sign of detail, which is that at a certain point,
170:06it ran into ran into an issue, and was basically just found its own way to solve that. So that's a very good feature of Cloud Code that it also can do this and it does do that automatically, but sometimes it if it doesn't, you can also tell, hey, how would you fix it?
170:24So it's all about just giving it permission also to try and figure out different ways to solve this issue. Anyway, now let's have a look at the results. So it analyzed five different companies, Typeform, Tally, Google Forms, Jotform, and fill out.
170:38And we have a report here, and we can open it up like this. And,
170:44yeah, we can just see we have primary, secondary, tertiary color, call to action color, background color, and text color for each of these. We also have some notes.
170:56For example, Teles intentionally minimal. Teles brand is the free and simple alternative, so the brand kind of follows that. Google Form,
171:06it's a pure Google for this palette, no unique branding, job form. Okay. Let's see also if we have screenshots.
171:14Full report with screenshots is here. I can't see screenshots.
171:26Did I miss something? No.
171:32Okay.
171:41Okay. It's going to correct this, and then we will have the markdown file with images
171:48like we had also before when we did the competitor pipeline research.
171:55I'm just gonna close this because I think we'll have to open it again. Oh, the nice thing it did now is also it just edited the Skill MD
172:03because it realized this was a mistake. And the next time we run this skill, it will just not make this mistake.
172:12So I guess I can now reopen this and it should work.
172:19No. I still don't see screenshots.
172:26Where are they?
172:32So obviously, I mean, if I just were doing this once, maybe now it would be faster to just type into to type oh, now it's opening.
172:45Okay. Just opened this
172:48file for me in preview. So it's just showing me the screenshots,
172:57which is also fine.
173:00Presentation of the ID extension display. Okay. Well, so if I wanted to spend more time on this and if this would be a skill that I would be using constantly, I would now spend another five minutes to figure out or maybe a minute to figure out how to actually show this because we have we're able to already see this with the previous
173:19report, so we know it's doable. But for what we need now also, the preview pop up was equally fine. But I just hope this shows how, you know, how easy it is to build skills.
173:31And while it is easy to build them, I think what is important is exactly the process we had now, which is, like, troubleshooting things and really optimizing them. So the more you use the skill and the more people use the skill, the better the more, like, safe or the better test it needs to be.
173:47What you can do now is, like, I build a skill like this. You could just also literally just grab it. Let's see.
173:52Colorative skill skill MD. I could basically just literally grab it from my computer and share it with a teammate.
174:01They could install it into their cloud code, and they could use it as well. Or we could have this stored somewhere on GitHub, and every time anyone makes a change to the Skill MD,
174:12we could all have the same version once we pull the version off of GitHub. But that's more advanced more advanced
174:20strategy. So let's leave this aside. I think for now, what is important is we can build them, we can share them
174:26with others. The last thing I would mention on skills front is that well, two things.
174:33One is, as we have seen, they're loaded every time. So every time we open a new chat context.
174:43All of them are loaded or at least the YAML, the front matter. So if I go into color teeth and open it up, so this part here this part here is always loaded in every single chat, which is obviously not great.
174:57So what is important is that you frequently go through your skills, and if you're not using any, maybe you just, you know, delete it and or maybe put it out of yeah. Probably delete it.
175:09There's other ways to do it, but delete it or use it differently. And when I say differently, maybe you can ask Claude's code,
175:17what are the strategies where you can use these skills instead of them being loaded all the time in the in every single chat.
175:27Okay. So that's one thing. And the second thing I wanted to mention was that actually,
175:32if you go under Anthropic slash skills, their GitHub, basically, they have just a whole list of skills that basically they have developed internally, and they're just sharing with
175:45the world. So you can go through this and download whatever you want. What I, again, don't recommend is downloading all of them because they will just eat up your contact window.
175:55So really be, yeah, be mindful of what it is that you actually want to build and bring into your
176:06cloud code. Alrighty. So this means that we have now
176:12built the skill. So let's now do the most complicated, which is like building a prototype. So the example I will be using here
176:21is, as I have mentioned, like, we are in the NBA. We are now developing
176:27multiplayer games for our students because we just think it's much better and much more fun way to learn this, like, business skills if you actually practice them in a group environment with other students because that's how you actually gonna use these skills also later in your work, so not alone, but probably with other teammates.
176:48There's some competition because in business, there's also competition, and there's, like, real context. You know, there's real context in terms of there's, like, a whole scenario of how you're playing the game and so on. So what I wanna do now is just build a simple game for prototyping with numbers module.
177:05So let's just focus on one, like, single part of this game,
177:13and let's just build a clickable prototype of how this could feel like. And the context for you to know actually, me just open the anti gravity, and let's just explain this together to clot.
177:26There we go. Okay. So what I did here is also I just hidden
177:32basically, what is this here is a specific file that it will read automatically.
177:40It will read as part of the like, Cloud MD. Well, not really Cloud MD.
177:47Let me show show what I mean.
177:52As we said before, like, when you're actually starting a chat, what is low loaded first is, like, clot dot m d. That is also your message. But also this thing
178:04is something that is loaded or it's basically telling Cloud Code to read it.
178:10So sometimes, basically, this is the last file that we had open, and when I highlighted
178:18that front matter YAML, I think I did this. Right?
178:22We were in color teeth, and I basically did that. Exactly right.
178:27Even you what you see now here is that these lines are selected. So even if I close this now, it still says 11 lines selected. This is no longer really relevant for the next chat, so I'm just hiding it.
178:40But if I really wanted to have a look at a certain thing, like fly to research, okay, do Skill MD, read it, then actually, you know, it would show up. I mean, I can also do this.
178:51Right now, the skill m d is also preloaded as a part of this chat or the beginning of this chat. Right?
178:57So this would be one, two,
179:02and three things that are preloaded into this chat at the beginning. Anyway, that's why I'm hiding
179:09this now, and I wanna tell you to build something for me. Hey. I want us to build a
179:16simple multiplayer game that my students at the NBA will play during a live online practice session that we do in a Zoom call. We'll be putting students into groups of three or four,
179:31and each group will have one student who will be screen sharing the game, and then they will be discussing together and submitting their answers. So they will submit their answers, and
179:44it's gonna be some kind of competition between the teams. Mhmm. And then there's gonna be a reveal of the result.
179:52What I want us to do is to build this for the prototyping with numbers module. You have a skill, so you can have a look at that particular module, what it is about.
180:03What I already know is I want this game to be testing one particular skill, which is just getting the feel for numbers. Let's call it number estimator.
180:13So I want to basically show, and I want, well, students to train what we teach them as a part of that module, which is how do you estimate numbers out of nothing. For example, how do you estimate if you just pass by a coffee shop, how do you estimate its revenue yearly revenue? Or
180:30maybe how do you estimate number of highway kilometers in a country like Germany or France?
180:37All of these basically gives you the feeling for the scale things, which is very important in business when you're maybe estimating also the impact of your decisions on the bottom line or the revenue. So I want this game to
180:51be played, yeah, multiplayer. I want it to be fun. You know what the main thing I wanted to teach.
180:58And what else? Well, I think it's very important for this particular game to be based on publicly available data.
181:06So if we have a certain question about a certain number, the game needs to be able to like, there needs to be some kind of a public statistic about that number so that we can have a clear right answer.
181:18And I want you to build out the scoring system where based on this scoring system, how close students were to the right answer, they get there some kind of a leaderboard, and so on. Okay.
181:30So that's all the context. You you can hear I have given it a lot. I had a pretty clear idea of what I wanted to build.
181:37If I didn't, I would just be able to give it less, and then well, then we would together work through the plan.
181:44But in this case, I think the plan is very thorough already,
181:50but I'm pretty sure Claudia's gonna ask me from some follow-up questions after it has read all the relevant information. Now you can also see the benefit of actually really working with Cloth code. It's almost like exponential.
182:02So the more things I have built, the more things I can build with it. So I referenced a skill called the NBA prototyping with numbers module, which you can see here.
182:13Right? So in this skill, basically, we have a description of the whole module. And whenever I want to do any kind of work with this specific
182:23knowledge based on how we teach it, I can just reference this skill.
182:28Instead of me needing to always explain what prototyping with numbers means in our context, because if I just told it, hey. Look.
182:35We're teaching prototype with numbers, the Claus code wouldn't know what I actually mean because
182:42well, it's a it's a it's a thing we have actually created. I mean, this whole notion of protolling with numbers, it's not something that's well known. So a, we had to define it.
182:50But if I would be invoking a different skill such as, I don't know, the MBA, yeah, business strategy, well, it has a lot of knowledge about what business strategy is,
183:02but also from various sources. But the way we define it is specific way that makes sense for the design use case. So that's why I wanna have this skill so that whenever we talk about business strategy, Cloud Code knows what I actually mean.
183:15Okay. So as you can see, it's doing a lot of job now really trying to prep for this task. So I will now stop the video and be back when there's something more to share.
183:25Okay. After two minutes or so, we're back with the plan. It took a bit longer because just I have built these kind of games for other modules before, so I just read all the relevant files that were in this folder
183:38in order just to learn how we have done this before. Again, that speaks about . So here is what it's proposing.
183:48Number estimator game, a multiplayer estimation game where teams compete to guess real world numbers, revenue, highways, global sales market size.
183:58It trains the feeling for numbers, scale, yada yada. Same architecture as strategy game.
184:05That makes sense. Lock scale scoring. Actually,
184:09we'll not even go into all the details because sometimes I'm just trying to send, has it made any decisions that really do not make sense to me? Because then I would course correct.
184:22If everything feels good or actually, I'm not sure here, it's telling me just how the scoring with inside the game works.
184:31And I will not try to fully understand it because it's better for me just for it to build it, and then I will see it there. It's not a critical mission critical thing to know and understand right now.
184:41Magnitude input,
184:45so something is that also makes sense. Dramatic reveal
184:51speed bonus. Actually, I think we can we can take speed bonus out.
184:58I don't want teams I don't want teams to just focus on the speed. I really want them to together discuss things. How do we actually understand how many kilometers they are in Germany?
185:0820 questions to start. All backed. Yes.
185:11That makes sense. Actually, I have one more one more idea. What if the core UI
185:18element is Google Maps? Maybe just a link.
185:25And students can
185:28see what we are actually
185:33trying to estimate. And there are some
185:40because on Google Maps,
185:45there are there are hints. Right? So, like, if I am a person trying to estimate number of kilometers in Germany, and I just the way Google Maps opens for me, I can see the Germany.
185:55I can start to get the sense about it. Or if I'm trying to estimate the revenue of a coffee shop, and it just opens up a Google Maps with that particular coffee shop, the street view of it. I can just click into the coffee shop.
186:08I can go through maybe the images, see how many chairs, how many tables it has, what is on the like, what is the average price on the menu. I think it just maybe better mimics how actually you would do something like that in a real world where you would take some proxy data from something like Google Maps or even company's website to try to estimate some other number.
186:31So I just give this to plot code as a feedback, and it will create a new plan. In the meantime, we can see
186:39actually, I was reading the plan here on the left. I should have read it here because this is just a better formatting and also more thorough.
186:49The one thing I always read is definitely the file structure. I wanna first make sure that it actually saves it and works in the right folder. In this case, this is all clear, so I want it to work in projects, then it's gonna create a new folder called number estimator.
187:03It's going to create some scripts. There's going to be some well, I'm not sure about what requirements text are.
187:13Server, Python script, which is very important because we wanna play this game live. So when there is actually a live call, the way these games work is that me or my cohost, Tom, would host the game on our own servers, so which our machine basically basically becomes a server, and then we just can spin up this game for two hours, share the link with students, and then close it down.
187:36Also, this means there's there's any, like, big security vulnerability there.
187:41By the way, I didn't know any of that when I was first creating the first game. I just told it what I wanted to do, which is like, hey. I just wanna have
187:47a website that I can share with my students during the during this
187:53call, and it just explained everything to me. Okay. The options you have are we can actually put it on a server.
187:58This can be always accessible, you can just have it on your machine and just used during that time. And you can use this kind of tunnel or that kind of tunnel, la la la la, and I just work through that with with it.
188:10Okay. We have a new plan.
188:14Do I see any mention of Google Maps? Let's see. Command f.
188:22Not working in here. Okay. Let's see.
188:26A lobby question reveal finished scoring Google Maps integration. The core UI innovation, many questions are tied to real place. Yes.
188:34I think that's gonna be cool. Instead of just reading, they can review photos, how it works.
188:43So how it works, play specific company.
188:52Okay. What I see here is actually, I think I don't want, which is I want only the questions. What it's saying here is, okay, when a question does need Google Maps, we'll use Google Maps, and if it doesn't need it, then we will not use it.
189:04But I just actually, just to make this even more unified game, just have questions that actually need
189:14or benefit from Google Maps to have unified
189:21game experience. Okay. That's one thing I want.
189:24Let's see. Another thing is how will it actually
189:28open Google Maps. Okay. That's a very important technical
189:31detail because one way you could build this is that actually the Google Maps will be embedded into our website, which I think would be probably way more complicated. Another one is to just keep a link to students, and students can open up a link, and they can just open up Google Maps and have a look there.
189:47And I think for what we're trying to build, that would be completely enough. Okay. So I'm giving it this feedback now, and after that, we'll just let it run and build
189:57build it.
190:00Let's see what kind of questions it came up with. So play specific question example.
190:06Cafe Kreuzberg, which is in Berlin revenue. Estimate the annual revenue of this Berlin coffee shop. The answer is 35,000,
190:15and then it has hints. K.
190:19I'm curious what's that going to do. And then it has a link to the maps. That's all good.
190:25Okay. Okay. So I think we're gonna be ready now to build,
190:29and then we can just review the page, and then we can actually work with the live page, which is also way easier then to understand what we still need to do, what doesn't feel right, and so on. So I'll be back when the plan is finished, and then I'll just auto accept it,
190:46and it will build it out. Okay. Just for transparency transparency
190:53sake, we have an updated plan. I will just auto accept
190:58moving to bypass permissions and let it built, and I'll be back when it's built.
191:05Okay. So the game is now built, and we have the name, the number drop.
191:10There's a teams or student view, and then there is the admin view. Now we need to open this in Chrome. Let's go.
191:17This one is already open, so let's just open the admin view as well. Let's see what we have.
191:25Okay. How well do you know the world in numbers? Explore a relocation Google Maps, estimate a number about what you see, the closest team wins.
191:33Great. Testing team. Join the game.
191:38And then if this is played by more players, I guess if I create one more oh, it's the same URL, same IP, so that's why it just prepopulates with this one. But if this would open by another team, I guess we would see all of them here.
191:54And obviously, we could test that later. So now as a student, I can't do anything, so I guess the admin needs to do something. Yes.
192:01So admin can see who is in the room, and I can start a game. And then
192:08the students should see that as well. Yes. Okay.
192:11It didn't work quite a way. I had to refresh, so that's one thing I would need to debug. But now let's see.
192:18Yes. So that looks right. So we have one out of 15 questions.
192:21Many people visit the Colosseum in Rome each year? Open the Google Maps. We see the Colosseum.
192:31That's cool. I like this. I like this.
192:34I like that it's simple. I like that it's clear. I like also that it's just the depth of the game is hidden
192:41in in here, which is like somebody might just be completely bewildered by this question.
192:48Obviously, they have seen the content of the DMA, so they would know how to tackle this. But still, like, how do you know how many visitors? I mean, you can guess,
192:57but this game is all about, like, finding clues. And based on those clues, then potentially
193:05having a better guess. So if I now drop the man here in the Colosseum,
193:11I might be able to even from this picture, just yes, even from this picture, I might be able to get a lot of hints around how many people visit this a year.
193:23Like, I could just estimate the current number of people here and then multiply this with how many hours it is opened per day times how many days it's opened per year. That would be one path I could do.
193:35I could also estimate something based on reviews. I could estimate also I could go on the company's website potentially. So there's a lot of stuff we could do here.
193:44Let's just put in an estimate, like, round number, 2,000,000, and we lock it in just to see how this looks like.
193:53So waiting for the host to reveal the answer. So one team submitted. Okay.
193:59Reveal the answers. Okay. So this is how it's actually shown.
194:03So we see the actual answer. What do the students see? Oh, students see this as well.
194:07So they see the actual answer, which is 7,400,000. They see their answer, which is 2,000,000, and they see how many numbers. They have many points they have gotten.
194:17So, actually, what I wanna see now is just how this game look like if seven players played it. So let's go back into anti gravity. Hey.
194:26Could you add one more button on the admin view, which simulates if seven teams have answered a question, if seven teams are playing a game? I just wanna see how the UI and UX feels like if it's more players in there. That's another really cool use case
194:41for AI. An agent is just like making up or simulating how the prototype is being used.
194:48In this case, we have one real player, which is me, and other six teams which would just be bots. But what I'm really interested in is how does the game feel, how does the UI feel if it's more players playing, and it doesn't get crowded, when does it get crowded,
195:02things like that. And you will see in just a matter of few seconds, we will have a new version of the game where which will have the simulate button, and then we'll be able to test one that one as well.
195:13So I'll be back when this is done. Or is it already? No.
195:19It's not yet. So I'll be back in a few seconds or so.
195:24Okay. This took like twenty seconds or so. And now we're supposed to have a simulate seven teams button
195:32in the admin view.
195:37K. Need to start this again. Testing team.
195:42Join the game. Start the game. So this one would just be 1,000,000.
195:51Lock in the estimate. And now I can simulate the seven other teams. That's good.
195:56And reveal reveal the answer. Does that work here as well? It does.
196:00Okay. We can see some issues here. Right?
196:02So there's too many teams close to each other, so we need to find a solution for that. We can also now better see how the the
196:12scoring actually works. So we have team Foxtrot, which got 1,000
196:18points. Gamma, 800 points, 800 points. So now I'm
196:23guessing that they were close enough to get all the points. That's probably maximum.
196:28I mean, I could now also ask LotCode, but just to not go too far, I think this is this is basically just trying to show you how you're now reviewing,
196:37iterating, building on that, and so on. Alrighty.
196:42Let's do one more round just because it's fun. How many kilometers of motorway does France have?
196:51Google Maps. It opens in Paris. Okay.
196:54We could correct that. But, basically, does this is this helpful? I think it is.
197:00I mean, having this image
197:04might help you figure out how many kilometers is it has, especially, like, if you're from one of the European countries, at least one of the team members is, then they can say, okay. I know we have this many kilometers roughly,
197:17and this is the size, I don't know, Belgium. And if we multiply this through the France, we get some kind of estimate, or, you know, we might actually be able to
197:26just use some kind of a legend here. Is there like a
197:31ruler here at the bottom that would just show us? There isn't. But we could use Google Maps actually to just be I'm gonna drive from Tours to
197:42Orleans, and we can see how many kilometers this line is. And then based on this line, we could start estimating everything else.
197:50Things like that. Things like that. I like it.
197:53I think this is a really interesting game. I think we can also just stop here. What I would do next is make sure that this actually works on my machine as a server.
198:02I would send it to few colleagues in the team to test it out with them, things like that. I would also well, I would also definitely where is on Entegravity?
198:13I would definitely open a new chat and tell it to review. Hey. Can you review the code of this game?
198:19Because the fresh instance, the fresh fresh agent doesn't have all the cognitive bias or, like, confirmation bias because it this agent that you see now did not build the game, but this one did. So this one will think it's amazing, and this one can, with fresh
198:36pair of eyes, so to say, review the game. Actually, it works just like humans.
198:41So this one is doesn't doesn't have as big attachment to the game, it can just give you better feedback. Another thing we could do is we could actually take this whole code base and ask completely different model.
198:52We could ask well, codex. We could ask one of the OpenAI models to actually review the game, and through that, also have another pair of eyes on it and be more comfortable that this is actually going to work
199:07if we need it to work. I mean, if it's just a clickable prototype prototype for research, then we don't even need that. One last thing thing I wanted to show you is that because I have built games before what
199:19Cloud Code has done, it actually has built this based on a visual, a visual UI of the previous game. Can you host
199:29on my machine and run strategy game?
199:34Strategy game.
199:39And you will see that actually the visually, this number drop game that we just developed actually mimics very, very closely
199:48the or it's virtually the same as the strategy canvas game. And
199:56this is almost like a first layer of how you can use clause code to help you build
200:05search games are we running? It's live. No.
200:08Number drop is live on that port. Use a different port.
200:16So eighty eighty is a port that's used by
200:22this game. That's why I used to use a different one. Yep.
200:29Well, actually, let's just do this. So this is the strategy game.
200:34We can just skip to the game. We can just simulate seven teams. Anyway, it doesn't really matter more than that, but you can see that actually visually,
200:42this is pretty close to that, if not virtually the same. I would now have to check everything.
200:49There's stuff that we could do better, obviously, but you can just see that Cloud Code had a look at the previous game's visual CSS
201:00and code and was able to just infer a lot of things about how the game needs to build and how it needs to look like. And this is already, like, the first layer of how design systems could look like in the future in the sense that, yeah, these machines are really good at just inferring things from the examples or the code we have already given it.
201:19But as promised, in the next session, we'll also show you how to if you already have a design system, how you can actually really properly build it out into an AI
201:30AI native design system. So, yeah, that concludes this create section.
201:36And next, we'll go into the systematize where I will actually be joined by a team member. Alrighty. Time to jump into
201:44systematizing where we will dive into
201:47AI native design systems. As you can see, I have someone with me. That someone is Tom,
201:55colleague, program director at the MBA. And Tom had a wonderful opportunity to help us design the AI native design system for the MBA because lately,
202:08we basically started needing it. We didn't need it until now because we didn't develop any technological digital
202:15products. We only had educational,
202:19yeah, educational programs. And now at certain point, we needed it, so we had to solve this problem for ourselves.
202:27So, yeah, Tom is gonna show us how he solved this for us and show you how he can do it as well. So Thanks, Tom.
202:35Take it away, Tom. Glad to be here. Thank you.
202:39So, yeah, like, full disclosure to start with is I'm not a big design systems guy in in several ways. Like, I've worked on a lot of design systems when design systems were first kind of, like, in vogue, what, like, ten plus years ago.
202:55I was reasonably enthused by them. My enthusiasm waned when they sort of got quite fetishized by design teams, and I felt like we took our eye off the ball of, like, where our true value is. I think that might be coming back to bias
203:06a little bit now as far as, like, this focus on execution and stuff like that. Topic for another video, but absolutely see the value in design systems.
203:19For us as a small team, we don't maybe historically, haven't always been able to benefit from from design systems. Like, if you are in a big tech organization, you almost certainly have all the components you could ask for.
203:32You have maybe big teams managing them, managing the governance of design systems, which is obviously the most important bit of a design system.
203:42But when you're, you know, small team like ours, maintaining that thing, even creating it in the first place can be, uh, something that gets deprioritized. Thankfully, now, um, with the tools we have at our disposal, we have managed to quite quickly spin up a design system for some of our tools that we are starting to create, some of the games we're trying to create for our students,
204:05create a system that allows us to create tools that we have some confidence are going to be reasonably consistent in how students interact with them because we don't want that getting in the way of their learning experience. But also feel the MBA esque in the way they look, the way they speak, things like that.
204:24All the good things that a design system helps you do. Topic for another video is maybe how we developed that design system because very fast,
204:35maybe not the robust process that a lot of our experts in design systems might might use, but definitely good enough for us. But version 0.01.
204:48So bit of context, we have our kind of parent brands. So a good example here would be, like, the DMBA website. So there's a typographic style, a tone of voice, a visual style that we have been using on the website, printed materials, social media videos for quite a long time here.
205:05Our context has now changed. We're developing products. These are tools, these are games where this kind of spacing, this kind of typography,
205:14this kind of grid doesn't cut the musters. So we have been, you and I, vibe coding and agentically building these games, right, using AI.
205:25And they come out of the box from these tools, whatever tool you're using, if you give them no context about your brands, they can come out looking,
205:34I don't know, kinda like this. This is like the the you know, this lands on your desk from product product manager.
205:42You're like, someone's got a Lovable license or someone's just started to use full code. Absolutely fine.
205:49Like, no judgment here. I think it's I honestly think it's great that, like, this is these tools are freeing up others to be creative.
205:56But if you're part of a if you're a designer in a team and your your job now is to try and make this, uh, vibe coded thing that's landing on your desk,
206:07see how viable it is to build and maybe start to look at the kind of patterns and ways that you deliver designs fit this, and maybe even this isn't buildable or doesn't fit at all with the process of how you do things in your team, that's where these headaches start to come in. We'll come back to that because this is
206:26really about using design systems to do agentic coding in a way where the results that come out don't feel like slop and what comes out feels closer to something you could actually build is kind of production readiness ticks a bunch of those boxes. And that will come to life through some examples we're gonna,
206:45uh, we're gonna we're gonna share. So we're gonna jump into, um, my workspace.
206:52Alan, earlier, you were using anti gravity. I use something called cursor. They're basically the same.
206:56Doesn't really matter what what that is. So it's a way for me to explore files.
207:02So I can see, like, file system on the left here. I can see the contents of the file when I click on anything in here.
207:09And then I have something running that I don't think you've demoed so far, which is terminal. This is basically where I run Claude code. I know that in anti gravity, Claude code just kind of runs within a window, the same as in desktop app.
207:25But it's great to see also how this works. There's a chance to get the same view also in anti gravity. I just didn't wanna do it for
207:32this, like, initial course. We might do it if we ever do an advanced version, but that's basically the same.
207:37So Yep. It's basically Cloud Code just running in this little terminal window, so we need to know at this stage. I like this kind of view.
207:46I think as a designer, being able to kind of see what's being referenced, be able to see my files. And, actually,
207:52if you're on a team that has front end developers and stuff, probably a similar see a similar view to what they do. I think that's powerful. Um, and the abstraction of a lot of this stuff, if you're just using, like, the Claw desktop app and you're kind of not seeing this stuff, I They're just yeah, I'm I get uncomfortable with that.
208:08So I I I I like to see things in this way. So if you've used a design system before or built a design system before, there'll be a lot of things in here that feel very familiar. So
208:21things like accessibility rules,
208:25like our absolute baseline. The thing you will notice in here that you might not have in your design system that you've built previously is that this is all in markdown.
208:35And, Alan, I'm assuming that Markdown has been covered already. Ironically, for something that's been around for so long, Markdown files right there are now becoming the language
208:46of AI, the format of AI. So
208:51we might have had these kind of documents in other formats before. I don't know, actually.
208:57I don't know. Maybe Markdown has been the thing for design systems for a while, but certainly now, like, markdown
209:04for the win. So bunch of stuff in here around
209:08accessibility, kind of rules we should have. We have got
209:14all of our components. So this would almost certainly be very recognizable for people.
209:20So we've got our HTML for things like all of our buttons, but most importantly, we've got all the anatomy. So all of the breakdown of what our variants are, how they should be
209:33used, the different sizes, the
209:37tokens that are referenced, that are used in these different buttons, the dos and don'ts. All of that
209:45guidance is now in Markdown files. So we've got cards. We've got case studies.
209:51We've got chat. We've checkboxes, all the kind of stuff that we need for our games.
209:55So a good example would be, like, chat input. Adam, we've not needed chat input in the in the the the NBA world until the last few months, but now we're building
210:06things that our students can chat with. So in that process of building a design system, we've had to think about stuff like that.
210:13So markdown files with all of the documentation for all of those different sections. So that's the main crux of
210:22the design system components, but, obviously, anyone that has used the design system before knows that having your components
210:31is it feels like the big job, but it's it's it's not the job. The job is governance.
210:38Uh, that's the important part in here. So how do we actually get people to use the design system?
210:44How do we get them to, um, have some meaningful guidance on when to use something, when not to use it, decision making, how to review work? All that good stuff is the stuff that
210:59is where design systems die on the vine is where that stuff is not well
211:05documented or not well expressed or that rhythm and that governance,
211:12that that person, that team that kind of keeps it alive, keeps people understanding it, getting comfortable with it gets lost. We are a small team. We do not have a design ops person.
211:24So we have, as many of you would have
211:29developed a principles markdown file, which basically tells us
211:37yeah. It it talks in a few levels. We have things around, like, the substance of what we build being the most important thing.
211:46So the most important thing that comes out of this is around learning. Right?
211:51So all of in this context, everything is about making people feel like they're making good progress, not in a kind of gamified dark patterns kind of way. It needs to feel well authored.
212:04It needs to feel authentic. We need to make it feel like pieces on a table.
212:12This is a good example. So interfaces in this context need to feel kind of physical.
212:16They need to have weight to them. They need to feel tactile because that's all important to how people interact with these things they play with.
212:24So we have principles in here that are not like use this button here. It's things that as a designer you build that sensibility around.
212:32So we've tried to codify some of that. You would almost certainly, over the last five, ten years, have a page in your design system that talks at design principles level.
212:43So, yeah, we we have that codified. We've got patterns as well. So
212:49one thing would be having various parts of your design system. Right?
212:53Like, we've got all these card elements. We've got these form elements, etcetera, but how do we decide when they are used? What context do you use them?
213:01How to group them? How to if you've got a new
213:07workflow you've designed, how many pages that should be across, all that kind of stuff, which is very important as well. So we've got rules in here around the rationale of form layouts, all that kind of good stuff.
213:17So I appreciate most people watching this probably already know that, but I think it's a good reminder that the design system is not just the UI. It's one part of it.
213:26It's not it's actually not the system. It's the the system is the thing you build around that. Very, very, very important because if we just gave
213:35Claude or any AI tool the UI components and said,
213:43go and build us this this game. We're gonna get a whole world of ways that that is applied. Right?
213:50We would get high variance, Alan, in what comes out.
213:55And today, what we're about to demo here is about reducing that variance to a level where we have confidence in what's gonna come out the other end, and we have to do less intervention,
214:06and we can have a lot more confidence in vibe coding something that
214:13fits fits our fits our brand, fits our products. I'm gonna take a sip of water. I
214:21know this question makes you uncomfortable, but that's exactly why I want you to just answer very, very briefly, which is how long did it take you slash us to develop this? Design system,
214:36five hours. I think that's very important to know. And, it may not be as comprehensive
214:43and battle tested as something you would do for weeks or months, but I think this also speaks about the future of what these tools can do and what, you know, they will do those in the future. Anyway, continue.
214:56Yeah. Another video definitely on on how to do that. But Yeah.
215:00Actually, if you want us to do a video on the how because now we're just going into the what and what their what their benefits are and how this actually looks like. If you want the how, let us know in the comments so we can also do that one. Yeah.
215:13Okay. Let's get into it.
215:16So
215:18one of those key stages, like we already said, was creating these markdown files because these are the things Claude is going to be able to read effectively and design using this design system. People will recognize is we have a tokens dot m d.
215:33So this is like our canonical reference of all of our components. So any part in the design system, these will be get referenced
215:42as the, like, source of truth. So we have tokens.md and tokens.css.
215:47If you don't know about tokens, and I'm sure the majority of you are, go go go and look that up. Um, and, actually, worth kind of if you need a bit of a primer on design systems, there's far better people than me, uh, to explain why these are structured these are structured in this way and why we have designed tokens.
216:03But very, very powerful and something that we have in here, which, again, gives us some certainty around what Claude is gonna use when it's creating any elements. It's going to be using, uh, tokens.nd
216:16as one of our sources of truth here. So that is to say we've got an awful lot of information here, um, that Claude can make use of.
216:26Right? Lots and lots of markdown files, stuff about accessibility, um, stuff about governance, icons, motion, patterns.
216:34It might even be thousands of lines thousands of lines that we would not put into a Claude dot m d file. So,
216:43Alan, I'm gonna pass over to you just to explain again, you may have already covered this, what a Claude Markdown file is and, yeah, how big it should be and maybe why something like this is useful. Yeah. Can I actually go back to Miro?
216:57I just can actually and just follow my cursor there.
217:02There we go. So you might remember this section of the course where I said that Cloud MD actually functions as the hub,
217:11and that it should be ideally very short because it's loaded every time we start a conversation within that project. So that's exactly what we have done here. So we have kept the Cloud MD very,
217:22very narrow and sharp. And all the things that actually we
217:27or the AI might need, it just knows where to find them when it needs them, which means that we have we are way more token efficient and that we're also avoiding context fraud as much as possible, so we're getting better performance from
217:43the AI, which is also, I think, one thing maybe to mention is that CloudMD functions differently from SkillMD because I've seen a lot of people actually using SkillMD for their design system.
217:55And the difference between Cloud MD and Skill MD is that Cloud MD is just read every time you start a new chat within that project, and Skill MD needs to be invoked. So it means that if you haven't properly invoked the skill,
218:11then it's actually not following your design system. And by having these things in Cloud MD, then actually you know that it's going to do these things. There still might be some drift, but still, I mean, this is just a much better way to actually ensure
218:25and enforce that, you know, that AI is actually using and following the conventions. Nice. And a a far more reliable way of getting it to follow these conventions than using a skill.
218:40Right? Yeah. And or or putting all of that into one file.
218:45Yeah. Because the longer that one MD gets, just the lower the compliance of AI is with it.
218:52Usually, it remembers the best the things in the very beginning of the MD file at the very bottom. So that's why keeping it narrow just makes a lot of sense. Yeah.
219:03So what we have got in this ClaudaMD for the design system. So instead of, like Alan said, putting all of the context within here or giving it a file with everything in here, we tell it exactly what to do when it's coming up with anything new or it's reviewing something is to read these files that I've already shown you, all of the context from the design system or the markdown files in an order so that it gets that context,
219:29um, and give it some rules of how to implement. So use existing components, Use tokens, not hard code to values.
219:38I appreciate that for the Us designers, this is basics, but they can't be taken for granted. We've all all seen hallucinogenic stuff that comes out of AI.
219:47This is trying again to reduce that that chance of that happening. Don't invent tokens. Okay?
219:54So we've given it. This is like the procedural bit that we give it each time. Now this is to more token efficient,
220:01but this is still quite token intensive. I know that sounds like talking out of both sides of my mouth there.
220:08If you are invoking this to create something new for you, it still has a fair bit of work to do. So when you are vibe coding something, it might take a little while to give you an output that is far more token efficient than vibe coding something very quickly and then spending a whole bunch of tokens to try and, um,
220:28kind of form it back into shape. And what you are probably kind of retrospectively shaping it into is structurally almost certainly not going to follow your patterns terribly well, not going to be structured the way your HTML, CSS, JavaScript, all of that stuff should be.
220:45So rather than spending tokens, shaping something after the fact, we're using tokens at the start to try and make the first output much more reliable. Okay. So we've had a quick tour of the anatomy of a design system.
220:57Your design system may vary in how you've set it up. This is ours. We've gone through some of the elements in there that are needed to make it AI friendly.
221:07So mostly markdown files, which we've taken you through. We've shown you the most important file, which is claud dot m d. That's acting as a kind of router in this project.
221:17It's giving it that governance of what it needs to run through in order to execute on our design system intelligently. What we're do now is actually show you the practical stuff. So there's a couple of scenarios that we might wanna use this design system when we're vibe coding.
221:31First one is you've vibe coded something already, and now you wanna try and make it fit your design system. Could be something you've worked on yourself in Claude, in Lovable, in Figma Make, whatever you've used as long as you can access the code behind it.
221:46The
221:48other scenario is you wanna vibe code something new. You wanna work on a prototype or a proof of concept. Could be you, could be a colleague, could be a product manager.
221:59And full disclosure, that's the better way to start, and that is our recommendation
222:06if you end up putting into place this kind of design system with these components that are sort of Claude code friendly, and I explain why now. So let's imagine
222:18you've been vibe coding or your colleague, Alan, might have been vibe coding an idea for a game to play with students. And I think most of us out there, this lands on our desk, this screams vibe coded. It has all the hallmarks, all the kind of gradients, the use of interphone,
222:38lots of stuff that feels kind of very, very lovable esque. That's fine.
222:44This might be absolutely appropriate to test something out just to get a concept moving to get the kind of creative juices flowing. No problem with that.
222:53But we might wanna understand, okay. Is this viable to be built using
222:59our branding? Or if we wanna it or present it to senior stakeholders, we might want it to look less vibe coded. So
223:07no real problem with this. I think, you know, this has its place, but it screams it screams vibe coded for better or worse. So
223:16what we can do and what you can see here is we might decide, okay. We're gonna ask Claude to retrospectively apply our design system to the files that we've been sent.
223:26So in Claude in this version here, we can see I said to it, fix this five coded prototypes, use our design system, pointed it to where the file was. And what's come back already looks better.
223:37Right? It looks more like of the MBA. Let's have a little reminder of our website.
223:42It's using the right colors. Typography looks more on definitely using the right button styles and stuff.
223:50Already, you can kinda see it's doing that thing of basically painting by numbers. So it's taken the existing structure that came out of the box from whatever we vibe coded, and it is attempting
224:01to make it look and feel right. And then we start to see issues here. We can see where it's tried to patch up
224:08the existing code, the existing mechanics of the of the game. We can already see a few errors that have crept in here. I can see a few things in here that are suboptimal.
224:19So it's almost like it's been applied, but it's been done quite roughly. Again, this might be absolutely fine for your use case,
224:27some very, like, early testing or something like that, but we can do better. And the problem here is we're trying to patch something that's already been created with that design system. So
224:38you can do that, and you can ask Claude to do that, but there is a much better way, and that is starting from scratch vibe coding using the same tool using Claude, but giving it the constraints of our design system to do that ideation. So what we can ask Claude to do,
224:59we look at my other terminal node. What we have, we have where is it?
225:06Skill.m d. Alan, can you tell us a little bit more about this actually?
225:11So this is one of the the instructions about what we wanna vibe code.
225:16Right? No. In this Skill MD, it's basically a recap of one of the modules of the dMVA.
225:23So whenever we do wanna make projects on that particular module, this is how we bring in the context of the actual content that students go through. So
225:33what I'm guessing you have done is you have probably pointed Claude to this particular mod document, so it knew what we mean when we say business strategy.
225:46Because if we just told it to build a strategy game, it would just build whatever it thinks strategy is. But obviously, in the container of our program, it has specific definitions, specific examples, and so on. So that was
225:58that's a a skill that we use whenever we need to bring in that context. This additional context is something I've told Claude about before it starts vibe coding. So I've said to you, I want you to come up with a new concept for a new game teaching designers Actually, Tom, can you just highlight this text, I think, just for us to be able to yeah.
226:15Exactly. Yeah. I don't know if such highlight's showing up, but yeah.
226:19I you to come up with I'm doing this in natural language, so come up with a new game teaching designers about business strategy. We've created a skill, and I've told you where that skill lies,
226:30which gives you all the context of how we teach. Like Alan said, that's we want it to have our opinion, our way of teaching strategy. I'd like it to be based off of
226:42Yeah. The the skill. Right?
226:43Oh, yes. Based off of the skill. Sorry.
226:45And to use our design system, and I've told it where I want it to create it once it's finished. So it puts it into that folder and uses skill.md for all the context that I mentioned. So when this starts, we already mentioned,
226:59it will look at Claude m d first. So it will pass through this file, read it all in order, and get that context about the design system before it starts vibe coding rather than trying to do this retrospectively.
227:13So it goes into the process of vibe coding our idea with all the context of how we build, what our design system looks like, how it works, and how to make decisions from it.
227:24So takes a little while to go through that. I think it took about five minutes to create this first version, but I'm gonna show you what that looks like.
227:33So this is obviously the one where it was retrospectively applying the branding. And then we have version one, which is it's calling trade off.
227:41Trade offs are central to business strategy. Not gonna go into a lesson about business strategy. This is what it's created,
227:48and this is starting to feel a bit more us. It's giving as far as, like, the kind of fundamentals when we're teaching, we like to give a little bit of context first, a bit of instruction, and rather than
228:02just giving this kind of here. Also, way that we when I was setting up the design system for games, we talked about stuff having containers, having progress,
228:13the kind of language we use, giving people context about the business case that they're gonna be designing around. So we can already see here that the way that these buttons and things and the way things are laid out is a bit more us.
228:27One of the key principles is kind of one key decision per page, whereas the previous version has lots and lots of decisions to be made here. This is the one that we branded up that came straight out of an initial vibe code without our design system.
228:42There's a lot of, much as I hate the term, cognitive load here for the user. That's not us. That's not how we teach.
228:49So we are asking people to make one decision at a time. So you see already that the look and feel is there, but also it's paid attention to our patterns,
229:00our rules, and how we govern our design system. So this already feels like a superior product and something actually that's I think is a tear up from something looks vibe coded.
229:11We can go through and sort of choose our places within the arena and tune our activities. And this is all already feeling more more us.
229:20So you can see this. I know the design system that we've created for the tools. So I know by looking at this initially that this is much more in line with how we would build something if it was ready for production, production, and it's already brought all that sensibility early into the process.
229:36K. So that's kind of one version of this. Now
229:42if we gave, say, two designers in our team the same brief, if we gave them all the context about how we teach business strategy and we give them our design system, they're not gonna come up with the same design.
229:55Two designers are not gonna come up with something identical. That actually isn't what we expect Claude to do either, but we do expect our designers and we do expect Claude,
230:05any design it comes up with, to be within those constraints that we've built into the into the design system, into our MD files.
230:16So I actually got Claude to do this again because I wanted to see what the variations looked like. So so that it didn't have a a reference point in the existing design, I actually moved this file outside of the project and asked it to do a version two.
230:29This would be like our other designer going off and doing something. It came out with this. Now you might recognize, actually,
230:37it's done a pretty good job consistency wise of how we would kick off a game. It's chasing the right kind of typography scales, the way it's
230:47putting things within a a big card, the way it's got progress, pretty similar. So, you know, I get a bit of confidence here that there is a consistency starting to happen by using this design system.
231:00The thing that's different is Howie has taken that brief and decided to design a game. So
231:08draw the line is this one. So I imagine this is gonna be something about strategy canvas. So new coffee train.
231:14And, again, we can see there's definitely a similarity here in
231:19button styles and choices it's made. It's done the right thing. It's put one question per page.
231:25It's got the right hover effects. This is all feeling like the same design system. Right?
231:31We go into the next stage. Let's draw our lines. So now now now we can start doing a nice strategy canvas.
231:38This feels like an upgrade from the last game that we built, actually. Alan, we might wanna try this. So we can see here that
231:46just like in the non AI world, two designers with the same design system can come up with interesting concepts, and that's what's what that's what we wanna vibe code. That's why we vibe code.
231:58Right? We are diverging,
232:00but we're diverging very quickly. But in this instance, we're diverging with those constraints of the design system. I would feel comfortable taking this into an
232:10executive or to Alan or actually to our students pretty soon versus something that's just been VIBE coded without those constraints.
232:19Does that make sense? I actually gotta do the third version, Alan, because it was on such a roll. But we'll come on to that.
232:28Yeah. No. I'm gonna show the third version now, which I quite like.
232:32So, again, it's got the right kind of starting point, very similar. It uses this kind of quite fun cards thing. But what I like here, what's different here,
232:42is it's used a different version of our progress bar from the design system. So whereas previously, using this one, which we've used in other games,
232:53we actually have two versions of this. This And is the one that gives a bit more context. And, actually, if I was reviewing
232:59the designs that had come to me from a designer, I prefer this one. What do you think, Alan?
233:08I would have to think about it more. But we're now getting into the into the bit that I think is particularly interesting when you are implementing a design system like this.
233:19So I'm pretty happy with the kind of quality that's coming out generally through these different versions. But from reviewing the two well, actually, different games now that we've had, there are a few things that if I was reviewing these and updating the design system,
233:35there are choices that I would want it to make moving forward. There are choices that I would say to a designer, Actually, you know what?
233:41When we're designing a game, I think the contextual progress bar that kind of tells you what stage you're at, tells you what part of the game you're playing is more useful than something a bit too abstract. So it looks nice, but it's not as useful when you're learning as something like this.
233:57I've not given that enormous amount of thought, but I wanna get now make that codified. The other thing that I've just noticed, the subtle difference here, is the start the brief button here.
234:08I kind of like the fact that it's got the little arrow version on there because it feels like I'm about to go through this process, whereas this feels like a sort of terminal in the process, like a stop point. So it's a little thing, but it's something that I would like the design system to remember in future.
234:24I would like to make it part of our governance. So we have a file for that. So we have something called decisions markdown.
234:33And, basically, this is what how we are training the design system, training Claude to get better as it continues to vibe code and play our design system at making decisions about the right thing to use in the right context. Now this is the kind of stuff that designers do codify. We do put it into our documentation.
234:52We talk about it in critique. We are a small team trying to run this ourselves. We don't have design groups of designers critiquing these things,
235:02so we wanna do this at speed, and we wanna make it reliable in that when Claude kicks off this process and looks through decisions.md, it understands
235:14our preference for certain things. So within here, each decision
235:19has a few bits of criteria. So it's like a rule,
235:24when to use it, examples, counterexamples like what a bad bad version of this would look like so they can review itself, and then why it was added.
235:34So we've got a number of existing rules in here around that. Things around feedback and state like when to use a toast versus a modal,
235:43how to use loading states. But what I've added in down
235:50the bottom here Where is it? Here we go.
235:55So I actually reviewed those two designs and added a new decision rule, which is step up versus progress bar.
236:03So I've told it when to use
236:09this version of the progress bar versus
236:14this version and also my preference for using this version of the button with the arrow versus the one without it. So I've now added those into decisions dot n d off the back of reviewing those Vibe coded games. So we've got the button hierarchy on the game screen, the forward arrow, when to use that, and the progress indicators
236:33for the steps. So that now will be something that Claude runs through whenever it Vibe codes something new. So in order to test that, I actually did a next another version.
236:44So I asked it to do another version of the game. It understands what we wanna get from the game, what the mechanics are, how we teach.
236:52But now you can see in this version, the arrow is in the button, and we are working with a version of the progress bar which has the context that I asked for. And I would expect now every time I vibe in a new version, it's gonna follow that rule.
237:09I'll stop there. I hope that makes sense. It does make sense.
237:13Yeah. Cool. Nice.
237:18So yeah. That's kind of so to kind of recap, I think applying
237:23a design system to something existing kind of vibe coded piece is not the way to go. You can do it, and you saw the results.
237:30They were kind of you know, it looked like someone had painted on the
237:37the NBA look and feel on here, but it was definitely suboptimal. It wasn't following our rules strictly versus vibe coding from the start using the design system.
237:46We got what I would say was some pretty solid results out of that. They passed the eye test and also give me variations where I can start to see
237:58preferences from my perspective that I would like to build into the system longer term.
238:06Any questions, Alan? No, all clear. Thanks Tom.
238:10No worries. Anything else to cover here?
238:19Mean, obviously, like anything, when you're deciding whether whether saint qualifies as a rule to write down,
238:29it's not you you don't necessarily make a rule at everything. So yeah.
238:35Like, could you defend the choice with a principle or scenario? If not, then if it's just I prefer it and you can't point to any why any choice is better in a similar situation, it's not really a rule.
238:47Your your taste is kind of forming. So these are all the kind of rules around well, rules, guidance around design systems that regardless of whether you're building them and managing them and implementing them with AI or not,
239:00you know, use your sensibilities as a designer to know when to make something a rule versus not. Anything else to add though?
239:11No. I don't think so. No.
239:13I think I think where the senior designer fits into all this
239:19is the kind of quality bar for what you can get out of vibe coding has got higher, not lower. But someone still has to look at the ideas that have come out the back of this process and decide which is the better way to teach, what is the more
239:37I'm just gonna end up waffling. So I think we'll leave that there. No.
239:41Well, I I think that's exactly what the role of a designer when the a like, building an AI design native system is, is seeing how AI system,
239:53like, understands what we have written in MD files and the components
239:58and just make sure that the way it's applying this is actually on brand. So that's a big part of this job is just translating now this, not that it's human readable, also that it's like machine readable that you're getting the results that you wanna be getting.
240:13Yeah. And I think there's a whole lot of philosophical questions here around like
240:18how where does the role of a junior designer fit into this? If you are just being handed this off and you're not getting to play with the design system and use it yourself so much, Like yeah. But I think that could end up being
240:33a whole different discussion. But Yep.
240:36Let's stop there. This goes then into, I think, other topics as well. So this is just,
240:43I think, a nice way to show how AI yeah. How design systems can be AI native.
240:49Thanks, Tom, for showing us this, and I see you in the next section. Thanks. Bye.
240:54Okay. Time to automate some of the boring tasks.
241:00So what we will do here is a task a weekly task that maybe a lot of you have to do if your team leads,
241:08design leads, which is let's call it, like, team reporting. Let's say that you
241:16need to stay updated about what each team member does, and you would like to each week basically know what the status of the project is.
241:25And there's some kind of a Google Sheet that you have where you're tracking that. So let's just build this quickly together.
241:32So this is the name of the person. We'll talk about this later. Maybe project name
241:40and status.
241:44Actually, if this is weekly, right, we would probably wanna have status per week.
241:50So maybe this is status
241:55let's see. Status week one,
242:00status week two, and so on.
242:05And what we would want our team members to do, let's say, Mercy, and May,
242:12is to basically if we are in week one of the project, we would want them to fill this out. And if they were in week two of the project, to fill this out. And we give them a few options.
242:24Where is this done?
242:29Drop down? Yeah. I think it's drop down.
242:33Done in progress. Let's say 50%
242:40or less, and then maybe in progress 50% or more.
242:46I'm just making stuff up here. Obviously, this is all the stuff you can
242:57adjust and make better.
243:01I don't know. Just choosing some colors here like this. Yeah.
243:04So we have these different versions of what they can choose here.
243:14And what we want basically is that if they didn't do it by Friday, let's say 4PM,
243:22that they get reminded. And up until now, we had to chase them and do this ourselves. And just imagine there is not just three, but there is maybe like 12 people on this list.
243:32You know, you do spend quite some time doing these kind of things. And, yeah, probably this is not exactly what you're doing, but you might have some kind of tasks that in some shape or form will relate to what we're building here, which is automations
243:45to free up some time we can really spend more time on what really matters, which is the actual work.
243:51Okay. So let's build this team reporting, and I'll open up an anti gravity instance and basically tell it to,
244:00hey. Can you help me build automation that would every week on Friday at 4PM Central European time, ping any of the team members that haven't filled out the status report, which we have in a Google Sheet?
244:13So just ping them through Slack.
244:18I'm giving you that really, really simple prompt here because I don't know how we should build this. So I wanted to figure it out.
244:26I wanted to ask me questions. So that's why I'm using the plan mode, and I'm guessing it's gonna come up with some clarifying questions for how to build this because I'm not sure completely either.
244:42Okay. So we have a few questions from Claude.
244:48First one is, what is the sheet structure? How is the status report tracked in Google Sheet? What indicates whether someone has filled it out or not?
244:56So do we have a column per week? Do we have a stamp timestamp column, or do we have checkbox column?
245:03Each row is a person with a checkbox or a status value per week. Each row. So
245:10row is just to clarify because I know a lot of designers don't like sheets. Row is this, and this is column.
245:19So checkbox column. Each row is a person with a checkbox of status value per week.
245:25No. Column per week. Each column is a week.
245:28Each row is a person. Yes. So that's the one we have.
245:30Right? So we have person per row, and then this is a
245:37week. How do we want to remind these people? Let's say DM.
245:43Right? We could do this. We could also do something else.
245:44We could send an email, whatever really we can choose here. Scheduling, very important.
245:50So how should this automation be scheduled to run? Is it through ClotCodes built in scheduled triggers, or would we use a server
245:59or Mac local CRM job? Well, definitely ClotCodes
246:06built in scheduled triggers, which by the way, clot code
246:12schedule tasks is a feature that it was used, I don't know, a few weeks back where you can run prompt on a schedule.
246:21You can do command loop or you can do command command schedule,
246:28and that's what we're gonna use. So if you wanna dive deeper, that's what you can look into.
246:34But, yeah, I'm gonna choose the first one. Submit answers.
246:45So now it came back with few more questions. How are team members identified in the Google Sheet? Is there a column with their Slack username or email or just their name?
246:56Well, right now, it's just a name. But because I have built the similar things before, I am expecting that this column b will have to put in the Slack ID,
247:08which is the unique identifier of each team member, which, by the way, the way you can get it is if you go on Slack, if you just
247:17do the right click over the person, then you can do copy
247:26copy name, not not not. Actually, you will have to then click into this person and
247:34then go here and then
247:38where is it? Steps about view profile.
247:44Okay. Here. It should be here.
247:46Copy member ID. Copy member ID,
247:52and we will do the same for the other two. So for Mercy and for Yerne. And then I mean, right now, it's enough if we have just one so we can test things out.
248:03Project name, testing project. Doesn't really matter.
248:07Okay. Basically, now we have the sheet ready for testing. So if we go back, now we can answer.
248:12It's Slack username column. Well, there is actually Slack ID column b column.
248:20Right? B is here. So I click enter.
248:25Slack authentication for Slack. Should I set up dedicated Slack bot or use an existing Slack integration you already have?
248:33Use existing Slack app. I don't think I have one. Use Slack MCP tools.
248:41Create a new Slack bot.
248:45Most reliable or use Slack MCP. Actually, let's try Slack bot if it's recommended.
248:57Well, here is the plan.
249:03File structure makes sense. So dot ENV file.
249:08Yes. I'll explain what it is. Tokens,
249:12temporary scripts. Okay. Makes sense.
249:18And I will need to
249:22create a one time I will need to create the bot. So I'll just go ahead.
249:29And then I guess, Claudia also give me instructions for what I have to do versus what it will take care of. So I'll definitely have to so here's like an ISO overview of what usually happens when you're in the build phase, which is that
249:45you will basically see like a whole plan. So right now, it's in the step one.
249:51That's what this star is for. Create a skill directory structure. Copy copy and patch to Google
249:57auth. So I already have Google connected to my cloud code, but I will ask you to explain how you would do it. If we wouldn't have that.
250:06Then it's gonna create a check status Python script. This is gonna be a script that's gonna check if people have already, like, basically added their status here or not.
250:23Hey. Google Auth.
250:29It then is going to write the Skill MD. The it's gonna write the ENV file, install the Python dependencies, and set up the remote trigger schedule.
250:38Okay. What do you need from me? What do you need from me?
250:48By the way, the ENV file is very, very important. So let me just spend a second on that.
250:55So basically, when you're building some kind of a potential prototype or whenever you are connecting your prototype to some kind of API service, you will need to add your API keys.
251:10Well, somehow, you the code will need to communicate to your API keys. An API key is basically a password, and if somebody gets it, then they can use
251:21that service. So for example, if you would have my API key for my cloth code, you would be able to use my usage tokens. This means that,
251:31yeah, you're basically wasting or using my money. So that's why we're trying to or you're getting some kind of data that you shouldn't be getting. So that's why the best practice is to store all the API keys in a call file called dot d n v,
251:46and I'll show you how this is done. But whenever you see this, it means that you need basically need to store some kind of information, sensitive information for your script to work.
251:58There we go. For some reason today, the bypass permissions is not working because all of these questions I'm getting about, hey, do you want can I do this? Can I do that?
252:07Should be just automatically done.
252:11Yeah. All of these things should not be happening.
252:16But it is what it is. So it's doing the job.
252:22We have talked about the ENV. So, actually, I do know that I will need to set up a bot. Right?
252:26So, actually, let's start doing that. Where was that section about the bot? There was something about a bot somewhere.
252:34Maybe it was in the plan. Let's see.
252:40Requirements, status.
252:49Think it was somewhere here.
252:55Okay. It's here. Step four, one time Slack bot setup.
252:59So I will need this link. I'll need to go here.
253:04Create an app. Let's see what it says. So create a new app.
253:09Okay. Boom. From scratch, I guess.
253:13Yes. From scratch. App name.
253:17Weekly status. Select the workspace.
253:22The team. Create app. And then what does it need from me?
253:29OAuth and permissions both, tokens, scopes, add chat. Okay.
253:38App ID, client ID, display information. So
253:46scope. Let's see. Where is the scope?
253:49Generate token and scopes. Right? Is it here?
253:54Token name. Add scope token name.
254:00Actually, don't know what this means. Weekly. Let's see.
254:06Weekly. What is that? Weekly
254:09status. Right? Let's see.
254:12Add scope. Okay. So for scope, I'm gonna copy this over.
254:17Chat. Right? Let's see.
254:20No items.
254:23Okay. So I got stuck here. So what I will do is basically
254:31okay. So now we have the message that code is built, and now we are the ones that are the bottleneck. That's usually the case.
254:37So I will now tell Cloud Code I'm having issues. Hey. I'm just trying to create this
254:44Slack bot, and I got stuck here. You can see the screenshot.
254:49Am I in the right page? And I'm now in the step two, trying to get the bot token, I guess.
255:01I'm in step two, so just help me out.
255:07As I said in the beginning, I'm not I'm not an engineer, but I've just been playing with this enough to be able to know what I need to ask, and that's it.
255:17But still, all the times, I don't know exactly the terminology either. So click add an OAuth scope.
255:25Scroll okay. In the left side of word, click okay. So I'm not on the right page.
255:30Click on the auth and permissions. That's here.
255:37And now we need to click bot token scopes. I guess that's here.
255:44Add an o at. Yes. Add an o at.
255:49And now chat. Right. Okay.
255:55That is added. Scroll back up and click install to workspace and authorize.
256:02Scroll back up. I am back up, but I don't see this. Install to workspace.
256:07Install to. I guess that's it.
256:12Allow.
256:18Let's see. Copy the bot token at the top. Starts with.
256:23Okay. Copy.
256:28The upload token section you were in under okay. So we have gotten to
256:34step five. Okay. Step five done.
256:38Where do I add the token?
256:47Yes. Okay. So I need to do it here.
256:53Slackable token. So one all other thing I recommend you to not do is to drop your API keys or stuff like that into the chat.
257:04Long story short, don't do it. Just try to always write directly into the ENV file. Okay.
257:09So we have done this. Now we need to also give you the spreadsheet ID. So the spreadsheet ID is, I believe, this part.
257:18Actually, let's just ask it. What part of this URL is spreadsheet ID?
257:28Oh, it actually told me even before. Anyway, now I got it. Boom.
257:32Boom. Spreadsheet ID is not as sensitive at all.
257:36So that's why I can drop it into the chat as opposed to Slack both bot token.
257:48Okay. Command s. Is that all?
257:53Let's see if that's enough.
257:58Not quite. Still need to do Google OAuth so the script can access the sheet. Run this.
258:03It will open a browser window asking you to sign. No. You run it.
258:08So a lot of times you'll get cloud code telling you what to do, and a lot of times you can just tell it to do it exactly this for you. So what will happen now is we should see a Google page open up
258:23on our screen, and we should be able to grant access.
258:32There's a bash command here. I still don't see anything opening.
258:41Yes.
258:46Okay. There we go. So now I need to basically
258:51give my blessing. The authentication flow has completed.
258:56You may close this window. Okay. So let's go back to anti gravity.
259:01Now it should already have information that this is done.
259:14Actually, now we can see how annoying it is if the bypass permission is not working. Basically, it's just asking all the time to
259:22approve everything. Yeah. For some reason, it's just not working today.
259:38Okay. The sheet name in in v is set to
259:46is set to spreadsheet title, but it should be the tab name. Yes. Okay.
259:52So
259:55that okay. It corrected itself.
259:59That's good. So now everything is in the in the v ENV makes sense. The sheet is connecting fine, but the header uses yeah.
260:07Exactly. I was waiting for this. So the issue we have right now is
260:11that this is not really self explanatory. Like, what is status w one, status w two?
260:21What we do better is that we had dates. The script was expecting date based headers to find current week. Simplest fix, always use rightmost column as the current week, the way you just add new column each week, and it's automatically picked up.
260:33Let me update the logic. That's one way to solve it. The other way would be, no.
260:39Please just create in the spreadsheet
260:48column for each week in the q two, so second quarter of twenty twenty six.
260:58Do this from column d onward.
261:03Okay? So this is from here onward. It's gonna create, I guess, twelve
261:08twelve weeks.
261:12And if it does this correctly, then it not going to need to rely on the rightmost column because then it's, again, on us to be creating that column each week, and we don't want this.
261:25Okay. So now the dry run has worked.
261:29So basically, Cloud has created these
261:35columns, and it basically identified that Tom needs to be
261:41basically reached out to. It hadn't
261:46actually performed this action because it was just a dry run. But then it also identified a problem, which is that we can not use Entropic's cloud
261:56because it doesn't have access to the local Mac, so it can't run the Python script or read the local credentials or add token.
262:06So the right approach here is local Mac cron jobs. So remember in the beginning when we were planning this out, one of the options was to actually do this through the local job.
262:16What this means is that our computer just needs to be on in order for this to work. So it's not as convenient. But still, if our computer was on on Friday at fourteen UTC
262:29or anytime after that, it was just it would run this schedule. Two things to do before next Friday, add Slack IDs for Messi and Hernay. Yes.
262:39We haven't done this. Can we now run, uh, can we run this for Tom?
262:46Just sent him a message reminder to fill out the status
262:54in here. And then we just give him the link,
262:59and let's see if this works.
263:07Now it's oh, it's already actually, it already had a reminder message.
263:15And now I give it a new one, so it's gonna update this and send live Slack DM to Tom. DM sent to Tom.
263:26He should have it in Slack now. I guess I won't be able to see this because
263:33it was sent through bot. Okay. So that's the downside of this approach.
263:38If we went with a different approach with the Slack MCP, it will be able to send messages as us, which would maybe be better in this case. So actually, let's try and do this.
263:48Actually, can we not use bot, but rather
263:54MCP Slack so that the message is sent as me,
264:00Alan.
264:03Also, now you can see that we're getting very, very close to having full context window.
264:09So I would typically open up a new chat and just or instance of agent and just continue there, especially now because we're changing the whole approach to it because we just built everything
264:24with Slack bot, and now we're changing it to an MCP approach. What we're basically doing is
264:35instead of using and right right now, we do wanna use an MCP, and before that, we basically went through APIs and tried to build a bot. And that obviously will not
264:49look like the message came from us, but it came through a bot. Now we actually wanna use MCP so that it actually looks like it came through us.
264:59So
265:02it's gonna now it has to redo a lot of the code. We no longer need the Slack bot
265:11token, so it's gonna take this out. Yeah.
265:16Now let's test it.
265:20I already have the MCP for Slack connected. That's why this is gonna be pretty fast. And let's see if the message is delivered.
265:30Yes. So Tom has gotten the message,
265:34and there's also a message sent using Cloth. Yeah. There we go.
265:39Sent. So this is how this works. So you can see that I just started with a very broad idea of what I actually want to build.
265:47I was exploring the technological architecture of how we can do this. There were various options.
265:56Obviously, we had to kind of glue together a spreadsheet with Slack,
266:02and we wanted it to come through us, and then we found a way. We found a way. So now, basically, every Friday, this would be at 4PM.
266:10If our computer was on, it would be red. If we wanted to have a system where this wouldn't be connected to our own computer, we could use we could just ask Cloud, hey. I actually
266:20let's say, hey. Actually, if we my computer let's say, I don't work on Fridays usually.
266:27Is there another architectural way we could solve this maybe with a server or what do you suggest? Don't do anything, just give me options.
266:36So again, like I'm just now basically conductor trying to understand what are my options here.
266:44And yeah, Cloud Code is a great teacher as well, and it's gonna give you different options for how you can solve this.
266:51And then if I spend more time on this, I would be able to
266:57use it. So number three, reframe it as a remote trigger, which is also
267:03CTAits recommendation. Since the Slack MCP is connected to your Cloud AI, remote trigger can slide send Slack messages.
267:10CTAOh, since we actually move away from the API architecture, so the Slack bot architecture to the MCPs. Now we could use the cloud
267:21CTAbuilt in cloud structure infrastructure, which is the most convenient way we could have solved this.
267:30CTAWell, think we can stop here. So my point, my goal with this section was to just show you how you can build automations, things that would help you as a team lead.
267:39CTAI mean, obviously, this is like a very team lead specific example, but I just hope it gives you some idea for what kind of things you can build so you can transfer them to your own use cases.
267:52CTAAnd with this, we are also closing the build section of this video, and I'll just have a short outro for you in the next section.
268:03CTAAlright. That's the course. So I hope you got a lot out of this because I genuinely enjoyed making it.
268:10CTABut the thing is that this field moves ridiculously fast. Even during this week when I was recording this video, new stuff dropped.
268:18CTAFor example, Klot or Entropic announced a new model called Mythos, It's supposed to be way better even than Opus. There's also a new plan mode called Ultra Plan.
268:30CTASo, yeah, there's new features I couldn't even include in this video. So and that made me wonder, like, what is the future of this space and how can we really keep up?
268:41CTABecause this video will get old in a few months probably. I mean, the principles will stay the same, but there's just a lot of features and new ways that you could do things that will be new.
268:59CTAI even bought a domain already. It's a place where we would regularly do trainings, where we would break down new tools as they drop, but not just cloth code.
269:08CTAAlso like Figma Make, UX Pilot, Google Stitch, or even new agentic tools. So it will be sort of like an ongoing education for design community. Frankly, I don't know if I will build it yet.
269:21CTADepends whether of well, if enough of you actually want it. So if this does sound interesting to you, like, click the first link in the description
269:30CTAand, yeah, join the wait list. And that's frankly it. Thanks for watching, and see you in the next one.
— full transcript
§ 05 · For Joe
Steal the curriculum spine.
Joe Skill: Build vs Direct
Faljic's 'executioner to orchestrator' frame is the exact pitch Joe should be making to solo creators — and the 3-layer architecture is the exact spine JoeFlow / Paperclip should ship as a template.
- Pitch every Joe product through the executioner -> orchestrator frame. Creators are still pressing record themselves. They should be directing.
- Adopt the 3-layer architecture as the JoeFlow spine: SOUL.md = instructions, sessions/skills = orchestration, the actual file/recording/upload = execution. Diagram it once, reference it forever.
- Ship a starter-skills pack with JoeFlow. Pick 6-8 like Faljic's list (Review Miner, Tone Scraper, Heuristic Audit, etc.) but reframed for creators: Hook Miner, Caption Scraper, Thumbnail Audit, Title Splitter, B-roll Mapper.
- Build a 'fresh-instance reviewer' loop into the Sessions panel — when a builder session finishes, auto-spawn a reviewer in a different model with no prior context. This is the kind of feature that makes the product feel smart.
- Use the soft-CTA ending pattern: 'I might not even build this — depends if enough of you want it. Drop your email if you do.' Honesty as conversion mechanic.
- Steal his title format for the Mod Boss long-form: 'MOD BOSS FOR CREATORS (Full Course - 90 Minutes)'. Set expectations in the title, let the chapters do the discovery work.
- Replicate the visual rhythm: face + Miro PIP. Hand-drawn highlighter is doing more work than slick slides would. Cheap, fast, recognisable.
§ 05 · For You
If you're a designer thinking about jumping in.
Where to actually start
Don't try to absorb four hours in one sitting. Pick the one demo that maps to a job you actually have this week, and follow that section start-to-finish.
- If you do UX reviews -> jump to the parking-permit form demo (~17:33). The sub-agent pattern is the unlock; everything else is plumbing.
- If you need a portfolio site -> jump to the LinkedIn-PDF -> personal site demo and the Netlify deploy (~1:36 and ~2:38). You'll have something live in an afternoon.
- Build ONE skill before you build a system. Faljic's 'Color Thief' walkthrough (~2:30) is the cleanest cold-start. Don't try to build all 8 from the list.
- Write your CLAUDE.md before your second project, not your first. The contrast between the generic site and the on-brand site is the proof you need to take this seriously.
- Don't skip the Tom handoff (~3:21). The AI-native design system segment is where this becomes a team-level capability, not just a personal trick.
- If you have zero terminal experience: budget the first hour just for setup pain. The course assumes you're past that wall, and you might not be. That's fine — just don't quit there.
