WEBVTT

00:00:00.640 --> 00:00:06.160
Welcome. This is a comprehensive guide for designers of all disciplines and all seniorities

00:00:06.160 --> 00:00:08.880
who wanna become fluent in agentic design.

00:00:09.360 --> 00:00:17.225
We are indeed entering a new era of design, so we are moving from a world where most designers are primarily executioners

00:00:17.305 --> 00:00:21.625
to a world where most designers will need to become orchestrators.

00:00:22.185 --> 00:00:27.545
Orchestrators who can direct agents to do a lot of that design work for us.

00:00:28.270 --> 00:00:30.430
And this isn't just about UI.

00:00:30.670 --> 00:00:32.510
Whether you are in UX,

00:00:32.510 --> 00:00:38.990
research, service design, whether you're leading a team or you're design ops, that shift touches all of us.

00:00:40.525 --> 00:00:44.445
Just a quick context on me. I'm a designer. I run the MBA,

00:00:44.525 --> 00:00:47.165
which is a business school for designers,

00:00:47.245 --> 00:00:52.685
and we have had over 1,000 alumni so far. I am also an ex IDO business designer.

00:00:53.380 --> 00:00:55.460
I have no engineering background,

00:00:55.780 --> 00:01:11.675
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. This isn't theoretical.

00:01:12.955 --> 00:01:16.075
Okay. Now why do we designers

00:01:16.555 --> 00:01:19.595
all of a sudden need to learn how to use agentic AI?

00:01:20.080 --> 00:01:23.760
In other words, why is agentic design relevant?

00:01:24.640 --> 00:01:26.800
Well, let's start with the fact that

00:01:27.040 --> 00:01:33.615
most business departments, if not all, are speeding up with the use of AI. So if you think about legal,

00:01:33.615 --> 00:01:34.735
if you think about

00:01:35.055 --> 00:01:36.575
marketing, engineering,

00:01:36.575 --> 00:01:37.295
finance,

00:01:37.375 --> 00:01:38.655
they're all accelerating.

00:01:39.535 --> 00:01:44.175
And if we, as a design function, don't, you know, also speed up,

00:01:44.655 --> 00:01:48.730
we can become the bottleneck, which is not great, obviously,

00:01:49.770 --> 00:01:51.610
especially because nondesigners

00:01:51.610 --> 00:01:52.730
can now produce

00:01:53.210 --> 00:01:55.370
what they think is good enough design.

00:01:55.770 --> 00:02:03.375
So a PM with an AI tool and a design system can draft an 80% their interface,

00:02:03.375 --> 00:02:05.775
something that is 80 to 90%

00:02:05.855 --> 00:02:10.815
good enough. Right? At the same time, tools are getting better.

00:02:11.375 --> 00:02:14.655
So this thing is not stopping in terms of the progress.

00:02:16.370 --> 00:02:18.770
But, you know, this is very important, but

00:02:19.090 --> 00:02:22.050
there's a real difference between creating a one off design

00:02:22.450 --> 00:02:23.010
and

00:02:23.970 --> 00:02:24.930
maintaining

00:02:24.930 --> 00:02:26.770
and building this into a system.

00:02:28.035 --> 00:02:36.195
So while PMs and others can create a one off design, really building this out into a system and managing the system is basically

00:02:37.795 --> 00:02:38.835
why design

00:02:38.995 --> 00:02:47.370
still 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.

00:02:47.690 --> 00:02:49.850
It will just come in smaller doses.

00:02:51.050 --> 00:02:59.055
And the reason the main reason for this is because most companies, especially in tech, are not adapting the fast and good enough approach.

00:02:59.295 --> 00:03:05.935
Meaning, they're not trying to go slow and be perfect, but they are just launching fast and quickly.

00:03:06.255 --> 00:03:08.255
And the reason for this is, again, AI.

00:03:08.760 --> 00:03:16.360
Engineering 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

00:03:16.840 --> 00:03:19.400
doing that, there's pressure on others to adapt.

00:03:19.880 --> 00:03:28.475
By 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,

00:03:29.435 --> 00:03:43.060
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. So even in this case, it's a good idea to start learning agentic design because it's coming.

00:03:44.100 --> 00:03:46.980
This also means that design rules are being redefined

00:03:47.220 --> 00:03:54.035
in a big way, and we'll talk about this in a bit. But just in a nutshell, design systems are becoming AI native.

00:03:54.515 --> 00:03:56.355
Design ops is getting automated.

00:03:56.595 --> 00:04:00.675
Research and discovery is getting faster, and so is creating visuals and wireframes.

00:04:01.290 --> 00:04:06.810
So, yeah, all business processes are getting AI fight, and the same is happening with design.

00:04:07.450 --> 00:04:13.770
Now the good news is this window to learn this tool is wide open. It's almost like learning Figma in 2016,

00:04:14.355 --> 00:04:20.355
and designers who get fluent using this will set the standards of how it's done community wide,

00:04:20.595 --> 00:04:28.195
but also company wide. Right? So 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

00:04:28.835 --> 00:04:32.010
for all of us. And I would even say that these days,

00:04:32.570 --> 00:04:36.890
being fluent with AI agents is a huge advantage on the job market.

00:04:37.210 --> 00:04:41.130
But at the same time, I have to say that maybe soon it might be a hygiene

00:04:41.210 --> 00:04:41.610
factor.

00:04:43.565 --> 00:04:47.565
Okay. So now let's have a look at what we will cover in this course.

00:04:47.805 --> 00:04:56.605
As you can see, we have three bigger buckets. We have part one, which is the understanding the technology, how it works. Part two, which is about how do you bring your own context

00:04:56.990 --> 00:05:04.110
into the tool, so how it can do a good job for you instead of just giving you AI slop. And then we'll show you some of the ways you can build with it.

00:05:05.070 --> 00:05:12.315
So we'll talk about in the first section about what is agentic design. So we'll define this term. We'll define how it affects different design disciplines,

00:05:12.555 --> 00:05:20.955
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.

00:05:21.755 --> 00:05:30.150
Then 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

00:05:30.550 --> 00:05:39.030
well, installing everything you need on your machine to get it up and running. And then we'll go into how to bring your own context, which is creating your system prompt.

00:05:40.145 --> 00:05:42.385
We'll talk about a three layer architecture,

00:05:42.785 --> 00:05:52.225
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

00:05:53.020 --> 00:05:54.380
feels unreliable.

00:05:54.780 --> 00:06:00.780
And lastly, we'll talk about connecting your tools. So how can you bring the tools you are using on a daily basis,

00:06:01.260 --> 00:06:05.420
such as Figma or a browser or your email perhaps

00:06:05.500 --> 00:06:08.005
into these tools to be more productive.

00:06:08.165 --> 00:06:22.180
And lastly, we'll talk about the building part, so we'll put it to work. We'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

00:06:22.660 --> 00:06:24.340
really fast and really thorough,

00:06:24.580 --> 00:06:28.740
how to obviously build design systems, build designs, build apps

00:06:28.740 --> 00:06:30.340
with agents.

00:06:30.340 --> 00:06:32.215
We'll talk about systematizing,

00:06:32.215 --> 00:06:39.975
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

00:06:40.775 --> 00:06:42.295
just much faster.

00:06:42.935 --> 00:06:52.500
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.

00:06:52.900 --> 00:06:57.940
So knowing what's good is still on you, and frankly, that's what makes you valuable.

00:06:58.835 --> 00:07:04.355
Second thing I wanna mention is that, obviously, as the title of this video suggests, we will be using Cloud Code,

00:07:04.915 --> 00:07:14.115
but don't let the name fool you. It's not just a coding tool. It's a general purpose agent that just happens to work through text

00:07:14.300 --> 00:07:15.340
and files.

00:07:16.540 --> 00:07:23.100
Okay. Having said that, it's time to jump in into the first section, which is what is even agentic

00:07:23.100 --> 00:07:23.900
design?

00:07:24.300 --> 00:07:30.615
Well, the best way to explain it is to explain the difference between a chat AI and an agent AI.

00:07:31.175 --> 00:07:36.295
So what we have here is two screenshots. On the left is a screenshot of a Claude chat,

00:07:36.615 --> 00:07:40.295
and on the right is a screenshot of a Claude code as an agent.

00:07:41.735 --> 00:07:47.930
So here on the left, you could also swap this image with a ChatGPT or Gemini. It's the same thing.

00:07:48.570 --> 00:07:55.050
So what I wanna talk about is the difference. So the way chat works is that we ask questions

00:07:56.250 --> 00:07:57.610
and AI answers.

00:07:58.315 --> 00:07:58.955
So

00:07:59.755 --> 00:08:09.275
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,

00:08:09.850 --> 00:08:24.570
which 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. Right? 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.

00:08:25.565 --> 00:08:26.525
We're just

00:08:26.845 --> 00:08:29.325
outsourcing some of the thinking to AI.

00:08:29.725 --> 00:08:36.445
Now with agent, it's a little bit different. So we are actually leading, and we are asking or giving it directions,

00:08:36.685 --> 00:08:48.470
and AI is doing things for us. Right? And that is a huge paradigm. We're no longer bringing context into it. It's already there. An AI agent just does things with that context.

00:08:49.910 --> 00:08:55.115
It's best for me to just show you this through a live demo so you understand

00:08:55.675 --> 00:09:05.995
the example. I 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

00:09:06.190 --> 00:09:07.070
the session.

00:09:07.870 --> 00:09:12.830
So let's just imagine that we're trying to design or we have designed a form,

00:09:13.230 --> 00:09:15.710
a form for a city council

00:09:16.030 --> 00:09:19.310
where residents can actually apply for a parking permit.

00:09:20.125 --> 00:09:21.165
As you can see,

00:09:21.725 --> 00:09:23.165
it's a pretty standard

00:09:23.405 --> 00:09:30.365
form. It has all the personal information, address information, vehicle information, and so on. So it looks very solid.

00:09:30.525 --> 00:09:35.485
It doesn't look the most modern, but it just looks like a lot of government

00:09:34.920 --> 00:09:35.720
forms

00:09:35.720 --> 00:09:36.440
do.

00:09:36.840 --> 00:09:52.495
So what we would do in this stage of the process as designers is test this. We 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

00:09:53.215 --> 00:09:54.495
AI as well.

00:09:55.055 --> 00:09:55.615
So

00:09:56.815 --> 00:09:58.655
if we were to use

00:09:59.375 --> 00:10:01.215
chat, what we would do,

00:10:02.200 --> 00:10:06.440
and obviously, will do this now, is we will bring in this

00:10:07.000 --> 00:10:13.720
file. Right? In this case, I'm actually bringing in the HTML file. I could have also brought in a screenshot,

00:10:14.545 --> 00:10:25.825
but, 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

00:10:26.305 --> 00:10:27.985
just for you to know what's going on.

00:10:29.180 --> 00:10:31.420
Hey, Claude. I want you to review this

00:10:33.180 --> 00:10:38.140
landing page or a form page that I have built. I want you to review it from the UX

00:10:38.140 --> 00:10:40.780
perspective, find any glaring

00:10:40.780 --> 00:10:41.660
usability

00:10:41.660 --> 00:10:42.460
issues.

00:10:43.980 --> 00:10:45.555
There we go. So

00:10:47.075 --> 00:10:52.835
we'll hand this over to chat. And while this is doing its job, let's hop over to

00:10:54.115 --> 00:10:54.835
our

00:10:55.235 --> 00:10:56.515
Cloud Code

00:10:57.315 --> 00:10:58.035
agent,

00:10:58.275 --> 00:11:05.770
and let's do the same thing. In this case, I don't have to bring any files in. That's the big advantage also because it's already here.

00:11:06.170 --> 00:11:09.210
I have given it access to my project folder,

00:11:09.850 --> 00:11:11.050
but that's not the only difference.

00:11:12.455 --> 00:11:16.375
Hey, Claude. I want you to run the UX review for my

00:11:16.695 --> 00:11:18.535
form that I have just built.

00:11:19.495 --> 00:11:21.495
So just run my usual skill.

00:11:26.840 --> 00:11:27.800
There we go.

00:11:28.280 --> 00:11:36.040
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.

00:11:36.440 --> 00:11:46.785
Okay. So 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.

00:11:47.265 --> 00:11:47.825
And,

00:11:49.025 --> 00:11:50.705
basically, it will do

00:11:51.585 --> 00:11:53.825
the following. It will actually

00:11:54.330 --> 00:12:00.090
host this page on my machine as a server, so my computer will serve as a server.

00:12:00.410 --> 00:12:05.130
It will open up a few Chrome tabs, Chrome Windows.

00:12:05.450 --> 00:12:10.945
It will create a few agents, sub agents who will actually fill out this form and

00:12:11.745 --> 00:12:14.225
then report back to us what was wrong.

00:12:14.625 --> 00:12:19.585
So there's a big difference between what chat is doing, which is basically just reading the HTML,

00:12:19.665 --> 00:12:29.080
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.

00:12:29.480 --> 00:12:33.240
And basically, they will all actually be using this exact

00:12:33.480 --> 00:12:37.720
page and filling it out to find visibility

00:12:37.895 --> 00:12:51.975
issues. So 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. As you can also see, my hands are up. So this is now a agent

00:12:52.940 --> 00:12:53.980
who is

00:12:54.780 --> 00:12:57.980
who has a task to fill this out as Maria,

00:12:58.300 --> 00:13:03.420
and then there's another agent who has a task to fill this form out as a

00:13:03.980 --> 00:13:04.380
Jake,

00:13:04.865 --> 00:13:07.745
and both of them will fill it out and

00:13:08.145 --> 00:13:18.065
then come back to us with results. Okay. So Maria just finished that. Jake just finished that. So both of these are gonna close, both of these crumbs.

00:13:18.385 --> 00:13:18.625
And

00:13:19.630 --> 00:13:21.630
when they come back with all the results,

00:13:22.030 --> 00:13:27.390
our main agent will summarize, synthesize all the results, and get back to us with results.

00:13:27.950 --> 00:13:31.310
So let's, for now, just jump back into

00:13:34.685 --> 00:13:36.765
chat and see what it has found.

00:13:37.965 --> 00:13:40.525
So we have how many? We have 15

00:13:40.525 --> 00:13:41.405
issues,

00:13:42.365 --> 00:13:43.005
and

00:13:43.725 --> 00:13:48.920
I'm not gonna even read through it. What I just wanted to show you is the depth

00:13:49.080 --> 00:13:54.520
of the file the of the things it have found, which is 15 issues plus

00:13:54.600 --> 00:13:58.200
what it is based on. So you can see that it's based on reading

00:13:58.565 --> 00:14:02.005
the code. Right? It didn't actually it could not actually

00:14:02.165 --> 00:14:04.885
run this page and actually fill it out because

00:14:05.445 --> 00:14:07.285
that's not how chats are built.

00:14:08.245 --> 00:14:11.045
I would now have to go through all of this and implement this into

00:14:11.560 --> 00:14:15.160
the design in the CSS or code. Okay?

00:14:15.480 --> 00:14:17.160
Now let's go back into

00:14:17.320 --> 00:14:18.040
our

00:14:19.160 --> 00:14:20.600
Cloud Code instance,

00:14:20.760 --> 00:14:24.840
and what we will hear and what we will see here is a completely different

00:14:25.560 --> 00:14:27.080
depth of analysis

00:14:27.495 --> 00:14:29.095
and also

00:14:29.895 --> 00:14:38.375
what 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.

00:14:40.700 --> 00:14:44.940
So in this case, we have started a chat, and we just told it to do something.

00:14:45.260 --> 00:14:46.220
And because

00:14:46.460 --> 00:14:47.180
this

00:14:47.420 --> 00:14:51.980
particular skill asked the agent to actually spawn sub agents,

00:14:52.300 --> 00:14:54.940
so this is our main so called parent agent,

00:14:57.465 --> 00:14:58.985
It actually spawned

00:14:58.985 --> 00:15:00.665
three additional agents.

00:15:00.905 --> 00:15:03.705
One was Maria, one was Jake,

00:15:04.585 --> 00:15:06.185
and then there was one more

00:15:06.505 --> 00:15:10.585
whose job was just to check for main, like, 10 main heuristics

00:15:11.760 --> 00:15:12.560
if

00:15:12.640 --> 00:15:22.720
the 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

00:15:23.695 --> 00:15:28.975
like this. And now the agent is summarizing this, and it will create a report.

00:15:29.455 --> 00:15:32.895
This is, let's just say, slightly more advanced tactic.

00:15:33.055 --> 00:15:43.100
What we could also just have done is just told CloudScope to, hey. Just review this page and just give me feedback, and then the main agent would just do this itself.

00:15:43.500 --> 00:16:02.265
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. For 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.

00:16:06.090 --> 00:16:08.810
Okay. Here we go. Here is the full report.

00:16:09.210 --> 00:16:21.545
We 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. So error prevention is catastrophic.

00:16:23.225 --> 00:16:25.545
Permit zone selector is unusable.

00:16:25.545 --> 00:16:30.105
Legal tax is invisible, and so on. So a lot of the stuff that actually

00:16:30.870 --> 00:16:33.590
the chat could not find because it requires

00:16:33.590 --> 00:16:40.710
actually using the form. We have a amazing table as well. We're showing what issues both of the personas found.

00:16:42.150 --> 00:16:44.070
By the way, what were the personas based on?

00:16:44.835 --> 00:16:48.435
I believe Maria was, like, a senior citizen, and Jake was, like, a younger

00:16:48.675 --> 00:16:50.835
tech savvy user, something like that.

00:16:51.315 --> 00:16:57.315
I could go and check it out, but doesn't really matter. So we have this overview here with the issues both of these found.

00:16:57.555 --> 00:17:00.115
Oh, it's here. Maria cautious 68.

00:17:00.810 --> 00:17:01.770
So

00:17:02.250 --> 00:17:09.450
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

00:17:09.850 --> 00:17:10.890
this form

00:17:11.130 --> 00:17:12.410
with the heuristic

00:17:14.305 --> 00:17:15.265
glasses

00:17:15.265 --> 00:17:16.225
and just

00:17:16.705 --> 00:17:19.425
look to these best practices and if we're actually

00:17:19.665 --> 00:17:21.345
doing well on them or not.

00:17:22.065 --> 00:17:31.180
So we can just obviously read through all that. And then we have top five fixes we need to fix. And if I wanted to, I could just tell it, hey. Fix it now. And

00:17:31.420 --> 00:17:33.260
this is vastly,

00:17:33.340 --> 00:17:43.515
vastly different from us getting the suggestions here, reading all of these, and being like, okay. Now let me go and check that. So it's not just that we got way

00:17:43.595 --> 00:17:44.395
fewer

00:17:44.475 --> 00:17:50.075
things to improve. Like, it was just a not a store of analysis. Also, now it's on us to do them.

00:17:50.635 --> 00:17:53.115
So, hopefully, that really illustrates

00:17:53.275 --> 00:17:55.595
the power of this

00:17:55.890 --> 00:17:58.530
agentic workflows, of agentic work,

00:17:58.930 --> 00:18:03.490
and what the agentic design is. You know? It is when we're not

00:18:04.450 --> 00:18:05.410
doing things

00:18:05.650 --> 00:18:06.530
necessarily

00:18:06.530 --> 00:18:13.905
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.

00:18:14.465 --> 00:18:17.505
What it means is that the role of designer is,

00:18:17.665 --> 00:18:18.865
well, changing.

00:18:20.145 --> 00:18:24.600
I have already talked about us moving away from doing less execution

00:18:24.600 --> 00:18:33.160
to 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.

00:18:33.160 --> 00:18:35.640
And when I say building, what I mean is like we're not

00:18:36.125 --> 00:18:38.125
physically or manually, like,

00:18:38.285 --> 00:18:46.125
doing things, but we are more like steering the wheel. So we are still building. We're like, mentally, we are paying the picture. We are setting the strategy and direction,

00:18:47.405 --> 00:18:52.640
but it's manually building, like, screens and code. It is actually agents that can do this for us.

00:18:53.200 --> 00:18:56.400
What this means is that a lot of us are actually gonna be moving,

00:18:57.280 --> 00:19:06.125
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

00:19:07.085 --> 00:19:11.325
role where maybe you're not managing people, but you're managing agents.

00:19:12.365 --> 00:19:13.485
Just a side

00:19:13.885 --> 00:19:17.980
anecdote on this, I have seen some people take this to a very, very

00:19:19.180 --> 00:19:21.740
extreme. So when I look at their screens

00:19:21.980 --> 00:19:24.220
so the way their screens look like is

00:19:24.380 --> 00:19:26.060
they have at the same time, like,

00:19:27.275 --> 00:19:39.115
this is six, but let's say eight of these running. So they have, like, one, two, three, four, five, six, seven, eight. So just imagine this screen just being, like, basically each of these screens.

00:19:39.740 --> 00:19:49.020
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

00:19:49.500 --> 00:19:51.740
huge boost in productivity.

00:19:51.900 --> 00:19:52.060
And,

00:19:53.145 --> 00:19:55.705
yeah, one one team member can just do

00:19:56.425 --> 00:19:57.865
way more, which means

00:19:58.265 --> 00:20:01.545
as a team, we can do way more, and we can just ship more things.

00:20:02.505 --> 00:20:11.360
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.

00:20:11.760 --> 00:20:19.040
It's just a matter of fact that most companies will optimize for speed and for cost because this is cheaper and faster.

00:20:19.680 --> 00:20:25.175
And then the human made graphics will use sporadically where it makes sense and when it makes sense.

00:20:25.495 --> 00:20:30.935
And so those might be illustrations. Those might be so some specific graphics that AI

00:20:31.095 --> 00:20:32.935
want to do as well. So

00:20:33.575 --> 00:20:40.890
there will be some concom some combination of that, and it's still the jury is still out how this will actually shape.

00:20:40.890 --> 00:20:48.090
But there's no doubt in my mind that most companies will be moving more and more into agentic design and, in general, agentic

00:20:48.410 --> 00:20:49.610
departments and workflows.

00:20:50.715 --> 00:20:53.995
So what does that mean for tools that we are using?

00:20:54.475 --> 00:20:55.995
Let's have a look at the most

00:20:56.475 --> 00:21:02.395
prominent, more popular legacy design tool, which is Figma. So what are the all the things that we're doing in Figma?

00:21:02.475 --> 00:21:07.060
We do a lot in Figma. We're doing basically exploration,

00:21:07.140 --> 00:21:08.180
the brainstorming.

00:21:08.180 --> 00:21:10.500
We're building wireframes. We're building prototypes.

00:21:10.820 --> 00:21:14.740
We're actually designing things. We're handing over them to developers.

00:21:14.820 --> 00:21:17.780
We're also enforcing design systems. We're also reviewing.

00:21:18.595 --> 00:21:19.315
Basically,

00:21:19.875 --> 00:21:22.675
has happened in Figma Abutil recently.

00:21:24.035 --> 00:21:26.355
What's happening now is that for

00:21:26.515 --> 00:21:28.035
most of these things,

00:21:28.195 --> 00:21:29.955
there are better tools.

00:21:30.435 --> 00:21:36.130
So if we just try to visualize let's say this is currently like the old school Figma,

00:21:36.450 --> 00:21:51.505
and I know there's Figma Make and UX pilot and Google Stitch, and I'm getting to this. Right? So Figma is a legacy design tool where the way you work is pixel to pixel, meaning you are basically moving your mouse and keyboard for it to do all of these things.

00:21:52.545 --> 00:21:54.145
There's a new breed of

00:21:54.385 --> 00:21:55.265
design

00:21:55.265 --> 00:21:56.065
tools,

00:21:56.145 --> 00:22:05.970
which I call agentic design tools. That would be Google Stitch. That would be UX pilot, Figma make. Where actually, you can do all of these things, but you're doing them

00:22:06.450 --> 00:22:10.770
while you're doing them text to visual. Right? So you're putting in language,

00:22:11.890 --> 00:22:13.010
and you're getting out

00:22:13.525 --> 00:22:14.405
pixels.

00:22:14.885 --> 00:22:17.685
And here it's pixel to pixel.

00:22:19.285 --> 00:22:22.325
I hope you can get used to my poor drawings.

00:22:22.565 --> 00:22:23.205
Sometimes

00:22:24.005 --> 00:22:29.840
it's gonna happen. Okay. So this is basically I'll just be a little more clear. So this is

00:22:30.080 --> 00:22:30.800
Figma,

00:22:31.920 --> 00:22:33.440
and this is,

00:22:33.760 --> 00:22:35.760
let's say, Google Stitch

00:22:36.000 --> 00:22:37.440
or Figma Make

00:22:38.640 --> 00:22:39.920
or UX pilot.

00:22:42.405 --> 00:22:48.565
And these tools can do all of these things that Figma does just way, way faster.

00:22:48.725 --> 00:22:50.245
So you can explore

00:22:51.125 --> 00:22:58.980
different variations of your design cheaper and faster. You can do wireframes. You can do prototypes. You can more advanced prototypes can be done.

00:22:59.300 --> 00:23:01.220
You can do the handoff,

00:23:01.220 --> 00:23:05.220
but it is a developer team. You can enforce design systems. You can review.

00:23:06.335 --> 00:23:14.255
The only player, the only part where maybe Figma still has the traditional Figma still has an upper hand is like more this,

00:23:14.495 --> 00:23:19.780
let's call it the craft part where you're still trying to by hand do a certain,

00:23:20.820 --> 00:23:21.940
yeah, designs.

00:23:22.020 --> 00:23:24.900
By the way, Adobe will also fit into this bucket,

00:23:25.140 --> 00:23:25.780
obviously.

00:23:27.220 --> 00:23:28.580
So what these

00:23:28.900 --> 00:23:29.780
tools

00:23:32.980 --> 00:23:33.620
what

00:23:34.285 --> 00:23:42.285
these tools, so design agentic tools do is basically just make us much faster at doing design.

00:23:42.445 --> 00:23:46.605
But the point of this whole course is that there's actually a bigger story here,

00:23:48.020 --> 00:23:49.460
which is that we have

00:23:50.500 --> 00:23:52.260
what I will call, like,

00:23:53.060 --> 00:23:53.780
general

00:23:54.260 --> 00:23:55.060
agent

00:23:55.140 --> 00:23:55.780
tools.

00:23:58.340 --> 00:24:01.060
And an example of that would be, obviously,

00:24:01.380 --> 00:24:02.260
plot code.

00:24:03.955 --> 00:24:05.955
So what plot code

00:24:06.355 --> 00:24:06.995
does,

00:24:07.155 --> 00:24:08.515
it basically takes

00:24:09.395 --> 00:24:10.355
language

00:24:10.515 --> 00:24:13.075
and turns it into more language.

00:24:13.155 --> 00:24:15.635
And that language can be actual

00:24:15.090 --> 00:24:27.090
words. It can be code. It can be CSS code. It's also visual in a way. But because the graphical user interface that plot code uses is very text based, that's why we will still,

00:24:27.650 --> 00:24:30.370
as a community, need some sort of design

00:24:31.645 --> 00:24:35.725
dedicated genetic tools such as Google Stitch, Figma, and Make.

00:24:36.125 --> 00:24:39.485
And the bigger story here is what these

00:24:41.165 --> 00:24:45.085
suite of tools we will be using in the future actually enables us to do as designers.

00:24:47.270 --> 00:24:52.630
So if we look at our role as some kind of creative directors or orchestrators,

00:24:53.190 --> 00:24:57.830
what we have here is the old school traditional legacy Figma Adobe and Son, which

00:24:58.415 --> 00:25:03.615
might be still there to help us do the craft part, right, pixel to pixel.

00:25:04.575 --> 00:25:10.735
We will also be using these new tools, so agentic design tools such as Stitch, FigmaMake,

00:25:10.735 --> 00:25:17.340
UX pilot that will help us do some of the stuff that we have done previously just faster and more effectively.

00:25:18.460 --> 00:25:19.100
But

00:25:19.340 --> 00:25:24.140
this general agentic tools such as ClotCode and Cursor

00:25:24.140 --> 00:25:25.500
help us actually

00:25:25.740 --> 00:25:26.460
build

00:25:26.855 --> 00:25:29.735
out more stuff that we couldn't do so far.

00:25:30.135 --> 00:25:34.215
And let me actually show you what I mean. So here's a list of stuff

00:25:34.535 --> 00:25:35.095
that

00:25:35.735 --> 00:25:39.335
we can do as designers now. Also, if we really get fluent at

00:25:40.280 --> 00:25:41.720
tools like ClothCode.

00:25:42.040 --> 00:25:44.440
We can start building and shipping software,

00:25:45.160 --> 00:25:58.895
actual working software. We 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.

00:25:59.295 --> 00:26:02.735
We can build internal tools. Yeah. We can build dashboards,

00:26:04.415 --> 00:26:05.535
calculators,

00:26:05.535 --> 00:26:09.535
things like that. We can also connect our tools better with APIs.

00:26:10.340 --> 00:26:21.700
We 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

00:26:21.860 --> 00:26:35.895
or 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. This is just to give you some, like, ideas for what is possible

00:26:35.975 --> 00:26:36.695
because

00:26:37.095 --> 00:26:45.950
what we're getting into our hands and everybody is if is basically a very, very capable, very, very powerful tool that makes

00:26:45.950 --> 00:26:47.390
our job easier,

00:26:47.390 --> 00:26:50.190
but it also expands of what we can do, and

00:26:50.510 --> 00:27:00.925
that means that also the value of our work can go up if we actually adopt these tools. And I think that's the very positive way to look at these tools as opposed to just them taking our job.

00:27:02.045 --> 00:27:06.205
So if we now jump into which design disciplines that will this will

00:27:07.005 --> 00:27:14.060
impact, it's basically all of them. So, obviously, UI and visual design, we have tools that can generate layouts,

00:27:14.140 --> 00:27:14.940
components,

00:27:15.020 --> 00:27:17.660
variations of that at very high speed.

00:27:18.620 --> 00:27:21.980
We also have the same thing for prototypes and for wireframes.

00:27:22.435 --> 00:27:27.395
We have well, obviously, we can do synthesis at scale if you're a researcher.

00:27:28.115 --> 00:27:43.490
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. Now 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.

00:27:44.770 --> 00:27:54.475
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. So not systems that humans can

00:27:55.675 --> 00:27:56.795
can, like,

00:27:57.115 --> 00:28:01.115
work with, but something that will work well when replicated by agents.

00:28:02.110 --> 00:28:05.310
Then we have design operations will definitely change.

00:28:05.790 --> 00:28:09.390
A lot of, yeah, manual tedious work can be automated.

00:28:09.710 --> 00:28:13.950
The brand identity will need to be written in a machine readable

00:28:13.950 --> 00:28:26.465
way 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

00:28:26.465 --> 00:28:36.630
with AI because we can do competitor research. We can build dashboards. We can also quickly do reports with the help of these tools. So they're very powerful. They're touching all

00:28:37.030 --> 00:28:38.950
kinds of design disciplines

00:28:38.950 --> 00:28:40.790
across all seniorities.

00:28:40.870 --> 00:28:43.910
It is, yeah, a huge, huge paradigm shift.

00:28:45.255 --> 00:28:52.695
The last thing I would like to focus on before we move into how this technology works is just Cloud Cowork versus Cloud Code.

00:28:52.935 --> 00:28:59.175
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,

00:28:59.550 --> 00:29:04.270
I just want to explain why we're actually just talking about Cloth Co here.

00:29:05.390 --> 00:29:07.790
So just as a quick

00:29:08.910 --> 00:29:09.710
intro,

00:29:10.350 --> 00:29:15.230
if you have a desktop app installed by Cloth, you can actually see something like this.

00:29:15.845 --> 00:29:21.445
So on top, there's basically three products that they have. One is the chat. That's the one we have used. There's

00:29:22.005 --> 00:29:24.245
there's co work, and then there's code.

00:29:24.885 --> 00:29:26.885
So if we draw a line like this,

00:29:27.760 --> 00:29:36.800
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.

00:29:38.000 --> 00:29:43.015
So this is the user interface you see if you click on co work, and this is the user interface for code.

00:29:45.335 --> 00:29:48.135
Now the big difference between co work and

00:29:48.455 --> 00:29:51.095
clot is the way they're working.

00:29:51.415 --> 00:29:53.175
So, actually, co work

00:29:53.415 --> 00:30:01.300
uses your screen to move around and do things, which means it takes screenshots of your screen, it clicks,

00:30:01.300 --> 00:30:03.940
and it just takes ages to do anything.

00:30:04.100 --> 00:30:05.700
And, yes, it will get faster,

00:30:05.940 --> 00:30:16.645
but 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

00:30:17.445 --> 00:30:18.565
looks like this

00:30:19.685 --> 00:30:27.310
because it does look a little bit intimidating. And again, we will actually cover all about this tool, how to install it, what you actually

00:30:27.790 --> 00:30:32.030
use it, and what you see on the screen when you open it. So we'll get back to this.

00:30:33.550 --> 00:30:39.310
But, yeah, Corework was built to just serve as a simple version of the code, and

00:30:40.745 --> 00:30:47.385
it's built into its very nature that it uses the graphical user interface to actually work and to

00:30:47.625 --> 00:30:59.050
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. On the other hand, Cloud Code can actually work through your file system,

00:30:59.530 --> 00:31:04.410
and it's not working by seeing what on the screen, but actually just reading the

00:31:04.810 --> 00:31:10.865
command lines and text. So it can just do things way faster, and it can do more things.

00:31:11.265 --> 00:31:20.145
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.

00:31:20.500 --> 00:31:26.820
And, 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

00:31:28.100 --> 00:31:38.545
there'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,

00:31:38.545 --> 00:31:45.265
you will just have way more leverage, you will be able to do different things and way more things that have, yeah, more value.

00:31:45.985 --> 00:31:50.520
That's it in this section, and in the next one, we'll learn how AI agents think

00:31:51.000 --> 00:31:52.200
and how they work.

00:31:53.080 --> 00:31:58.200
So if you think nothing else away from this course but just this fundamental framework

00:31:58.440 --> 00:32:10.135
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,

00:32:10.695 --> 00:32:12.535
which is that they are probabilistic

00:32:12.535 --> 00:32:13.495
in their nature.

00:32:13.895 --> 00:32:16.615
In other words, if we ask AI,

00:32:16.615 --> 00:32:17.415
an agent,

00:32:17.735 --> 00:32:19.015
to do something,

00:32:20.110 --> 00:32:22.750
it actually runs through a probability

00:32:23.390 --> 00:32:27.950
machine, and it just gives us an answer which is gonna be different every time.

00:32:28.350 --> 00:32:36.375
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

00:32:36.695 --> 00:32:37.895
in their nature,

00:32:37.975 --> 00:32:39.335
they are probabilistic.

00:32:39.335 --> 00:32:40.135
They are

00:32:40.455 --> 00:32:41.335
calculating

00:32:41.335 --> 00:32:44.695
the probability of what is the right answer

00:32:45.415 --> 00:32:46.295
for that request.

00:32:46.950 --> 00:32:49.830
So just to show you this, I will just say, hey.

00:32:51.270 --> 00:32:54.150
Hey, can you write a song, a short song

00:32:54.230 --> 00:32:56.870
about designers using plot code?

00:32:58.710 --> 00:32:59.350
And

00:32:59.830 --> 00:33:02.150
not plot code, but plot code.

00:33:02.595 --> 00:33:04.515
And let's do this three times.

00:33:06.115 --> 00:33:06.915
Boom.

00:33:08.355 --> 00:33:09.075
Boom.

00:33:10.275 --> 00:33:10.995
And

00:33:11.395 --> 00:33:11.875
boom.

00:33:15.840 --> 00:33:21.520
Control ship it. Verse one, chorus. Oh, verse two, chorus, bridge. Oh, true. Okay.

00:33:21.760 --> 00:33:22.560
I'm

00:33:22.880 --> 00:33:25.600
not gonna read it or even sing it.

00:33:26.240 --> 00:33:27.040
Another singer.

00:33:28.795 --> 00:33:38.795
Okay. Here'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. I used to pixel. DrewBox is a Figma.

00:33:39.195 --> 00:33:44.075
Okay. So we can see it's already slightly different even though the structure it's following is pretty similar.

00:33:44.510 --> 00:33:46.270
Ultra, bridge, chorus, verse.

00:33:46.750 --> 00:33:50.430
Same here, but we can always see that it only has one verse.

00:33:51.070 --> 00:34:07.805
Verse, chorus, verse, chorus. Yeah. There is verse, chorus, and then verse, chorus, ultra. Why 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. Okay. So bridge is missing in the last one. Anyway,

00:34:09.165 --> 00:34:11.645
you get the point. Right? It's probabilistic,

00:34:12.150 --> 00:34:15.430
and that's awesome because it's very creative.

00:34:15.750 --> 00:34:17.190
It can solve

00:34:17.350 --> 00:34:19.750
problems it hasn't seen before.

00:34:19.830 --> 00:34:21.510
It can brainstorm.

00:34:21.510 --> 00:34:25.990
It can be creative. It can really cover a lot of ground, and that's why we

00:34:26.470 --> 00:34:27.510
all of us are using it.

00:34:28.425 --> 00:34:29.145
However,

00:34:30.105 --> 00:34:30.985
sometimes

00:34:31.065 --> 00:34:35.865
in business and in life, you want something that's much more deterministic.

00:34:36.345 --> 00:34:42.745
And what deterministic means is that if you put the same input in, you get the same output out.

00:34:43.360 --> 00:34:47.200
Right? So if I give you the same input, I wanna exactly

00:34:47.200 --> 00:34:56.080
same thing out all of it. An example of that would be a code like a Python script. So just imagine a script that takes an image that we have created,

00:34:56.945 --> 00:34:57.505
and

00:34:58.225 --> 00:35:05.265
in the code, it's encoded that each time we run this script, we get three different variations of that image

00:35:06.465 --> 00:35:08.145
in different sizes.

00:35:08.145 --> 00:35:11.665
I don't know. One that's maybe focused or, like, specialized

00:35:12.350 --> 00:35:13.710
optimized for LinkedIn,

00:35:13.790 --> 00:35:15.070
one maybe for

00:35:15.870 --> 00:35:17.710
Facebook, and one for Instagram.

00:35:17.790 --> 00:35:25.625
Okay? 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

00:35:26.345 --> 00:35:28.105
cuts out different sizes.

00:35:28.345 --> 00:35:29.785
Now when I

00:35:30.105 --> 00:35:36.425
want these different sizes, I don't want my tool, AI tool to be creative. I just want it to do the thing

00:35:36.760 --> 00:35:37.480
that

00:35:38.200 --> 00:35:41.240
it has always done and just deliver the right result.

00:35:42.120 --> 00:35:45.720
So our job when we are working with AI and we're designing

00:35:46.120 --> 00:35:50.615
AI systems and orchestrating AI agents is to understand

00:35:50.695 --> 00:35:52.615
when to use which

00:35:52.855 --> 00:35:53.735
nature.

00:35:53.975 --> 00:35:55.255
So when to use

00:35:55.655 --> 00:35:57.495
AI's probabilistic nature

00:35:57.655 --> 00:35:59.335
and when to use scripts.

00:35:59.335 --> 00:36:02.375
The good thing about AI is that AI can act,

00:36:02.850 --> 00:36:05.330
and by nature, it acts as a probabilistic

00:36:05.410 --> 00:36:06.130
tool,

00:36:06.210 --> 00:36:08.290
but we can use it to help us build

00:36:09.650 --> 00:36:10.530
scripts

00:36:10.530 --> 00:36:11.330
quote.

00:36:11.330 --> 00:36:14.050
And that's why it covers both, and that's why it's so amazing.

00:36:15.250 --> 00:36:20.745
And that's why, yeah, it just has such a big impact. But I will actually cover more about

00:36:20.985 --> 00:36:22.345
how we can

00:36:23.385 --> 00:36:29.225
use AI to build codes and scripts and when to use it as probabilistic and deterministic

00:36:29.590 --> 00:36:30.230
in

00:36:30.390 --> 00:36:32.790
the fifth chapter of this video.

00:36:33.110 --> 00:36:40.790
So more about that later. For now, the main point is just that in its very nature, when you're using an AI, it's probabilistic,

00:36:41.110 --> 00:36:46.385
which is good, but also bad, and you need to know that this is its nature and when to use it.

00:36:47.345 --> 00:36:48.465
Great. Okay.

00:36:49.025 --> 00:36:54.385
So the next thing to understand is that especially this is important for us as designers is that

00:36:54.865 --> 00:36:57.825
AI is a language machine, but at least

00:36:58.510 --> 00:37:04.910
most of the well, definitely LLMs are language machines. There's also video models and image models.

00:37:06.110 --> 00:37:09.550
But in this course, we're covering plot code, which is using language models.

00:37:10.125 --> 00:37:10.765
So

00:37:11.245 --> 00:37:12.525
it's a language machine,

00:37:13.085 --> 00:37:17.805
not a visual machine. So even when you drop a screenshot

00:37:17.885 --> 00:37:18.605
into

00:37:18.765 --> 00:37:19.645
ClothCode,

00:37:19.645 --> 00:37:21.405
it does not see images.

00:37:21.565 --> 00:37:26.220
What it does, it basically tries to translate this into

00:37:26.860 --> 00:37:29.420
words or code or CSS.

00:37:29.420 --> 00:37:29.980
Right?

00:37:30.220 --> 00:37:33.340
And through that, it tries to understand what you're actually

00:37:33.740 --> 00:37:34.780
trying to

00:37:35.420 --> 00:37:38.220
tell it to do or what you're actually sharing with it.

00:37:39.565 --> 00:37:48.765
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

00:37:49.485 --> 00:37:58.460
show things, but we try to describe that. And this can be in words. This can be well, it could be code if you have an HTML version of your visual.

00:37:59.420 --> 00:38:03.580
One tool I wanna share here that really helped me a lot is to use

00:38:03.820 --> 00:38:07.305
these voice to text tools. If you just go

00:38:07.545 --> 00:38:14.425
on Google or any AI tool and just type in, hey. What are voice to text tools? You will find a few. Don't wanna promote any.

00:38:15.065 --> 00:38:23.100
So 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

00:38:23.100 --> 00:38:25.180
or, yeah, headphones,

00:38:25.420 --> 00:38:27.820
and you can just talk instead of write.

00:38:28.060 --> 00:38:32.940
And I just find it just much easier to talk out loud than to write out.

00:38:33.525 --> 00:38:39.045
And this way, I just share also what's on my mind and what am I seeing, what I wanted to change.

00:38:39.365 --> 00:38:39.925
So

00:38:40.405 --> 00:38:47.845
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.

00:38:49.270 --> 00:38:54.550
And one way to do this in a efficient manner is to use these voice to text tools.

00:38:57.110 --> 00:38:58.390
Next thing to

00:38:58.470 --> 00:39:02.215
always remember, I mean, we have all experienced this, but AI

00:39:02.295 --> 00:39:05.655
will give us false facts with full confidence.

00:39:05.895 --> 00:39:08.295
The it never hesitates. It doesn't really

00:39:09.175 --> 00:39:14.135
understand what is true and what is wrong. It's, as we said, probabilistic in its very nature.

00:39:14.375 --> 00:39:15.335
So it will just

00:39:16.250 --> 00:39:17.850
create something that

00:39:18.810 --> 00:39:21.290
and be very confident about it that

00:39:21.370 --> 00:39:23.130
isn't true or isn't working.

00:39:23.370 --> 00:39:32.465
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.

00:39:33.025 --> 00:39:33.825
This

00:39:34.145 --> 00:39:37.025
is fundamentally the role of a

00:39:37.985 --> 00:39:40.065
design agent or the

00:39:40.865 --> 00:39:45.185
employee working with agentic tools. It is to be that

00:39:45.960 --> 00:39:47.640
you know, like, a line

00:39:49.000 --> 00:39:51.400
like a filter for AIs to really know,

00:39:52.280 --> 00:40:01.335
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. One example of that was us. Remember?

00:40:02.535 --> 00:40:10.775
When we did the usability testing, we actually spawned out three different agents. So when three different agents go through the same process,

00:40:11.015 --> 00:40:16.290
you are just having more probability that you're covering more ground, and you actually find the

00:40:17.010 --> 00:40:18.210
right answer.

00:40:18.370 --> 00:40:20.130
So if we had, I don't know, one

00:40:20.930 --> 00:40:23.330
if you would be looking up a

00:40:24.450 --> 00:40:35.055
doing, a competitor research and you just ask one agent to do it, it would cover less ground and maybe uncover some fake facts. But if you ran five agents and let them come to a consensus,

00:40:35.215 --> 00:40:39.535
you could be much more confident in that answer. So this is how you can use AI

00:40:39.535 --> 00:40:40.255
to

00:40:41.200 --> 00:40:45.440
and it's very nature of the AI to actually get you better results. But at the same time,

00:40:45.840 --> 00:40:47.840
it's us on us as

00:40:48.400 --> 00:40:52.880
people who are orchestrating this to also review in the end or create a system that reviews.

00:40:53.120 --> 00:41:02.755
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. If it's more research

00:41:02.915 --> 00:41:10.400
or service, then it's just different type of thing you're reviewing. But ultimately, it is on us to give a green light.

00:41:12.560 --> 00:41:14.640
Okay. How to work with AI?

00:41:16.080 --> 00:41:18.640
So this is a ladder

00:41:18.640 --> 00:41:22.975
of how you can get more and more confident

00:41:23.135 --> 00:41:27.855
using AI and how you can be more and more confident in the results that you're getting out of it.

00:41:28.575 --> 00:41:32.415
So at the bottom, we have total and utter chaos,

00:41:33.055 --> 00:41:36.175
which is, yeah, using AI

00:41:36.480 --> 00:41:39.200
in a way where we get very probabilistic

00:41:39.760 --> 00:41:41.440
well, very creative answers.

00:41:41.680 --> 00:41:44.320
And then on top, we have something we can fully trust.

00:41:44.880 --> 00:41:47.920
And at the bottom of this ladder, we have

00:41:48.240 --> 00:42:03.655
the way most people are using AI, which is you open a new chat. It 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. We are just getting different answers every time, and it just it's also pretty generic.

00:42:04.310 --> 00:42:08.390
The way we get out of this is that we add some kind of rules to it.

00:42:08.870 --> 00:42:09.430
So

00:42:11.110 --> 00:42:16.950
if we are designers creating like visuals, what we could do is add certain like brand

00:42:16.425 --> 00:42:17.305
visuals,

00:42:17.305 --> 00:42:20.585
or, like, we could take our PDF of the brand guidelines and

00:42:21.145 --> 00:42:27.705
extract out of it the colors, the spacing, and so on. And we will write this in something called clot

00:42:28.105 --> 00:42:28.585
MD,

00:42:29.320 --> 00:42:33.560
and we will cover this later in the course. But it's just a system prompt

00:42:34.040 --> 00:42:34.760
that

00:42:34.840 --> 00:42:38.040
AI reads every time you open a new chat regardless

00:42:38.280 --> 00:42:41.800
yeah. Every time you open a new chat, it preloads this as context.

00:42:41.960 --> 00:42:53.595
So 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

00:42:53.675 --> 00:42:54.395
better.

00:42:54.555 --> 00:42:56.635
But if you really wanted to

00:42:56.795 --> 00:42:57.835
repeat exactly

00:42:58.800 --> 00:43:01.200
the rule every time and to just

00:43:01.360 --> 00:43:02.080
have

00:43:03.040 --> 00:43:07.600
yeah. Just have a a output that is much more deterministic

00:43:07.600 --> 00:43:08.640
and that

00:43:09.040 --> 00:43:10.400
you can trust more,

00:43:10.640 --> 00:43:12.560
then we need to get into the code.

00:43:12.880 --> 00:43:14.080
Right? Into the scripts.

00:43:15.305 --> 00:43:17.225
Meaning turning our design

00:43:17.945 --> 00:43:18.825
elements,

00:43:18.825 --> 00:43:21.065
our design ideas into CSS,

00:43:21.705 --> 00:43:27.145
into components, into language like, hey, spacing needs to be 16 pixels,

00:43:27.225 --> 00:43:31.110
and so on. Right? So the more we can get towards the code,

00:43:31.510 --> 00:43:35.190
the more we can trust the output of a tool like

00:43:35.590 --> 00:43:37.030
cloth coat.

00:43:37.190 --> 00:43:41.670
And mind you, look, sometimes we do want this because we want the tool to

00:43:41.750 --> 00:43:43.270
be more creative and

00:43:43.775 --> 00:43:46.895
cover more ground, and sometimes we wanna be here.

00:43:47.055 --> 00:43:48.095
But in general,

00:43:48.735 --> 00:43:50.575
most of our work should be

00:43:51.535 --> 00:43:58.000
especially the repetitive work, like the production work is all about moving up the ladder.

00:43:58.800 --> 00:44:01.520
Again, we will cover what ClotMD is,

00:44:01.600 --> 00:44:07.520
so don't worry about this. The main message right now is just repeating also this probabilistic and deterministic nature,

00:44:08.000 --> 00:44:10.960
and that we need to understand what we want

00:44:11.280 --> 00:44:11.760
when.

00:44:12.205 --> 00:44:17.005
And if we if we want AI to follow our taste, we need to encode it and use code.

00:44:18.125 --> 00:44:26.500
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

00:44:26.740 --> 00:44:31.860
an instance, so open up a new chat, open up a new agent, and it gave me 12 things to do,

00:44:32.820 --> 00:44:47.175
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.

00:44:47.255 --> 00:44:57.390
So 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.

00:44:58.510 --> 00:45:00.270
Next one is context,

00:45:00.270 --> 00:45:02.030
Rod. Extremely,

00:45:02.030 --> 00:45:03.310
extremely important concept.

00:45:04.375 --> 00:45:22.880
Not a lot of people are aware of this. So a year ago, I think there was this notion that, hey. The more context we can give to AI, the better. Right? So 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.

00:45:23.040 --> 00:45:25.760
It turns out there is something called context,

00:45:26.160 --> 00:45:29.520
which is the more tokens we spent,

00:45:29.760 --> 00:45:31.360
the more messages we sent,

00:45:31.925 --> 00:45:34.485
the worse the performance of the

00:45:34.885 --> 00:45:35.685
model.

00:45:35.685 --> 00:45:37.605
Meaning, like, after a 100 messages,

00:45:37.685 --> 00:45:41.685
the model might be performing just at 40% of its, like, peak

00:45:42.005 --> 00:45:42.885
quality.

00:45:43.285 --> 00:45:46.965
And in the beginning, the first 10 messages, you know, it's around, like, 100%.

00:45:46.965 --> 00:45:48.720
Well, it's never a 100%, but

00:45:49.200 --> 00:45:50.800
basically, it follows this kind of

00:45:51.440 --> 00:45:52.400
graph where

00:45:52.560 --> 00:45:53.280
first,

00:45:53.360 --> 00:45:54.640
it's for the first

00:45:54.880 --> 00:45:59.840
majority of the conversation, it's kind of acting okay, but then it just degrades very quickly and very drastically.

00:46:00.495 --> 00:46:04.255
So the whole idea of this is that when your chats or your

00:46:04.655 --> 00:46:07.455
conversations with agents get longer,

00:46:07.775 --> 00:46:15.990
then 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,

00:46:16.710 --> 00:46:29.830
in 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

00:46:30.615 --> 00:46:31.255
there.

00:46:32.215 --> 00:46:38.375
So, yeah, the way you can also measure this is that these tools do show you what percentage of context you have already used.

00:46:38.695 --> 00:46:41.815
For example, if you have, like, 200,000,

00:46:41.895 --> 00:46:43.495
200,000,

00:46:43.495 --> 00:46:43.975
which is

00:46:46.160 --> 00:46:48.160
some models give you 200,000,

00:46:48.160 --> 00:46:50.000
some give you 1,000,000.

00:46:51.040 --> 00:46:53.920
Once you get close to a certain number,

00:46:55.120 --> 00:46:58.720
then you basically just it's better for you to start a new chat.

00:46:58.995 --> 00:47:03.795
The general consensus right now with Cloud Code is that it starts to degrade around

00:47:04.515 --> 00:47:06.115
100 to 200,000

00:47:06.115 --> 00:47:07.075
tokens.

00:47:07.955 --> 00:47:11.475
It's also a topic of big debate because

00:47:12.330 --> 00:47:15.290
there is new research showing that it's getting better and better.

00:47:15.530 --> 00:47:20.410
So maybe by the time you're watching this, you can just have a look at the context rod. You could just maybe go on

00:47:21.210 --> 00:47:25.290
and even ask cloth, or we could just go on Google and Google for context rod, cloth,

00:47:26.345 --> 00:47:30.265
opus model, and so on, and just have a look at what is the current

00:47:31.545 --> 00:47:32.665
the current

00:47:33.625 --> 00:47:42.270
rule of thumb. My 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

00:47:42.590 --> 00:47:47.310
refresh or start a new agent around 100 to 200 k tokens.

00:47:47.310 --> 00:47:48.030
That's

00:47:48.590 --> 00:47:49.870
that's as of

00:47:50.750 --> 00:47:51.630
April

00:47:51.630 --> 00:47:52.510
2026.

00:47:53.725 --> 00:47:58.205
Okay. Actually, maybe just one last thing on why this is the case, why context

00:47:58.205 --> 00:48:02.765
rod happens. Well, it is exactly because these tools are probabilistic.

00:48:02.765 --> 00:48:05.645
So the more input we give it, the more

00:48:07.485 --> 00:48:07.725
well,

00:48:08.780 --> 00:48:12.540
the wider the net it needs to cast in terms of the options.

00:48:13.100 --> 00:48:16.700
Alright? So if I just give it very, very pointed prompt,

00:48:16.860 --> 00:48:20.300
it only needs to consider maybe, like, this, like, 10%

00:48:20.715 --> 00:48:29.035
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

00:48:30.155 --> 00:48:30.795
angle,

00:48:31.035 --> 00:48:39.760
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

00:48:40.000 --> 00:48:44.080
context window, and it just starts to degrade in terms of performance.

00:48:44.080 --> 00:48:49.040
So that's why this happens. And this is built into the very nature of LLMs, and

00:48:49.605 --> 00:48:55.445
we'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

00:48:55.685 --> 00:49:00.965
AIs and LLMs. It's just that we are able to hold in more context than they are.

00:49:02.720 --> 00:49:03.760
But let's see.

00:49:04.240 --> 00:49:10.480
Okay. So that's how AI agents think and work. Next one is setting up our agentic environment.

00:49:11.120 --> 00:49:15.840
Okay. So the first thing we need to talk about is three different environments or

00:49:16.095 --> 00:49:23.055
user interfaces that you have available when you're deciding to use Cloud Code. And these three environments

00:49:23.055 --> 00:49:25.295
or UIs are terminal,

00:49:25.935 --> 00:49:27.775
Cloud's desktop app,

00:49:28.015 --> 00:49:31.055
or something called IDE, which is integrated development

00:49:31.055 --> 00:49:31.535
environment.

00:49:31.880 --> 00:49:37.080
And if you've never used this or any of these, that's fine. I will go through them now and explain

00:49:37.080 --> 00:49:37.960
what they are.

00:49:38.280 --> 00:49:47.640
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.

00:49:48.575 --> 00:49:55.775
And 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

00:49:56.415 --> 00:50:03.860
Spotlight search if you're using Mac and just type in terminal, and then you will get this kind of command line interface

00:50:03.940 --> 00:50:05.700
where you actually are

00:50:05.860 --> 00:50:08.900
talking to your computer by typing in commands.

00:50:09.140 --> 00:50:18.535
So 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.

00:50:19.415 --> 00:50:22.455
So while I do have to say the terminal's

00:50:22.455 --> 00:50:25.255
version of Cloud Code is usually the most capable.

00:50:25.575 --> 00:50:34.990
Why? 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,

00:50:35.150 --> 00:50:42.350
but usually, they're not right away available also in these two options. But they usually trickle down to these in, like, couple of weeks.

00:50:43.095 --> 00:50:47.895
So it is definitely most capable and most recent version of Cloud Code,

00:50:48.375 --> 00:50:54.375
but it's the hardest to master just because of how we are used to using software, which is more graphically.

00:50:55.220 --> 00:51:05.700
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

00:51:05.860 --> 00:51:12.735
or maybe that's web page or anything else. You just have to always have terminal and then another software open next to it.

00:51:14.095 --> 00:51:19.535
So that's the downside, and, yeah, frankly, these are all the reasons we will not be using terminal in this course.

00:51:20.620 --> 00:51:25.740
Now the next option is the desktop app. So this is the native Anthropix

00:51:25.740 --> 00:51:33.180
desktop app in which we can see that we have option to do the chat, to do co work, and do coding. Now we're in the coding section,

00:51:33.420 --> 00:51:36.995
and you can see that it looks very familiar. There is a chat

00:51:37.715 --> 00:51:47.555
field 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.

00:51:47.715 --> 00:51:53.290
So that would be a folder in which it works, and then you can just chat with it in this

00:51:53.770 --> 00:51:54.650
environment.

00:51:54.970 --> 00:51:58.570
So it is easiest to use, but, again, it doesn't have the file preview,

00:51:58.570 --> 00:52:00.890
so that's another downside.

00:52:00.970 --> 00:52:02.890
And that's why we will actually be using

00:52:03.450 --> 00:52:04.410
IDE,

00:52:04.490 --> 00:52:04.890
which is

00:52:05.385 --> 00:52:09.225
examples of that would be anti gravity, which is Google's

00:52:09.225 --> 00:52:11.225
IDE. We have Versus Code,

00:52:11.385 --> 00:52:18.105
and then we have Cursor, and there's more of them. But the one we will be using is anti gravity. An advantage of these

00:52:18.590 --> 00:52:25.310
is that they do have file previews, we can actually go through our folders, and we can actually work through them.

00:52:26.350 --> 00:52:27.390
We can see

00:52:27.710 --> 00:52:40.395
the changes that we make into the files. So 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.

00:52:40.795 --> 00:52:43.355
It is simple to use, and it's interoperable.

00:52:43.355 --> 00:52:49.860
And that's a big point, which is if at any point in your journey, agentic journey, you don't wanna use

00:52:50.660 --> 00:52:52.660
anti Cloud Code anymore,

00:52:52.820 --> 00:53:01.985
you can actually just switch you can have the same folders, the same files, and just switch to another model. For example, Codex. You can just use Codex to OpenAI's

00:53:02.145 --> 00:53:12.305
basically competitor product to ClothCode, and you can just use OpenAI's models to basically do your work. So it means you're not locked in into Anthropic's

00:53:12.305 --> 00:53:13.665
way of working.

00:53:14.625 --> 00:53:15.185
So

00:53:15.520 --> 00:53:19.040
for all these reasons, we will be using antigravity

00:53:19.600 --> 00:53:21.760
and IDE as the environment.

00:53:22.000 --> 00:53:26.320
And, again, don't worry if you have never used this. I will explain everything how it's used.

00:53:26.960 --> 00:53:37.925
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,

00:53:38.005 --> 00:53:43.525
and you can also use Desktop app for certain use cases. But let's just simplify for now, and let's just focus

00:53:43.765 --> 00:53:44.085
on

00:53:44.680 --> 00:53:46.200
this one. K?

00:53:47.240 --> 00:53:47.880
So

00:53:48.600 --> 00:53:52.920
next step for us is to set this up, so to actually be able to use

00:53:54.200 --> 00:54:02.225
anti gravity and cloth code within it. So we need three things to be able to do that. The first is the subscription.

00:54:02.625 --> 00:54:06.385
So cloth code only works if you are a paying

00:54:06.545 --> 00:54:07.265
customer.

00:54:07.585 --> 00:54:09.585
So they have four, essentially,

00:54:10.970 --> 00:54:11.770
plans.

00:54:11.770 --> 00:54:16.410
First first is free, then it's pro, and then there is max, which comes in two different

00:54:17.050 --> 00:54:18.970
tiers. One is $100,

00:54:18.970 --> 00:54:20.490
and then one is $200.

00:54:20.730 --> 00:54:24.570
Essentially, it's similar to the pro version. It just gives you more usage.

00:54:25.035 --> 00:54:27.035
I would suggest you start with a pro

00:54:27.595 --> 00:54:35.435
just 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,

00:54:35.675 --> 00:54:36.635
then you can

00:54:37.435 --> 00:54:49.480
upgrade 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

00:54:49.560 --> 00:54:50.280
enough.

00:54:50.760 --> 00:54:55.985
I will not go through the whole flow of you subscribing. I'm assuming that's

00:54:57.265 --> 00:55:06.145
that's something that you're all comfortable doing. You could just click on dry cloth and just go through the flow, add your credit card, and then you have a subscription.

00:55:07.530 --> 00:55:11.610
One thing I would mention here is just that if your company doesn't let you use

00:55:11.930 --> 00:55:12.730
these

00:55:13.210 --> 00:55:16.170
models from Entropic or OpenAI

00:55:16.250 --> 00:55:17.050
for

00:55:17.530 --> 00:55:31.555
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.

00:55:32.835 --> 00:55:41.820
Luckily 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

00:55:42.540 --> 00:55:43.500
Entropic,

00:55:43.500 --> 00:55:45.660
from Google, from OpenAI.

00:55:45.660 --> 00:55:46.780
So this OpenAI,

00:55:46.780 --> 00:55:48.860
this is Google, this is Entropic.

00:55:49.255 --> 00:55:52.295
So there's all the latest models. You can see Sonnet 4.6,

00:55:52.295 --> 00:55:54.055
opens 4.6 as well here.

00:55:54.375 --> 00:55:57.655
And it basically means that you can use these models,

00:55:58.695 --> 00:55:59.895
but in between

00:56:00.215 --> 00:56:02.375
you, let's just say that this is

00:56:03.200 --> 00:56:03.840
you,

00:56:04.240 --> 00:56:05.760
and this is Entropic.

00:56:06.160 --> 00:56:07.280
So clot.

00:56:08.080 --> 00:56:11.040
This is you. In between, there is this company.

00:56:11.840 --> 00:56:15.120
An example of that would be Langdoc or Elo GPT, and there is more.

00:56:15.945 --> 00:56:27.945
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

00:56:28.620 --> 00:56:36.540
only 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.

00:56:37.260 --> 00:56:43.425
So essentially, it is just a way to make sure that you're using it in a safe manner and also compliant

00:56:43.425 --> 00:56:48.385
manner. So if that's a problem you're hitting within your company, maybe just have a look at the options.

00:56:48.625 --> 00:56:59.310
You don't have to use these specific ones. These are the two I have heard of. I think they're both German, but there might be more many more depending on the country you're from. So no excuses.

00:57:00.430 --> 00:57:08.030
Okay. So we have the cloud subscription. Let's go to IDE software. In other words, we now need to download Antigravity.

00:57:09.470 --> 00:57:17.905
So 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.

00:57:18.385 --> 00:57:20.305
So you can decide which

00:57:21.425 --> 00:57:25.105
download you need. If you're in Windows, you download here. If you're in Mac,

00:57:25.745 --> 00:57:27.585
just make sure that you're downloading the right version.

00:57:28.220 --> 00:57:33.660
If you just go on here and type in about this Mac, you'll basically see

00:57:34.300 --> 00:57:40.540
what kind of chip you have. In my case, it's m one. So if you see m something, it means you're an Apple silicon,

00:57:40.700 --> 00:57:44.385
and you would download this one. And if it says Intel,

00:57:44.545 --> 00:57:47.585
then obviously it's Intel's chip, so you download this one.

00:57:47.985 --> 00:57:50.225
After you click here, you will get

00:57:50.625 --> 00:57:55.585
the package on your downloads folder, and then you just open it up and finish the installation.

00:57:57.160 --> 00:57:58.440
After you have done

00:57:59.160 --> 00:58:00.200
installing it,

00:58:01.960 --> 00:58:06.840
bum. This is check mark. Then now we go through the list or to the steps of

00:58:07.400 --> 00:58:14.485
setting it up. And I will not be sharing my screen because I have already set this up, and I have rather just

00:58:15.525 --> 00:58:19.285
use my wife's computer to set it up also for her and took screenshots

00:58:19.605 --> 00:58:21.685
so that I don't mess up my own setup.

00:58:22.460 --> 00:58:25.100
But for you, it should be the same experience.

00:58:25.100 --> 00:58:27.980
You will see exactly all the steps you need to take in order to,

00:58:28.700 --> 00:58:29.260
well,

00:58:30.700 --> 00:58:37.545
start using anti gravity. So at this stage, at this screen, I'm assuming that you have installed anti gravity and opened it.

00:58:37.865 --> 00:58:43.465
And this is the first thing you will see. Welcome to anti gravity. Let's get you set up. You obviously click

00:58:43.865 --> 00:58:45.305
the button next,

00:58:45.545 --> 00:58:46.585
then we move on.

00:58:46.905 --> 00:58:52.310
Now you choose your editor theme. You can use the dark modern on any other that you like.

00:58:52.470 --> 00:58:53.990
Then, again, you click next.

00:58:54.470 --> 00:58:59.830
Then you choose how you wanna use anti gravity agent. I suggest you just go with review during development,

00:58:59.990 --> 00:59:01.030
then you click next.

00:59:02.515 --> 00:59:09.635
Again, here, just click next. It means it will download some of the extensions that are going to be useful when you're actually using this,

00:59:11.635 --> 00:59:14.435
and then you have to sign in to Google. So AntiGravity

00:59:14.435 --> 00:59:15.475
is Google's

00:59:15.930 --> 00:59:16.650
product,

00:59:16.810 --> 00:59:19.850
so you do have to sign in with your Google credentials.

00:59:20.890 --> 00:59:23.850
So you just click here, and then it's gonna open up your

00:59:24.330 --> 00:59:26.810
Gmail or Google Workspace

00:59:28.395 --> 00:59:29.275
page,

00:59:29.275 --> 00:59:30.635
and you just authorize

00:59:30.875 --> 00:59:33.035
Google to sign in, and that's it.

00:59:33.355 --> 00:59:39.035
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,

00:59:39.755 --> 00:59:44.510
everything I'm saying here, everything I'm saying here, it's equally useful,

00:59:45.470 --> 00:59:48.190
equally applicable to Versus Code.

00:59:48.350 --> 00:59:50.350
So these two tools look

00:59:50.510 --> 00:59:53.790
essentially the same, almost the same. There's minor differences.

00:59:54.030 --> 01:00:02.905
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.

01:00:03.865 --> 01:00:07.305
And if you get stuck using or installing it, you can just use,

01:00:07.625 --> 01:00:08.185
well,

01:00:08.425 --> 01:00:11.945
Clot Chat or Gemini Chat to just get you unstuck,

01:00:14.260 --> 01:00:23.220
which 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

01:00:23.540 --> 01:00:28.755
ask it to help you. So next thing you will see is, obviously, you will need to accept the terms of use,

01:00:28.995 --> 01:00:35.075
then Entegravity will ask you to install OSCA script, OSAS script on your machine.

01:00:35.235 --> 01:00:39.555
That is necessary. So just click okay here and put in your password for your computer,

01:00:40.330 --> 01:00:42.330
and then you'll get to the first

01:00:42.650 --> 01:00:43.370
screen.

01:00:43.770 --> 01:00:48.810
But we're not done yet. Right? Because what we have done now is we have just set up antigravity,

01:00:48.810 --> 01:00:50.730
but what we still need is

01:00:51.050 --> 01:00:54.730
an extension to use clot code within antigravity.

01:00:55.605 --> 01:00:56.245
Okay?

01:00:56.405 --> 01:00:59.925
So we do have anti gravity setup, but now we need to

01:01:00.325 --> 01:01:05.605
almost, like, add a plug in, you know, almost like a download an app on a phone to

01:01:06.165 --> 01:01:09.620
for this anti gravity to be compatible with cloth code.

01:01:11.940 --> 01:01:18.420
Well, actually, just a minor detour. What you will see here on the right hand side is an agent that's a built in agent

01:01:18.580 --> 01:01:19.780
by Entegravity.

01:01:19.860 --> 01:01:21.380
And if you click through

01:01:21.655 --> 01:01:23.255
well, if you click here,

01:01:23.575 --> 01:01:25.975
you will see that, actually, you can also choose

01:01:26.375 --> 01:01:27.815
SONET 4.6,

01:01:27.815 --> 01:01:29.335
and you can choose

01:01:30.455 --> 01:01:32.695
Opus 4.6, which are essentially

01:01:32.775 --> 01:01:34.135
Anthropix models.

01:01:35.100 --> 01:01:41.420
But I would suggest you don't do that because it's not doesn't have the same features as using Cloud Code natively

01:01:41.420 --> 01:01:42.940
within its extension.

01:01:43.580 --> 01:01:44.220
Okay?

01:01:44.620 --> 01:01:45.180
So

01:01:45.420 --> 01:01:55.335
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

01:01:55.655 --> 01:01:56.615
this option.

01:01:56.935 --> 01:01:58.295
This is extensions.

01:01:58.535 --> 01:02:03.670
Okay? Once you have done this, you need to type in clot code into search,

01:02:03.670 --> 01:02:05.590
and then you need to look for this

01:02:05.910 --> 01:02:07.190
kind of looking

01:02:08.630 --> 01:02:10.070
icon and option.

01:02:11.270 --> 01:02:13.350
Make sure that it's Anthropix.

01:02:13.430 --> 01:02:14.790
Alright? So there's some who

01:02:15.395 --> 01:02:24.195
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

01:02:24.195 --> 01:02:24.755
here.

01:02:25.075 --> 01:02:29.555
Alright. I'm just gonna highlight this again. It says Anthropix here, and you will see millions of downloads.

01:02:30.520 --> 01:02:37.560
You click install and also make sure auto out of the update is selected so that it's going to be updated automatically.

01:02:37.880 --> 01:02:41.560
The next thing you have to do is you have to click trust publisher and install.

01:02:42.120 --> 01:02:48.255
And the the way you know that it's installed is that you will now see uninstall button instead of install,

01:02:48.255 --> 01:02:48.895
obviously.

01:02:50.015 --> 01:02:51.375
And we're almost done.

01:02:51.935 --> 01:02:54.655
The next thing then is basically

01:02:54.655 --> 01:02:55.615
you will

01:02:56.960 --> 01:03:00.960
yeah. Next thing we have to do is you have to click this button here.

01:03:01.920 --> 01:03:04.160
Let me actually be a little bit more clear.

01:03:04.960 --> 01:03:05.520
All

01:03:06.640 --> 01:03:10.705
of these have have such a big thickness. So this

01:03:11.345 --> 01:03:13.025
this is Anthropic's

01:03:13.025 --> 01:03:15.185
logo. You have to click here

01:03:15.505 --> 01:03:16.785
in order to

01:03:17.265 --> 01:03:19.345
see a screen like this.

01:03:19.425 --> 01:03:20.625
Okay? So

01:03:21.505 --> 01:03:23.985
what we do now is we click on

01:03:24.560 --> 01:03:30.800
Cloud AI subscription because what we're doing now is we are connecting the extension with our own username,

01:03:30.800 --> 01:03:39.280
with our own plan. You know? If 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.

01:03:40.375 --> 01:03:46.055
So you click here, and it's going to ask you to open a page. Obviously, click open.

01:03:46.215 --> 01:03:49.735
The next thing you will see is in your browser, you will just

01:03:50.535 --> 01:03:52.695
there's gonna be a page open up by Entropic,

01:03:53.030 --> 01:03:57.990
and it's going to ask you to connect your clot code with your clot account.

01:03:58.310 --> 01:04:00.070
And you just click authorize,

01:04:00.150 --> 01:04:02.150
and then you will see a screen like this,

01:04:02.390 --> 01:04:03.670
and then you're ready.

01:04:04.150 --> 01:04:04.950
Welcome.

01:04:06.630 --> 01:04:07.990
Alrighty. So

01:04:08.385 --> 01:04:09.425
that means

01:04:10.065 --> 01:04:16.545
is that now we have everything ready to actually start using Cloud Code. We have the subscription. We have the ID software,

01:04:16.625 --> 01:04:19.585
and we have the Cloud Code extension within

01:04:20.140 --> 01:04:21.500
our IDE.

01:04:21.820 --> 01:04:22.540
Okay?

01:04:23.420 --> 01:04:30.540
Alrighty. So if you decided to use desktop app, you wouldn't have to do any of that. You could just jump in. But, again, I think for

01:04:30.700 --> 01:04:36.595
if you're serious about using agentic tools, that is a good investment to just go through this process.

01:04:37.795 --> 01:04:46.435
Okay. Now I want you to I will guide you through the controls. What do you actually see when you open up your anti gravity

01:04:46.915 --> 01:04:47.155
instance?

01:04:48.730 --> 01:04:53.370
So let me just open it up. So this is what we're exactly seeing.

01:04:53.930 --> 01:04:54.570
So

01:04:55.370 --> 01:04:56.490
in the middle,

01:04:57.050 --> 01:04:59.290
basically, we need to choose what folder

01:04:59.290 --> 01:05:00.170
we'll work with.

01:05:01.105 --> 01:05:07.345
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.

01:05:07.505 --> 01:05:08.145
But

01:05:08.785 --> 01:05:13.345
because agents do stuff on our computer, we need to give it a dedicated space.

01:05:14.100 --> 01:05:15.540
We need to give it a folder

01:05:15.780 --> 01:05:20.180
within each within which it will actually be doing its job.

01:05:21.620 --> 01:05:22.260
So

01:05:23.140 --> 01:05:29.060
you click open folder, and then you basically choose one of the folders you have. I suggest you create a new one. Let's just call it

01:05:29.605 --> 01:05:33.925
in my case, I'll call it demo. You can call it whatever you want, cloud codes,

01:05:34.485 --> 01:05:35.205
whatever.

01:05:35.445 --> 01:05:37.605
So just create it and then

01:05:38.405 --> 01:05:39.365
select it.

01:05:40.405 --> 01:05:45.580
Okay. So you can see that the view has slightly changed. Again, I'm going to close the agent.

01:05:46.140 --> 01:05:50.460
And here on the left, can see that now we have this my folder

01:05:50.700 --> 01:05:51.420
open.

01:05:52.460 --> 01:05:59.445
Within this folder, there is nothing yet. But as we now start building things, there's going to be more and more stuff in it.

01:06:00.245 --> 01:06:06.245
Okay. So what we need to do now is we need to open a cloth coat, and I'm just gonna click here.

01:06:08.240 --> 01:06:12.480
Actually, let's say it differently. So just type in command n

01:06:13.760 --> 01:06:15.360
and click here.

01:06:16.960 --> 01:06:19.040
Entity Guarantee frequently changes

01:06:19.520 --> 01:06:20.400
certain

01:06:21.035 --> 01:06:24.555
yeah, buttons to open things. But the most

01:06:25.195 --> 01:06:27.755
reliable way to open Cloud Code instance,

01:06:27.755 --> 01:06:30.235
if there's nothing on your screen, is to just click,

01:06:31.035 --> 01:06:33.675
command and letter n, command n,

01:06:34.420 --> 01:06:43.220
and then just click this button, and then you will get a Cloud Code chat. And this is what you wanna see. This is how you know you're actually talking to

01:06:43.380 --> 01:06:44.340
Cloud Code.

01:06:45.300 --> 01:06:49.220
There we go. So you just first send the first message, and you see if it's working.

01:06:50.075 --> 01:07:06.440
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. We are typing stuff in, and this is pretty, I think, familiar to to most of us.

01:07:07.400 --> 01:07:09.160
One thing I wanna do is just

01:07:10.120 --> 01:07:11.960
have this open. Yeah.

01:07:12.520 --> 01:07:21.415
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.

01:07:21.655 --> 01:07:34.910
You can obviously have multiple chats. You can open as many as you like. You can also use use hotkeys to move between these. So option command and left takes you left. Option command and right takes you right.

01:07:35.470 --> 01:07:36.910
Command w

01:07:36.910 --> 01:07:37.950
closes it,

01:07:38.350 --> 01:07:41.150
and you can also close it like this, obviously.

01:07:42.030 --> 01:07:48.685
Also, you can open the history here. If you just click here, you can see some of the previous sessions, and you can just also reopen

01:07:48.685 --> 01:07:49.405
those.

01:07:49.645 --> 01:07:51.565
And, also, you can open a new

01:07:51.805 --> 01:07:53.485
Claude code instance

01:07:53.965 --> 01:08:00.285
just by clicking the plus here. Right? That's another option. Instead of clicking it here, you can also click it here.

01:08:01.610 --> 01:08:04.170
Alrighty. What else do we have? So we have the chat,

01:08:04.330 --> 01:08:05.210
then we have,

01:08:05.690 --> 01:08:09.290
well, these commands. So whenever you type in slash,

01:08:09.450 --> 01:08:11.450
you will just see options

01:08:11.770 --> 01:08:15.770
of the things that you can do. We will just go through some of the most basic ones.

01:08:16.645 --> 01:08:19.605
And I think once you get more fluent, you can also just learn

01:08:20.325 --> 01:08:21.365
and add

01:08:21.685 --> 01:08:25.765
yeah. Learn how to use more of these. The most important ones are

01:08:26.085 --> 01:08:29.765
switching the model. Right? So by default, you will have

01:08:30.405 --> 01:08:31.685
Opus 4.6,

01:08:32.030 --> 01:08:33.950
which is their most capable model.

01:08:34.110 --> 01:08:38.270
You can also switch to Sonnet or Haiku, which are two of the

01:08:38.910 --> 01:08:43.550
less capable but also cheaper ones. Actually, let me just show you

01:08:44.545 --> 01:08:45.665
all the options.

01:08:47.265 --> 01:08:52.625
So as I was just saying, we have opus, we have sonnet, and we have haiku.

01:08:53.185 --> 01:08:53.825
And

01:08:55.025 --> 01:09:01.260
as the name suggests, you know, it's taking its analogy from the, well, poems.

01:09:01.660 --> 01:09:03.020
So Opus is

01:09:03.340 --> 01:09:07.420
the slowest but the most capable. Right? But also the most expensive.

01:09:07.980 --> 01:09:08.780
Sonnet,

01:09:08.940 --> 01:09:10.620
it's pretty fast,

01:09:11.020 --> 01:09:14.895
but it's much cheaper. Let's say, quite a bit cheaper than Opus.

01:09:15.295 --> 01:09:16.495
But it has, like,

01:09:17.215 --> 01:09:21.455
80 to 90% of the capability in terms of the thinking that Opus does.

01:09:21.615 --> 01:09:26.015
And then there is Haiku, who is just very, very fast and very, very affordable,

01:09:26.790 --> 01:09:30.550
but it's not as capable in terms of the thinking. So depending on the task

01:09:30.870 --> 01:09:38.870
at hand, you can just choose whichever you actually want. You can see there's a huge difference also in the prices. So $15

01:09:38.870 --> 01:09:43.025
per million tokens in Opus, $3 per million tokens for Sonnet,

01:09:43.185 --> 01:09:47.025
and a quarter of a dollar per million tokens for Haiku.

01:09:47.505 --> 01:09:48.465
If

01:09:49.745 --> 01:09:51.905
you are a pro or max subscriber,

01:09:52.145 --> 01:09:53.265
you will not

01:09:53.870 --> 01:09:57.950
be paying for this exactly these prices because you're heavily subsidized.

01:09:57.950 --> 01:10:01.390
But if you actually use their API tokens,

01:10:01.390 --> 01:10:06.670
which is a different kind of product, and let's leave that for another video if we ever do advanced version of this video.

01:10:07.505 --> 01:10:16.865
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

01:10:17.505 --> 01:10:19.105
and max accounts.

01:10:19.265 --> 01:10:21.390
Okay? But it's important because

01:10:21.710 --> 01:10:22.350
Opus

01:10:22.590 --> 01:10:27.790
spends most of our tokens, and if we need to save some of that, we can just use Sonnet.

01:10:28.190 --> 01:10:30.830
My suggestion is that you start with

01:10:31.470 --> 01:10:50.340
Opus. You 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. And then for certain very

01:10:50.580 --> 01:10:51.300
simple,

01:10:51.380 --> 01:10:52.340
agentic

01:10:53.060 --> 01:11:03.555
tasks, 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

01:11:04.195 --> 01:11:04.755
how

01:11:05.235 --> 01:11:14.130
is that called? Not extensions, but labels. Yeah. Labels in Gmail. And I just use Haiku for that because it's way faster. And then I use Sonnet and Opus for other

01:11:14.290 --> 01:11:15.010
things.

01:11:16.050 --> 01:11:16.690
So,

01:11:18.370 --> 01:11:20.130
yeah, going back to

01:11:20.290 --> 01:11:33.865
anti 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

01:11:34.425 --> 01:11:38.680
mid session. Right? I can start chatting with it first in Opus.

01:11:38.920 --> 01:11:42.520
Hey. This is Naya talking to Opus 4.6.

01:11:42.680 --> 01:11:48.680
Now mid chat, I can also change and go into model, and I can just use Haiku.

01:11:49.160 --> 01:11:51.560
And it says switch to Cloud Haiku.

01:11:51.725 --> 01:11:53.565
Okay? Then you can just do that.

01:11:54.445 --> 01:11:57.725
You can do the same also just with a slash command model,

01:11:58.205 --> 01:12:00.285
and you get to the same page.

01:12:01.325 --> 01:12:03.725
Next thing that's very, very important is also

01:12:05.030 --> 01:12:05.670
this,

01:12:06.150 --> 01:12:07.990
which is permission mode.

01:12:08.790 --> 01:12:09.430
And

01:12:09.670 --> 01:12:12.230
this is what most people are worried about, which is

01:12:12.870 --> 01:12:21.445
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.

01:12:22.005 --> 01:12:24.805
Four main ways, four main permission modes,

01:12:24.965 --> 01:12:26.725
ask before editing

01:12:27.845 --> 01:12:29.365
is basically whenever

01:12:30.260 --> 01:12:32.980
Cloud makes any change, any file,

01:12:33.140 --> 01:12:36.180
even delete like, not even deleting it, but moving it,

01:12:36.580 --> 01:12:39.540
editing it, creating it, it will always ask you.

01:12:41.060 --> 01:12:43.220
Next option is edit edit automatically.

01:12:43.395 --> 01:12:49.875
Let me just maybe zoom in so you can see who it is. So we have ask before edits. We have add it automatically,

01:12:50.115 --> 01:12:56.515
which is that once you give it a green light for that specific task, it will do that specific task without asking you

01:12:57.660 --> 01:13:04.940
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.

01:13:05.180 --> 01:13:14.504
Then 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

01:13:15.305 --> 01:13:16.265
all the time.

01:13:16.745 --> 01:13:30.360
So 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.

01:13:30.680 --> 01:13:35.960
And I'll show you how this looks like in a bit. And then the last is called bypass permissions,

01:13:35.960 --> 01:13:36.600
which means

01:13:37.160 --> 01:13:40.520
you just letting Cloud Code do whatever it thinks it needs to do.

01:13:41.655 --> 01:13:43.415
I don't recommend using this

01:13:44.855 --> 01:13:50.615
all the time, but I do use bypass permissions a lot after I have done the plan mode.

01:13:51.655 --> 01:13:57.550
But, again, I wouldn't recommend you do this right away or at all. Disclaimer, I'm not

01:13:59.310 --> 01:14:04.110
liable for any the yeah. Any work you do with Cloud Code, obviously,

01:14:04.350 --> 01:14:11.390
but I'm just sharing how I use it. So when I use it in the beginning, I used ask before edits all the time because

01:14:11.975 --> 01:14:15.334
I was trying to understand what is Cloth even doing.

01:14:15.655 --> 01:14:25.015
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.

01:14:25.590 --> 01:14:30.390
But I again, the way I usually use it is that I first do the plan mode on the

01:14:30.790 --> 01:14:38.165
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

01:14:38.405 --> 01:14:39.445
and also

01:14:40.165 --> 01:14:42.805
interruptions because if you ask for edit

01:14:43.045 --> 01:14:47.605
yeah. If you tell Cloud Code to ask you for permission for every single edit,

01:14:48.005 --> 01:14:52.965
it will just be clicking approve all the time. So it kind of defeats the purpose of also having an agent.

01:14:54.740 --> 01:14:58.980
So, yeah, that's on the permission modes. There is a fifth one,

01:15:00.420 --> 01:15:05.060
which conveniently is already available on terminal, but it's not available on the IDE.

01:15:05.475 --> 01:15:08.115
So just as a reminder, I was telling you that

01:15:08.435 --> 01:15:20.195
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. So in the anti gravity, we do not have the fifth

01:15:20.850 --> 01:15:24.930
permission mode, yes, which mode yet, which is called

01:15:25.410 --> 01:15:26.290
auto mode,

01:15:26.930 --> 01:15:28.210
which basically just

01:15:28.770 --> 01:15:30.450
means that Claw decides

01:15:30.610 --> 01:15:33.410
on its own when it just bypasses

01:15:33.410 --> 01:15:40.735
permissions and when it feels like it's doing something a little bit more critical, and then it asks you for your permission.

01:15:41.055 --> 01:15:47.380
So I would say this is probably much safer than bypass permissions. And once that fifth option is available,

01:15:47.700 --> 01:15:51.860
that's the one that you should use instead of the bypass permissions once you get to that level of

01:15:52.660 --> 01:15:53.540
comfortability.

01:15:53.540 --> 01:15:56.740
I don't know if that's a word, but you know what I mean. Comfortableness.

01:15:56.980 --> 01:16:00.580
Again, not sure if that's a word. Anyway, so that's the permission mode.

01:16:02.935 --> 01:16:08.615
Where we have let's see. This is this is my list of things we should go through. So permission modes

01:16:08.935 --> 01:16:09.735
covered.

01:16:10.215 --> 01:16:11.895
Model switching covered.

01:16:11.895 --> 01:16:13.015
Slash commands

01:16:13.095 --> 01:16:14.375
partially covered.

01:16:14.615 --> 01:16:15.735
So slash commands

01:16:16.660 --> 01:16:20.899
where we have the switch model, you can also click here and see your account usage.

01:16:22.900 --> 01:16:23.780
The one

01:16:24.020 --> 01:16:27.140
the one the last one I will share with you is just slash

01:16:27.460 --> 01:16:28.020
clear,

01:16:28.500 --> 01:16:31.300
which means you clear a conversation of all the

01:16:31.585 --> 01:16:37.985
well, of everything you have set so far. And the reason this is useful and important is for

01:16:40.625 --> 01:16:48.890
context route reason, which we have just covered. Right? So at a certain point of the conversation, once the performance of the model degrades,

01:16:49.130 --> 01:16:59.175
what 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. It writes a nice summary.

01:16:59.415 --> 01:17:04.135
I copy that summary, then I do slash clear. I clear the conversation

01:17:04.295 --> 01:17:05.335
and paste

01:17:05.655 --> 01:17:10.295
what I talked with it in the last session, and then I just continue the build.

01:17:11.620 --> 01:17:19.460
So that's why this slash clear is useful. And there's many other commands. I will not be covering all of them. They might also

01:17:20.500 --> 01:17:24.820
pop up while we are in the third section of the video where we're actually sharing how we're using it ourselves.

01:17:25.595 --> 01:17:35.515
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. And if I have forgotten any

01:17:36.075 --> 01:17:40.555
well, you can also use slash compact, which means it just compacts the conversation from,

01:17:41.270 --> 01:17:46.710
I don't know, if you had, like, thirty, forty messages, it will just try to compact that so that its token

01:17:46.710 --> 01:17:48.310
usage is less.

01:17:49.830 --> 01:17:54.230
But my approach is just to clear the conversation because it just gives you better performance.

01:17:55.525 --> 01:18:02.085
Already, tabs, we have talked about. Right? So you have you can have multiple tabs here of Clothes Code, and you can have three, four instances,

01:18:02.325 --> 01:18:04.565
and you can work on different things at the same time.

01:18:05.685 --> 01:18:07.125
You can see the past conversations.

01:18:09.470 --> 01:18:11.070
Let me just copy this.

01:18:11.950 --> 01:18:13.230
Copy this over.

01:18:14.830 --> 01:18:20.190
Hot keys, have talked about. And then, yeah, what you can also do is you can copy paste screenshots. So, basically,

01:18:21.625 --> 01:18:29.545
one way to bring documents into the conversation is to obviously bring them into this file or the folder that we have now dedicated

01:18:29.785 --> 01:18:33.225
for Cloud Code to work with. Right? Another option is to just,

01:18:33.840 --> 01:18:43.040
let'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,

01:18:43.360 --> 01:18:46.320
and now the image is added to this conversation.

01:18:46.845 --> 01:18:48.365
So you can also do that

01:18:48.765 --> 01:18:49.565
as well.

01:18:50.205 --> 01:18:58.445
And you can also upload things from your computer. You can add some context, and you can also ask it to browse web, but you can browse web even without you clicking this. So,

01:18:59.250 --> 01:19:05.410
okay, I think that covers the most important initial things that we need to know about how to use

01:19:05.810 --> 01:19:09.330
Cloud Code within anti gravity. So now let's

01:19:09.650 --> 01:19:10.610
do something with it.

01:19:11.365 --> 01:19:17.525
And I will just use a simple demonstration of what it can do. Don't take this as,

01:19:18.165 --> 01:19:30.620
oh, this is so simple. Why 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

01:19:31.180 --> 01:19:39.100
builds and examples a little bit later in the video. For now, just follow me. Okay? So what I want you to do is maybe go on

01:19:41.100 --> 01:19:42.700
let's turn our LinkedIn page

01:19:43.135 --> 01:19:44.495
into a

01:19:44.735 --> 01:19:45.535
website,

01:19:45.535 --> 01:19:47.295
into a VC

01:19:47.295 --> 01:19:48.975
or portfolio website.

01:19:49.455 --> 01:19:54.655
So my challenge to you is if you have gotten and if you have followed me so far, go on LinkedIn,

01:19:55.480 --> 01:19:56.600
find your profile,

01:19:56.760 --> 01:19:57.800
and then click

01:19:58.200 --> 01:20:05.560
save to PDF. What this will do is it will just save this page as a neat PDF as your CV.

01:20:06.760 --> 01:20:11.345
So that was just done for me. And what I will do now

01:20:12.305 --> 01:20:20.065
is 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.

01:20:21.890 --> 01:20:26.690
Where are you finder? Oh, here. Okay. So in my downloads

01:20:27.730 --> 01:20:31.570
section, I have profile, and then I would just carry it over here to the demo.

01:20:32.610 --> 01:20:35.810
I could have done the same thing also just in finder.

01:20:36.485 --> 01:20:38.405
Why? So I could just

01:20:39.685 --> 01:20:40.485
where is it?

01:20:41.205 --> 01:20:51.045
Yeah. 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.

01:20:51.850 --> 01:20:52.410
So

01:20:52.730 --> 01:20:58.330
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,

01:20:58.650 --> 01:21:01.610
which is what I was alluding to before about

01:21:01.930 --> 01:21:18.544
the 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.

01:21:19.425 --> 01:21:21.185
So what I want you to do

01:21:21.905 --> 01:21:22.625
now

01:21:22.900 --> 01:21:24.980
is basically turn this into a website.

01:21:25.380 --> 01:21:26.660
So let's

01:21:26.820 --> 01:21:31.460
change the permission mode to plan mode, and let's tell Claude to do this for us.

01:21:32.420 --> 01:21:37.780
Hey. I want you to turn the my my profile, which is a PDF with my

01:21:38.265 --> 01:21:40.505
CV into a,

01:21:40.665 --> 01:21:46.505
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.

01:21:47.465 --> 01:21:47.785
Yeah.

01:21:52.650 --> 01:22:01.130
Since 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,

01:22:01.450 --> 01:22:05.370
and we will together build a plan. And then I will approve the plan,

01:22:06.245 --> 01:22:06.885
and

01:22:07.205 --> 01:22:08.725
then, basically,

01:22:09.205 --> 01:22:11.205
it will only then it will build

01:22:11.445 --> 01:22:12.405
the website.

01:22:13.365 --> 01:22:17.365
It seems that it's looking for the PDF. I just found it.

01:22:18.165 --> 01:22:19.765
So one thing I could have

01:22:20.900 --> 01:22:31.700
sped this up was to actually tell it where this profile is, and the way to do this is to copy path. So if I just copy this over and I told it, hey. The profile

01:22:31.955 --> 01:22:32.915
PDF

01:22:32.915 --> 01:22:34.275
is here,

01:22:34.515 --> 01:22:39.075
then it would now look through my whole computer to find it. But it did find eventually,

01:22:39.955 --> 01:22:41.795
and now it's making a plan.

01:22:42.035 --> 01:22:46.030
And it's going to open this plan and probably ask me a few

01:22:46.590 --> 01:22:47.230
questions.

01:22:48.750 --> 01:22:50.990
Okay. Just finished planning,

01:22:50.990 --> 01:22:54.990
and it opened a plan here on the right hand side so we can review it and

01:22:55.310 --> 01:22:56.030
basically

01:22:56.270 --> 01:22:57.790
decide if that's good.

01:22:58.975 --> 01:22:59.775
Basically,

01:22:59.775 --> 01:23:08.575
it'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,

01:23:09.375 --> 01:23:10.175
which is great. And

01:23:12.040 --> 01:23:17.720
let's see the sections. There's gonna be navigation at the top. Great. There's gonna be hero. There's gonna be story,

01:23:18.040 --> 01:23:21.480
experience, education, contact, footer. All looks great.

01:23:22.040 --> 01:23:27.000
It's giving me some values for colors. But at this stage, actually, I think I would just accept this

01:23:28.065 --> 01:23:32.305
as a plan and just rather review it visually. So let's just do

01:23:32.545 --> 01:23:33.025
that.

01:23:33.985 --> 01:23:39.105
So what I did now is accepted it, and now I will switch to bypass permissions,

01:23:39.425 --> 01:23:39.905
and

01:23:40.785 --> 01:23:42.065
Cloud Code will

01:23:42.840 --> 01:23:45.080
create a single index HTML,

01:23:45.160 --> 01:23:51.160
and then we can have a look at it. What I wanna show in the meantime is also what is actually happening

01:23:51.400 --> 01:23:53.640
once you are giving a command

01:23:53.880 --> 01:23:55.240
to Cloud Code.

01:23:55.795 --> 01:23:57.235
Mhmm. So one big

01:23:57.875 --> 01:24:03.635
differentiator and advantage over other models is that it's really clear about its thought process.

01:24:03.875 --> 01:24:04.435
So

01:24:04.835 --> 01:24:15.320
here 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.

01:24:15.640 --> 01:24:24.635
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. Let me plan a personal website,

01:24:24.875 --> 01:24:33.835
some of the information. I'm thinking this should be a narrative driven personal brand rather than a full CV dump. I agree with that. Minimum modern, la la la la.

01:24:35.050 --> 01:24:39.210
And then it had a comprehensive plan, la la la. Okay. Actually, it's already done.

01:24:39.450 --> 01:24:40.090
So

01:24:40.890 --> 01:24:46.170
we can open this in a browser and see what it has done. I will actually ask it. Please

01:24:46.250 --> 01:24:48.250
open it up in

01:24:48.970 --> 01:24:49.530
in Chrome.

01:24:54.705 --> 01:24:55.505
There you go.

01:24:55.985 --> 01:24:57.425
Okay. So

01:24:58.385 --> 01:25:01.665
this we can see the navigation. We can see the color scheme.

01:25:05.120 --> 01:25:11.440
Yeah. I mean, pretty solid. It's not gonna be in any design awards for sure or not, but it's pretty solid.

01:25:13.200 --> 01:25:14.720
Can you create

01:25:15.200 --> 01:25:18.320
two more versions just with different

01:25:19.035 --> 01:25:20.155
visuals.

01:25:21.675 --> 01:25:22.555
Don't

01:25:22.795 --> 01:25:24.875
do dark mode again.

01:25:27.835 --> 01:25:34.555
And this is where the power of this agentic workflow comes in. It's just it's so easy to actually review,

01:25:35.140 --> 01:25:38.580
get a feel for it, give it new instructions. It has all the

01:25:39.060 --> 01:25:46.820
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,

01:25:47.575 --> 01:25:55.495
I 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,

01:25:55.735 --> 01:26:05.330
deploy one. Actually, let's do that. We 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.

01:26:05.650 --> 01:26:09.330
We'll pick one of those and then just put it online for you to see,

01:26:10.370 --> 01:26:21.975
yeah, how easy this has gotten and maybe why we all don't need Squarespace anymore. Let's see. Okay. So we have one more version here, and I guess I guess we're waiting for another one.

01:26:25.975 --> 01:26:27.895
Alrighty. We have two more versions.

01:26:28.535 --> 01:26:30.455
Open them up in Chrome.

01:26:33.430 --> 01:26:34.709
Okay. We have

01:26:35.510 --> 01:26:36.470
this version.

01:26:38.070 --> 01:26:41.430
So it's basically the same layout. It's just different colors,

01:26:41.670 --> 01:26:44.550
which is what I asked for, but it's actually I don't like this layout.

01:26:46.585 --> 01:26:51.865
But, anyway, I mean, I could have gone deeper into the conversation and give it feedback for how to

01:26:52.505 --> 01:26:53.385
improve this.

01:26:53.625 --> 01:26:56.024
What I wanna do inside is actually show you

01:26:56.505 --> 01:26:57.625
the real power of this,

01:26:58.540 --> 01:26:59.900
which is the following.

01:27:01.020 --> 01:27:03.100
Could you actually create a

01:27:03.900 --> 01:27:04.940
portfolio

01:27:05.100 --> 01:27:06.940
segment on this website?

01:27:07.420 --> 01:27:09.340
Because you have access to all my

01:27:09.660 --> 01:27:25.305
files. 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

01:27:26.110 --> 01:27:30.430
employers that I have been playing with Cloud Code, and I know how to use it.

01:27:30.990 --> 01:27:33.150
So, yeah, just pick a few, maybe four or five,

01:27:33.870 --> 01:27:35.870
and make a new section on the website.

01:27:36.030 --> 01:27:37.870
Just let's choose

01:27:38.910 --> 01:27:40.030
index

01:27:40.935 --> 01:27:45.415
lite as the one we're taking over into the next stage. So just work on that one.

01:27:49.415 --> 01:27:50.375
There we go.

01:27:51.975 --> 01:27:53.655
Clot. It's sort of cloud.

01:27:57.660 --> 01:28:00.300
So what I have now is

01:28:01.980 --> 01:28:05.340
at the more you're using ClotCode and the better

01:28:05.740 --> 01:28:06.460
you

01:28:06.780 --> 01:28:14.835
well, 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.

01:28:15.075 --> 01:28:18.275
We don't give it the access to write files

01:28:18.275 --> 01:28:27.590
all over our computer. It 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

01:28:27.910 --> 01:28:31.430
all of my computer to find all the things we have built together.

01:28:32.150 --> 01:28:38.645
It has the intelligence to be able to do that. And based on that, it will go create a section on the website,

01:28:39.125 --> 01:28:44.485
which is going to work as a very simple portfolio. Obviously, we would wanna make it a little bit more

01:28:44.885 --> 01:28:45.685
visual,

01:28:45.925 --> 01:28:47.925
and I would maybe take some screenshots.

01:28:47.925 --> 01:28:49.925
Actually, I could even ask you to take screenshots.

01:28:50.420 --> 01:28:52.260
Maybe that's gonna be the next stage.

01:28:53.940 --> 01:28:55.060
Actually, can you

01:28:55.460 --> 01:29:04.499
bring 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

01:29:05.220 --> 01:29:05.460
done.

01:29:06.195 --> 01:29:12.755
So that's gonna be my next message to it, but let's first see what it has done in

01:29:12.915 --> 01:29:14.435
this stage. Okay.

01:29:16.755 --> 01:29:30.080
Just 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.

01:29:31.360 --> 01:29:34.080
And we can see five of these examples.

01:29:34.480 --> 01:29:38.975
Let's see actually what happens if I click in. No. This would this is broken.

01:29:40.575 --> 01:29:48.895
But 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.

01:29:49.680 --> 01:29:51.920
So I'm trying to go back

01:29:52.720 --> 01:29:55.440
and asking it basically to make a

01:29:57.680 --> 01:30:02.080
to to bring in some screenshots. I mean, just take one screenshot

01:30:02.255 --> 01:30:04.575
of maybe, like, a landing HTML for

01:30:05.135 --> 01:30:06.735
each of those projects.

01:30:08.815 --> 01:30:12.815
Yeah. So let's see how we can also bring in some visuals.

01:30:13.615 --> 01:30:15.135
I'll be back with you when it's done.

01:30:16.810 --> 01:30:23.690
Okay. Took, let's say, roughly two minutes to do this. And you can also see that within this folder demo,

01:30:24.010 --> 01:30:26.650
there's a new folder called screenshots,

01:30:26.650 --> 01:30:28.090
which means it has

01:30:28.250 --> 01:30:30.410
tried to capture screenshots of these

01:30:31.445 --> 01:30:32.885
portfolio examples.

01:30:33.045 --> 01:30:35.524
Let's see what we have in

01:30:35.685 --> 01:30:36.325
Chrome.

01:30:36.645 --> 01:30:41.044
So if I now scroll on to work, there we go. We have some images here.

01:30:41.445 --> 01:30:45.960
So this one looks good. This one looks semi good. I mean, this

01:30:46.520 --> 01:30:47.160
white

01:30:47.400 --> 01:30:51.240
border here, it's probably just actually, this could be that

01:30:51.480 --> 01:30:52.680
the screenshot

01:30:53.080 --> 01:30:54.120
includes

01:30:54.520 --> 01:30:55.880
below the fold,

01:30:56.040 --> 01:31:05.135
which is the white ribbon or the next section is white. We could have worked on this to make it nicer. This one looks good, and these two do not look good.

01:31:05.535 --> 01:31:07.055
And I assume

01:31:07.695 --> 01:31:17.010
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.

01:31:17.650 --> 01:31:21.410
But I'm gonna stop here because my point here is just to show you

01:31:22.610 --> 01:31:32.215
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.

01:31:33.655 --> 01:31:37.255
And the last thing I wanna share within this section is just

01:31:37.655 --> 01:31:48.870
what 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.

01:31:50.470 --> 01:31:56.765
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.

01:31:57.885 --> 01:32:04.125
So that's basically what we're doing here over and over again. There is a more advanced version of that where actually,

01:32:05.310 --> 01:32:10.910
just go go just to go on a slight tangent, just imagine this is the more advanced version

01:32:11.470 --> 01:32:12.270
where

01:32:14.030 --> 01:32:19.390
agent also evaluates the result. So it's not us, but it's an agent also evaluating the result.

01:32:19.955 --> 01:32:23.234
But in this case, we are living somehow outside of this loop.

01:32:23.475 --> 01:32:23.874
So

01:32:24.675 --> 01:32:25.395
that's

01:32:25.875 --> 01:32:26.595
us.

01:32:27.075 --> 01:32:38.300
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,

01:32:38.540 --> 01:32:39.980
and that's

01:32:40.220 --> 01:32:51.655
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.

01:32:52.055 --> 01:32:53.495
It's making tweaking,

01:32:53.575 --> 01:33:01.495
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

01:33:01.655 --> 01:33:02.055
of

01:33:02.455 --> 01:33:04.055
the objective is very measurable,

01:33:04.215 --> 01:33:05.175
so the

01:33:06.170 --> 01:33:07.290
the load speed,

01:33:08.570 --> 01:33:18.375
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. So that's the more advanced version of this. But for

01:33:18.535 --> 01:33:20.295
all the intents and purposes of

01:33:20.535 --> 01:33:28.855
this 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,

01:33:29.175 --> 01:33:34.730
then agent does the work, and then we review it, and then give it another direction. So that's basically

01:33:34.810 --> 01:33:38.410
the basic agentic loop we'll be using over and over again.

01:33:38.730 --> 01:33:44.250
This also means that we have now finished the first section of this course, which is the technological context,

01:33:44.970 --> 01:33:54.545
which means now we understand how technology works and things. Now And we can go a little bit more into well, I mean, actually hide this for now. We can go into our own context.

01:33:55.345 --> 01:33:59.345
How do we bring our own work into it, and how do we actually get

01:33:59.825 --> 01:34:10.560
work 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.

01:34:11.040 --> 01:34:16.720
What we have done now is basically we have used ClotCode in the most rudimentary way

01:34:17.255 --> 01:34:24.615
basic way. So we basically asked it to do something without giving it any constraints or

01:34:24.775 --> 01:34:25.895
real rules

01:34:25.895 --> 01:34:27.415
in terms of our taste.

01:34:27.655 --> 01:34:32.375
Right? And that's why the result we have gotten at the end was pretty generic.

01:34:32.960 --> 01:34:36.640
It is what some people would also call AI slop,

01:34:36.720 --> 01:34:39.840
visually speaking. Visually speaking, it is quite,

01:34:40.080 --> 01:34:41.999
you know, basic. Nothing special.

01:34:43.360 --> 01:34:49.995
So what we wanna do now is we wanna basically go to level two. And the way you bring some rules

01:34:50.315 --> 01:34:52.715
in natural language into

01:34:52.795 --> 01:34:55.515
the AI or into agents

01:34:55.595 --> 01:35:00.955
is through something called system prompt, and a system prompt within Cloud Code

01:35:01.035 --> 01:35:04.770
is done through this Cloud MD file.

01:35:05.810 --> 01:35:10.210
So if you have never heard about it or seen it, don't worry. I'll show you everything.

01:35:10.770 --> 01:35:18.930
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. So let's head back into anti gravity.

01:35:19.505 --> 01:35:23.425
And what we will do now is we're still inputting the same folder demo,

01:35:23.585 --> 01:35:32.545
and we'll just ask it to ignore some of the things it has built, and just now follow this Claude MD file. So if you notice, now I have uploaded

01:35:33.040 --> 01:35:36.880
a new file Claude called Claude dot MD,

01:35:37.120 --> 01:35:39.280
and I will just ask you to follow it

01:35:39.680 --> 01:35:40.880
and basically

01:35:41.200 --> 01:35:46.400
create a new layout for the page or a new version of this personal page.

01:35:47.105 --> 01:35:48.865
So I

01:35:48.865 --> 01:35:49.425
have

01:35:49.665 --> 01:35:58.545
triggered the plan mode. So it's gonna take some time to go through the plan and build it out. So I'll be back when it's built out, the website. So here is the result.

01:35:59.850 --> 01:36:06.730
I mean, even just a quick glance just gives you completely different feeling. Definitely looks way

01:36:06.810 --> 01:36:07.450
more

01:36:07.850 --> 01:36:08.650
modern,

01:36:09.370 --> 01:36:21.905
also 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

01:36:23.185 --> 01:36:24.065
paddings.

01:36:24.145 --> 01:36:29.760
Yeah. Just just gives me a completely different vibe. Definitely looks something that I could use.

01:36:30.160 --> 01:36:36.160
And well, don't get me wrong. It's not, you know again, it's not gonna win any design awards,

01:36:36.400 --> 01:36:39.840
but we have now gotten to, like, level two of this

01:36:40.355 --> 01:36:41.395
of the result.

01:36:41.875 --> 01:36:50.275
Visually, we have defined certain things through the system prompt, and we have gotten a way better result. So let's have a look at what I actually fed into

01:36:50.515 --> 01:36:51.155
the

01:36:52.195 --> 01:36:53.635
Cloud Code by

01:36:54.000 --> 01:37:00.880
giving it Cloud MD. So if I click into this, what you will see is that I'm reading a simple text document.

01:37:01.200 --> 01:37:02.640
That's all it is.

01:37:03.440 --> 01:37:04.320
It has

01:37:04.640 --> 01:37:12.105
sections like project, so it tells Cloud more about what this folder is about. It has section about architecture,

01:37:12.265 --> 01:37:19.305
so how this folder is organized. There's code conventions. There is design system based on the d m b a

01:37:20.105 --> 01:37:32.550
branding. We have the content and the tone, so what kind of tone of voice we wanted to be using, and some rules. Right? And just with that additional input, he was able to create something that's way more aligned

01:37:32.790 --> 01:37:35.750
with what I actually wanna use. Right?

01:37:38.165 --> 01:37:43.045
So what I wanna do now is explain how this is how you can build your own

01:37:43.445 --> 01:37:46.805
and how this is even used. So if we go back to

01:37:47.285 --> 01:37:48.005
our

01:37:48.485 --> 01:37:49.765
board

01:37:49.460 --> 01:37:50.180
here,

01:37:55.220 --> 01:37:58.740
you will see that this is just a screenshot of a ClothCode

01:37:58.980 --> 01:37:59.780
chat.

01:38:00.340 --> 01:38:03.780
So every time I have a new chat with ClothCode,

01:38:04.765 --> 01:38:05.645
I'm

01:38:05.645 --> 01:38:12.605
writing, you know, something. I'm telling it what to do. And most people think that this is the only prompt that

01:38:13.005 --> 01:38:16.205
chats and agents are getting. But, actually,

01:38:16.525 --> 01:38:18.845
what happens is that every time I send a message,

01:38:19.420 --> 01:38:21.899
clot m d is basically

01:38:22.300 --> 01:38:23.260
inserted

01:38:23.340 --> 01:38:24.379
before that.

01:38:24.700 --> 01:38:29.339
So every time I open a new chat, clot reads clot dot m d.

01:38:29.820 --> 01:38:33.100
And that's why it's a system prompt because it's read every single time.

01:38:34.125 --> 01:38:38.845
So the hierarchy is as follows. First, it reads ClawdMD,

01:38:39.325 --> 01:38:41.245
and we could have some information

01:38:41.645 --> 01:38:45.085
about the brand. We could also have some other information in the ClawdMD.

01:38:45.645 --> 01:38:47.085
Then it reads our prompt,

01:38:47.550 --> 01:38:50.430
and only then does it give their response.

01:38:50.430 --> 01:38:58.910
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.

01:38:59.150 --> 01:39:00.670
But with CloudMD,

01:39:00.670 --> 01:39:06.935
we get basically something that feels on brand. It feels something like we would actually want to use.

01:39:07.815 --> 01:39:13.095
So the way you can think about it is almost like a design brief that runs before every conversation.

01:39:14.375 --> 01:39:23.190
So now just a few words on what even is dot m d. And the best way to explain is to

01:39:23.270 --> 01:39:26.390
explain the difference between maybe a PDF,

01:39:26.630 --> 01:39:30.230
which is the most common way we would usually work with documents,

01:39:30.310 --> 01:39:34.070
and MD. So PDF is optimized for rendering,

01:39:34.785 --> 01:39:40.945
meaning it gives us a reliable way to show text, to show document on different screens and also

01:39:41.265 --> 01:39:43.265
on printers when we print things.

01:39:43.585 --> 01:39:45.665
That's why it has way more

01:39:46.065 --> 01:39:46.785
metadata,

01:39:47.650 --> 01:39:49.890
way more tokens, way more information

01:39:50.050 --> 01:39:56.530
for agent to read than MD. MD is basically marked down, stripped down

01:39:56.850 --> 01:39:59.810
text file. So it only contains text,

01:39:59.810 --> 01:40:03.330
and the formatting is very, very basic. So formatting is

01:40:04.265 --> 01:40:08.025
basically only these, like, hashtags and these stars here.

01:40:09.385 --> 01:40:11.705
That's basically what formatting is,

01:40:11.865 --> 01:40:17.545
and you can see that it's way shorter than maybe a metadata information that is needed in a PDF.

01:40:18.340 --> 01:40:20.020
And why is that important?

01:40:20.340 --> 01:40:23.780
Well, it's important because of the context route.

01:40:24.260 --> 01:40:25.460
So the

01:40:25.540 --> 01:40:35.125
more context we feed into the model, the worse the performance. Right? There's a certain drop off. So that's why with markdown files, we're trying to be as optimal

01:40:35.605 --> 01:40:38.965
in terms of the file that we are putting into the LLM.

01:40:39.125 --> 01:40:41.845
And MDs are just very native,

01:40:41.845 --> 01:40:43.605
very yeah. Very condensed

01:40:45.330 --> 01:40:49.810
file types that are just optimized for agents and chats to use.

01:40:50.530 --> 01:40:56.210
So if you have PDFs with a lot of information and you want it to be more optimized for

01:40:56.850 --> 01:41:03.195
working with AI, you just can transform this into MD. There's free services online. You can ask ChatGPT.

01:41:03.195 --> 01:41:11.675
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.

01:41:12.635 --> 01:41:19.190
And 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?

01:41:20.550 --> 01:41:25.830
I will feed all the information into you, and you just help me build it out. So that's

01:41:25.830 --> 01:41:26.470
on the

01:41:27.425 --> 01:41:28.385
file type.

01:41:28.705 --> 01:41:31.825
So now we know basically what it is and why it's important.

01:41:32.305 --> 01:41:37.585
So now what would you typically put in it? So if you work in a technological context,

01:41:37.585 --> 01:41:39.265
working on a technological product,

01:41:40.100 --> 01:41:40.900
the

01:41:40.980 --> 01:41:43.780
main buckets would be the architecture

01:41:43.780 --> 01:41:44.820
of this

01:41:45.220 --> 01:41:48.260
project. So how is code base organized,

01:41:49.540 --> 01:41:50.580
where this

01:41:51.220 --> 01:41:53.780
where are the API keys stored, things like that.

01:41:54.575 --> 01:42:05.455
Then we would have code conventions, then we would have design system. Right? 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.

01:42:06.415 --> 01:42:23.350
So 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. Somebody 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

01:42:23.805 --> 01:42:24.765
preferences and

01:42:25.325 --> 01:42:30.125
yeah. Of not preferences, but also just the logic of this project.

01:42:31.405 --> 01:42:32.125
Now

01:42:32.685 --> 01:42:34.125
this is for

01:42:34.445 --> 01:42:35.405
technological

01:42:35.405 --> 01:42:35.885
context.

01:42:36.340 --> 01:42:41.540
If we would just strip down this to the most important parts of what we want in Claude MD, it is basically

01:42:42.100 --> 01:42:43.140
the what.

01:42:44.900 --> 01:42:46.100
It is the

01:42:46.980 --> 01:42:48.340
why and how.

01:42:48.660 --> 01:42:49.300
Okay?

01:42:49.700 --> 01:42:52.705
So we would talk about what is going on here,

01:42:53.025 --> 01:42:58.785
what is the goal of this, which is the why, and then how are things structured, how are things built.

01:43:01.345 --> 01:43:01.985
So

01:43:02.465 --> 01:43:06.945
one thing that's very, very important to talk about is also the recommended length for these things.

01:43:07.720 --> 01:43:12.200
The shorter, the better, I would say. So, like, 40 to 80 lines would be ideal.

01:43:12.760 --> 01:43:19.560
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.

01:43:20.185 --> 01:43:29.225
And what you do if you wanna split it out is basically the following. Right? You can see the CloudMD as kind of a hub hub and spoke system where it just

01:43:29.705 --> 01:43:37.000
basically tells agent, hey. If you ever need information on this, read this document. If you ever need information on that, read this document.

01:43:37.720 --> 01:43:43.960
In other words, hey. See brand guidelines here. You can see component rules here. You can see tone of voice here.

01:43:44.440 --> 01:43:51.055
So, yeah, CloDMD is read every time, and then it basically just tells the agent what it can find where.

01:43:52.655 --> 01:43:57.775
So what we would typically, as designers, put into a project, let's say, more like a product project,

01:43:58.015 --> 01:44:03.215
would be, yeah, like design system stuff, topography rules, naming conventions, tone of voice,

01:44:04.490 --> 01:44:05.610
component library,

01:44:05.690 --> 01:44:06.650
and so on.

01:44:07.450 --> 01:44:11.050
Now there's two additional things I wanna mention. One is

01:44:12.250 --> 01:44:14.330
call them these on different levels.

01:44:14.730 --> 01:44:18.410
So if we have a file called let's just say that,

01:44:19.385 --> 01:44:24.105
you know, I have this folder called demo, but let's say you called it clot.

01:44:24.185 --> 01:44:25.145
So on your

01:44:25.545 --> 01:44:28.505
machine somewhere, there is a folder called clot,

01:44:28.665 --> 01:44:31.705
and everything you will do with clot, you will just do in this one.

01:44:33.670 --> 01:44:34.870
So typically,

01:44:34.870 --> 01:44:37.350
in this root folder, you would have different

01:44:38.070 --> 01:44:40.310
file folders. Let's say one is called

01:44:40.470 --> 01:44:41.190
project.

01:44:43.510 --> 01:44:49.515
There is some other stuff. Doesn't really matter. But one of these here also would have ClotMD.

01:44:49.595 --> 01:44:50.235
Okay?

01:44:50.475 --> 01:44:51.835
That would be our

01:44:52.075 --> 01:44:53.755
main ClotMD.

01:44:54.315 --> 01:44:56.075
But then within each project,

01:44:56.315 --> 01:44:59.035
you know, we can have a project x, project y.

01:44:59.880 --> 01:45:03.080
Within each project, we can have another CloudMD,

01:45:03.320 --> 01:45:06.040
right, which talks just about that specific

01:45:06.600 --> 01:45:07.640
project.

01:45:08.920 --> 01:45:18.035
This is getting hard to write, but, you know, you get the point. So this is CloudMD, and this is CloudMD. So what would happen now when I open a new chat? Well,

01:45:18.355 --> 01:45:18.834
if

01:45:19.395 --> 01:45:21.795
if the root folder of accessed

01:45:22.035 --> 01:45:23.715
so if I open a Cloud

01:45:23.955 --> 01:45:27.010
code and I tell it to open this whole

01:45:27.330 --> 01:45:35.650
folder, it will by default just read this one. Right? This is gonna this is going to be what it's reading every time it opens you open a new chat.

01:45:38.065 --> 01:45:42.545
But if it realizes that actually you wanna work on project y,

01:45:42.865 --> 01:45:49.025
and project y has Claude MD, then it's and only then it's going to read the second one. Okay? So

01:45:49.580 --> 01:45:54.540
the message here is you can have multiple Claude MDs on different levels of the project,

01:45:54.860 --> 01:45:56.060
and then

01:45:57.020 --> 01:46:00.859
Claude will only call the correct one when it actually needs it.

01:46:01.420 --> 01:46:03.340
Additional side story here is that

01:46:03.845 --> 01:46:17.925
these CloudMDs on project levels usually do look like this, but then you might have a CloudMD which is more on a personal level. So 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

01:46:18.360 --> 01:46:19.320
who you are,

01:46:19.880 --> 01:46:22.040
what are your goals, like KPIs,

01:46:22.040 --> 01:46:23.160
who is your team,

01:46:23.480 --> 01:46:36.815
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? So it might be more personal, and then these are little bit more technical. But, yeah, basically, you can use this with the wherever

01:46:37.135 --> 01:46:43.855
whatever way you want and whatever a way it works for you. These are just some, like, basic fundamentals

01:46:43.855 --> 01:46:45.215
of how this actually works.

01:46:46.830 --> 01:46:49.470
Last thing that I need to mention here is that,

01:46:50.270 --> 01:46:52.110
obviously, as the name suggests,

01:46:52.430 --> 01:46:55.790
this is something that works with Cloth.

01:46:55.950 --> 01:46:59.470
So only Cloth code will actually read ClothMD

01:46:59.470 --> 01:47:00.270
by default.

01:47:01.195 --> 01:47:03.515
If you actually at any point of

01:47:03.835 --> 01:47:05.515
your work, actually

01:47:05.755 --> 01:47:07.195
I need to go back here.

01:47:08.475 --> 01:47:13.515
Let me just take this out. So if I actually at any point want to

01:47:14.750 --> 01:47:19.390
use this same project, not with Cloud Code, but maybe with Gemini 3.1,

01:47:19.390 --> 01:47:22.030
which is something I can do in Entegravity

01:47:22.030 --> 01:47:24.190
by using this agent sidebar,

01:47:24.350 --> 01:47:26.030
and just click Gemini 3.1,

01:47:26.205 --> 01:47:32.285
it will not read CloudMD by default, but it will read something else. It will read something called

01:47:33.725 --> 01:47:38.765
oh, this is gonna be a huge font, but it's going to read gemini.md.

01:47:38.765 --> 01:47:39.005
Okay?

01:47:40.130 --> 01:47:41.330
Gemini.

01:47:42.210 --> 01:47:43.010
Md.

01:47:45.570 --> 01:47:47.570
And if you actually use OpenAI,

01:47:48.050 --> 01:47:49.810
OpenAI,

01:47:49.810 --> 01:47:53.665
it will actually read something called agent dot m d.

01:47:55.425 --> 01:47:56.065
And

01:47:57.025 --> 01:48:10.470
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,

01:48:10.550 --> 01:48:17.830
you 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

01:48:18.070 --> 01:48:19.030
agentic

01:48:19.030 --> 01:48:19.350
tools.

01:48:20.655 --> 01:48:30.015
Alrighty. 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.

01:48:30.335 --> 01:48:35.615
So I don't feel like the best way to start your project is to build out the CloudMD.

01:48:35.615 --> 01:48:44.870
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.

01:48:45.350 --> 01:48:49.190
Unless you already have a huge running project that you wanna transfer into

01:48:50.305 --> 01:48:55.425
Cloud Code, then you can just open the folder and maybe ask it to help you build CloudMD

01:48:55.425 --> 01:48:56.225
with you.

01:48:57.345 --> 01:49:06.410
Also, 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.

01:49:06.410 --> 01:49:18.810
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. It's just a good practice

01:49:19.205 --> 01:49:23.205
to do, especially if there's more people working on it so that you're getting more reliable

01:49:23.365 --> 01:49:24.165
results.

01:49:24.645 --> 01:49:30.565
So that's it about the system prompt. Next on is the three layer architecture.

01:49:31.770 --> 01:49:37.050
So the first thing we need to talk about is the fact that AI is not a silver bullet.

01:49:37.290 --> 01:49:43.690
However, most of us treat it as such. We just give various tasks to AI and just expect it to

01:49:44.305 --> 01:49:45.905
magically do its job.

01:49:46.385 --> 01:49:49.024
And the reason that a lot of us are

01:49:49.425 --> 01:49:53.025
unhappy with the results is that we are forgetting that AI is very probabilistic

01:49:53.025 --> 01:50:00.150
in its nature, meaning that even if we give it the same exact prompt, there's gonna be slight variance in the answers.

01:50:00.470 --> 01:50:02.710
So it's not deterministic,

01:50:02.710 --> 01:50:07.670
and it's not highly reliable in terms of the output that we will get, but we use it that way.

01:50:08.470 --> 01:50:11.030
And if we know that it's probabilistic in its nature,

01:50:12.235 --> 01:50:17.195
there is a very important lesson about how we should actually be using AI.

01:50:17.435 --> 01:50:22.395
Let me illustrate this with an example of a designer working for an ecommerce

01:50:22.715 --> 01:50:23.195
brand.

01:50:24.190 --> 01:50:41.865
So 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,

01:50:42.185 --> 01:50:44.985
each product maybe needs to have an SQ

01:50:45.145 --> 01:50:45.785
number,

01:50:46.745 --> 01:50:50.505
and that is basically the name of the file. So the SQ number, SQ,

01:50:51.410 --> 01:51:02.130
and 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.

01:51:02.130 --> 01:51:05.395
If the background is not good enough, we need to cut it out,

01:51:05.795 --> 01:51:10.355
add new one. We need to then export these images in different variants because

01:51:10.435 --> 01:51:13.075
the product images are placed on different,

01:51:13.955 --> 01:51:16.675
well, different sites, and we just need different

01:51:17.590 --> 01:51:20.070
frames and ratios and sizes.

01:51:20.550 --> 01:51:27.110
And then we need to upload all of this to our asset library, and then we also need to do this well, we need to

01:51:28.150 --> 01:51:32.550
import these images to the I believe this is product

01:51:31.845 --> 01:51:32.565
placement

01:51:32.885 --> 01:51:33.925
product page

01:51:35.285 --> 01:51:40.725
product description page, I believe this is. Anyway, just on on our website where basically these images

01:51:41.045 --> 01:51:42.485
will live.

01:51:42.885 --> 01:51:44.645
So what I see

01:51:44.885 --> 01:51:46.165
all of us doing

01:51:46.565 --> 01:51:48.085
is we give

01:51:48.940 --> 01:51:59.980
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.

01:52:00.300 --> 01:52:04.945
We just give it, like, basically a list. Hey. Do this. Do that. Then do this.

01:52:05.345 --> 01:52:07.504
And we're hoping that it's going to work.

01:52:08.225 --> 01:52:08.865
And

01:52:09.425 --> 01:52:10.544
or sometimes,

01:52:10.705 --> 01:52:14.785
more frequently, we see that this isn't working, so we just give it this task,

01:52:15.105 --> 01:52:19.880
maybe this task, this task, this one, and that one separately,

01:52:20.280 --> 01:52:21.320
and then

01:52:22.680 --> 01:52:36.734
we have to do a lot of reviews, obviously. And 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.

01:52:37.295 --> 01:52:38.575
So the reason that

01:52:39.775 --> 01:52:42.655
a lot of us are not getting good results with AI

01:52:42.895 --> 01:52:45.135
is because of its probabilistic nature.

01:52:45.630 --> 01:52:46.990
So let's say that

01:52:47.230 --> 01:52:48.990
for each of these tasks,

01:52:49.230 --> 01:52:51.070
AI has a 95%

01:52:51.070 --> 01:52:53.310
chance of getting it right.

01:52:53.550 --> 01:52:55.710
So let's just do 95%

01:52:55.710 --> 01:52:56.590
chance.

01:52:56.750 --> 01:53:01.975
Right? So what does that mean? Well, that means if we stitch all of these five together,

01:53:02.135 --> 01:53:06.615
we get zero nine five to the power of five

01:53:07.015 --> 01:53:08.055
chances

01:53:08.135 --> 01:53:09.655
of getting it right.

01:53:09.975 --> 01:53:11.655
So that would mean that basically,

01:53:12.390 --> 01:53:14.230
we have roughly 70%

01:53:14.310 --> 01:53:15.430
77,

01:53:15.510 --> 01:53:16.390
I believe.

01:53:16.950 --> 01:53:19.910
I did the math upfront. I'm not a math genius. So

01:53:20.230 --> 01:53:21.670
roughly 77%

01:53:21.670 --> 01:53:22.790
chance of

01:53:23.590 --> 01:53:26.710
AI getting this full process right

01:53:27.445 --> 01:53:30.725
if we just, you know, give you the full thing.

01:53:31.605 --> 01:53:32.245
And

01:53:32.645 --> 01:53:35.205
this goes to the core of why

01:53:36.565 --> 01:53:39.045
a lot of us are, you know, not

01:53:39.205 --> 01:53:40.485
happy with the results,

01:53:41.445 --> 01:53:46.680
and it also goes to the core of how we should actually be using it, which brings us to

01:53:47.240 --> 01:53:48.999
the three layer architecture.

01:53:49.000 --> 01:53:55.160
And the best way to explain the three layer architecture is to first, you know, compare with how we're usually using AI,

01:53:55.240 --> 01:54:00.295
which is that we we are serving as some kind of instruction input,

01:54:00.855 --> 01:54:06.135
and then we are just asking AI to execute. And I and we're using AI here.

01:54:06.455 --> 01:54:11.510
And because of its probabilistic nature, we have a high variance in the answers.

01:54:11.990 --> 01:54:23.510
And, you know, in business, high variance, especially in the later in the pro product stage. So the closer you are to production, less variance you wanna have, the more reliability you wanna have,

01:54:25.045 --> 01:54:33.365
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.

01:54:34.085 --> 01:54:34.725
So

01:54:34.965 --> 01:54:36.245
I want us to think about

01:54:37.420 --> 01:54:38.540
using AI

01:54:39.500 --> 01:54:40.380
agentically.

01:54:40.380 --> 01:54:46.459
If we talk about using agentic AI, I want us to think in three different layers. One is there's instructions,

01:54:46.940 --> 01:54:51.655
which usually typically come from us, from user, and then there is orchestration,

01:54:51.735 --> 01:54:53.255
and then there is execution.

01:54:53.495 --> 01:54:58.375
So there's additional layer here. Right? So we only had execution here, and now we have orchestration

01:54:58.455 --> 01:54:59.335
as well.

01:55:00.135 --> 01:55:00.775
So

01:55:02.470 --> 01:55:09.110
let's break this down. So instruction is still us telling the system to do something. But now we're not telling the system,

01:55:09.350 --> 01:55:16.870
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.

01:55:17.325 --> 01:55:21.325
But then when it comes to execution, we give it two options. Either

01:55:21.645 --> 01:55:23.325
it's gonna use its

01:55:23.805 --> 01:55:24.765
brain,

01:55:25.085 --> 01:55:34.740
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,

01:55:35.140 --> 01:55:42.020
in 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

01:55:42.260 --> 01:55:45.300
as opposed to just letting AI execute

01:55:45.300 --> 01:55:45.780
this thing.

01:55:46.835 --> 01:55:48.675
So let me go back

01:55:49.235 --> 01:55:50.915
to our example here

01:55:51.475 --> 01:55:58.275
and explain how this would look like here with us trying to make these photos ready for the website.

01:56:00.195 --> 01:56:00.755
So

01:56:01.690 --> 01:56:04.730
if we were to use the three layer architecture,

01:56:04.730 --> 01:56:16.185
what we would do is we could build a so called skill, and I'll talk about skills in a minute. We could build a skill that basically tells AI to act as an orchestrator, and when it gets images,

01:56:16.585 --> 01:56:19.785
it can use its logic, so the AI part,

01:56:20.025 --> 01:56:34.840
to actually pick images. Right? 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. We didn't we don't want AI to be innovative,

01:56:35.320 --> 01:56:40.600
creative with how it's naming our files because we have a very specific naming convention.

01:56:40.920 --> 01:56:42.280
And if we give AI

01:56:42.360 --> 01:56:44.200
the task to name our files,

01:56:44.995 --> 01:56:50.915
there's gonna be typos. There's gonna be some hallucinations. There's going to be mistakes. So we'd rather use a script.

01:56:51.795 --> 01:56:53.955
Next, in terms of the background cleanup,

01:56:54.355 --> 01:57:05.169
we 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

01:57:06.370 --> 01:57:08.690
well, actually, when it's good enough to just flatten

01:57:09.090 --> 01:57:11.330
the image or all the layers in the image.

01:57:12.245 --> 01:57:15.845
Next, we go to the next step. Here, we have basically

01:57:16.325 --> 01:57:18.645
two things that, well, our

01:57:18.805 --> 01:57:27.125
scripts can do. So just resize the images and maybe name them. Maybe we could even have the AI step here where actually it defines,

01:57:27.650 --> 01:57:29.730
you know, what is the focal point of the image

01:57:30.050 --> 01:57:32.610
based on using using image recognition.

01:57:32.770 --> 01:57:38.050
It could define the focal point so that when we are resizing these things, we still have the product in the center.

01:57:38.770 --> 01:57:43.490
Then we have the asset library step where, again, we could have a script that helps us upload this

01:57:44.415 --> 01:57:50.495
upload this images, but then AI takes care of tagging based on what is an image. It could

01:57:50.895 --> 01:57:52.015
add tags

01:57:52.095 --> 01:57:53.215
to this

01:57:53.615 --> 01:57:54.175
product.

01:57:54.895 --> 01:58:00.249
And then in the last step, it could help us write the URL of this product description page.

01:58:00.650 --> 01:58:09.050
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.

01:58:10.305 --> 01:58:13.745
So what we have done here is we actually

01:58:14.945 --> 01:58:16.305
try to use

01:58:16.705 --> 01:58:17.665
intelligence

01:58:17.665 --> 01:58:21.025
and code for what they are best at.

01:58:21.345 --> 01:58:23.505
We didn't just give everything to AI.

01:58:24.280 --> 01:58:35.480
We really tried to define, hey. These 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,

01:58:36.680 --> 01:58:38.360
like, build a world

01:58:38.605 --> 01:58:39.645
or a

01:58:39.965 --> 01:58:40.685
process

01:58:40.765 --> 01:58:44.605
where we have best of both worlds. And that brings us

01:58:45.165 --> 01:58:47.005
way higher from 77

01:58:47.005 --> 01:58:49.245
closer to 90 or 95%,

01:58:49.245 --> 01:59:04.290
so 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. We'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.

01:59:05.505 --> 01:59:14.145
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,

01:59:15.265 --> 01:59:17.265
when do we want its intelligence,

01:59:17.345 --> 01:59:19.345
and when do we want something that's just

01:59:19.800 --> 01:59:21.880
very repeatable, very reliable,

01:59:22.280 --> 01:59:24.040
and then let's use code.

01:59:24.280 --> 01:59:34.095
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

01:59:34.335 --> 01:59:37.055
use intelligence and build scripts.

01:59:38.575 --> 01:59:39.215
So

01:59:40.495 --> 01:59:42.575
one thing to talk about here is

01:59:43.295 --> 01:59:44.175
Cloth skills.

01:59:47.060 --> 01:59:50.020
But actually, maybe before we go into cloud skills,

01:59:50.340 --> 01:59:54.899
let's have a look at just one example of of of what I have built

01:59:56.980 --> 02:00:00.545
to help me in the DMBA. Right? So

02:00:00.705 --> 02:00:04.385
DMBA, as I was saying before, it's a business school for designers.

02:00:04.865 --> 02:00:07.185
And there is one really nagging

02:00:08.385 --> 02:00:11.345
process that we had to take after

02:00:11.585 --> 02:00:18.709
every student call. So what we have is each month, there is practice sessions and coaching calls, and the practice sessions

02:00:18.870 --> 02:00:20.550
are mandatory,

02:00:20.550 --> 02:00:30.185
meaning 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

02:00:30.425 --> 02:00:40.905
just 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.

02:00:41.690 --> 02:00:47.530
They had to navigate to reports. They had to find the right meeting and then download a CSV file, which looks like this.

02:00:47.930 --> 02:00:51.290
So here on the first row, we have the name of the student,

02:00:51.530 --> 02:00:57.615
then we have how long were they in the call, and that's it. Now the issue with the first row here is that

02:00:57.935 --> 02:01:05.695
we wouldn't really get full names. Right? Sometimes we would just get their first name. Sometimes it's even initials.

02:01:05.695 --> 02:01:07.375
You know, like, for me, it would be AF.

02:01:07.890 --> 02:01:10.130
Sometimes it's a company name. So

02:01:10.770 --> 02:01:13.970
you have to use a lot of intelligence to actually figure out

02:01:14.530 --> 02:01:19.090
which students were in a call, and then because when we would have to open a spreadsheet,

02:01:19.330 --> 02:01:25.495
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.

02:01:26.615 --> 02:01:27.175
So

02:01:28.055 --> 02:01:36.695
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

02:01:37.670 --> 02:01:40.550
also the scripts to be able to actually do that.

02:01:41.030 --> 02:01:41.590
So

02:01:41.830 --> 02:01:46.550
the way it works right now is we have built a so called cloth skill,

02:01:47.110 --> 02:01:59.355
where the only thing I have to do is basically go into a cloth code instance. Just type in, hey. Run the attendance report. Here's the URL or the ID of the meeting, and here's the

02:01:59.835 --> 02:02:04.075
URL of the spreadsheet, and this is the column in which I want you to write your report.

02:02:05.195 --> 02:02:06.395
And that's it. And then

02:02:06.920 --> 02:02:10.520
this does it in thirty seconds, and it's highly highly reliable.

02:02:10.760 --> 02:02:16.120
As opposed to us needing to do this by hand, which was like an hour or maybe even sometimes two hours of work,

02:02:16.920 --> 02:02:17.800
just because,

02:02:17.960 --> 02:02:27.975
you 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.

02:02:30.375 --> 02:02:41.040
The 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

02:02:41.360 --> 02:02:45.999
for the following thing, or I would help like you to help me build a skill.

02:02:46.880 --> 02:02:49.680
And then you just, in natural language, explain

02:02:49.985 --> 02:02:51.185
what you wanted

02:02:51.585 --> 02:02:59.984
to 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.

02:03:01.025 --> 02:03:06.940
They need you to join for at least ten minutes. Then you I want you to mark it as attended in this spreadsheet.

02:03:07.340 --> 02:03:10.300
The hardest part is matching names from the CCV

02:03:11.100 --> 02:03:13.980
because not every time they have the right name.

02:03:15.755 --> 02:03:17.675
Also, ignore the t m DMB

02:03:18.155 --> 02:03:24.075
so DMB team members in the TCP file. There's just a lot of, you know, nuance

02:03:24.395 --> 02:03:27.595
that AI needs to get. Right? So

02:03:27.755 --> 02:03:29.515
what basically

02:03:31.150 --> 02:03:32.430
what basically

02:03:34.030 --> 02:03:37.470
I have done is build a script that is just highly highly reliable,

02:03:37.710 --> 02:03:48.345
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,

02:03:48.585 --> 02:03:53.705
and then hands over to intelligence to figure out the names, so which name fits to which

02:03:54.665 --> 02:03:55.545
spreadsheet row,

02:03:56.270 --> 02:04:01.950
because that's the part where you cannot use a script because that is there's a high variance. There's new names, new students.

02:04:02.430 --> 02:04:08.510
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

02:04:08.910 --> 02:04:11.735
for new and for whom he

02:04:11.975 --> 02:04:13.095
it doesn't

02:04:13.095 --> 02:04:14.775
know which row they belong to.

02:04:15.175 --> 02:04:15.735
So

02:04:16.135 --> 02:04:20.374
it's a really good example where the script does the heavy lifting of extracting certain things,

02:04:20.775 --> 02:04:30.830
and then intelligence basically basically is used where it needs to be used, which is sorting the names to the sheets. And the way I build it is even to tell it to, hey. If you're 90%

02:04:30.830 --> 02:04:32.590
or more sure about

02:04:32.830 --> 02:04:33.470
this

02:04:34.430 --> 02:04:35.310
student

02:04:35.550 --> 02:04:36.670
being in the spreadsheet,

02:04:37.095 --> 02:04:44.135
just 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

02:04:45.335 --> 02:05:01.070
where they fit into the spreadsheet. And 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.

02:05:04.110 --> 02:05:08.510
The thing I wanted to also show you here is that I have never built anything before that

02:05:09.365 --> 02:05:10.965
in in Cloud Code,

02:05:11.125 --> 02:05:15.205
and it's just really good in also walking you through the process.

02:05:15.525 --> 02:05:20.885
I didn't know that we we will actually need to have or set up a Zoom API between

02:05:20.965 --> 02:05:23.605
the script and our Zoom username.

02:05:24.080 --> 02:05:27.360
But it just told me, hey. Go to marketplace.zoom.us.

02:05:27.360 --> 02:05:28.720
Click here. Click here.

02:05:28.960 --> 02:05:30.320
Give me these things,

02:05:30.640 --> 02:05:31.200
and

02:05:31.600 --> 02:05:32.879
we build it together.

02:05:33.280 --> 02:05:34.560
And, yeah,

02:05:35.440 --> 02:05:41.155
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.

02:05:42.355 --> 02:05:46.195
So this is obviously an example that doesn't have much to do with design,

02:05:47.155 --> 02:05:50.195
but you can think about other examples, other

02:05:50.515 --> 02:05:52.275
applications of this kind of thinking.

02:05:53.180 --> 02:05:56.700
For example, you could develop a Drift audit.

02:05:57.020 --> 02:05:59.980
So you would have a script that pulls

02:06:00.380 --> 02:06:02.220
all the computed CSS

02:06:02.380 --> 02:06:04.620
from your live site,

02:06:04.860 --> 02:06:10.325
maybe, like, every Friday. And then the skilled the skilled would hold the design tokens,

02:06:10.725 --> 02:06:16.645
and so you don't have to re explain them. And then the Cloud would basically run the script, and if it encounters

02:06:16.645 --> 02:06:18.885
any issues, if the audit actually

02:06:19.045 --> 02:06:20.245
throws out any errors,

02:06:21.220 --> 02:06:30.020
the 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.

02:06:30.420 --> 02:06:35.140
So that's the Drift audit. The next thing we could do is research research synthesis.

02:06:35.635 --> 02:06:41.235
So you might build a script that feeds Claude one by one all the interviews

02:06:41.555 --> 02:06:48.275
because by now, we know that actually dropping all the scripts so if you I'd say you have done, like, 20 interviews.

02:06:48.435 --> 02:06:49.475
If you jump

02:06:49.720 --> 02:06:55.720
if you just, like, dumped all the 20 interviews or scripts of these interviews into Cloth

02:06:56.440 --> 02:07:02.760
Chat or Cloth Code, it's not going to do a good job because of the context window issue, context rot.

02:07:03.875 --> 02:07:08.595
So what we could do is build a script that actually feeds one by one

02:07:09.235 --> 02:07:09.955
this,

02:07:11.475 --> 02:07:12.515
well, these

02:07:12.755 --> 02:07:13.715
research

02:07:14.115 --> 02:07:15.155
transcripts and

02:07:15.635 --> 02:07:17.075
only extracts

02:07:17.075 --> 02:07:23.450
basically the most important things, and then we have intelligence in the end to basically help us synthesize

02:07:23.450 --> 02:07:24.410
the learnings.

02:07:25.130 --> 02:07:30.570
The next one might be, like, design ticket triage. So if you get a lot of,

02:07:31.210 --> 02:07:35.895
yeah, tickets about the things you have to do as a designer within your company,

02:07:36.215 --> 02:07:41.335
whether that's Jira or or any other tool, you could build a script that just basically communicates

02:07:41.335 --> 02:07:43.575
with that tool through API.

02:07:44.150 --> 02:07:48.790
Just gather all of those things, and then Clot could do some intelligence

02:07:48.870 --> 02:07:51.830
thinking for you in terms of what is the highest priority,

02:07:53.030 --> 02:08:00.965
or 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.

02:08:01.365 --> 02:08:06.325
On a more personal note, you could also have, like, a inbox triage bot

02:08:06.405 --> 02:08:17.040
where, 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?

02:08:17.840 --> 02:08:19.920
Maybe you can even draft emails for you.

02:08:20.320 --> 02:08:22.160
You could also do monthly reporting.

02:08:23.200 --> 02:08:30.815
I 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.

02:08:31.215 --> 02:08:36.495
You could, again, build a script together with Cloud Code and another tool that would basically,

02:08:38.015 --> 02:08:43.430
yeah, track what you're spending your time on, and it would just automate this whole process

02:08:43.670 --> 02:08:51.590
to a certain extent or fully automate the process of you creating that report and sending it to your team member or client.

02:08:52.070 --> 02:08:54.710
There's many other examples. You might also want to

02:08:55.735 --> 02:08:56.615
create

02:08:57.175 --> 02:09:04.135
proposals based on a client call. And so you might wanna have a you might have a call with a client, potential client,

02:09:04.535 --> 02:09:09.975
and you can have an AI listen to this call, and then you can just create a skill or a script that actually then

02:09:10.720 --> 02:09:13.040
just gives you a 90%

02:09:13.040 --> 02:09:14.400
there, 95%

02:09:14.400 --> 02:09:16.560
there proposal that you just need to

02:09:16.880 --> 02:09:19.760
slightly touch up and just send send over.

02:09:20.160 --> 02:09:21.680
So, yeah, you can see that

02:09:22.160 --> 02:09:26.715
once you have this mindset of having a three layer architecture, you just

02:09:27.195 --> 02:09:32.075
see it completely differently, like a new world opens up because,

02:09:32.475 --> 02:09:41.130
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,

02:09:41.450 --> 02:09:42.730
which is intelligence

02:09:42.730 --> 02:09:44.970
and deterministic code,

02:09:45.130 --> 02:09:46.970
which is a really good combination.

02:09:47.370 --> 02:09:49.130
Now before I close this

02:09:49.370 --> 02:09:53.774
section, let's just spend a few moments talking about cloth

02:09:54.015 --> 02:09:54.655
skills.

02:09:55.215 --> 02:10:01.774
So a few months back, cloth came out with this notion of skills, which are basically like reusable recipes.

02:10:02.655 --> 02:10:03.535
So in a way,

02:10:04.200 --> 02:10:06.760
cloud skills are these instructions.

02:10:07.000 --> 02:10:12.120
So instead of me needing to tell it every time, hey. I want you to do this, that, and that,

02:10:12.760 --> 02:10:16.040
I create let's call it a recipe, a reusable recipe

02:10:16.555 --> 02:10:18.635
where it just every time does

02:10:18.955 --> 02:10:19.995
certain steps.

02:10:20.315 --> 02:10:24.555
And what falls under Claude's skills is so called skill

02:10:24.555 --> 02:10:25.755
MD file,

02:10:25.995 --> 02:10:29.995
which is, yeah, the brain or, like, just a natural language

02:10:30.500 --> 02:10:35.540
file that explains what this skill does and how it does it, like the steps.

02:10:36.980 --> 02:10:43.300
And very importantly, skills also can include scripts. So this would be Python or any other code

02:10:44.185 --> 02:10:44.905
references

02:10:45.065 --> 02:10:46.105
and assets.

02:10:46.425 --> 02:10:52.025
Most people, when they talk about cloud skills or in general, when they talk about agentic skills,

02:10:52.265 --> 02:10:54.025
they only mention this part.

02:10:54.585 --> 02:10:56.665
And for some reason, they really forget about scripts

02:10:57.720 --> 02:11:02.920
and references and assets. I mean, they usually actually do talk about references or assets,

02:11:03.160 --> 02:11:06.040
but very rarely do anyone talks about scripts,

02:11:07.160 --> 02:11:12.440
and they're definitely part of that. So if you think about Cloud skills, they are in a way trying to,

02:11:14.435 --> 02:11:18.515
well, in a way trying to create a format for how CloudSkills

02:11:18.595 --> 02:11:19.875
actually fit.

02:11:20.435 --> 02:11:26.195
Well, actually, in other words, CloudSkills is already native to three layer architecture. Right? It has instructions.

02:11:26.620 --> 02:11:29.500
It actually uses AI as an orchestrator,

02:11:29.580 --> 02:11:33.420
and it also can include scripts when you actually need it to execute something.

02:11:33.740 --> 02:11:36.060
So I'm a big proponent of using skills,

02:11:36.220 --> 02:11:39.340
but just please bear in mind that sometimes scripts

02:11:39.580 --> 02:11:42.115
are a part of skills for a good reason.

02:11:43.075 --> 02:11:46.835
And as you have seen in my example, they're not that hard to build.

02:11:47.475 --> 02:11:52.835
Now where do they live? So they live in a hidden folder on your machine. So as soon as you download

02:11:53.490 --> 02:11:57.330
Cloud Code, there's gonna be a file that's created by

02:11:57.570 --> 02:12:05.090
that software, by Cloud Code, which is dot Cloud. And then within dot Cloud, there's gonna be a folder called skills.

02:12:06.765 --> 02:12:11.085
And then within that, you this is where you're gonna have all of your skills inside.

02:12:11.405 --> 02:12:13.965
An example of the skill that I just showed you here

02:12:14.445 --> 02:12:16.525
is so called attendance skill,

02:12:16.765 --> 02:12:19.245
which, as you can see, has a lot of additional

02:12:19.245 --> 02:12:26.470
files in here. Everything from skill m d to Reference MD, which has a reference to some important,

02:12:27.190 --> 02:12:42.874
well, URL paths and so on. Then we have the API keys, then we have scripts. Right? So there's just a lot going on here. And, 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

02:12:42.875 --> 02:12:43.754
for me.

02:12:44.315 --> 02:12:45.515
Skills

02:12:45.515 --> 02:12:47.195
are also interoperable

02:12:47.195 --> 02:12:48.315
among different

02:12:48.635 --> 02:12:53.209
agents. So if you switch from Cloth to OpenAI or Google Gemini,

02:12:53.450 --> 02:12:54.890
they are going to work.

02:12:58.090 --> 02:12:58.730
Actually,

02:12:59.930 --> 02:13:03.210
they're definitely going to work. I'm just thinking whether they need to be slightly

02:13:03.985 --> 02:13:08.145
renamed or if the convention or where they live is different.

02:13:08.465 --> 02:13:10.385
Because, obviously, here, they live in clot

02:13:10.625 --> 02:13:11.585
dot clot.

02:13:12.385 --> 02:13:15.665
So, actually, that's something I have to look into. But,

02:13:16.225 --> 02:13:18.305
yeah, if you ever wanna switch from

02:13:19.070 --> 02:13:22.350
Cloud Code or, like, using Cloud Skills in another

02:13:22.670 --> 02:13:28.990
agentic environment, just ask Cloud Code. Hey. I wanna actually use this skill also there. How do I make it happen?

02:13:30.430 --> 02:13:32.510
Alrighty. So the big picture here is

02:13:33.515 --> 02:13:35.675
we can also use AI to

02:13:36.555 --> 02:13:37.835
write code,

02:13:38.315 --> 02:13:42.875
and then we can really use AI as an orchestrator of our skills,

02:13:42.955 --> 02:13:44.315
of our processes,

02:13:44.955 --> 02:13:46.555
where the AI can essentially

02:13:48.730 --> 02:13:50.090
act as a

02:13:50.410 --> 02:13:52.250
orchestrator deciding what

02:13:52.810 --> 02:14:02.570
basic where where and when it needs intelligence, and where and when it needs certain deterministic work, and then it uses scripts. And then we can package all of that into instructions,

02:14:02.730 --> 02:14:06.945
into cloth skills, which we can build with ClothCode.

02:14:07.825 --> 02:14:15.585
Okay. So the next thing we will learn is basically how to bring your own tools into ClothCode and how to use them within this tool.

02:14:16.320 --> 02:14:22.160
The first thing to talk about is why would we even want to bring our own tools into Cloud Code

02:14:22.640 --> 02:14:27.840
instead of just using them, you know, within the tool's native user interface environment.

02:14:29.165 --> 02:14:30.765
Because we did say

02:14:31.885 --> 02:14:34.125
that in the future, we still expect

02:14:34.125 --> 02:14:36.125
to use design tools

02:14:36.365 --> 02:14:42.560
within design tools. You know, we could have Figma, Figma Make, UX Pilot, Google Stitch,

02:14:42.720 --> 02:14:46.560
and so on. So what's the advantage of bringing these tools into

02:14:47.600 --> 02:14:51.120
this bigger harness, biggest bigger environment

02:14:51.760 --> 02:14:53.680
of Cloud Code or

02:14:54.015 --> 02:14:55.535
any other agent?

02:14:55.935 --> 02:14:57.215
Well, there's a few

02:14:57.615 --> 02:14:59.055
advantages to that.

02:14:59.615 --> 02:15:10.830
One 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,

02:15:11.550 --> 02:15:16.749
you could have certain flows where this automatically happens. Or maybe you're using your

02:15:17.310 --> 02:15:20.270
browser a lot to check if

02:15:20.510 --> 02:15:27.175
the design that you have created actually looks the way it should look. Or maybe using email to, I don't know, talk to a client or

02:15:27.575 --> 02:15:29.495
something like that, so email.

02:15:30.215 --> 02:15:44.340
And there's plenty more. So 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

02:15:45.060 --> 02:15:48.100
into agent is one of the biggest advantages

02:15:48.340 --> 02:16:01.965
it 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.

02:16:02.765 --> 02:16:05.405
It also means that we can do more parallel work.

02:16:05.725 --> 02:16:06.205
So

02:16:07.000 --> 02:16:13.400
imagine opening up Cloud Code in the morning, and you can basically, within one user interface, maybe open three

02:16:13.560 --> 02:16:14.600
separate agents.

02:16:14.680 --> 02:16:24.195
And 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

02:16:24.675 --> 02:16:27.315
tickets for the week or whatever. So

02:16:27.555 --> 02:16:31.075
you can see that that's another advantage is productivity

02:16:31.395 --> 02:16:33.315
in terms of the parallel

02:16:33.475 --> 02:16:33.715
work.

02:16:34.450 --> 02:16:35.010
And,

02:16:36.050 --> 02:16:45.569
yeah, 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,

02:16:46.185 --> 02:16:56.345
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.

02:16:57.225 --> 02:17:00.185
I'm just trying to give you an overview of opportunities.

02:17:01.150 --> 02:17:04.910
So how do you bring your tools into something like ClotCode?

02:17:05.070 --> 02:17:08.671
Well, basically, we have three options. There is something called MCPs,

02:17:09.391 --> 02:17:11.150
model context protocol,

02:17:11.391 --> 02:17:14.830
and this was actually created by Entropic to standardize

02:17:14.830 --> 02:17:15.631
how

02:17:15.870 --> 02:17:17.391
agents

02:17:16.965 --> 02:17:18.646
such as ClotCode.

02:17:20.005 --> 02:17:21.205
So that's an agent,

02:17:21.365 --> 02:17:23.445
and let's say this is Figma.

02:17:24.885 --> 02:17:26.405
How do they talk?

02:17:26.645 --> 02:17:28.485
Well, they can't talk directly.

02:17:28.725 --> 02:17:32.085
What they need in between is something called MCP server. Right?

02:17:32.610 --> 02:17:33.250
And

02:17:34.370 --> 02:17:42.851
what we need to do in order to use Figma or Gmail or something else inside Cloud Code is to connect it through MCP

02:17:42.851 --> 02:17:43.330
server.

02:17:44.505 --> 02:17:55.865
So 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.

02:17:56.520 --> 02:18:01.800
There's also some websites where you can have an overview of all the MCP service out there.

02:18:02.920 --> 02:18:04.520
By the way, one thing to

02:18:05.000 --> 02:18:08.520
that's important to stress is that not all MCPs are

02:18:09.025 --> 02:18:09.905
official.

02:18:10.065 --> 02:18:11.585
Not all of them are coming

02:18:12.385 --> 02:18:15.186
by the company that's actually creating

02:18:15.585 --> 02:18:19.025
the tool. So if I go back here, the Figma NCP,

02:18:19.185 --> 02:18:28.030
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

02:18:28.670 --> 02:18:30.990
Figma in Cloud Code.

02:18:31.471 --> 02:18:32.910
So, yeah, just keep this in mind.

02:18:34.705 --> 02:18:47.745
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.

02:18:48.920 --> 02:18:52.041
The way you install an MCP server is pretty easy.

02:18:52.440 --> 02:18:54.521
Actually, let's just do one now together.

02:18:54.761 --> 02:19:04.681
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

02:19:05.015 --> 02:19:06.455
control your Chrome.

02:19:07.175 --> 02:19:12.295
And it's obviously very useful because if you have Chrome MCP, you basically get

02:19:13.095 --> 02:19:28.120
access to all the all of the tools that you are or potentially could be using via browser, which is majority of them. So this one MCP is to rule them all, so I definitely recommend this one. So let me just show you how you install it.

02:19:28.520 --> 02:19:29.320
Well, basically

02:19:30.359 --> 02:19:31.000
hey.

02:19:31.320 --> 02:19:32.120
Can you

02:19:32.520 --> 02:19:33.800
install this for me?

02:19:37.895 --> 02:19:39.976
That's it. It's gonna do its job.

02:19:40.854 --> 02:19:42.855
We might need to accept

02:19:42.935 --> 02:19:44.135
certain actions.

02:19:45.255 --> 02:19:45.655
Yes.

02:19:49.940 --> 02:19:50.820
Yes.

02:19:56.900 --> 02:19:59.860
Okay, that's it. I will not restore to Cloud Code now,

02:20:01.460 --> 02:20:02.181
but

02:20:02.340 --> 02:20:05.005
that's how easy it is to install NMCP.

02:20:05.005 --> 02:20:07.005
Sometimes it's a little bit more complicated,

02:20:07.244 --> 02:20:18.570
but in general, basically, that's what you have to do. You 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

02:20:18.570 --> 02:20:19.530
here called

02:20:20.890 --> 02:20:24.730
design category of MCP servers. So there's also Figma here.

02:20:25.210 --> 02:20:29.370
If I just, again, send this link to Cloud Code, it will be able to install it.

02:20:30.295 --> 02:20:36.774
Because in the README, it has this, which is the command line for installing this specific

02:20:37.015 --> 02:20:38.454
Figma MCP

02:20:38.454 --> 02:20:39.255
server.

02:20:39.975 --> 02:20:42.614
Okay. So that's one option we have, MCPs,

02:20:43.970 --> 02:20:48.610
probably most common, most commonly used, and also there is most of these.

02:20:49.890 --> 02:20:52.931
Second thing that is now up and coming is something called

02:20:53.330 --> 02:20:54.130
CLI,

02:20:55.295 --> 02:21:05.135
and it stands for command line interface. And you might remember that we actually talked about command line interface when we talked about terminal because terminal is a command line interface,

02:21:05.535 --> 02:21:09.935
meaning we are giving commands by typing them in a line.

02:21:11.851 --> 02:21:13.131
Right. So

02:21:14.570 --> 02:21:18.971
the same way you have MCPs, you might have CLIs for tools.

02:21:19.130 --> 02:21:22.891
They are, at this stage, less frequent, so less tools have them available,

02:21:23.485 --> 02:21:26.766
But they have one big advantage over MCPs,

02:21:27.085 --> 02:21:29.806
which is that the way most MCPs

02:21:29.885 --> 02:21:30.445
work

02:21:31.165 --> 02:21:31.886
is

02:21:33.165 --> 02:21:34.285
pretty token

02:21:35.085 --> 02:21:35.886
inefficient.

02:21:36.205 --> 02:21:41.490
For example, if we talk about the Chrome DevTools, the way Chrome DevTools works is

02:21:41.570 --> 02:21:44.450
that it actually opens up a Chrome instance.

02:21:45.090 --> 02:21:48.450
It types in the URL. It takes a screenshot,

02:21:48.815 --> 02:21:53.376
and then it reads the screenshot, which we know is very token inefficient,

02:21:53.535 --> 02:21:57.456
and then it decides what to do next. And then it needs to do this over and over again.

02:21:58.176 --> 02:22:06.930
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,

02:22:07.489 --> 02:22:08.930
which is more token efficient.

02:22:09.090 --> 02:22:17.295
And 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,

02:22:17.774 --> 02:22:18.335
usually.

02:22:18.654 --> 02:22:21.455
Right? I'm not generalizing, but it's faster

02:22:21.455 --> 02:22:24.095
and cheaper in terms of the tokens.

02:22:25.935 --> 02:22:27.615
However, it is

02:22:28.860 --> 02:22:32.141
much less popular at the moment, so less tools have it available.

02:22:33.181 --> 02:22:37.421
If you actually want to dive deeper into CLIs and if they are available for your tool,

02:22:37.900 --> 02:22:42.235
you can go under CLI anything, and there is like a nice one page.

02:22:42.795 --> 02:22:48.476
I wouldn't say this is comprehensive of all the CLIs out there, but it's just maybe a way to maybe get inspired

02:22:48.635 --> 02:22:50.155
about what is available.

02:22:50.315 --> 02:23:00.561
But 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,

02:23:01.120 --> 02:23:01.761
is

02:23:02.480 --> 02:23:03.681
NotebookLM.

02:23:04.801 --> 02:23:05.601
It is

02:23:06.080 --> 02:23:06.801
Playwright

02:23:09.375 --> 02:23:10.335
CLI

02:23:10.575 --> 02:23:11.775
and Audacity.

02:23:12.975 --> 02:23:16.575
So the Notebook LM and there's also one for Google

02:23:16.575 --> 02:23:17.375
Workspace,

02:23:17.695 --> 02:23:18.335
which is amazing.

02:23:19.950 --> 02:23:23.229
Right? So you have for Google, for example, if you're using Google Workspace, you can

02:23:24.190 --> 02:23:29.230
well, you can use it, and a Cloud Code can use your Google through MCP or CLI.

02:23:29.710 --> 02:23:30.431
Obviously,

02:23:31.630 --> 02:23:35.229
giving access to your email, the work email through MCP or CLI,

02:23:35.865 --> 02:23:41.226
There is some risk involved, so just keep this in mind. But, yeah, you can actually use your

02:23:41.545 --> 02:23:46.585
you can connect Cloud Code to Google through MCP or CLI, and CLI, again, is faster and

02:23:47.225 --> 02:23:47.865
cheaper.

02:23:48.025 --> 02:23:49.865
Same for Audacity. That's the

02:23:50.710 --> 02:23:51.990
audio engineering

02:23:52.869 --> 02:23:53.670
software.

02:23:54.949 --> 02:24:00.710
And I want to spend just a minute talking about Playwright CLI, which is my favorite, the one I use the most. And

02:24:01.670 --> 02:24:03.750
it is the one actually you have seen in action

02:24:04.935 --> 02:24:05.575
when

02:24:05.814 --> 02:24:09.335
I did the demo in the beginning of this course where we did the

02:24:11.095 --> 02:24:12.854
testing, usability testing.

02:24:13.574 --> 02:24:25.800
The 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.

02:24:26.600 --> 02:24:30.360
Instead of using Chrome through visual interface, it's just reading

02:24:30.600 --> 02:24:35.646
the code of the website and deciding what to do based on that. So it's way more efficient.

02:24:36.365 --> 02:24:39.806
Okay. So these are two big options, MCP and CLIs,

02:24:39.886 --> 02:24:43.646
way more popular but less token efficient and usually slower,

02:24:43.806 --> 02:24:44.926
and CLI,

02:24:45.165 --> 02:24:46.525
way less popular but

02:24:47.101 --> 02:24:51.900
faster and cheaper. But now they are, like, on the rise, so probably soon we will have more CLIs.

02:24:52.380 --> 02:24:57.261
Now the third option is connecting your tools through APIs,

02:24:58.700 --> 02:25:01.101
and this is what you have seen me do

02:25:01.665 --> 02:25:03.985
here when I ran this demo.

02:25:04.385 --> 02:25:10.306
So the demo was me basically telling Cloud Code to just fill out the spreadsheet of who was in the call.

02:25:10.625 --> 02:25:14.385
And you might remember that in the instructions of me building this demo,

02:25:16.130 --> 02:25:18.770
Cloud Code asked me to provide it with some

02:25:19.810 --> 02:25:20.689
APIs.

02:25:20.770 --> 02:25:30.996
In this case, the account ID, client ID, and the client secret. And it told me basically how to extract out those APIs. So what we're essentially doing is I'm giving access

02:25:31.155 --> 02:25:32.195
to Zoom.

02:25:33.396 --> 02:25:39.155
Oh, I'm giving access cloud code to my Zoom, but I'm giving it very targeted access.

02:25:39.636 --> 02:25:44.931
While MCPs and CLIs are, like, very flexible tools that basic can interact with your

02:25:45.330 --> 02:25:49.570
Figma or Chrome or Google in variety of ways,

02:25:49.891 --> 02:25:53.650
APIs are very targeted. Like, I can basically say, hey.

02:25:54.370 --> 02:25:57.570
Cloud Code, you can only read the meeting reports.

02:25:57.945 --> 02:26:01.226
You're only allowed to download this CSV file,

02:26:01.705 --> 02:26:03.065
which is

02:26:04.025 --> 02:26:08.665
obviously and and, like, it's way more token efficient because it only does that,

02:26:09.305 --> 02:26:11.385
but it's then less flexible. So

02:26:11.771 --> 02:26:22.650
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

02:26:22.650 --> 02:26:25.210
Cloud Code, that's when I use MCP or

02:26:25.575 --> 02:26:26.455
CLI.

02:26:27.335 --> 02:26:29.976
Alrighty. So that's the context

02:26:30.455 --> 02:26:35.335
of well, in other words, that's how we bring our context into Cloud Code.

02:26:35.975 --> 02:26:42.381
So now we have covered, basically. We understand how the technology works. We understand how we bring more of our context into

02:26:42.700 --> 02:26:50.460
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.

02:26:51.346 --> 02:26:53.985
So in this section, we'll go through

02:26:54.386 --> 02:27:03.186
different 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

02:27:03.680 --> 02:27:05.200
to how do you create

02:27:06.080 --> 02:27:08.080
things, how you systematize.

02:27:08.880 --> 02:27:11.200
He'll specifically will talk about the AI

02:27:11.439 --> 02:27:16.240
native design system and also about automating tasks, automating

02:27:16.399 --> 02:27:16.800
processes.

02:27:17.375 --> 02:27:19.855
So in this first one, we'll jump into

02:27:20.095 --> 02:27:23.615
the research phase, discover phase of the project.

02:27:24.335 --> 02:27:29.215
And what I wanna share here with you is a skill called

02:27:29.530 --> 02:27:30.410
competitor

02:27:30.410 --> 02:27:31.370
pipeline

02:27:31.530 --> 02:27:32.490
research.

02:27:33.450 --> 02:27:36.570
It's a skill I have built together with Cloud Code to

02:27:37.530 --> 02:27:38.570
help me

02:27:38.890 --> 02:27:39.851
basically

02:27:39.930 --> 02:27:41.131
very quickly

02:27:41.465 --> 02:27:44.425
I give it an industry, and based on an industry,

02:27:44.665 --> 02:27:49.945
it basically defines big players in that space, and it just has a look at their pipeline.

02:27:50.345 --> 02:27:52.345
You know, the acquisition,

02:27:52.904 --> 02:27:53.865
onboarding,

02:27:54.024 --> 02:27:54.985
activation,

02:27:55.145 --> 02:27:57.064
that kind of stuff. Actually, I can show you

02:27:58.271 --> 02:27:59.631
in the anti gravity.

02:28:00.351 --> 02:28:02.030
So this is the

02:28:03.391 --> 02:28:05.791
skill m d. Exactly. Right? So

02:28:06.351 --> 02:28:10.190
this is the skill m d, which is the markdown file explaining what this skill does.

02:28:11.314 --> 02:28:13.955
Here at the top, we have so called YAML.

02:28:14.595 --> 02:28:16.595
YAML. YAML is

02:28:16.835 --> 02:28:19.075
yet another markup language.

02:28:20.995 --> 02:28:26.350
Maybe that's going too deep, so let's stop here. The only thing you need to know is that these

02:28:26.590 --> 02:28:27.390
this text,

02:28:28.029 --> 02:28:31.070
which is in between these three dashes,

02:28:31.149 --> 02:28:32.110
is basically

02:28:32.350 --> 02:28:34.830
the description of what this tool

02:28:34.830 --> 02:28:36.750
or this skill does

02:28:37.229 --> 02:28:38.750
so

02:28:38.045 --> 02:28:42.845
that when we are actually talking to Cloud Code, it doesn't have to load the whole skill

02:28:42.925 --> 02:28:47.405
unless it figures out actually it needs it. And this way, it saves tokens.

02:28:48.125 --> 02:28:59.030
Okay. So here we have the name of the skill, and then the description is that we give it an industry. It finds five leading competitors, and then it goes to acquisition, onboarding, activation, core task, and pricing.

02:28:59.271 --> 02:29:00.870
It captures screenshots

02:29:00.870 --> 02:29:03.110
and compiles a comparison report.

02:29:04.070 --> 02:29:08.186
Pretty neat. Right? So you might need a different kind of research,

02:29:08.345 --> 02:29:13.545
but I basically just wanna share that I have built this skill in no more than ten minutes.

02:29:13.945 --> 02:29:23.011
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

02:29:23.330 --> 02:29:24.131
works.

02:29:24.370 --> 02:29:29.410
So what I want us to do now is basically just run it so you see how that looks like.

02:29:31.490 --> 02:29:35.490
Hey. I want you to run the competitor

02:29:34.475 --> 02:29:37.835
pipeline research skill and do it in the,

02:29:38.475 --> 02:29:40.795
let's say, form builder industry.

02:29:40.795 --> 02:29:42.715
So this is Google Form, Tally,

02:29:43.595 --> 02:29:47.450
and other players. So identify five biggest players and just do the

02:29:48.170 --> 02:29:49.290
the research.

02:29:54.250 --> 02:29:56.570
I don't know why I sometimes do this, but I

02:29:57.930 --> 02:30:03.785
capitalize things in the beginning, and sometimes I just don't correct typos at all. Anyway

02:30:07.226 --> 02:30:11.625
okay. Now it's asking me if I do wanna use the skill. The answer is yes. Absolutely.

02:30:13.360 --> 02:30:16.080
And what it will do now is

02:30:17.920 --> 02:30:20.641
figure out which companies it needs to actually

02:30:21.200 --> 02:30:22.080
research,

02:30:22.320 --> 02:30:25.120
and then it's going to actually open up a website.

02:30:26.216 --> 02:30:35.735
It's gonna use the Playwright CLI, which we have just covered. So also within the in this description is that it will be using

02:30:37.016 --> 02:30:39.176
command f, Playwright.

02:30:39.176 --> 02:30:39.415
Yeah.

02:30:40.000 --> 02:30:41.280
Playwright CLI,

02:30:41.280 --> 02:30:43.760
which is the tool of my choice

02:30:44.399 --> 02:30:47.440
when I need to do anything browser related.

02:30:48.320 --> 02:30:52.560
Oh, you can see that the job has started. Google Form, Tele,

02:30:54.375 --> 02:30:55.335
Typeform,

02:30:56.215 --> 02:30:57.095
Jotform,

02:30:57.095 --> 02:30:58.215
and so on. So

02:30:59.015 --> 02:31:03.655
agents will do their job. And while they're doing this, I'm just gonna

02:31:03.975 --> 02:31:12.101
stop the recording and come back when they're done. Or, actually, let me see if we forgot anything. So this is the Skill MD. It explains how it works.

02:31:13.381 --> 02:31:16.661
Oh, yeah. There is one thing which I wanted to show you,

02:31:17.141 --> 02:31:17.860
which is

02:31:19.141 --> 02:31:19.860
this.

02:31:20.101 --> 02:31:21.940
That when I created this skill,

02:31:23.125 --> 02:31:26.726
Cloud Code automatically also created scripts for me.

02:31:27.525 --> 02:31:31.046
In this case, it is a script or a code that just basically explains

02:31:31.125 --> 02:31:33.525
how we will do this through Playwright

02:31:34.726 --> 02:31:35.605
CLI.

02:31:35.686 --> 02:31:36.085
And, also,

02:31:36.851 --> 02:31:43.411
I have reference file, which explains the stages of the pipeline that I would like it to always research.

02:31:45.490 --> 02:31:48.131
So let's go back to anti gravity,

02:31:48.610 --> 02:31:50.766
and let's see if it's done.

02:31:51.885 --> 02:31:52.445
Actually,

02:31:53.646 --> 02:31:56.445
not yet. So I'll be back when it's done.

02:31:57.885 --> 02:32:06.980
Okay. Just done. So I can click into report MD and actually preview that. If you click on this button here, actually, will see a

02:32:08.500 --> 02:32:13.780
better representation of the markdown file. So we can basically see what this

02:32:14.340 --> 02:32:16.500
skill has done in just a couple of minutes of work.

02:32:17.535 --> 02:32:19.455
So we have today's date,

02:32:19.615 --> 02:32:23.375
the five companies it has identified,

02:32:23.935 --> 02:32:25.455
and we have a nice visual

02:32:25.615 --> 02:32:27.695
using the AASCI

02:32:27.695 --> 02:32:28.095
art,

02:32:30.180 --> 02:32:37.380
which is a terminal native way to do graphs, which you have seen all over this video also. A lot of these are actually

02:32:39.540 --> 02:32:41.860
exactly this AASCI

02:32:41.940 --> 02:32:42.820
kind of graphs.

02:32:44.524 --> 02:32:49.085
Just a slight tangent there. But So here now, we can have a look at this report.

02:32:49.645 --> 02:32:51.885
What what does it say? Four out of five

02:32:52.365 --> 02:33:00.980
companies gate their product behind a sign up wall. I guess only Google Form doesn't do it. Yeah. Oh, also, we can see exactly where this happens.

02:33:01.380 --> 02:33:04.740
So most walls are exactly the onboarding,

02:33:04.820 --> 02:33:06.181
which kind of makes sense.

02:33:08.340 --> 02:33:11.140
And we can also have a drop off funnel, which shows us

02:33:11.845 --> 02:33:15.686
how many companies show which part of the flow.

02:33:17.045 --> 02:33:19.045
We also have the screenshots here.

02:33:21.925 --> 02:33:23.285
Yeah. I mean,

02:33:24.565 --> 02:33:25.846
that was literally

02:33:25.925 --> 02:33:30.240
two minutes, two minutes of work to get really proper

02:33:30.479 --> 02:33:31.360
research

02:33:31.520 --> 02:33:37.760
on the competitors' pipeline. And, yeah, we could have gone a step further and actually gave it

02:33:39.005 --> 02:33:43.085
what I didn't do in this case was actually I didn't let it create

02:33:43.965 --> 02:33:44.765
accounts

02:33:45.245 --> 02:33:53.725
because 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

02:33:55.330 --> 02:33:58.930
the product to the extent where we could get gather some screenshots.

02:33:59.250 --> 02:34:01.650
And then we would just have even more comprehensive

02:34:03.170 --> 02:34:03.810
file

02:34:04.130 --> 02:34:07.649
report. And then we could also ask agents to delete those

02:34:09.775 --> 02:34:11.615
accounts. Right? So,

02:34:12.016 --> 02:34:21.615
I 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,

02:34:22.490 --> 02:34:24.811
and you can just reuse it all the time.

02:34:26.091 --> 02:34:30.411
What you could do with it, just to give you some examples of other design,

02:34:30.570 --> 02:34:40.146
like discovery slash research skills that you could build is review miner. So it would be a skill that will actually go on Amazon or G2 and just review,

02:34:40.465 --> 02:34:43.905
like scrape for reviews on your competitors' product,

02:34:44.146 --> 02:34:47.346
so you get ideas for, I don't know, the stuff you can build.

02:34:47.745 --> 02:34:49.186
A tone scraper,

02:34:49.505 --> 02:35:11.615
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. So one of the agents was actually a heuristic

02:35:11.854 --> 02:35:15.855
agent that went through 10 Nielsen heuristics of a good design.

02:35:16.335 --> 02:35:18.096
We can have a color thief.

02:35:18.495 --> 02:35:21.820
I love the name, by the way. The color thief is basically

02:35:21.820 --> 02:35:25.661
just having a look at companies or an industry

02:35:26.141 --> 02:35:27.101
of companies

02:35:27.341 --> 02:35:30.301
and just analyzes their color scheme.

02:35:30.301 --> 02:35:35.261
So you can see maybe what colors are still available in that space if you're trying to design a brand.

02:35:35.995 --> 02:35:37.835
You can have a business model mapper.

02:35:38.314 --> 02:35:42.795
You tell it to have a look at your client or your competitors to analyze

02:35:42.875 --> 02:35:46.635
who are players involved in the business model of that company.

02:35:47.194 --> 02:35:55.380
Same 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.

02:35:55.780 --> 02:35:57.700
You can have survey to persona

02:35:57.780 --> 02:36:03.859
agents, so once you have all the service analyzed, you can tell it to help you shape some personas.

02:36:05.005 --> 02:36:08.445
The list is endless, really endless. So it's more your

02:36:09.325 --> 02:36:12.525
the constraint is just your imagination and also your use case,

02:36:12.925 --> 02:36:13.565
and

02:36:14.365 --> 02:36:27.320
it's so easy to build this. So 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.

02:36:30.665 --> 02:36:33.546
I think that's it. That covers the discover

02:36:34.105 --> 02:36:35.065
build part.

02:36:35.465 --> 02:36:40.266
Next, although we're gonna jump into create and then systematize buckets.

02:36:40.346 --> 02:36:45.740
Now to the most fun part, which is how do we create things.

02:36:45.979 --> 02:36:59.405
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.

02:37:00.045 --> 02:37:05.085
What we will do is we will make our portfolio slash personal website live.

02:37:05.085 --> 02:37:09.484
So the one that we have built in the beginning, you're losing using LinkedIn

02:37:09.484 --> 02:37:10.284
profile PDF.

02:37:11.069 --> 02:37:16.590
So I'll just show you how to easily make it online and not needing to pay Squarespace

02:37:17.390 --> 02:37:18.510
subscription anymore.

02:37:19.069 --> 02:37:24.029
Then we'll have a look at how to build a skill. We'll build a skill called ColorThief,

02:37:24.029 --> 02:37:27.035
and I'll show you how to build some clickable prototypes

02:37:27.195 --> 02:37:31.436
of maybe an idea you have for your own business or ideas that you have for within

02:37:31.835 --> 02:37:38.556
your job. So let's first make our website live. So just as a reminder, this is the website we have built,

02:37:39.229 --> 02:37:43.630
the personal website. In this case, my my for for my LinkedIn profile.

02:37:44.110 --> 02:37:47.471
And now I just wanna make it live.

02:37:48.910 --> 02:37:53.070
There's a really cool service called Netify that basically lets you

02:37:54.705 --> 02:37:55.585
publish

02:37:55.825 --> 02:37:57.105
these kind of websites

02:37:57.345 --> 02:37:59.585
and more than just websites. But

02:38:00.385 --> 02:38:04.945
basically, what we are now doing is we will be using the free plan that they have available.

02:38:05.425 --> 02:38:11.240
It says free forever. Hopefully, it is. Let's see if they change it. But, basically, if you have any kind of personal

02:38:11.479 --> 02:38:17.320
portfolio or kind of website that doesn't have that much traffic, this free should be able to handle that

02:38:17.880 --> 02:38:18.520
for

02:38:18.760 --> 02:38:19.399
indefinitely.

02:38:21.115 --> 02:38:25.995
Yeah. So, basically, what we'll do is we'll sign up for the free version of this plan.

02:38:26.635 --> 02:38:38.170
Actually 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.

02:38:38.649 --> 02:38:40.810
And what I have done is I have asked

02:38:41.529 --> 02:38:43.930
my cloud cloud code to actually just

02:38:44.410 --> 02:38:45.529
prepare me a project.

02:38:46.405 --> 02:38:54.646
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. I'm just gonna

02:38:54.885 --> 02:39:02.980
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.

02:39:03.700 --> 02:39:07.860
Right? If I just use if I click here, it is going to open the website.

02:39:08.260 --> 02:39:10.900
And, yeah, I could now share this link with anyone

02:39:11.140 --> 02:39:17.140
that I wanted to access it. Obviously, this is not the most representative

02:39:16.615 --> 02:39:17.495
professional

02:39:17.655 --> 02:39:18.615
URL,

02:39:18.855 --> 02:39:25.016
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

02:39:25.896 --> 02:39:32.540
domain registries such as Namecheap, GoDaddy, and others. And you can just follow the instructions here to actually change

02:39:32.780 --> 02:39:37.820
this funky looking URL with your personal, maybe name+surname.com

02:39:37.820 --> 02:39:38.620
or whatever.

02:39:39.820 --> 02:39:40.300
So yeah.

02:39:41.545 --> 02:39:49.385
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

02:39:49.944 --> 02:39:53.385
yeah. You can do this with Cloud Code and Netlify and just under

02:39:53.910 --> 02:39:59.510
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.

02:39:59.990 --> 02:40:03.030
Obviously, this one is pretty simple, so we build it really quickly.

02:40:03.830 --> 02:40:07.510
But also, it's not just faster, but it's also cheaper. Right? No need to be paying

02:40:08.785 --> 02:40:11.585
that money to those services anymore.

02:40:13.825 --> 02:40:21.025
Yeah. Well, if we have spent more time on it, we could have also actually connected this contact form with

02:40:21.105 --> 02:40:30.230
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

02:40:31.990 --> 02:40:35.590
to our email so we would actually get it inbox when somebody reaches out to us.

02:40:36.725 --> 02:40:38.725
But yeah. That's

02:40:39.284 --> 02:40:40.564
use case number one.

02:40:41.045 --> 02:40:42.645
Done and dusted.

02:40:42.885 --> 02:40:45.925
And let's go to the next one, which is color thief.

02:40:46.404 --> 02:40:56.591
So 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

02:40:57.710 --> 02:40:58.511
recipe

02:40:58.511 --> 02:41:00.511
that when we tell it about

02:41:00.670 --> 02:41:03.631
an industry or certain competitors,

02:41:04.016 --> 02:41:09.855
It goes online and just scrapes and slash understands what their color scheme is.

02:41:10.415 --> 02:41:17.136
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

02:41:19.029 --> 02:41:19.830
differentiate

02:41:19.830 --> 02:41:23.110
and stand out in this specific market.

02:41:23.430 --> 02:41:26.390
So that that's the fun little skill we can build.

02:41:27.029 --> 02:41:33.270
Might 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.

02:41:34.015 --> 02:41:35.455
So let's dive in.

02:41:36.015 --> 02:41:38.815
We need to go back into anti gravity.

02:41:39.295 --> 02:41:40.896
Need to create a new

02:41:42.975 --> 02:41:45.615
need to create a new

02:41:47.190 --> 02:41:49.030
skill, plot code.

02:41:50.551 --> 02:41:53.671
Where are we? Plot code. Boom. Boom.

02:41:55.030 --> 02:41:55.991
Okay.

02:41:57.671 --> 02:42:04.105
So the first thing I suggest you to do if you're trying to build a skill is to actually get a skill called

02:42:04.185 --> 02:42:06.345
skill creator. It's very meta.

02:42:07.145 --> 02:42:10.185
Basically, Entropic has created a Entropic

02:42:10.185 --> 02:42:11.465
skill creator

02:42:11.545 --> 02:42:12.266
skill,

02:42:13.625 --> 02:42:19.501
which you can download here. It's a skill that basically tells Cloud how to build skills or even evaluate them.

02:42:19.980 --> 02:42:25.021
So if you just take this URL and drop it in here, hey, help me install

02:42:25.660 --> 02:42:26.860
this skill.

02:42:29.021 --> 02:42:30.300
If

02:42:30.064 --> 02:42:32.226
I already have it, just tell me so.

02:42:35.265 --> 02:42:38.705
I already have it. That's why I'm telling it that it doesn't have to actually

02:42:39.585 --> 02:42:40.465
do that.

02:42:40.865 --> 02:42:52.450
But 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.

02:42:52.689 --> 02:42:55.490
And then within that, you're gonna have skills.

02:42:55.649 --> 02:42:58.850
So I have, as you can see, a lot of skills already. One of those is called

02:42:59.465 --> 02:43:01.065
Skill Creator.

02:43:01.146 --> 02:43:04.985
And within Skill Creator, you have a lot of assets and instructions.

02:43:05.306 --> 02:43:10.825
One of those is Skill MD, which is the one that if you really wanna get to know the skill, you can always read.

02:43:12.140 --> 02:43:15.900
Basically, just tell us Claude how to do it properly. Okay?

02:43:16.380 --> 02:43:17.340
So

02:43:17.660 --> 02:43:19.740
I would suggest you to use this one.

02:43:20.540 --> 02:43:22.859
Well, install it before you actually build any skills.

02:43:23.745 --> 02:43:27.506
Since I have it, we can jump straight into building them,

02:43:28.065 --> 02:43:30.705
building the one that I wanna build.

02:43:32.865 --> 02:43:37.505
Hey. I want you to help me build a skill, which I call caller thief.

02:43:38.141 --> 02:43:43.501
Whenever I run this skill, I want you to have a look at the main companies within a certain industry,

02:43:43.820 --> 02:43:47.181
or I would just give you the names of the companies that I want you to understand.

02:43:47.580 --> 02:43:50.141
Well, have a look at their website, have a look at their materials,

02:43:50.565 --> 02:43:55.285
and to give back their color scheme, primary, secondary, tertiary colors,

02:43:55.845 --> 02:43:57.525
call to action colors,

02:43:57.925 --> 02:43:59.766
give them in the hex

02:44:00.085 --> 02:44:00.806
coding,

02:44:02.085 --> 02:44:07.960
and maybe just also take a screenshot of their main homepage because I also wanna get a feeling for the portions

02:44:08.120 --> 02:44:14.200
and just for how it all all comes together. So, yeah, the end deliverable of this code should be a report,

02:44:14.840 --> 02:44:16.200
which can be an MD file as well.

02:44:17.995 --> 02:44:21.755
Yeah. Please use Playwright CLA, not Chrome Dev Tool.

02:44:23.115 --> 02:44:24.875
Yeah. Please build me the skill.

02:44:26.235 --> 02:44:28.075
So I have again used my

02:44:29.915 --> 02:44:30.955
voice to text

02:44:31.195 --> 02:44:31.675
tool.

02:44:32.359 --> 02:44:33.800
Play right.

02:44:35.240 --> 02:44:38.601
What I'll do now is I will basically put it into plan mode

02:44:38.760 --> 02:44:42.840
because whenever I'm building something, I do start with a plan mode.

02:44:43.640 --> 02:44:54.025
It's just a good practice that most people follow. Instead 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

02:44:54.345 --> 02:45:01.944
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.

02:45:02.431 --> 02:45:04.991
And frankly, that's how most people use it these days

02:45:06.271 --> 02:45:07.070
because

02:45:07.230 --> 02:45:08.991
yeah. If you're if you're not

02:45:10.030 --> 02:45:13.391
on bypass permissions, but actually maybe have asked before edits,

02:45:13.870 --> 02:45:29.045
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. So it's just, at this stage, a good practice to really review the plan and only then do the bypass permissions.

02:45:29.771 --> 02:45:34.091
But obviously, there's also the auto mode coming out,

02:45:34.890 --> 02:45:37.610
which will give you the fourth option as well, which is

02:45:38.090 --> 02:45:39.210
the option where

02:45:41.495 --> 02:45:43.815
where basically cloud will decide

02:45:44.295 --> 02:45:48.135
what is okay to just run with and what actually it wants you to ask

02:45:49.015 --> 02:45:54.055
well, what it still wants to get your input or permission before it actually acts on it.

02:45:56.730 --> 02:46:00.171
Actually, I'm not 100% sure if I have talked about this already

02:46:00.730 --> 02:46:03.131
when we were in the permission modes.

02:46:03.370 --> 02:46:08.011
I might have, but I think this is so important that maybe I can just explain again.

02:46:08.330 --> 02:46:09.211
Permission

02:46:10.171 --> 02:46:14.466
modes. So we talked about permission modes here in terms of how you use

02:46:16.146 --> 02:46:17.025
Cloud Code.

02:46:18.785 --> 02:46:20.945
And I think I only talked about

02:46:21.505 --> 02:46:22.625
four options.

02:46:24.545 --> 02:46:27.105
There is now a new one called auto mode,

02:46:27.601 --> 02:46:32.561
which is a safer way to skip permissions. So most people will not be using bypass permissions

02:46:32.641 --> 02:46:38.801
soon, but you will be using the auto mode. So it's supposed to be just a fifth option here.

02:46:39.120 --> 02:46:44.596
We don't have it yet because right now, I think it's only available for the team and the enterprise.

02:46:46.195 --> 02:46:50.115
It doesn't say here, but I'm pretty sure right now, it's available just for enterprise

02:46:50.595 --> 02:46:51.475
customers,

02:46:51.475 --> 02:46:54.515
and it's all going to be available for the rest of us

02:46:55.740 --> 02:46:58.540
as well. Up until now up until then,

02:46:59.340 --> 02:47:04.460
the way I'm doing it here with just plan mode and then bypass permissions is the way to go.

02:47:06.140 --> 02:47:11.855
Okay. 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

02:47:12.175 --> 02:47:13.216
in the extension.

02:47:13.455 --> 02:47:15.216
So what I suggest is to

02:47:15.775 --> 02:47:22.735
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.

02:47:23.490 --> 02:47:29.410
Okay. Let's see the context. So Ale wants to a skill that extracts color schemes from company websites.

02:47:29.891 --> 02:47:34.210
Yes. Yes. Yes. That makes sense. Deliverable create dot cloud skills. Yes.

02:47:36.815 --> 02:47:37.855
Skill MD,

02:47:39.295 --> 02:47:40.735
that also makes sense.

02:47:41.855 --> 02:47:44.496
JS call extraction strategy. Okay.

02:47:44.976 --> 02:47:46.896
So I'm not seeing any glaring

02:47:47.056 --> 02:47:51.280
issues that I would want it done differently. So I'll just auto accept

02:47:51.600 --> 02:47:56.480
and move to bypass permissions. And when it's done, then I will be

02:47:56.800 --> 02:47:58.000
back with you.

02:48:00.080 --> 02:48:03.655
Okay. So the skill is done. That took, like, twenty, thirty seconds.

02:48:04.055 --> 02:48:06.055
If I click here, I can also

02:48:06.375 --> 02:48:07.095
see

02:48:07.814 --> 02:48:11.255
and read basically how it works. So the input is

02:48:11.495 --> 02:48:13.895
me, the user telling the company name or an industry,

02:48:14.690 --> 02:48:17.330
and the workflow is it opens a browser.

02:48:17.490 --> 02:48:19.410
And for each company, it does this.

02:48:22.370 --> 02:48:24.851
Then it also closes the browser,

02:48:25.170 --> 02:48:26.690
analyzes, and categorizes,

02:48:26.895 --> 02:48:30.495
and writes a report. I mean, that's great. Let's just give it a go and let's see how it feels.

02:48:31.375 --> 02:48:32.095
Yes.

02:48:32.414 --> 02:48:33.535
Do it for,

02:48:34.255 --> 02:48:36.975
again, maybe like a form builder

02:48:37.614 --> 02:48:38.335
industry.

02:48:39.055 --> 02:48:40.290
So that would be

02:48:40.609 --> 02:48:42.290
Google Form, Tally,

02:48:42.689 --> 02:48:43.650
Typeform,

02:48:44.370 --> 02:48:45.010
etcetera.

02:48:47.170 --> 02:48:47.570
Yep.

02:48:52.635 --> 02:48:55.995
It's a big part of this process. It's also just testing

02:48:55.995 --> 02:48:56.875
things out,

02:48:57.915 --> 02:48:58.955
meaning that

02:48:59.515 --> 02:49:02.795
the process of building things basically follows this,

02:49:03.755 --> 02:49:06.795
like, cycle of

02:49:05.200 --> 02:49:06.641
you having an input.

02:49:07.360 --> 02:49:11.761
And there's gonna be a lot of writing now, so let me switch to this. There's gonna be

02:49:12.080 --> 02:49:13.280
your input.

02:49:14.640 --> 02:49:16.641
I'll just make this way bigger.

02:49:19.120 --> 02:49:19.600
Input,

02:49:20.665 --> 02:49:23.226
then AI builds it, then you

02:49:23.625 --> 02:49:24.665
review it.

02:49:24.985 --> 02:49:25.625
Right?

02:49:27.465 --> 02:49:30.505
Boom. Boom. Boom. So that's kind of the cycle.

02:49:30.665 --> 02:49:32.345
And a lot of this is basically

02:49:32.585 --> 02:49:35.030
us deciding what we wanna build,

02:49:35.270 --> 02:49:39.590
reviewing if the build is good, and then giving it more input to improve.

02:49:40.069 --> 02:49:44.630
So if I go back, still building, so I'll just be back when when it's done.

02:49:46.945 --> 02:49:50.546
Okay. I'm back maybe two, two and a half minutes later

02:49:51.186 --> 02:49:51.825
with,

02:49:52.385 --> 02:49:55.506
first of all, like a written report inside ClothCode.

02:49:55.665 --> 02:49:58.705
What I was able to see while I skipped

02:49:59.280 --> 02:50:06.561
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,

02:50:06.880 --> 02:50:13.056
it ran into ran into an issue, and was basically just found its own way to solve that.

02:50:13.695 --> 02:50:20.096
So that's a very good feature of Cloud Code that it also can do this and it does do that automatically,

02:50:20.096 --> 02:50:30.101
but sometimes it if it doesn't, you can also tell, hey, how would you fix it? So it's all about just giving it permission also to try and figure out different ways to solve this issue.

02:50:30.580 --> 02:50:40.655
Anyway, now let's have a look at the results. So it analyzed five different companies, Typeform, Tally, Google Forms, Jotform, and fill out. And we have a report here, and we can

02:50:41.454 --> 02:50:43.695
open it up like this. And,

02:50:44.095 --> 02:50:51.534
yeah, we can just see we have primary, secondary, tertiary color, call to action color, background color, and text color for

02:50:52.150 --> 02:50:54.790
each of these. We also have some notes.

02:50:56.150 --> 02:50:58.630
For example, Teles intentionally minimal.

02:50:58.870 --> 02:51:03.270
Teles brand is the free and simple alternative, so the brand kind of follows that.

02:51:04.085 --> 02:51:05.125
Google Form,

02:51:06.324 --> 02:51:12.725
it's a pure Google for this palette, no unique branding, job form. Okay. Let's see also if we have screenshots.

02:51:14.245 --> 02:51:16.404
Full report with screenshots is here.

02:51:17.569 --> 02:51:19.330
I can't see

02:51:20.449 --> 02:51:21.250
screenshots.

02:51:26.050 --> 02:51:27.810
Did I miss something?

02:51:28.449 --> 02:51:28.850
No.

02:51:32.305 --> 02:51:33.345
Okay.

02:51:41.040 --> 02:51:43.681
Okay. It's going to correct this, and then we will have

02:51:44.000 --> 02:51:46.480
the markdown file with images

02:51:48.480 --> 02:51:51.521
like we had also before when we did the competitor

02:51:51.521 --> 02:51:52.960
pipeline research.

02:51:55.205 --> 02:51:56.806
I'm just gonna close this

02:51:57.205 --> 02:52:03.686
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

02:52:03.845 --> 02:52:07.846
because it realized this was a mistake. And the next time we run this skill,

02:52:08.325 --> 02:52:11.570
it will just not make this mistake.

02:52:12.290 --> 02:52:15.730
So I guess I can now reopen this and it should work.

02:52:19.890 --> 02:52:20.530
No.

02:52:21.410 --> 02:52:22.690
I still

02:52:23.090 --> 02:52:25.325
don't see screenshots.

02:52:26.525 --> 02:52:27.726
Where are they?

02:52:32.045 --> 02:52:37.805
So obviously, I mean, if I just were doing this once, maybe now it would be faster to just type into

02:52:39.790 --> 02:52:40.751
to type

02:52:41.391 --> 02:52:42.991
oh, now it's opening.

02:52:45.070 --> 02:52:46.591
Okay. Just opened

02:52:47.070 --> 02:52:47.791
this

02:52:48.190 --> 02:52:49.391
file for me

02:52:50.990 --> 02:52:51.870
in preview.

02:52:52.995 --> 02:52:54.916
So it's just showing me the screenshots,

02:52:57.556 --> 02:52:58.836
which is also fine.

02:53:00.915 --> 02:53:03.636
Presentation of the ID extension display.

02:53:04.275 --> 02:53:19.266
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

02:53:19.505 --> 02:53:21.585
report, so we know it's doable.

02:53:21.745 --> 02:53:29.905
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.

02:53:31.899 --> 02:53:43.935
And 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,

02:53:44.335 --> 02:53:47.055
safe or the better test it needs to be.

02:53:47.614 --> 02:53:53.935
What you can do now is, like, I build a skill like this. You could just also literally just grab it. Let's see. Colorative skill

02:53:54.335 --> 02:54:01.091
skill MD. I could basically just literally grab it from my computer and share it with a teammate.

02:54:01.410 --> 02:54:07.891
They could install it into their cloud code, and they could use it as well. Or we could have this stored somewhere on GitHub,

02:54:08.415 --> 02:54:11.615
and every time anyone makes a change to the Skill MD,

02:54:12.015 --> 02:54:18.175
we could all have the same version once we pull the version off of GitHub. But that's more advanced

02:54:19.375 --> 02:54:20.575
more advanced

02:54:20.575 --> 02:54:21.615
strategy.

02:54:21.694 --> 02:54:25.900
So let's leave this aside. I think for now, what is important is we can build them, we can share them

02:54:26.460 --> 02:54:27.421
with others.

02:54:28.061 --> 02:54:31.740
The last thing I would mention on skills front is that

02:54:32.141 --> 02:54:38.695
well, two things. One is, as we have seen, they're loaded every time. So every time we open a new chat

02:54:40.455 --> 02:54:41.176
context.

02:54:43.016 --> 02:54:47.415
All of them are loaded or at least the YAML, the front matter.

02:54:47.415 --> 02:54:54.360
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,

02:54:55.721 --> 02:55:05.915
which is obviously not great. So 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

02:55:06.314 --> 02:55:12.955
or maybe put it out of yeah. Probably delete it. There's other ways to do it, but delete it or use it

02:55:13.435 --> 02:55:16.875
differently. And when I say differently, maybe you can ask Claude's code,

02:55:17.511 --> 02:55:25.190
what are the strategies where you can use these skills instead of them being loaded all the time in the in every single chat.

02:55:27.910 --> 02:55:31.750
Okay. So that's one thing. And the second thing I wanted to mention was that actually,

02:55:32.305 --> 02:55:35.665
if you go under Anthropic slash skills,

02:55:36.385 --> 02:55:37.425
their GitHub,

02:55:37.744 --> 02:55:45.425
basically, they have just a whole list of skills that basically they have developed internally, and they're just sharing with

02:55:45.824 --> 02:55:46.305
the world.

02:55:46.840 --> 02:55:56.680
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. So really be,

02:55:57.640 --> 02:55:58.920
yeah, be

02:55:59.785 --> 02:56:05.386
mindful of what it is that you actually want to build and bring into your

02:56:06.505 --> 02:56:07.465
cloud code.

02:56:08.345 --> 02:56:11.625
Alrighty. So this means that we have now

02:56:12.025 --> 02:56:12.905
built the skill.

02:56:13.580 --> 02:56:17.660
So let's now do the most complicated, which is like building a prototype.

02:56:17.820 --> 02:56:19.900
So the example I will be using here

02:56:21.580 --> 02:56:22.301
is,

02:56:22.460 --> 02:56:25.980
as I have mentioned, like, we are in the NBA.

02:56:26.300 --> 02:56:27.660
We are now developing

02:56:27.740 --> 02:56:30.546
multiplayer games for our students

02:56:30.705 --> 02:56:37.426
because we just think it's much better and much more fun way to learn this, like, business skills if you actually

02:56:38.306 --> 02:56:48.110
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.

02:56:48.510 --> 02:57:04.455
There'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.

02:57:05.415 --> 02:57:05.814
So

02:57:07.095 --> 02:57:10.215
let's just focus on one, like, single part of this game,

02:57:13.060 --> 02:57:20.580
and 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,

02:57:20.819 --> 02:57:23.779
and let's just explain this together to clot.

02:57:26.155 --> 02:57:27.035
There we go.

02:57:28.635 --> 02:57:31.436
Okay. So what I did here is also I just hidden

02:57:32.715 --> 02:57:34.556
basically, what is this here

02:57:35.835 --> 02:57:38.795
is a specific file that it will read

02:57:39.890 --> 02:57:40.930
automatically.

02:57:40.930 --> 02:57:42.850
It will read as part of the

02:57:44.369 --> 02:57:45.890
like, Cloud MD.

02:57:45.890 --> 02:57:48.290
Well, not really Cloud MD. Let me show show what I mean.

02:57:52.896 --> 02:58:01.536
As 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.

02:58:01.855 --> 02:58:03.136
But also this thing

02:58:04.096 --> 02:58:07.570
is something that is loaded or it's basically

02:58:07.729 --> 02:58:08.610
telling

02:58:08.610 --> 02:58:11.410
Cloud Code to read it. So sometimes,

02:58:11.810 --> 02:58:13.090
basically, this is

02:58:14.930 --> 02:58:18.771
the last file that we had open, and when I highlighted

02:58:18.850 --> 02:58:21.090
that front matter YAML,

02:58:21.605 --> 02:58:24.245
I think I did this. Right? We were in color teeth,

02:58:24.405 --> 02:58:25.926
and I basically did that.

02:58:26.646 --> 02:58:30.726
Exactly right. Even you what you see now here is that these lines are selected.

02:58:31.125 --> 02:58:35.045
So even if I close this now, it still says 11 lines selected.

02:58:36.070 --> 02:58:45.190
This is no longer really relevant for the next chat, so I'm just hiding it. But if I really wanted to have a look at a certain thing, like fly to research, okay, do Skill MD,

02:58:45.430 --> 02:58:49.189
read it, then actually, you know, it would show up. I mean, I can also do this.

02:58:51.205 --> 02:58:54.485
Right now, the skill m d is also preloaded as a part of this

02:58:55.604 --> 02:58:58.565
chat or the beginning of this chat. Right? So this would be

02:58:59.205 --> 02:59:00.245
one,

02:59:01.525 --> 02:59:02.165
two,

02:59:02.405 --> 02:59:05.365
and three things that are preloaded into this chat at the beginning.

02:59:06.500 --> 02:59:07.301
Anyway,

02:59:07.860 --> 02:59:09.860
that's why I'm hiding

02:59:09.860 --> 02:59:13.221
this now, and I wanna tell you to build something for me.

02:59:13.940 --> 02:59:16.261
Hey. I want us to build a

02:59:16.820 --> 02:59:24.285
simple multiplayer game that my students at the NBA will play during a live online

02:59:24.285 --> 02:59:31.085
practice session that we do in a Zoom call. We'll be putting students into groups of three or four,

02:59:31.404 --> 02:59:39.211
and each group will have one student who will be screen sharing the game, and then they will be discussing together and submitting their answers.

02:59:39.690 --> 02:59:41.450
So they will submit their answers,

02:59:41.931 --> 02:59:42.410
and

02:59:44.250 --> 02:59:47.370
it's gonna be some kind of competition between the teams.

02:59:48.011 --> 02:59:48.570
Mhmm.

02:59:49.851 --> 02:59:51.771
And then there's gonna be a reveal of the result.

02:59:52.336 --> 02:59:57.296
What I want us to do is to build this for the prototyping with numbers module.

02:59:57.695 --> 03:00:00.496
You have a skill, so you can have a look at

03:00:00.896 --> 03:00:03.136
that particular module, what it is about.

03:00:03.855 --> 03:00:10.200
What I already know is I want this game to be testing one particular skill, which is just getting the feel for numbers.

03:00:10.600 --> 03:00:11.720
Let's call it

03:00:12.119 --> 03:00:13.479
number estimator.

03:00:13.720 --> 03:00:29.695
So 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?

03:00:30.016 --> 03:00:30.655
Or

03:00:30.896 --> 03:00:32.336
maybe how do you estimate

03:00:32.575 --> 03:00:35.215
number of highway kilometers

03:00:35.215 --> 03:00:37.056
in a country like Germany or France?

03:00:37.910 --> 03:00:45.110
All of these basically gives you the feeling for the scale things, which is very important in business when you're maybe estimating also the

03:00:45.350 --> 03:00:50.870
impact of your decisions on the bottom line or the revenue. So I want this game to

03:00:51.346 --> 03:00:53.105
be played, yeah, multiplayer.

03:00:53.105 --> 03:00:54.386
I want it to be fun.

03:00:54.865 --> 03:00:57.586
You know what the main thing I wanted to teach.

03:00:58.785 --> 03:00:59.346
And

03:01:00.226 --> 03:01:01.186
what else?

03:01:01.586 --> 03:01:09.061
Well, I think it's very important for this particular game to be based on publicly available data. So if we have a certain question about a certain number,

03:01:10.340 --> 03:01:16.900
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

03:01:17.266 --> 03:01:18.226
right answer.

03:01:18.785 --> 03:01:27.105
And 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,

03:01:27.426 --> 03:01:27.985
and so on.

03:01:29.700 --> 03:01:34.341
Okay. So that's all the context. You you can hear I have given it a lot.

03:01:34.820 --> 03:01:39.780
I had a pretty clear idea of what I wanted to build. If I didn't, I would just be able to give it less,

03:01:40.021 --> 03:01:40.820
and then

03:01:42.725 --> 03:01:47.525
well, then we would together work through the plan. But in this case, I think the plan

03:01:47.605 --> 03:01:48.245
is

03:01:49.285 --> 03:01:50.886
very thorough already,

03:01:50.965 --> 03:01:57.450
but I'm pretty sure Claudia's gonna ask me from some follow-up questions after it has read all the relevant information.

03:01:57.450 --> 03:02:08.410
Now you can also see the benefit of actually really working with Cloth code. It's almost like exponential. So the more things I have built, the more things I can build with it. So I referenced a skill called

03:02:09.404 --> 03:02:17.645
the NBA prototyping with numbers module, which you can see here. Right? So in this skill, basically, we have a description of the whole module.

03:02:18.604 --> 03:02:22.125
And whenever I want to do any kind of work with this specific

03:02:23.005 --> 03:02:23.805
knowledge

03:02:24.211 --> 03:02:25.971
based on how we teach it,

03:02:26.211 --> 03:02:28.371
I can just reference this skill.

03:02:28.530 --> 03:02:33.091
Instead of me needing to always explain what prototyping with numbers means in our context,

03:02:34.051 --> 03:02:40.525
because if I just told it, hey. Look. We're teaching prototype with numbers, the Claus code wouldn't know what I actually mean because

03:02:42.525 --> 03:02:54.621
well, 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. But if I would be invoking a different skill such as, I don't know, the MBA,

03:02:55.261 --> 03:02:56.780
yeah, business strategy,

03:02:57.500 --> 03:03:00.860
well, it has a lot of knowledge about what business strategy is,

03:03:02.301 --> 03:03:14.476
but 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.

03:03:15.115 --> 03:03:23.791
Okay. 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.

03:03:25.230 --> 03:03:38.005
Okay. 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

03:03:38.405 --> 03:03:40.646
in order just to learn how we have done this before.

03:03:41.445 --> 03:03:45.765
Again, that speaks about the exponential curve of how it's learning how you do things.

03:03:46.579 --> 03:03:55.140
So here is what it's proposing. Number estimator game, a multiplayer estimation game where teams compete to guess real world numbers, revenue,

03:03:55.460 --> 03:03:56.340
highways,

03:03:56.579 --> 03:03:57.779
global sales market size.

03:03:58.315 --> 03:04:01.355
It trains the feeling for numbers, scale, yada yada.

03:04:01.835 --> 03:04:03.035
Same architecture

03:04:03.035 --> 03:04:04.155
as strategy game.

03:04:05.275 --> 03:04:06.315
That makes sense.

03:04:06.715 --> 03:04:08.476
Lock scale scoring.

03:04:08.556 --> 03:04:09.275
Actually,

03:04:09.755 --> 03:04:19.811
we'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

03:04:20.450 --> 03:04:25.730
then I would course correct. If everything feels good or actually, I'm not sure

03:04:26.210 --> 03:04:26.851
here,

03:04:27.525 --> 03:04:31.125
it's telling me just how the scoring with inside the game works.

03:04:31.525 --> 03:04:38.565
And 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

03:04:38.805 --> 03:04:41.045
mission critical thing to know and understand right now.

03:04:41.851 --> 03:04:43.291
Magnitude input,

03:04:45.690 --> 03:04:48.091
so something is that

03:04:48.811 --> 03:04:51.450
also makes sense. Dramatic reveal

03:04:51.610 --> 03:04:52.971
speed bonus.

03:04:53.370 --> 03:04:55.795
Actually, I think we can we can take

03:04:56.354 --> 03:04:57.715
speed bonus out.

03:04:58.194 --> 03:05:07.795
I 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?

03:05:08.380 --> 03:05:10.620
20 questions to start. All backed.

03:05:10.939 --> 03:05:12.300
Yes. That makes sense.

03:05:12.779 --> 03:05:14.780
Actually, I have one more one more idea.

03:05:15.420 --> 03:05:17.740
What if the core UI

03:05:18.380 --> 03:05:21.979
element is Google Maps? Maybe just a link.

03:05:25.375 --> 03:05:26.175
And

03:05:26.335 --> 03:05:27.215
students

03:05:27.215 --> 03:05:27.936
can

03:05:28.895 --> 03:05:29.615
see

03:05:30.175 --> 03:05:31.455
what we are actually

03:05:33.455 --> 03:05:35.375
trying to estimate.

03:05:36.279 --> 03:05:38.360
And there are some

03:05:40.680 --> 03:05:41.880
because on

03:05:42.120 --> 03:05:43.160
Google Maps,

03:05:45.239 --> 03:06:05.911
there 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. I 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.

03:06:06.551 --> 03:06:16.070
I can just click into the coffee shop. I 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.

03:06:16.756 --> 03:06:23.556
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

03:06:24.195 --> 03:06:29.235
something like Google Maps or even company's website to try to estimate some other number.

03:06:31.340 --> 03:06:32.939
So I just give this

03:06:33.500 --> 03:06:38.700
to plot code as a feedback, and it will create a new plan. In the meantime, we can see

03:06:39.579 --> 03:06:45.995
actually, I was reading the plan here on the left. I should have read it here because this is just a better

03:06:46.475 --> 03:06:48.635
formatting and also more thorough.

03:06:49.274 --> 03:07:02.990
The 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.

03:07:03.390 --> 03:07:06.670
It's going to create some scripts.

03:07:08.189 --> 03:07:11.710
There's going to be some well, I'm not sure about what requirements

03:07:11.710 --> 03:07:12.750
text are.

03:07:13.470 --> 03:07:39.500
Server, 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. Also, this means there's there's any, like, big security

03:07:39.739 --> 03:07:40.779
vulnerability

03:07:40.779 --> 03:07:47.545
there. By 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

03:07:47.944 --> 03:07:48.905
a website

03:07:49.145 --> 03:07:51.225
that I can share with my students during the

03:07:52.585 --> 03:07:53.465
during this

03:07:53.944 --> 03:07:59.864
call, and it just explained everything to me. Okay. The options you have are we can actually put it on a server. This can be always accessible,

03:08:00.220 --> 03:08:09.340
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.

03:08:10.140 --> 03:08:11.500
Okay. We have a new plan.

03:08:14.795 --> 03:08:17.756
Do I see any mention of Google Maps?

03:08:18.155 --> 03:08:20.075
Let's see. Command f.

03:08:22.235 --> 03:08:23.995
Not working in here. Okay.

03:08:25.436 --> 03:08:26.315
Let's see.

03:08:26.990 --> 03:08:31.471
A lobby question reveal finished scoring Google Maps integration.

03:08:31.550 --> 03:08:38.271
The core UI innovation, many questions are tied to real place. Yes. I think that's gonna be cool. Instead of just reading, they

03:08:39.311 --> 03:08:40.670
can review photos, how it works.

03:08:43.285 --> 03:08:44.965
So how it works,

03:08:46.405 --> 03:08:47.525
play specific

03:08:47.765 --> 03:08:48.565
company.

03:08:52.165 --> 03:08:56.965
Okay. What I see here is actually, I think I don't want, which is I want only the questions.

03:08:58.040 --> 03:09:04.521
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.

03:09:04.920 --> 03:09:08.440
But I just actually, just to make this even more unified game,

03:09:10.226 --> 03:09:13.186
just have questions that actually

03:09:13.745 --> 03:09:14.546
need

03:09:14.625 --> 03:09:15.825
or benefit

03:09:16.226 --> 03:09:17.905
from Google Maps

03:09:18.785 --> 03:09:20.306
to have unified

03:09:21.025 --> 03:09:22.306
game experience.

03:09:22.785 --> 03:09:25.425
Okay. That's one thing I want. Let's see. Another thing is

03:09:26.329 --> 03:09:27.530
how will it actually

03:09:28.250 --> 03:09:31.290
open Google Maps. Okay. That's a very important technical

03:09:31.369 --> 03:09:36.010
detail because one way you could build this is that actually the Google Maps

03:09:36.090 --> 03:09:56.034
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. And 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

03:09:57.780 --> 03:09:58.740
build it.

03:10:00.899 --> 03:10:03.460
Let's see what kind of questions it came up with. So

03:10:04.500 --> 03:10:06.580
play specific question example.

03:10:06.820 --> 03:10:09.620
Cafe Kreuzberg, which is in Berlin revenue.

03:10:09.936 --> 03:10:15.296
Estimate the annual revenue of this Berlin coffee shop. The answer is 35,000,

03:10:15.695 --> 03:10:16.976
and then it has

03:10:17.936 --> 03:10:24.336
hints. K. I'm curious what's that going to do. And then it has a link to the maps. That's all good.

03:10:25.640 --> 03:10:29.240
Okay. Okay. So I think we're gonna be ready now to build,

03:10:29.960 --> 03:10:34.360
and then we can just review the page, and then we can actually work with the live page,

03:10:36.359 --> 03:10:41.766
which is also way easier then to understand what we still need to do, what doesn't feel right, and so on.

03:10:42.165 --> 03:10:46.086
So I'll be back when the plan is finished, and then I'll just auto accept it,

03:10:46.966 --> 03:10:49.206
and it will build it out.

03:10:51.205 --> 03:10:53.445
Okay. Just for transparency transparency

03:10:53.445 --> 03:10:53.926
sake,

03:10:55.420 --> 03:10:58.300
we have an updated plan. I will just auto accept

03:10:58.540 --> 03:11:00.540
moving to bypass permissions

03:11:01.020 --> 03:11:01.660
and

03:11:02.060 --> 03:11:05.021
let it built, and I'll be back when it's built.

03:11:05.580 --> 03:11:08.140
Okay. So the game is now built, and we have

03:11:08.460 --> 03:11:15.766
the name, the number drop. There's a teams or student view, and then there is the admin view. Now we need to open this in Chrome.

03:11:16.564 --> 03:11:19.925
Let's go. This one is already open, so let's just open

03:11:20.245 --> 03:11:22.245
the admin view as well.

03:11:22.965 --> 03:11:24.325
Let's see what we have.

03:11:25.980 --> 03:11:34.541
Okay. 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. Great.

03:11:35.021 --> 03:11:36.381
Testing team.

03:11:37.261 --> 03:11:38.061
Join the game.

03:11:38.945 --> 03:11:43.105
And then if this is played by more players, I guess if I create one more

03:11:44.465 --> 03:11:56.681
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. And obviously, we could test that later.

03:11:56.840 --> 03:12:03.160
So now as a student, I can't do anything, so I guess the admin needs to do something. Yes. So admin can see who is in the room,

03:12:03.561 --> 03:12:05.480
and I can start a game.

03:12:05.960 --> 03:12:07.000
And then

03:12:08.685 --> 03:12:15.965
the students should see that as well. Yes. Okay. It didn't work quite a way. I had to refresh, so that's one thing I would need to debug.

03:12:16.285 --> 03:12:17.646
But now let's see.

03:12:18.205 --> 03:12:21.325
Yes. So that looks right. So we have one out of 15 questions.

03:12:21.970 --> 03:12:24.850
Many people visit the Colosseum in Rome each year?

03:12:26.050 --> 03:12:27.570
Open the Google Maps.

03:12:29.010 --> 03:12:30.610
We see the Colosseum.

03:12:31.170 --> 03:12:32.210
That's cool.

03:12:32.609 --> 03:12:41.105
I like this. I like this. I 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

03:12:41.345 --> 03:12:42.705
in in here,

03:12:42.865 --> 03:12:43.825
which is like

03:12:44.705 --> 03:12:57.490
somebody might just be completely bewildered by this question. Obviously, 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,

03:12:57.810 --> 03:12:59.570
but this game is all about, like,

03:13:00.050 --> 03:13:00.930
finding clues.

03:13:01.405 --> 03:13:04.205
And based on those clues, then potentially

03:13:05.085 --> 03:13:08.525
having a better guess. So if I now drop

03:13:09.165 --> 03:13:11.405
the man here in the Colosseum,

03:13:11.885 --> 03:13:15.165
I might be able to even from this picture, just

03:13:15.931 --> 03:13:20.570
yes, even from this picture, I might be able to get a lot of hints around

03:13:21.050 --> 03:13:24.811
how many people visit this a year. Like, I could just

03:13:25.530 --> 03:13:41.525
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. I could also estimate something based on reviews. I could estimate also I could go on the company's website potentially.

03:13:41.765 --> 03:13:46.860
So there's a lot of stuff we could do here. Let's just put in an estimate,

03:13:47.340 --> 03:13:49.420
like, round number, 2,000,000,

03:13:51.100 --> 03:13:55.740
and we lock it in just to see how this looks like. So waiting for the host to reveal the answer.

03:13:57.436 --> 03:14:00.556
So one team submitted. Okay. Reveal the answers.

03:14:01.035 --> 03:14:04.875
Okay. So this is how it's actually shown. So we see the actual answer.

03:14:05.275 --> 03:14:10.396
What do the students see? Oh, students see this as well. So they see the actual answer, which is 7,400,000.

03:14:11.040 --> 03:14:16.801
They see their answer, which is 2,000,000, and they see how many numbers. They have many points they have gotten.

03:14:17.840 --> 03:14:24.400
So, 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.

03:14:26.255 --> 03:14:38.176
Hey. Could 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.

03:14:39.270 --> 03:14:41.270
That's another really cool use case

03:14:41.829 --> 03:14:45.670
for AI. An agent is just like making up or simulating

03:14:45.829 --> 03:14:47.830
how the prototype is being used.

03:14:48.630 --> 03:14:52.550
In this case, we have one real player, which is me, and other six

03:14:53.006 --> 03:15:02.366
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,

03:15:02.605 --> 03:15:09.420
things 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,

03:15:09.819 --> 03:15:15.660
and then we'll be able to test one that one as well. So I'll be back when this is done.

03:15:16.060 --> 03:15:17.020
Or is it already?

03:15:17.995 --> 03:15:18.876
No.

03:15:19.355 --> 03:15:22.556
It's not yet. So I'll be back in a few seconds or so.

03:15:24.556 --> 03:15:27.275
Okay. This took like twenty seconds or so.

03:15:27.675 --> 03:15:31.195
And now we're supposed to have a simulate seven teams button

03:15:32.160 --> 03:15:32.961
in

03:15:33.280 --> 03:15:34.721
the admin view.

03:15:37.040 --> 03:15:37.841
K.

03:15:39.521 --> 03:15:42.080
Need to start this again. Testing team.

03:15:42.720 --> 03:15:43.521
Join the game.

03:15:45.045 --> 03:15:46.005
Start the game.

03:15:47.765 --> 03:15:52.485
So this one would just be 1,000,000. Lock in the estimate.

03:15:52.725 --> 03:15:58.405
And now I can simulate the seven other teams. That's good. And reveal reveal the answer.

03:15:58.970 --> 03:16:04.250
Does that work here as well? It does. Okay. We can see some issues here. Right? So there's too many teams

03:16:04.409 --> 03:16:08.090
close to each other, so we need to find a solution for that.

03:16:08.890 --> 03:16:11.370
We can also now better see how the the

03:16:12.810 --> 03:16:16.146
scoring actually works. So we have team Foxtrot,

03:16:16.865 --> 03:16:18.705
which got 1,000

03:16:18.705 --> 03:16:19.346
points.

03:16:19.745 --> 03:16:23.186
Gamma, 800 points, 800 points. So now I'm

03:16:23.186 --> 03:16:23.905
guessing

03:16:24.625 --> 03:16:30.951
that they were close enough to get all the points. That's probably maximum. I mean, I could now also ask LotCode, but just to

03:16:31.351 --> 03:16:32.631
not go too far,

03:16:33.190 --> 03:16:37.990
I think this is this is basically just trying to show you how you're now reviewing,

03:16:37.990 --> 03:16:38.870
iterating,

03:16:38.870 --> 03:16:40.790
building on that, and so on.

03:16:42.585 --> 03:16:46.105
Alrighty. Let's do one more round just because it's fun.

03:16:46.425 --> 03:16:48.745
How many kilometers of motorway

03:16:48.825 --> 03:16:50.105
does France have?

03:16:51.146 --> 03:16:52.346
Google Maps.

03:16:52.505 --> 03:16:53.785
It opens in Paris.

03:16:54.110 --> 03:16:55.711
Okay. We could correct that.

03:16:56.990 --> 03:16:59.870
But, basically, does this is this helpful?

03:17:00.110 --> 03:17:02.431
I think it is. I mean, having this image

03:17:04.670 --> 03:17:06.431
might help you figure out

03:17:06.984 --> 03:17:17.065
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,

03:17:17.305 --> 03:17:23.360
and this is the size, I don't know, Belgium. And if we multiply this through the France, we get some kind of estimate,

03:17:23.920 --> 03:17:26.561
or, you know, we might actually be able to

03:17:26.960 --> 03:17:27.761
just

03:17:28.240 --> 03:17:31.280
use some kind of a legend here. Is there like a

03:17:31.681 --> 03:17:34.755
ruler here at the bottom that would just show us?

03:17:35.555 --> 03:17:36.515
There isn't.

03:17:36.755 --> 03:17:41.555
But we could use Google Maps actually to just be I'm gonna drive from Tours to

03:17:42.675 --> 03:17:43.715
Orleans,

03:17:43.715 --> 03:17:52.000
and we can see how many kilometers this line is. And then based on this line, we could start estimating everything else. Things like that. Things like that.

03:17:52.640 --> 03:17:55.280
I like it. I think this is a really interesting game.

03:17:56.960 --> 03:18:07.885
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. I would send it to few colleagues in the team to test it out with them, things like that.

03:18:08.444 --> 03:18:11.005
I would also well, I would also definitely

03:18:11.564 --> 03:18:13.085
where is on Entegravity?

03:18:13.085 --> 03:18:19.340
I would definitely open a new chat and tell it to review. Hey. Can you review the code of this game?

03:18:19.819 --> 03:18:23.260
Because the fresh instance, the fresh fresh agent doesn't have all the

03:18:25.100 --> 03:18:36.386
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

03:18:36.705 --> 03:18:38.625
pair of eyes, so to say,

03:18:38.945 --> 03:18:41.346
review the game. Actually, it works just like humans.

03:18:41.585 --> 03:18:44.705
So this one is doesn't doesn't have as big

03:18:44.945 --> 03:18:53.450
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. We could ask

03:18:54.170 --> 03:19:05.795
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

03:19:07.715 --> 03:19:12.755
if we need it to work. I mean, if it's just a clickable prototype prototype for research, then we don't even need that.

03:19:13.715 --> 03:19:18.870
One last thing thing I wanted to show you is that because I have built games before what

03:19:19.029 --> 03:19:24.390
Cloud Code has done, it actually has built this based on a visual,

03:19:24.630 --> 03:19:26.470
a visual UI of the previous game.

03:19:27.135 --> 03:19:29.215
Can you host

03:19:29.375 --> 03:19:32.575
on my machine and run strategy game?

03:19:34.654 --> 03:19:35.534
Strategy

03:19:35.534 --> 03:19:36.335
game.

03:19:39.375 --> 03:19:42.015
And you will see that actually the visually,

03:19:42.740 --> 03:19:43.460
this

03:19:44.100 --> 03:19:48.580
number drop game that we just developed actually mimics very, very closely

03:19:48.660 --> 03:19:52.181
the or it's virtually the same as

03:19:52.420 --> 03:19:54.180
the strategy canvas game.

03:19:55.685 --> 03:19:56.325
And

03:19:56.885 --> 03:20:02.564
this is almost like a first layer of how you can use clause code to help you build

03:20:05.284 --> 03:20:07.045
search games are we running? It's live.

03:20:07.620 --> 03:20:08.260
No.

03:20:08.500 --> 03:20:11.700
Number drop is live on that port.

03:20:12.340 --> 03:20:14.180
Use a different port.

03:20:16.180 --> 03:20:19.779
So eighty eighty is a port that's used by

03:20:22.465 --> 03:20:23.426
this game.

03:20:24.865 --> 03:20:26.865
That's why I used to use a different one.

03:20:28.465 --> 03:20:29.266
Yep.

03:20:29.266 --> 03:20:30.146
Well, actually,

03:20:30.386 --> 03:20:31.346
let's just do this.

03:20:32.080 --> 03:20:36.561
So this is the strategy game. We can just skip to the game.

03:20:36.880 --> 03:20:42.721
We can just simulate seven teams. Anyway, it doesn't really matter more than that, but you can see that actually visually,

03:20:42.800 --> 03:20:46.175
this is pretty close to that, if not

03:20:46.975 --> 03:20:54.415
virtually the same. I would now have to check everything. There's stuff that we could do better, obviously, but you can just see that

03:20:54.975 --> 03:20:58.015
Cloud Code had a look at the previous game's

03:20:58.335 --> 03:21:00.895
visual CSS

03:21:00.271 --> 03:21:20.125
and 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. But

03:21:20.604 --> 03:21:27.005
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

03:21:27.005 --> 03:21:29.725
properly build it out into an AI

03:21:30.920 --> 03:21:33.000
AI native design system.

03:21:33.239 --> 03:21:35.000
So, yeah, that concludes

03:21:35.000 --> 03:21:43.640
this create section. And next, we'll go into the systematize where I will actually be joined by a team member. Alrighty. Time to jump into

03:21:44.040 --> 03:21:45.000
systematizing

03:21:45.375 --> 03:21:46.095
where

03:21:46.255 --> 03:21:47.615
we will dive into

03:21:47.935 --> 03:21:49.936
AI native design systems.

03:21:50.095 --> 03:21:52.735
As you can see, I have someone with me.

03:21:53.055 --> 03:21:54.735
That someone is Tom,

03:21:55.455 --> 03:21:58.095
colleague, program director at the MBA.

03:21:58.750 --> 03:22:02.110
And Tom had a wonderful opportunity

03:22:02.590 --> 03:22:07.390
to help us design the AI native design system for the MBA because lately,

03:22:08.109 --> 03:22:12.270
we basically started needing it. We didn't need it until now because

03:22:12.415 --> 03:22:15.215
we didn't develop any technological digital

03:22:15.215 --> 03:22:17.535
products. We only had educational,

03:22:19.615 --> 03:22:21.135
yeah, educational

03:22:21.135 --> 03:22:21.936
programs.

03:22:22.255 --> 03:22:26.735
And now at certain point, we needed it, so we had to solve this problem for ourselves.

03:22:27.450 --> 03:22:31.771
So, yeah, Tom is gonna show us how he solved this for us and

03:22:32.250 --> 03:22:38.490
show you how he can do it as well. So Thanks, Tom. Take it away, Tom. Glad to be here. Thank you.

03:22:39.050 --> 03:22:49.956
So, 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,

03:22:51.075 --> 03:22:54.035
in vogue, what, like, ten plus years ago.

03:22:55.160 --> 03:23:06.681
I 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

03:23:06.920 --> 03:23:08.601
a little bit now as far as, like,

03:23:09.575 --> 03:23:17.655
this focus on execution and stuff like that. Topic for another video, but absolutely see the value in design systems.

03:23:19.096 --> 03:23:22.980
For us as a small team, we don't maybe historically,

03:23:23.300 --> 03:23:34.836
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. You have maybe big teams

03:23:35.315 --> 03:23:36.516
managing them,

03:23:36.915 --> 03:23:41.636
managing the governance of design systems, which is obviously the most important bit of a design system.

03:23:42.275 --> 03:23:44.595
But when you're, you know, small team like ours,

03:23:46.210 --> 03:23:51.330
maintaining that thing, even creating it in the first place can be, uh, something that gets deprioritized.

03:23:52.050 --> 03:24:05.136
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,

03:24:05.615 --> 03:24:08.016
create a system that allows us to

03:24:09.455 --> 03:24:26.430
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. All the good things that a design system helps you do.

03:24:27.306 --> 03:24:31.865
Topic for another video is maybe how we developed that design system because

03:24:32.985 --> 03:24:34.186
very fast,

03:24:35.386 --> 03:24:40.346
maybe not the robust process that a lot of our experts in design systems

03:24:41.020 --> 03:24:45.021
might might use, but definitely good enough for us.

03:24:46.140 --> 03:24:48.700
But version 0.01.

03:24:48.780 --> 03:24:51.980
So bit of context, we have our kind of parent brands.

03:24:52.620 --> 03:25:08.955
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. Our context has now changed. We're developing products.

03:25:09.275 --> 03:25:14.351
These are tools, these are games where this kind of spacing, this kind of typography,

03:25:14.750 --> 03:25:18.670
this kind of grid doesn't cut the musters. So we have been,

03:25:18.990 --> 03:25:24.670
you and I, vibe coding and agentically building these games, right, using AI.

03:25:25.149 --> 03:25:26.430
And they come out of the box

03:25:27.274 --> 03:25:29.675
from these tools, whatever tool you're using,

03:25:29.995 --> 03:25:33.835
if you give them no context about your brands, they can come out looking,

03:25:34.234 --> 03:25:37.675
I don't know, kinda like this. This is like the the

03:25:38.875 --> 03:25:42.155
you know, this lands on your desk from product product manager.

03:25:42.450 --> 03:25:45.410
You're like, someone's got a Lovable license

03:25:45.891 --> 03:25:52.931
or someone's just started to use full code. Absolutely fine. Like, no judgment here. I think it's I honestly think it's great that, like,

03:25:53.170 --> 03:25:56.211
this is these tools are freeing up others to be creative.

03:25:56.450 --> 03:25:57.811
But if you're part of a

03:25:58.625 --> 03:26:03.025
if you're a designer in a team and your your job now is to try and make this,

03:26:03.345 --> 03:26:06.145
uh, vibe coded thing that's landing on your desk,

03:26:07.024 --> 03:26:12.305
see how viable it is to build and maybe start to look at the kind of patterns and

03:26:12.785 --> 03:26:26.120
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

03:26:26.745 --> 03:26:34.745
really about using design systems to do agentic coding in a way where the results that come out don't feel like slop and

03:26:34.745 --> 03:26:44.970
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,

03:26:45.290 --> 03:26:47.771
uh, we're gonna we're gonna share. So

03:26:48.649 --> 03:26:52.170
we're gonna jump into, um, my workspace.

03:26:52.250 --> 03:26:58.315
Alan, earlier, you were using anti gravity. I use something called cursor. They're basically the same. Doesn't really matter what

03:26:58.635 --> 03:27:07.756
what that is. So it's a way for me to explore files. So I can see, like, file system on the left here. I can see the contents of the file when I click on anything

03:27:08.555 --> 03:27:13.931
in here. And then I have something running that I don't think you've demoed so far, which is terminal.

03:27:14.811 --> 03:27:17.211
This is basically where I run Claude code.

03:27:18.250 --> 03:27:24.650
I know that in anti gravity, Claude code just kind of runs within a window, the same as in desktop app.

03:27:25.165 --> 03:27:30.285
But it's great to see also how this works. There's a chance to get the same view also in anti gravity.

03:27:30.604 --> 03:27:32.285
I just didn't wanna do it for

03:27:32.685 --> 03:27:33.325
this,

03:27:33.564 --> 03:27:43.351
like, initial course. We might do it if we ever do an advanced version, but that's basically the same. So Yep. It's basically Cloud Code just running in this little terminal window, so we need to know at this stage.

03:27:44.311 --> 03:27:47.431
I like this kind of view. I think as a designer,

03:27:47.590 --> 03:27:51.590
being able to kind of see what's being referenced, be able to see my files. And, actually,

03:27:52.325 --> 03:28:11.450
if 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. So I I I I like to see things in this way.

03:28:11.850 --> 03:28:19.610
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

03:28:21.050 --> 03:28:21.850
things like

03:28:23.165 --> 03:28:24.125
accessibility

03:28:24.205 --> 03:28:25.085
rules,

03:28:25.085 --> 03:28:26.765
like our absolute baseline.

03:28:26.925 --> 03:28:29.885
The thing you will notice in here that you might not have in your

03:28:30.685 --> 03:28:38.440
design system that you've built previously is that this is all in markdown. And, Alan, I'm assuming that Markdown has been covered

03:28:39.160 --> 03:28:39.880
already.

03:28:41.320 --> 03:28:46.440
Ironically, for something that's been around for so long, Markdown files right there are now becoming the language

03:28:46.920 --> 03:28:48.760
of AI, the format

03:28:49.444 --> 03:28:51.285
of AI. So

03:28:51.765 --> 03:28:54.245
we might have had these kind of documents

03:28:54.564 --> 03:29:00.965
in other formats before. I don't know, actually. I don't know. Maybe Markdown has been the thing for design systems for a while, but

03:29:02.005 --> 03:29:04.640
certainly now, like, markdown

03:29:04.880 --> 03:29:06.240
for the win. So

03:29:06.640 --> 03:29:08.400
bunch of stuff in here around

03:29:08.880 --> 03:29:10.080
accessibility,

03:29:10.080 --> 03:29:13.760
kind of rules we should have. We have got

03:29:14.159 --> 03:29:15.359
all of our components.

03:29:15.855 --> 03:29:16.416
So

03:29:17.056 --> 03:29:26.976
this would almost certainly be very recognizable for people. So we've got our HTML for things like all of our buttons, but most importantly, we've got all the anatomy.

03:29:26.976 --> 03:29:28.016
So all of the

03:29:28.920 --> 03:29:32.601
breakdown of what our variants are, how they should be

03:29:33.160 --> 03:29:34.360
used, the different

03:29:34.521 --> 03:29:35.320
sizes,

03:29:37.080 --> 03:29:37.641
the

03:29:37.960 --> 03:29:38.761
tokens

03:29:39.400 --> 03:29:43.080
that are referenced, that are used in these different buttons, the dos and don'ts.

03:29:43.655 --> 03:29:44.615
All of that

03:29:45.015 --> 03:29:49.815
guidance is now in Markdown files. So we've got cards.

03:29:49.895 --> 03:29:53.255
We've got case studies. We've got chat. We've checkboxes,

03:29:53.335 --> 03:29:57.910
all the kind of stuff that we need for our games. So a good example would be, like, chat input.

03:29:58.229 --> 03:29:59.670
Adam, we've not needed

03:29:59.989 --> 03:30:05.110
chat input in the in the the the NBA world until the last few months, but now we're building

03:30:06.229 --> 03:30:08.310
things that our students can chat with. So

03:30:08.915 --> 03:30:13.795
in that process of building a design system, we've had to think about stuff like that. So

03:30:15.075 --> 03:30:19.315
markdown files with all of the documentation for all of those different sections.

03:30:19.795 --> 03:30:21.715
So that's the main crux of

03:30:22.609 --> 03:30:24.851
the design system components,

03:30:25.170 --> 03:30:26.930
but, obviously, anyone

03:30:27.170 --> 03:30:31.490
that has used the design system before knows that having your components

03:30:31.490 --> 03:30:32.130
is

03:30:32.930 --> 03:30:38.575
it feels like the big job, but it's it's it's not the job. The job is governance.

03:30:38.735 --> 03:30:43.296
Uh, that's the important part in here. So how do we actually get people to use

03:30:43.615 --> 03:30:52.761
the design system? How do we get them to, um, have some meaningful guidance on when to use something, when not to use it, decision making,

03:30:53.000 --> 03:30:54.440
how to review work?

03:30:55.000 --> 03:30:58.521
All that good stuff is the stuff that

03:30:59.641 --> 03:31:02.601
is where design systems

03:31:01.636 --> 03:31:04.275
die on the vine is where that stuff is not

03:31:04.835 --> 03:31:05.636
well

03:31:05.636 --> 03:31:06.516
documented

03:31:06.516 --> 03:31:08.676
or not well expressed

03:31:09.315 --> 03:31:11.956
or that rhythm and that governance,

03:31:12.035 --> 03:31:18.960
that that person, that team that kind of keeps it alive, keeps people understanding it, getting comfortable with it gets lost.

03:31:19.439 --> 03:31:23.840
We are a small team. We do not have a design ops person.

03:31:24.160 --> 03:31:24.880
So

03:31:25.040 --> 03:31:27.760
we have, as many of you

03:31:28.226 --> 03:31:29.105
would have

03:31:29.665 --> 03:31:30.386
developed

03:31:31.025 --> 03:31:34.786
a principles markdown file, which basically tells us

03:31:37.266 --> 03:31:39.426
yeah. It it talks in a few levels.

03:31:40.670 --> 03:31:49.710
We have things around, like, the substance of what we build being the most important thing. So the most important thing that comes out of this is around

03:31:49.950 --> 03:31:53.149
learning. Right? So all of in this context,

03:31:53.795 --> 03:32:00.835
everything is about making people feel like they're making good progress, not in a kind of gamified dark patterns kind of way.

03:32:01.955 --> 03:32:05.795
It needs to feel well authored. It needs to feel authentic.

03:32:07.630 --> 03:32:10.190
We need to make it feel like

03:32:10.830 --> 03:32:14.431
pieces on a table. This is a good example. So interfaces

03:32:14.431 --> 03:32:19.885
in this context need to feel kind of physical. They need to have weight to them. They need to feel tactile

03:32:19.965 --> 03:32:28.285
because that's all important to how people interact with these things they play with. So we have principles in here that are not like use this button here.

03:32:28.524 --> 03:32:29.805
It's things that

03:32:30.045 --> 03:32:41.620
as a designer you build that sensibility around. So 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.

03:32:43.940 --> 03:32:48.580
So, yeah, we we have that codified. We've got patterns as well. So

03:32:49.336 --> 03:32:51.016
one thing would be having

03:32:51.735 --> 03:33:01.256
various parts of your design system. Right? Like, 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?

03:33:01.896 --> 03:33:04.296
How to group them? How to

03:33:05.240 --> 03:33:06.841
if you've got a new

03:33:07.080 --> 03:33:10.360
workflow you've designed, how many pages that should be across,

03:33:10.921 --> 03:33:23.205
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. So I appreciate most people watching this probably already know that, but I think it's a good reminder that the design system

03:33:23.365 --> 03:33:30.565
is not just the UI. It's one part of it. It's not it's actually not the system. It's the the system is the thing you build around that.

03:33:31.431 --> 03:33:34.791
Very, very, very important because if we just gave

03:33:35.431 --> 03:33:37.110
Claude or any

03:33:37.990 --> 03:33:41.190
AI tool the UI components

03:33:41.190 --> 03:33:41.830
and said,

03:33:43.235 --> 03:33:45.075
go and build us this this game.

03:33:46.275 --> 03:33:49.876
We're gonna get a whole world of ways that that is applied.

03:33:50.115 --> 03:33:51.476
Right? We would get

03:33:52.115 --> 03:33:53.556
high variance,

03:33:53.556 --> 03:33:56.195
Alan, in what comes out. And today,

03:33:56.780 --> 03:34:00.461
what we're about to demo here is about reducing that variance

03:34:00.620 --> 03:34:06.460
to a level where we have confidence in what's gonna come out the other end, and we have to do less intervention,

03:34:06.460 --> 03:34:09.341
and we can have a lot more confidence in

03:34:09.580 --> 03:34:11.101
vibe coding something

03:34:11.385 --> 03:34:11.945
that

03:34:13.704 --> 03:34:19.865
fits fits our fits our brand, fits our products. I'm gonna take a sip of water. I

03:34:21.864 --> 03:34:30.920
know 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?

03:34:31.640 --> 03:34:32.920
Design system,

03:34:36.199 --> 03:34:37.160
five hours.

03:34:37.880 --> 03:34:42.326
I think that's very important to know. And, it may not be as comprehensive

03:34:43.205 --> 03:34:48.405
and battle tested as something you would do for weeks or months, but I think this also

03:34:48.886 --> 03:34:56.480
speaks about the future of what these tools can do and what, you know, they will do those in the future. Anyway, continue.

03:34:56.960 --> 03:35:11.945
Yeah. Another video definitely on on how to do that. But Yeah. Actually, 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.

03:35:13.465 --> 03:35:15.225
Okay. Let's

03:35:15.225 --> 03:35:16.745
get into it. So

03:35:18.745 --> 03:35:26.801
one 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

03:35:26.960 --> 03:35:36.240
and design using this design system. People will recognize is we have a tokens dot m d. So this is like our canonical reference of

03:35:36.955 --> 03:35:42.396
all of our components. So any part in the design system, these will be get referenced

03:35:42.955 --> 03:35:46.075
as the, like, source of truth. So we have tokens.md

03:35:46.075 --> 03:35:47.675
and tokens.css.

03:35:47.915 --> 03:35:50.795
If you don't know about tokens, and I'm sure the majority of you are,

03:35:51.610 --> 03:36:15.315
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. But 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,

03:36:15.555 --> 03:36:16.835
uh, tokens.nd

03:36:16.835 --> 03:36:18.835
as one of our sources of truth here.

03:36:19.155 --> 03:36:19.635
So

03:36:20.170 --> 03:36:30.010
that is to say we've got an awful lot of information here, um, that Claude can make use of. Right? Lots and lots of markdown files, stuff about accessibility,

03:36:30.409 --> 03:36:33.289
um, stuff about governance, icons, motion, patterns.

03:36:34.045 --> 03:36:36.605
It might even be thousands of lines

03:36:37.165 --> 03:36:43.565
thousands of lines that we would not put into a Claude dot m d file. So,

03:36:43.885 --> 03:36:54.951
Alan, 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.

03:36:55.431 --> 03:37:00.070
Yeah. Can I actually go back to Miro? I just can actually and just follow my cursor there.

03:37:02.405 --> 03:37:03.365
There we go.

03:37:03.846 --> 03:37:05.605
So you might remember

03:37:05.766 --> 03:37:10.966
this section of the course where I said that Cloud MD actually functions as the hub,

03:37:11.686 --> 03:37:21.930
and 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,

03:37:22.090 --> 03:37:24.090
very narrow and sharp.

03:37:24.410 --> 03:37:26.330
And all the things that actually

03:37:26.410 --> 03:37:27.210
we

03:37:27.825 --> 03:37:29.505
or the AI might need,

03:37:29.825 --> 03:37:41.185
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

03:37:41.750 --> 03:37:42.390
from

03:37:43.350 --> 03:37:44.390
the AI,

03:37:44.710 --> 03:37:49.990
which is also, I think, one thing maybe to mention is that CloudMD functions differently

03:37:50.229 --> 03:37:55.110
from SkillMD because I've seen a lot of people actually using SkillMD for their design system.

03:37:55.510 --> 03:38:03.246
And 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,

03:38:04.125 --> 03:38:06.365
and Skill MD needs to be invoked.

03:38:07.245 --> 03:38:10.285
So it means that if you haven't properly invoked the skill,

03:38:11.690 --> 03:38:25.210
then 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

03:38:25.545 --> 03:38:31.785
and enforce that, you know, that AI is actually using and following the conventions.

03:38:33.145 --> 03:38:33.785
Nice.

03:38:35.385 --> 03:38:39.865
And a a far more reliable way of getting it to follow these conventions than using a skill.

03:38:40.265 --> 03:38:40.585
Right?

03:38:41.641 --> 03:38:47.881
Yeah. And or or putting all of that into one file. Yeah. Because the longer that one MD gets,

03:38:48.761 --> 03:39:01.565
just the lower the compliance of AI is with it. Usually, 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.

03:39:02.365 --> 03:39:03.006
Yeah.

03:39:03.965 --> 03:39:06.925
So what we have got in this ClaudaMD

03:39:07.819 --> 03:39:29.056
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,

03:39:29.535 --> 03:39:30.256
um,

03:39:30.735 --> 03:39:41.501
and give it some rules of how to implement. So use existing components, Use tokens, not hard code to values. I appreciate that for the Us designers, this is basics,

03:39:42.221 --> 03:39:50.700
but they can't be taken for granted. We've all all seen hallucinogenic stuff that comes out of AI. This is trying again to reduce that that chance of that happening.

03:39:51.525 --> 03:39:53.045
Don't invent tokens.

03:39:53.604 --> 03:39:59.125
Okay? So we've given it. This is like the procedural bit that we give it each time.

03:39:59.604 --> 03:40:01.686
Now this is to more token efficient,

03:40:01.925 --> 03:40:06.570
but this is still quite token intensive. I know that sounds like talking

03:40:06.570 --> 03:40:08.330
out of both sides of my mouth there.

03:40:08.811 --> 03:40:19.545
If 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

03:40:20.024 --> 03:40:28.745
that is far more token efficient than vibe coding something very quickly and then spending a whole bunch of tokens to try and, um,

03:40:28.984 --> 03:40:31.225
kind of form it back into shape.

03:40:31.545 --> 03:40:35.079
And what you are probably kind of retrospectively

03:40:35.079 --> 03:40:53.636
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. So 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.

03:40:53.875 --> 03:40:57.396
Okay. So we've had a quick tour of the anatomy of a design system.

03:40:57.635 --> 03:41:01.396
Your design system may vary in how you've set it up. This is ours.

03:41:02.330 --> 03:41:07.690
We've gone through some of the elements in there that are needed to make it AI friendly.

03:41:07.771 --> 03:41:24.195
So 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. It's giving it that governance of what it needs to run through in order to execute on our design system intelligently.

03:41:24.275 --> 03:41:37.590
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. First one is you've vibe coded something already, and now you wanna try and make it fit your design system.

03:41:38.149 --> 03:41:43.176
Could be something you've worked on yourself in Claude, in Lovable, in Figma Make, whatever you've used

03:41:43.655 --> 03:41:46.615
as long as you can access the code behind it. The

03:41:48.695 --> 03:41:57.840
other 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.

03:41:59.279 --> 03:41:59.840
And

03:42:00.800 --> 03:42:02.000
full disclosure,

03:42:02.560 --> 03:42:06.160
that's the better way to start, and that is our recommendation

03:42:06.160 --> 03:42:15.745
if 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

03:42:16.225 --> 03:42:17.345
let's imagine

03:42:18.225 --> 03:42:25.680
you've been vibe coding or your colleague, Alan, might have been vibe coding an idea for a game to play with students.

03:42:26.000 --> 03:42:32.239
And I think most of us out there, this lands on our desk, this screams vibe coded.

03:42:32.896 --> 03:42:37.456
It has all the hallmarks, all the kind of gradients, the use of interphone,

03:42:38.255 --> 03:42:41.056
lots of stuff that feels kind of very,

03:42:41.056 --> 03:42:42.655
very lovable esque.

03:42:43.535 --> 03:42:47.960
That's fine. This might be absolutely appropriate to test something out

03:42:48.840 --> 03:42:54.440
just to get a concept moving to get the kind of creative juices flowing. No problem with that. But

03:42:55.319 --> 03:42:59.640
we might wanna understand, okay. Is this viable to be built using

03:42:59.640 --> 03:43:06.455
our branding? Or if we wanna it or present it to senior stakeholders, we might want it to look less vibe coded. So

03:43:07.175 --> 03:43:15.814
no real problem with this. I think, you know, this has its place, but it screams it screams vibe coded for better or worse. So

03:43:16.220 --> 03:43:22.699
what we can do and what you can see here is we might decide, okay. We're gonna ask Claude to retrospectively

03:43:22.699 --> 03:43:30.859
apply our design system to the files that we've been sent. So in Claude in this version here, we can see I said to it,

03:43:31.455 --> 03:43:40.175
fix this five coded prototypes, use our design system, pointed it to where the file was. And what's come back already looks better. Right? It looks more like of the MBA.

03:43:40.335 --> 03:43:42.734
Let's have a little reminder of our website.

03:43:42.734 --> 03:43:43.775
It's using the right

03:43:44.495 --> 03:43:49.351
colors. Typography looks more on definitely using the right button styles and stuff.

03:43:50.070 --> 03:43:57.030
Already, you can kinda see it's doing that thing of basically painting by numbers. So it's taken the existing structure

03:43:57.351 --> 03:44:01.396
that came out of the box from whatever we vibe coded, and it is attempting

03:44:01.396 --> 03:44:03.075
to make it look and feel right.

03:44:04.115 --> 03:44:08.195
And then we start to see issues here. We can see where it's tried to patch up

03:44:08.675 --> 03:44:19.390
the 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.

03:44:19.470 --> 03:44:22.750
So it's almost like it's been applied, but it's been done quite roughly.

03:44:22.830 --> 03:44:25.310
Again, this might be absolutely fine for

03:44:25.755 --> 03:44:26.955
your use case,

03:44:27.675 --> 03:44:37.355
some 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.

03:44:37.675 --> 03:44:38.235
So

03:44:38.555 --> 03:44:49.971
you 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,

03:44:50.290 --> 03:44:54.130
but giving it the constraints of our design system to do that ideation.

03:44:55.325 --> 03:44:58.445
So what we can ask Claude to do,

03:44:59.005 --> 03:45:01.565
we look at my other terminal node.

03:45:02.125 --> 03:45:04.445
What we have, we have

03:45:05.485 --> 03:45:07.565
where is it? Skill.m

03:45:07.565 --> 03:45:07.805
d.

03:45:08.780 --> 03:45:13.181
Alan, can you tell us a little bit more about this actually? So this is one of the the

03:45:13.500 --> 03:45:14.460
instructions

03:45:14.460 --> 03:45:16.540
about what we wanna vibe code. Right?

03:45:17.900 --> 03:45:22.940
No. In this Skill MD, it's basically a recap of one of the modules of the dMVA.

03:45:23.021 --> 03:45:28.035
So whenever we do wanna make projects on that particular module,

03:45:28.035 --> 03:45:33.396
this is how we bring in the context of the actual content that students go through. So

03:45:33.635 --> 03:45:36.675
what I'm guessing you have done is you have probably pointed

03:45:37.395 --> 03:45:39.395
Claude to this particular

03:45:40.210 --> 03:45:45.730
mod document, so it knew what we mean when we say business strategy.

03:45:46.130 --> 03:45:57.575
Because 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

03:45:58.855 --> 03:46:02.375
that's a a skill that we use whenever we need to bring in that context.

03:46:03.175 --> 03:46:23.735
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. Exactly. Yeah. I don't know if such highlight's showing up, but yeah. I you to come up with I'm doing this in natural language, so come up with a

03:46:23.975 --> 03:46:29.575
new game teaching designers about business strategy. We've created a skill, and I've told you where that skill lies,

03:46:30.295 --> 03:46:36.375
which 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.

03:46:37.760 --> 03:46:39.680
I'd like it to be based off of

03:46:42.000 --> 03:46:50.080
Yeah. The the skill. Right? Oh, yes. Based off of the skill. Sorry. And to use our design system, and I've told it where I want it to create it once it's finished.

03:46:51.279 --> 03:46:58.516
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,

03:46:59.235 --> 03:47:03.716
it will look at Claude m d first. So it will pass through this file,

03:47:05.075 --> 03:47:13.029
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.

03:47:13.029 --> 03:47:16.950
So it goes into the process of vibe coding our idea

03:47:17.109 --> 03:47:19.525
with all the context of how we build,

03:47:20.165 --> 03:47:24.245
what our design system looks like, how it works, and how to make decisions from it.

03:47:24.565 --> 03:47:25.206
So

03:47:25.925 --> 03:47:27.926
takes a little while to go through that.

03:47:28.325 --> 03:47:36.780
I think it took about five minutes to create this first version, but I'm gonna show you what that looks like. So this is obviously the one where it was retrospectively

03:47:36.780 --> 03:47:38.301
applying the branding.

03:47:38.540 --> 03:47:45.820
And then we have version one, which is it's calling trade off. Trade offs are central to business strategy. Not gonna go into a lesson about business strategy.

03:47:46.141 --> 03:47:47.341
This is what it's created,

03:47:48.295 --> 03:47:58.695
and 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,

03:47:59.975 --> 03:48:02.135
and rather than

03:48:02.774 --> 03:48:05.750
just giving this kind of here. Also, way that we

03:48:06.070 --> 03:48:11.750
when I was setting up the design system for games, we talked about stuff having containers, having progress,

03:48:13.430 --> 03:48:19.585
the kind of language we use, giving people context about the business case that they're gonna be designing around. So

03:48:20.065 --> 03:48:29.345
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. One of the key principles

03:48:29.345 --> 03:48:42.260
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.

03:48:42.420 --> 03:48:56.945
There'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. So 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

03:48:58.625 --> 03:48:59.506
our patterns,

03:49:00.280 --> 03:49:05.400
our rules, and how we govern our design system. So this already feels like a superior

03:49:05.560 --> 03:49:10.601
product and something actually that's I think is a tear up from something looks vibe coded.

03:49:11.240 --> 03:49:14.600
We can go through and sort of choose our places within the arena

03:49:15.654 --> 03:49:19.895
and tune our activities. And this is all already feeling more more us.

03:49:20.375 --> 03:49:21.415
So you can see this.

03:49:21.975 --> 03:49:35.120
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.

03:49:36.400 --> 03:49:40.880
K. So that's kind of one version of this. Now

03:49:42.000 --> 03:49:42.960
if we gave,

03:49:43.615 --> 03:49:52.256
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,

03:49:52.815 --> 03:50:01.370
they're not gonna come up with the same design. Two designers are not gonna come up with something identical. That actually isn't what we expect Claude to do either,

03:50:01.370 --> 03:50:05.370
but we do expect our designers and we do expect Claude,

03:50:05.930 --> 03:50:11.130
any design it comes up with, to be within those constraints that we've built into the

03:50:12.090 --> 03:50:13.290
into the design system,

03:50:13.955 --> 03:50:15.476
into our MD files.

03:50:16.115 --> 03:50:27.075
So 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

03:50:27.315 --> 03:50:32.940
and asked it to do a version two. This would be like our other designer going off and doing something.

03:50:33.500 --> 03:50:36.620
It came out with this. Now you might recognize, actually,

03:50:37.021 --> 03:50:45.095
it'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,

03:50:46.135 --> 03:50:47.175
the way it's

03:50:47.415 --> 03:50:51.175
putting things within a a big card, the way it's got progress,

03:50:52.375 --> 03:51:01.411
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. The thing that's different

03:51:01.730 --> 03:51:07.011
is Howie has taken that brief and decided to design a game. So

03:51:08.484 --> 03:51:12.805
draw the line is this one. So I imagine this is gonna be something about strategy canvas.

03:51:13.444 --> 03:51:16.565
So new coffee train. And, again, we can see there's definitely

03:51:16.725 --> 03:51:17.925
a similarity

03:51:18.085 --> 03:51:19.524
here in

03:51:19.970 --> 03:51:24.770
button styles and choices it's made. It's done the right thing. It's put one question per page.

03:51:25.090 --> 03:51:26.850
It's got the right hover effects.

03:51:27.250 --> 03:51:30.850
This is all feeling like the same design system. Right?

03:51:31.649 --> 03:51:38.285
We go into the next stage. Let's draw our lines. So now now now we can start doing a nice strategy canvas.

03:51:38.524 --> 03:51:43.245
This feels like an upgrade from the last game that we built, actually. Alan, we might wanna try this.

03:51:43.564 --> 03:51:45.725
So we can see here that

03:51:46.369 --> 03:51:49.010
just like in the non AI world,

03:51:49.890 --> 03:51:59.090
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. Right? We are

03:51:59.649 --> 03:52:00.290
diverging,

03:52:00.735 --> 03:52:09.376
but 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

03:52:10.016 --> 03:52:14.590
executive or to Alan or actually to our students pretty soon versus something

03:52:15.070 --> 03:52:16.750
that's just been VIBE coded

03:52:16.910 --> 03:52:18.431
without those constraints.

03:52:19.070 --> 03:52:24.030
Does that make sense? I actually gotta do the third version, Alan, because it was on such a roll.

03:52:25.790 --> 03:52:26.910
But we'll come on to that.

03:52:28.965 --> 03:52:42.271
Yeah. No. I'm gonna show the third version now, which I quite like. So, 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,

03:52:42.511 --> 03:52:47.951
is it's used a different version of our progress bar from the

03:52:48.190 --> 03:52:53.391
design system. So whereas previously, using this one, which we've used in other games,

03:52:53.551 --> 03:52:57.365
we actually have two versions of this. This And is the one that gives a bit more context.

03:52:57.605 --> 03:52:59.525
And, actually, if I was reviewing

03:52:59.605 --> 03:53:02.165
the designs that had come to me from a designer,

03:53:02.485 --> 03:53:03.766
I prefer this one.

03:53:04.965 --> 03:53:06.405
What do you think, Alan?

03:53:08.165 --> 03:53:09.925
I would have to think about it more.

03:53:11.819 --> 03:53:15.260
But we're now getting into the into the

03:53:15.340 --> 03:53:25.180
bit that I think is particularly interesting when you are implementing a design system like this. So I'm pretty happy with the kind of quality that's coming out generally through these different versions.

03:53:25.735 --> 03:53:27.815
But from reviewing the two

03:53:27.976 --> 03:53:35.415
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,

03:53:35.735 --> 03:53:40.375
there are choices that I would want it to make moving forward. There are choices that I would say to a designer,

03:53:40.780 --> 03:53:44.780
Actually, you know what? When we're designing a game, I think the contextual

03:53:46.220 --> 03:54:02.835
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. I've not given that enormous amount of thought, but I wanna get now make that codified.

03:54:02.915 --> 03:54:06.275
The other thing that I've just noticed, the subtle difference here,

03:54:06.595 --> 03:54:14.490
is the start the brief button here. I 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,

03:54:15.290 --> 03:54:26.315
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. I would like to make it part of our governance.

03:54:26.715 --> 03:54:28.875
So we have a file for that.

03:54:30.075 --> 03:54:33.195
So we have something called decisions markdown.

03:54:33.354 --> 03:54:47.540
And, 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.

03:54:47.859 --> 03:54:52.420
Now this is the kind of stuff that designers do codify. We do put it into our documentation.

03:54:52.785 --> 03:54:54.546
We talk about it in critique.

03:54:55.266 --> 03:54:58.065
We are a small team trying to run this ourselves.

03:54:58.385 --> 03:55:01.825
We don't have design groups of designers critiquing these things,

03:55:02.865 --> 03:55:06.465
so we wanna do this at speed, and we wanna make it reliable

03:55:07.440 --> 03:55:12.320
in that when Claude kicks off this process and looks through decisions.md,

03:55:12.400 --> 03:55:13.681
it understands

03:55:14.080 --> 03:55:16.960
our preference for certain things. So within here,

03:55:17.600 --> 03:55:18.641
each decision

03:55:19.120 --> 03:55:21.120
has a few bits of criteria.

03:55:21.200 --> 03:55:22.240
So it's

03:55:22.575 --> 03:55:23.695
like a rule,

03:55:24.016 --> 03:55:26.976
when to use it, examples, counterexamples

03:55:26.976 --> 03:55:32.176
like what a bad bad version of this would look like so they can review itself,

03:55:32.575 --> 03:55:35.855
and then why it was added. So we've got a number of existing

03:55:36.016 --> 03:55:37.855
rules in here around that.

03:55:38.870 --> 03:55:43.510
Things around feedback and state like when to use a toast versus a modal,

03:55:43.670 --> 03:55:45.351
how to use loading states.

03:55:46.310 --> 03:55:47.910
But what I've added in

03:55:48.710 --> 03:55:49.510
down

03:55:50.470 --> 03:55:52.230
the bottom here

03:55:53.985 --> 03:55:57.105
Where is it? Here we go. So I

03:55:57.105 --> 03:55:59.105
actually reviewed those two designs

03:55:59.266 --> 03:56:07.186
and added a new decision rule, which is step up versus progress bar. So I've told it

03:56:06.320 --> 03:56:07.521
when to use

03:56:09.840 --> 03:56:10.880
this version

03:56:11.040 --> 03:56:12.480
of the

03:56:12.880 --> 03:56:14.480
progress bar versus

03:56:14.480 --> 03:56:33.876
this 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

03:56:33.955 --> 03:56:34.756
for the steps.

03:56:36.060 --> 03:56:46.220
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. So I asked it to do another

03:56:46.220 --> 03:56:51.500
version of the game. It understands what we wanna get from the game, what the mechanics are, how we teach.

03:56:52.285 --> 03:57:01.165
But 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

03:57:01.645 --> 03:57:08.070
that I asked for. And I would expect now every time I vibe in a new version, it's gonna follow that rule.

03:57:09.029 --> 03:57:11.750
I'll stop there. I hope that makes sense.

03:57:12.149 --> 03:57:14.630
It does make sense. Yeah. Cool.

03:57:15.350 --> 03:57:16.150
Nice.

03:57:18.069 --> 03:57:21.430
So yeah. That's kind of so to kind of recap,

03:57:21.765 --> 03:57:23.045
I think applying

03:57:23.045 --> 03:57:25.365
a design system to something existing

03:57:26.324 --> 03:57:31.925
kind of vibe coded piece is not the way to go. You can do it, and you saw the results. They were kind of

03:57:32.885 --> 03:57:35.125
you know, it looked like someone had painted on

03:57:35.681 --> 03:57:36.240
the

03:57:37.120 --> 03:57:40.080
the NBA look and feel on here, but it was definitely suboptimal.

03:57:40.080 --> 03:57:43.200
It wasn't following our rules strictly versus

03:57:43.280 --> 03:57:51.280
vibe coding from the start using the design system. We got what I would say was some pretty solid results out of that. They passed the eye test

03:57:52.744 --> 03:57:56.825
and also give me variations where I can start to see

03:57:58.345 --> 03:58:02.665
preferences from my perspective that I would like to build into the system

03:58:03.225 --> 03:58:03.944
longer term.

03:58:06.181 --> 03:58:07.621
Any questions, Alan?

03:58:08.261 --> 03:58:12.820
No, all clear. Thanks Tom. No worries. Anything else to cover here?

03:58:19.565 --> 03:58:21.485
Mean, obviously, like anything,

03:58:21.646 --> 03:58:23.006
when you're deciding

03:58:23.325 --> 03:58:27.405
whether whether saint qualifies as a rule to write down,

03:58:29.806 --> 03:58:33.086
it's not you you don't necessarily make a rule at everything.

03:58:34.045 --> 03:58:34.605
So

03:58:35.170 --> 03:58:39.811
yeah. Like, could you defend the choice with a principle or scenario?

03:58:40.130 --> 03:58:46.210
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,

03:58:46.529 --> 03:58:51.336
it's not really a rule. Your your taste is kind of forming. So these are all the kind of

03:58:51.976 --> 03:59:00.216
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,

03:59:00.775 --> 03:59:03.016
you know, use your sensibilities

03:59:03.750 --> 03:59:07.270
as a designer to know when to make something a rule versus not.

03:59:08.789 --> 03:59:10.710
Anything else to add though?

03:59:11.029 --> 03:59:12.470
No. I don't think so.

03:59:12.710 --> 03:59:13.910
No. I think

03:59:14.789 --> 03:59:15.590
I think

03:59:16.226 --> 03:59:18.945
where the senior designer fits into all this

03:59:19.186 --> 03:59:24.466
is the kind of quality bar for what you can get out of vibe coding has got higher, not lower.

03:59:25.425 --> 03:59:31.105
But someone still has to look at the ideas that have come out the back of this process and decide

03:59:31.420 --> 03:59:33.819
which is the better way to teach, what is the more

03:59:37.740 --> 03:59:40.700
I'm just gonna end up waffling. So I think we'll leave that there.

03:59:41.180 --> 03:59:43.021
No. Well, I I think

03:59:43.500 --> 03:59:49.465
that's exactly what the role of a designer when the a like, building an AI design native system

03:59:49.865 --> 03:59:52.905
is, is seeing how AI system,

03:59:53.625 --> 03:59:54.186
like,

03:59:54.505 --> 03:59:55.385
understands

03:59:56.024 --> 03:59:58.905
what we have written in MD files and the components

03:59:58.905 --> 04:00:00.024
and just

04:00:00.409 --> 04:00:12.970
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.

04:00:13.609 --> 04:00:16.426
Yeah. And I think there's a whole lot of philosophical

04:00:16.426 --> 04:00:18.025
questions here around like

04:00:18.745 --> 04:00:22.506
how where does the role of a junior designer fit into this?

04:00:24.025 --> 04:00:33.010
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

04:00:33.489 --> 04:00:35.010
a whole different discussion. But

04:00:36.290 --> 04:00:42.210
Yep. Let's stop there. This goes then into, I think, other topics as well. So this is just,

04:00:43.135 --> 04:00:46.255
I think, a nice way to show how AI

04:00:46.895 --> 04:00:54.095
yeah. How design systems can be AI native. Thanks, Tom, for showing us this, and I see you in the next section. Thanks.

04:00:54.175 --> 04:00:57.600
Bye. Okay. Time to automate

04:00:57.840 --> 04:00:59.920
some of the boring tasks.

04:01:00.319 --> 04:01:02.320
So what we will do here is

04:01:03.040 --> 04:01:04.480
a task

04:01:04.720 --> 04:01:07.920
a weekly task that maybe a lot of you have to do if your team leads,

04:01:08.705 --> 04:01:09.905
design leads,

04:01:10.145 --> 04:01:13.985
which is let's call it, like, team reporting.

04:01:14.385 --> 04:01:15.665
Let's say that you

04:01:16.385 --> 04:01:17.505
need to stay

04:01:18.305 --> 04:01:23.061
updated about what each team member does, and you would like to each week basically

04:01:23.061 --> 04:01:28.181
know what the status of the project is. And there's some kind of a Google Sheet that you have

04:01:28.580 --> 04:01:29.940
where you're tracking that.

04:01:30.181 --> 04:01:33.540
So let's just build this quickly together. So this is the name of the person.

04:01:35.455 --> 04:01:37.376
We'll talk about this later.

04:01:37.535 --> 04:01:39.536
Maybe project name

04:01:40.096 --> 04:01:41.456
and status.

04:01:44.415 --> 04:01:47.615
Actually, if this is weekly, right, we would probably

04:01:48.160 --> 04:01:49.200
wanna have

04:01:49.520 --> 04:01:52.240
status per week. So maybe this is

04:01:52.640 --> 04:01:53.521
status

04:01:55.680 --> 04:01:57.920
let's see. Status week one,

04:02:00.640 --> 04:02:01.360
status

04:02:01.520 --> 04:02:02.160
week two,

04:02:03.365 --> 04:02:04.325
and so on.

04:02:05.205 --> 04:02:07.926
And what we would want our team members to do,

04:02:08.965 --> 04:02:09.766
let's say,

04:02:10.325 --> 04:02:11.766
Mercy, and May,

04:02:12.646 --> 04:02:17.851
is to basically if we are in week one of the project, we would want them to fill this out.

04:02:19.370 --> 04:02:23.771
And if they were in week two of the project, to fill this out. And we give them a few options.

04:02:24.971 --> 04:02:26.331
Where is this done?

04:02:29.210 --> 04:02:31.370
Drop down? Yeah. I think it's drop down.

04:02:33.725 --> 04:02:34.525
Done

04:02:36.364 --> 04:02:37.725
in progress.

04:02:38.444 --> 04:02:39.965
Let's say 50%

04:02:40.524 --> 04:02:41.485
or less,

04:02:41.805 --> 04:02:44.125
and then maybe in progress

04:02:44.604 --> 04:02:45.725
50% or more.

04:02:46.771 --> 04:02:49.410
I'm just making stuff up here. Obviously,

04:02:51.250 --> 04:02:53.570
this is all the stuff you can

04:02:57.650 --> 04:02:58.370
adjust

04:02:58.530 --> 04:02:59.171
and

04:02:59.410 --> 04:03:00.210
make better.

04:03:01.305 --> 04:03:05.146
I don't know. Just choosing some colors here like this. Yeah. So

04:03:06.025 --> 04:03:08.425
we have these different versions

04:03:09.465 --> 04:03:12.105
of what they can choose here.

04:03:14.185 --> 04:03:16.585
And what we want basically is

04:03:16.960 --> 04:03:19.040
that if they didn't do it

04:03:19.840 --> 04:03:22.320
by Friday, let's say 4PM,

04:03:22.640 --> 04:03:31.439
that 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.

04:03:32.065 --> 04:03:39.346
You 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

04:03:39.665 --> 04:03:45.025
in some shape or form will relate to what we're building here, which is automations

04:03:45.186 --> 04:03:45.585
to

04:03:46.400 --> 04:03:50.160
free up some time we can really spend more time on what really matters,

04:03:50.480 --> 04:03:53.841
which is the actual work. Okay. So let's build this team reporting,

04:03:54.000 --> 04:03:58.240
and I'll open up an anti gravity instance and basically tell it to,

04:04:00.636 --> 04:04:07.355
hey. Can you help me build automation that would every week on Friday at 4PM Central European time,

04:04:07.676 --> 04:04:15.900
ping any of the team members that haven't filled out the status report, which we have in a Google Sheet? So just ping them through Slack.

04:04:18.061 --> 04:04:20.940
I'm giving you that really, really simple prompt here because

04:04:21.500 --> 04:04:24.061
I don't know how we should build this.

04:04:24.700 --> 04:04:32.686
So I wanted to figure it out. I 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

04:04:34.205 --> 04:04:38.686
clarifying questions for how to build this because I'm not sure completely either.

04:04:42.125 --> 04:04:43.405
Okay. So

04:04:44.510 --> 04:04:47.150
we have a few questions from Claude.

04:04:48.109 --> 04:04:55.390
First 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?

04:04:56.205 --> 04:04:58.365
So do we have a column per week?

04:04:58.685 --> 04:05:01.085
Do we have a stamp timestamp column,

04:05:02.205 --> 04:05:07.565
or do we have checkbox column? Each row is a person with a checkbox or a status value per week.

04:05:07.885 --> 04:05:09.085
Each row.

04:05:09.325 --> 04:05:09.965
So

04:05:10.445 --> 04:05:11.646
row is

04:05:12.261 --> 04:05:18.980
just to clarify because I know a lot of designers don't like sheets. Row is this, and this is column.

04:05:19.540 --> 04:05:20.101
So

04:05:20.980 --> 04:05:26.740
checkbox column. Each row is a person with a checkbox of status value per week. No. Column per week.

04:05:27.556 --> 04:05:34.115
Each column is a week. Each row is a person. Yes. So that's the one we have. Right? So we have person per row, and then

04:05:35.795 --> 04:05:37.396
this is a

04:05:37.875 --> 04:05:38.195
week.

04:05:39.561 --> 04:05:46.681
How do we want to remind these people? Let's say DM. Right? We could do this. We could also do something else. We could send an email, whatever really

04:05:47.240 --> 04:05:48.440
we can choose here.

04:05:49.400 --> 04:05:57.386
Scheduling, very important. So how should this automation be scheduled to run? Is it through ClotCodes built in scheduled triggers,

04:05:57.465 --> 04:05:59.065
or would we use a server

04:05:59.545 --> 04:06:01.226
or Mac local

04:06:01.865 --> 04:06:03.065
CRM job?

04:06:04.105 --> 04:06:06.105
Well, definitely ClotCodes

04:06:06.105 --> 04:06:08.346
built in scheduled triggers, which by the way,

04:06:10.140 --> 04:06:10.860
clot

04:06:11.180 --> 04:06:12.140
code

04:06:12.699 --> 04:06:13.420
schedule

04:06:14.060 --> 04:06:18.300
tasks is a feature that it was used, I don't know, a few weeks back

04:06:19.500 --> 04:06:24.565
where you can run prompt on a schedule. You can do command loop or you can do command

04:06:26.005 --> 04:06:27.046
command

04:06:27.365 --> 04:06:28.166
schedule,

04:06:28.806 --> 04:06:29.445
and

04:06:29.846 --> 04:06:36.565
that's what we're gonna use. So if you wanna dive deeper, that's what you can look into. But, yeah, I'm gonna choose the first one.

04:06:36.886 --> 04:06:38.565
Submit

04:06:37.820 --> 04:06:38.780
answers.

04:06:45.580 --> 04:06:48.620
So now it came back with few more questions.

04:06:48.860 --> 04:06:54.396
How are team members identified in the Google Sheet? Is there a column with their Slack username or email or just their name?

04:06:56.795 --> 04:07:02.795
Well, right now, it's just a name. But because I have built the similar things before, I

04:07:04.130 --> 04:07:08.609
am expecting that this column b will have to put in the Slack ID,

04:07:08.609 --> 04:07:11.490
which is the unique identifier of each team member,

04:07:11.890 --> 04:07:15.330
which, by the way, the way you can get it is if you go on Slack,

04:07:15.729 --> 04:07:16.290
if you just

04:07:17.205 --> 04:07:20.885
do the right click over the person, then you can do

04:07:21.445 --> 04:07:22.165
copy

04:07:26.484 --> 04:07:28.885
copy name, not not not.

04:07:30.405 --> 04:07:32.965
Actually, you will have to then click into this person

04:07:33.550 --> 04:07:34.590
and

04:07:34.590 --> 04:07:35.230
then

04:07:35.550 --> 04:07:36.671
go here

04:07:36.750 --> 04:07:37.711
and then

04:07:38.990 --> 04:07:41.631
where is it? Steps about

04:07:43.391 --> 04:07:46.030
view profile. Okay. Here. It should be here.

04:07:46.905 --> 04:07:47.865
Copy

04:07:48.265 --> 04:07:49.306
member ID.

04:07:49.705 --> 04:07:51.226
Copy member ID,

04:07:52.265 --> 04:07:54.985
and we will do the same for the other two.

04:07:55.465 --> 04:07:58.346
So for Mercy and for Yerne.

04:07:58.585 --> 04:08:02.505
And then I mean, right now, it's enough if we have just one so we can test things out.

04:08:03.410 --> 04:08:04.371
Project name,

04:08:04.690 --> 04:08:06.931
testing project. Doesn't really matter.

04:08:07.091 --> 04:08:11.891
Okay. Basically, now we have the sheet ready for testing. So if we go back, now we can answer.

04:08:12.370 --> 04:08:14.530
It's Slack username column.

04:08:15.091 --> 04:08:18.315
Well, there is actually Slack ID column

04:08:18.875 --> 04:08:20.716
b column. Right?

04:08:21.115 --> 04:08:22.396
B is here.

04:08:23.596 --> 04:08:25.115
So I click enter.

04:08:25.755 --> 04:08:27.355
Slack authentication

04:08:27.355 --> 04:08:32.320
for Slack. Should I set up dedicated Slack bot or use an existing Slack integration you already have?

04:08:33.760 --> 04:08:36.080
Use existing Slack app.

04:08:36.479 --> 04:08:39.680
I don't think I have one. Use Slack MCP tools.

04:08:41.279 --> 04:08:42.560
Create a new Slack bot.

04:08:45.245 --> 04:08:47.565
Most reliable or use Slack MCP.

04:08:49.564 --> 04:08:52.686
Actually, let's try Slack bot if it's recommended.

04:08:57.245 --> 04:08:59.380
Well, here is the plan.

04:09:03.380 --> 04:09:06.101
File structure makes sense. So

04:09:06.660 --> 04:09:08.420
dot ENV file.

04:09:08.740 --> 04:09:10.340
Yes. I'll explain what it is.

04:09:11.074 --> 04:09:12.035
Tokens,

04:09:12.435 --> 04:09:13.955
temporary scripts.

04:09:14.435 --> 04:09:15.235
Okay.

04:09:16.194 --> 04:09:17.555
Makes sense.

04:09:18.034 --> 04:09:19.315
And I will need to

04:09:22.835 --> 04:09:23.795
create a one time

04:09:24.410 --> 04:09:26.570
I will need to create the bot.

04:09:27.050 --> 04:09:28.490
So I'll just go ahead.

04:09:29.610 --> 04:09:42.205
And 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

04:09:43.405 --> 04:09:45.005
phase, which is that

04:09:45.645 --> 04:09:46.525
you will

04:09:47.245 --> 04:09:54.610
basically see like a whole plan. So right now, it's in the step one. That's what this star is for. Create a skill directory structure.

04:09:54.930 --> 04:09:57.170
Copy copy and patch to Google

04:09:57.970 --> 04:10:05.195
auth. 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.

04:10:06.235 --> 04:10:10.315
Then it's gonna create a check status Python script.

04:10:10.555 --> 04:10:13.596
This is gonna be a script that's gonna check if

04:10:14.396 --> 04:10:17.915
people have already, like, basically added their status here or not.

04:10:23.521 --> 04:10:25.360
Hey. Google Auth.

04:10:29.920 --> 04:10:35.065
It then is going to write the Skill MD. The it's gonna write the ENV file,

04:10:35.226 --> 04:10:39.065
install the Python dependencies, and set up the remote trigger schedule. Okay.

04:10:40.105 --> 04:10:42.186
What do you need from me?

04:10:43.065 --> 04:10:45.465
What do you need from me?

04:10:48.390 --> 04:10:53.750
By the way, the ENV file is very, very important. So let me just spend a

04:10:54.069 --> 04:10:56.070
second on that. So

04:10:57.590 --> 04:11:05.755
basically, when you're building some kind of a potential prototype or whenever you are connecting your prototype to some kind of API service,

04:11:06.395 --> 04:11:09.195
you will need to add your API keys.

04:11:10.395 --> 04:11:18.411
Well, somehow, you the code will need to communicate to your API keys. An API key is basically a password, and if somebody gets it,

04:11:19.211 --> 04:11:20.650
then they can use

04:11:21.290 --> 04:11:28.971
that service. So for example, if you would have my API key for my cloth code, you would be able to use my usage tokens.

04:11:29.455 --> 04:11:30.575
This means that,

04:11:31.055 --> 04:11:37.535
yeah, 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.

04:11:38.655 --> 04:11:45.135
So that's why the best practice is to store all the API keys in a call file called dot d n v,

04:11:46.149 --> 04:11:55.189
and 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

04:11:55.510 --> 04:11:56.870
script to work.

04:11:58.310 --> 04:11:58.949
There we go.

04:12:00.395 --> 04:12:09.115
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? Should be just automatically done.

04:12:11.835 --> 04:12:13.915
Yeah. All of these things should not be happening.

04:12:16.340 --> 04:12:17.860
But it is what it is.

04:12:18.979 --> 04:12:19.620
So

04:12:20.500 --> 04:12:28.260
it's doing the job. We have talked about the ENV. So, actually, I do know that I will need to set up a bot. Right? So, actually, let's start doing that.

04:12:29.545 --> 04:12:33.705
Where was that section about the bot? There was something about a bot somewhere.

04:12:34.265 --> 04:12:36.186
Maybe it was in the plan.

04:12:38.025 --> 04:12:40.585
Let's

04:12:40.585 --> 04:12:42.266
see. Requirements,

04:12:42.665 --> 04:12:43.065
status.

04:12:49.470 --> 04:12:50.990
Think it was somewhere here.

04:12:55.070 --> 04:13:02.155
Okay. It's here. Step four, one time Slack bot setup. So I will need this link. I'll need to go here.

04:13:04.315 --> 04:13:05.836
Create an app.

04:13:06.556 --> 04:13:10.476
Let's see what it says. So create a new app. Okay. Boom.

04:13:11.970 --> 04:13:14.690
From scratch, I guess. Yes. From scratch.

04:13:15.490 --> 04:13:16.690
App name.

04:13:17.410 --> 04:13:18.450
Weekly

04:13:19.330 --> 04:13:20.130
status.

04:13:20.850 --> 04:13:22.130
Select the workspace.

04:13:22.290 --> 04:13:24.210
The team. Create app.

04:13:25.825 --> 04:13:28.705
And then what does it need from me?

04:13:29.665 --> 04:13:33.825
OAuth and permissions both, tokens, scopes, add chat.

04:13:34.465 --> 04:13:35.025
Okay.

04:13:38.771 --> 04:13:41.410
App ID, client ID, display

04:13:41.970 --> 04:13:42.690
information.

04:13:44.290 --> 04:13:45.650
So

04:13:46.450 --> 04:13:48.370
scope. Let's see. Where is the scope?

04:13:49.650 --> 04:13:51.811
Generate token and scopes. Right?

04:13:52.525 --> 04:13:53.565
Is it here?

04:13:54.285 --> 04:13:57.726
Token name. Add scope token name.

04:14:00.205 --> 04:14:03.245
Actually, don't know what this means.

04:14:04.765 --> 04:14:05.325
Weekly.

04:14:06.261 --> 04:14:08.581
Let's see. Weekly. What is that? Weekly

04:14:09.141 --> 04:14:10.021
status.

04:14:10.820 --> 04:14:13.061
Right? Let's see. Add scope.

04:14:14.580 --> 04:14:18.181
Okay. So for scope, I'm gonna copy this over. Chat.

04:14:18.900 --> 04:14:20.740
Right? Let's see. No items.

04:14:23.615 --> 04:14:24.255
Okay.

04:14:25.055 --> 04:14:28.335
So I got stuck here. So what I will do is basically

04:14:31.295 --> 04:14:35.375
okay. So now we have the message that code is built, and now we are the ones that are the bottleneck.

04:14:36.330 --> 04:14:40.730
That's usually the case. So I will now tell Cloud Code I'm having issues.

04:14:41.851 --> 04:14:44.171
Hey. I'm just trying to create this

04:14:44.971 --> 04:14:45.931
Slack bot,

04:14:46.091 --> 04:14:47.530
and I got stuck here.

04:14:48.355 --> 04:14:56.195
You can see the screenshot. Am I in the right page? And I'm now in the step two, trying to get the

04:14:56.755 --> 04:14:58.355
bot token, I guess.

04:15:01.489 --> 04:15:03.890
I'm in step two, so just help me out.

04:15:07.729 --> 04:15:12.609
As I said in the beginning, I'm not I'm not an engineer, but I've just been playing with this enough to

04:15:14.045 --> 04:15:15.165
be able to know

04:15:15.645 --> 04:15:19.646
what I need to ask, and that's it. But still, all the times, I don't know exactly

04:15:20.285 --> 04:15:24.205
the terminology either. So click add an OAuth scope.

04:15:25.165 --> 04:15:28.845
Scroll okay. In the left side of word, click okay. So I'm not on the right page.

04:15:30.670 --> 04:15:32.831
Click on the auth and permissions.

04:15:33.230 --> 04:15:34.271
That's here.

04:15:37.311 --> 04:15:40.431
And now we need to click bot token

04:15:40.431 --> 04:15:41.070
scopes.

04:15:41.985 --> 04:15:43.745
I guess that's here.

04:15:44.945 --> 04:15:46.545
Add an o at.

04:15:47.024 --> 04:15:47.745
Yes.

04:15:48.145 --> 04:15:51.665
Add an o at. And now chat. Right.

04:15:51.905 --> 04:15:52.545
Okay.

04:15:55.119 --> 04:15:59.760
That is added. Scroll back up and click install to workspace and authorize.

04:16:02.239 --> 04:16:05.199
Scroll back up. I am back up, but I don't see this.

04:16:06.835 --> 04:16:10.435
Install to workspace. Install to. I guess that's it.

04:16:12.915 --> 04:16:13.715
Allow.

04:16:18.194 --> 04:16:22.570
Let's see. Copy the bot token at the top. Starts with.

04:16:23.210 --> 04:16:24.730
Okay. Copy.

04:16:28.730 --> 04:16:32.410
The upload token section you were in under okay. So

04:16:32.925 --> 04:16:34.205
we have gotten to

04:16:34.604 --> 04:16:35.485
step five.

04:16:35.805 --> 04:16:37.885
Okay. Step five done.

04:16:38.045 --> 04:16:40.205
Where do I add the

04:16:40.284 --> 04:16:40.925
token?

04:16:47.324 --> 04:16:47.645
Yes.

04:16:48.440 --> 04:16:50.521
Okay. So I need to do it here.

04:16:53.960 --> 04:17:01.960
Slackable 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.

04:17:04.415 --> 04:17:08.896
Long story short, don't do it. Just try to always write directly into the ENV file.

04:17:09.215 --> 04:17:13.535
Okay. So we have done this. Now we need to also give you the spreadsheet ID.

04:17:13.854 --> 04:17:19.215
So the spreadsheet ID is, I believe, this part. Actually, let's just ask it.

04:17:20.221 --> 04:17:23.261
What part of this URL is spreadsheet

04:17:24.221 --> 04:17:25.181
ID?

04:17:28.620 --> 04:17:34.476
Oh, it actually told me even before. Anyway, now I got it. Boom. Boom. Spreadsheet ID is not

04:17:35.035 --> 04:17:39.275
as sensitive at all. So that's why I can drop it into

04:17:39.755 --> 04:17:44.235
the chat as opposed to Slack both bot token.

04:17:48.320 --> 04:17:50.320
Okay. Command s.

04:17:51.440 --> 04:17:52.480
Is that all?

04:17:53.920 --> 04:17:55.681
Let's see if that's enough.

04:17:58.720 --> 04:18:06.086
Not quite. Still need to do Google OAuth so the script can access the sheet. Run this. It will open a browser window asking you to sign.

04:18:06.806 --> 04:18:08.325
No. You run it.

04:18:08.646 --> 04:18:10.726
So a lot of times you'll get

04:18:12.085 --> 04:18:16.646
cloud code telling you what to do, and a lot of times you can just tell it to do it exactly this for you.

04:18:18.471 --> 04:18:23.110
So what will happen now is we should see a Google page open up

04:18:23.511 --> 04:18:26.230
on our screen, and we should be able to grant access.

04:18:32.745 --> 04:18:34.825
There's a bash command here.

04:18:35.146 --> 04:18:37.625
I still don't see anything opening.

04:18:41.146 --> 04:18:41.625
Yes.

04:18:46.800 --> 04:18:49.440
Okay. There we go. So now I need to basically

04:18:51.200 --> 04:18:52.240
give my

04:18:53.359 --> 04:18:54.240
blessing.

04:18:55.040 --> 04:18:59.200
The authentication flow has completed. You may close this window. Okay.

04:18:59.280 --> 04:19:03.735
So let's go back to anti gravity. Now it should already have information that this is

04:19:05.575 --> 04:19:05.975
done.

04:19:14.160 --> 04:19:15.761
Actually, now we can see

04:19:16.320 --> 04:19:21.280
how annoying it is if the bypass permission is not working. Basically, it's just asking all the time to

04:19:22.160 --> 04:19:23.440
approve everything.

04:19:24.720 --> 04:19:26.641
Yeah. For some reason, it's just not working today.

04:19:38.915 --> 04:19:42.595
Okay. The sheet name in in v

04:19:42.061 --> 04:19:43.500
is set to

04:19:46.940 --> 04:19:50.460
is set to spreadsheet title, but it should be the tab name. Yes. Okay.

04:19:52.061 --> 04:19:52.780
So

04:19:55.900 --> 04:19:56.380
that

04:19:57.415 --> 04:20:04.375
okay. It corrected itself. That's good. So now everything is in the in the v ENV makes sense.

04:20:04.694 --> 04:20:10.774
The sheet is connecting fine, but the header uses yeah. Exactly. I was waiting for this. So the issue we have right now is

04:20:11.359 --> 04:20:17.840
that this is not really self explanatory. Like, what is status w one, status w two?

04:20:21.600 --> 04:20:34.936
What 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. Let me update the logic.

04:20:35.670 --> 04:20:37.431
That's one way to solve it.

04:20:37.750 --> 04:20:41.030
The other way would be, no. Please just

04:20:41.430 --> 04:20:42.230
create

04:20:42.950 --> 04:20:43.990
in the spreadsheet

04:20:48.445 --> 04:20:49.806
column for

04:20:50.285 --> 04:20:51.565
each week

04:20:52.525 --> 04:20:56.445
in the q two, so second quarter of twenty twenty six.

04:20:58.285 --> 04:20:59.965
Do this from

04:21:01.351 --> 04:21:02.230
column

04:21:02.710 --> 04:21:07.351
d onward. Okay? So this is from here onward. It's gonna create, I guess, twelve

04:21:08.870 --> 04:21:10.070
twelve weeks.

04:21:12.710 --> 04:21:23.666
And 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.

04:21:25.905 --> 04:21:28.146
Okay. So now the dry run

04:21:28.850 --> 04:21:31.330
has worked. So basically,

04:21:32.130 --> 04:21:33.250
Cloud has created

04:21:33.490 --> 04:21:34.210
these

04:21:35.330 --> 04:21:36.051
columns,

04:21:36.370 --> 04:21:39.330
and it basically identified that Tom

04:21:39.490 --> 04:21:40.530
needs to be

04:21:41.810 --> 04:21:42.930
basically

04:21:43.355 --> 04:21:44.556
reached out to.

04:21:45.436 --> 04:21:46.476
It hadn't

04:21:46.556 --> 04:21:55.275
actually 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

04:21:55.275 --> 04:21:55.916
cloud

04:21:56.476 --> 04:21:58.075
because it doesn't have access to

04:21:58.650 --> 04:22:02.971
the local Mac, so it can't run the Python script or read the local credentials

04:22:02.971 --> 04:22:04.570
or add token.

04:22:06.650 --> 04:22:12.011
So the right approach here is local Mac cron jobs. So remember in the beginning when we were planning this out,

04:22:12.625 --> 04:22:16.225
one of the options was to actually do this through the local job.

04:22:16.465 --> 04:22:20.465
What this means is that our computer just needs to be on in order for this to work.

04:22:20.944 --> 04:22:23.025
So it's not as convenient.

04:22:24.064 --> 04:22:28.910
But still, if our computer was on on Friday at fourteen UTC

04:22:29.870 --> 04:22:34.110
or anytime after that, it was just it would run this schedule.

04:22:35.310 --> 04:22:40.430
Two things to do before next Friday, add Slack IDs for Messi and Hernay. Yes. We haven't done this.

04:22:41.285 --> 04:22:43.285
Can we now run,

04:22:43.845 --> 04:22:46.806
uh, can we run this for Tom?

04:22:46.965 --> 04:22:48.405
Just sent him

04:22:48.725 --> 04:22:49.766
a message

04:22:50.085 --> 04:22:53.605
reminder to fill out the status

04:22:54.360 --> 04:22:55.320
in here.

04:22:56.040 --> 04:22:57.801
And then we just give him the link,

04:22:59.801 --> 04:23:00.920
and let's see if this works.

04:23:07.735 --> 04:23:11.976
Now it's oh, it's already actually, it already had a reminder message.

04:23:15.096 --> 04:23:20.936
And now I give it a new one, so it's gonna update this and

04:23:22.261 --> 04:23:24.421
send live Slack DM to Tom.

04:23:25.460 --> 04:23:28.261
DM sent to Tom. He should have it in Slack now.

04:23:28.500 --> 04:23:30.980
I guess I won't be able to see this because

04:23:33.475 --> 04:23:35.155
it was sent through bot.

04:23:35.715 --> 04:23:40.115
Okay. So that's the downside of this approach. If we went with a different approach

04:23:40.435 --> 04:23:49.051
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. Actually,

04:23:49.130 --> 04:23:50.011
can we

04:23:51.851 --> 04:23:53.931
not use bot, but rather

04:23:54.650 --> 04:23:57.370
MCP Slack so that the message

04:23:57.771 --> 04:23:59.211
is sent

04:23:59.450 --> 04:24:00.250
as me,

04:24:00.595 --> 04:24:01.314
Alan.

04:24:03.314 --> 04:24:05.635
Also, now you can see that we're getting very, very

04:24:06.354 --> 04:24:07.795
close to having

04:24:08.274 --> 04:24:16.649
full context window. So I would typically open up a new chat and just or instance of agent and just continue there,

04:24:18.329 --> 04:24:20.250
especially now because we're changing the whole

04:24:20.890 --> 04:24:23.290
approach to it because we just built everything

04:24:24.170 --> 04:24:29.545
with Slack bot, and now we're changing it to an MCP approach.

04:24:30.185 --> 04:24:31.865
What we're basically doing is

04:24:35.465 --> 04:24:36.904
instead of using

04:24:38.640 --> 04:24:45.680
and right right now, we do wanna use an MCP, and before that, we basically went through APIs and tried to build a bot.

04:24:46.239 --> 04:24:47.840
And that obviously will not

04:24:49.760 --> 04:24:52.960
look like the message came from us, but it came through a bot.

04:24:54.255 --> 04:24:57.775
Now we actually wanna use MCP so that it actually looks like it came through

04:24:58.095 --> 04:24:58.655
us.

04:24:59.135 --> 04:24:59.775
So

04:25:02.575 --> 04:25:04.255
it's

04:25:04.255 --> 04:25:06.975
gonna now it has to redo a lot of the code.

04:25:08.671 --> 04:25:11.070
We no longer need the Slack bot

04:25:11.230 --> 04:25:11.871
token,

04:25:12.591 --> 04:25:14.351
so it's gonna take this out.

04:25:15.391 --> 04:25:16.110
Yeah.

04:25:16.511 --> 04:25:17.551
Now let's test it.

04:25:20.775 --> 04:25:25.575
I already have the MCP for Slack connected. That's why this is gonna be pretty fast.

04:25:27.495 --> 04:25:30.056
And let's see if the message is delivered.

04:25:30.215 --> 04:25:31.495
Yes. So

04:25:31.735 --> 04:25:33.255
Tom has gotten the message,

04:25:34.740 --> 04:25:37.540
and there's also a message sent using Cloth.

04:25:38.420 --> 04:25:51.025
Yeah. There we go. Sent. 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. I was exploring the technological

04:25:51.825 --> 04:25:55.105
architecture of how we can do this. There were various options.

04:25:56.465 --> 04:25:59.186
Obviously, we had to kind of glue together

04:25:59.425 --> 04:26:00.865
a spreadsheet

04:26:00.865 --> 04:26:01.665
with Slack,

04:26:02.810 --> 04:26:20.436
and 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. If 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

04:26:20.995 --> 04:26:21.876
let's say, hey.

04:26:22.355 --> 04:26:23.956
Actually, if we

04:26:24.516 --> 04:26:27.396
my computer let's say, I don't work on Fridays usually.

04:26:27.795 --> 04:26:30.596
Is there another architectural way we could solve this

04:26:31.061 --> 04:26:35.940
maybe with a server or what do you suggest? Don't do anything, just give me options.

04:26:36.340 --> 04:26:38.980
So again, like I'm just now basically

04:26:39.460 --> 04:26:41.540
conductor trying to understand

04:26:41.940 --> 04:26:43.461
what are my options here.

04:26:44.021 --> 04:26:44.500
And

04:26:45.141 --> 04:26:45.540
yeah,

04:26:46.105 --> 04:26:55.065
Cloud Code is a great teacher as well, and it's gonna give you different options for how you can solve this. And then if I spend more time on this, I would be able to

04:26:57.465 --> 04:27:00.745
use it. So number three, reframe it as a remote trigger,

04:27:01.870 --> 04:27:03.230
which is also

04:27:03.390 --> 04:27:08.029
its recommendation. Since the Slack MCP is connected to your Cloud AI, remote trigger can slide

04:27:08.750 --> 04:27:13.630
send Slack messages. Oh, since we actually move away from the API architecture,

04:27:14.270 --> 04:27:17.925
so the Slack bot architecture to the MCPs.

04:27:17.925 --> 04:27:20.005
Now we could use the cloud

04:27:21.364 --> 04:27:24.805
built in cloud structure infrastructure, which is the most

04:27:26.005 --> 04:27:27.845
convenient way we could have solved this.

04:27:30.220 --> 04:27:37.660
Well, think we can stop here. So my point, my goal with this section was to just show you how you can build automations,

04:27:37.899 --> 04:27:41.500
things that would help you as a team lead. I mean, obviously, this is like a very team lead

04:27:43.335 --> 04:27:47.335
specific example, but I just hope it gives you some idea

04:27:47.814 --> 04:27:52.135
for what kind of things you can build so you can transfer them to your own use cases.

04:27:52.935 --> 04:27:56.771
And with this, we are also closing the build

04:27:57.330 --> 04:28:00.051
section of this video, and I'll

04:28:00.051 --> 04:28:09.891
just have a short outro for you in the next section. Alright. That's the course. So I hope you got a lot out of this because I genuinely enjoyed making it.

04:28:10.585 --> 04:28:13.305
But the thing is that this field moves ridiculously

04:28:13.305 --> 04:28:13.945
fast.

04:28:14.185 --> 04:28:18.345
Even during this week when I was recording this video, new stuff dropped.

04:28:18.905 --> 04:28:23.465
For example, Klot or Entropic announced a new model called Mythos,

04:28:24.050 --> 04:28:26.930
It's supposed to be way better even than Opus.

04:28:27.170 --> 04:28:30.050
There's also a new plan mode called Ultra Plan.

04:28:30.370 --> 04:28:33.730
So, yeah, there's new features I couldn't even include in this video.

04:28:34.290 --> 04:28:36.050
So and that made me wonder, like,

04:28:37.824 --> 04:28:44.385
what is the future of this space and how can we really keep up? Because this video will get old

04:28:44.625 --> 04:28:54.189
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. That's why I'm playing with an idea.

04:28:54.510 --> 04:28:56.670
It's something I call a

04:28:56.750 --> 04:28:58.830
agentic design community.

04:28:59.229 --> 04:29:00.990
I even bought a domain already.

04:29:01.149 --> 04:29:03.870
It's a place where we would regularly do trainings,

04:29:04.350 --> 04:29:14.035
where we would break down new tools as they drop, but not just cloth code. Also like Figma Make, UX Pilot, Google Stitch, or even new agentic tools.

04:29:14.354 --> 04:29:18.275
So it will be sort of like an ongoing education for design community.

04:29:18.835 --> 04:29:22.675
Frankly, I don't know if I will build it yet. Depends whether of

04:29:23.110 --> 04:29:29.990
well, if enough of you actually want it. So if this does sound interesting to you, like, click the first link in the description

04:29:30.150 --> 04:29:32.150
and, yeah, join the wait list.

04:29:33.271 --> 04:29:37.431
And that's frankly it. Thanks for watching, and see you in the next one.