So, on topic just launched an official

{slash} design skill for Cloud Code. And

what it basically does is it brings

Cloud Design's really popular artboard

workflow into Cloud Code. And you can

use this now wherever you're using Cloud

Code, if you're using the terminal or if

you're using the VS Code extension like

I do. If you update it and type in

{slash} design, you should now have this

skill built into your Cloud Code. And

you can see for this session I used that

to make a Robo Nugget's landing page.

And what it did for us is give us this

link, which if you head to that, what we

now have is this editable artifact which

if we zoom that in so we can see. And it

created this whole landing page for us

with a dark and light mode. And

everything here from the copy to the

choice of fonts and all the design that

you are seeing is built from just one

prompt. And I'll talk more later about

how I'm able to achieve a design like

this that doesn't look like it's vibe

coded at all. But for now, just to show

you some features of this new {slash}

design skill, if I go back to canvas,

the great thing about this artifact that

Cloud Code made for us is that we can

freely edit it depending on the designs

that we want. So, for example, you can

change the accent colors straight from

this page. You can adjust the spacing

between the elements and even the scale

of the fonts. And of course, you have

this sidebar at the right, which you

might be more familiar with if you're

using Figma. And you can edit that as

well. So, you can change the fonts, you

can change the weight of the fonts, and

so on and so forth. And then of course,

you can change the text of this as well

if you wish, which is just a much better

experience, especially if you are trying

to just polish a website to get it to

production. And since this is a Cloud

artifact, you can actually share this to

peers or clients as well. So, you can

see right now only I have access to it,

but this is quite similar to let's say

if you're sharing a Google Doc and you

want anyone with the link to be able to

access it, then you can just toggle it

through here and you'll be able to share

it to whoever needs to review this work.

But of course, one clear benefit to this

is that this whole artifact is connected

to your Cloud Code. So, if you want to

leave comments on this canvas, you can

do so just through this button and you

can just type it in here. Or from that

same session where you created this, you

can also just chat with it to apply some

bigger changes to that artifact that

you're creating, we'll do in a bit. But,

there's an obvious question here, right?

Which is that how is this different from

Claude design? Well, if you notice this

whole landing page, I was able to create

it with only one prompt. So, despite me

only sending this really simple prompt,

it was able to capture all our designs,

all the details here, as well as the

numbers are also all correct. And the

reason why that is is because I'm using

Claude Code, which is connected to my

entire operating system and context. And

I teach about this a lot in our

community and in this channel multiple

times as well. But, whenever you send a

prompt to Claude Code, the reality is

Claude Code actually doesn't work from

just that one prompt, because it also

works on your workspace context. And to

make it simple, the way that I teach

context and context engineering is just

through the arms framework. So, if

you're using Claude Code to its fullest

potential, then you'll be able to

connect it to your applications, you'll

be able to set up your routines. And

very importantly, the reason why that

prompt was able to make a pretty good

landing page from just one prompt is

because my context has memory connected

to it, which includes design systems,

brand books, and business details, as

well as my own skills. And so, that's

the big difference of using /design in

Claude Code versus Claude design.

Because say if I'm in Claude design and

I'll ask it to make a Robo Nuggets

landing page in here, what it's

essentially going to do first is

probably ask me some questions, because

it doesn't really know what Robo Nuggets

is. It has no memory of my business

outside of this conversation. So, you

can see Claude design is asking me what

Robo Nuggets is, what the visual

direction is, and you can go through

this and just answer it so that you can

give it a bit more guidance. Or, you can

also just have it decide for you, which

for the sake of this demo, that's what

I'll do. And of course, as you would

expect, what it returned to us is just

the default fonts that it would use,

some default colors like this black and

blue color palette, and all the details

here are also incorrect. And so, that's

the difference, because if you send a

prompt to Claude design, it actually

can't access any of the context and the

memory that you've built up. And for the

most part, each chat session that you

have with it is self-contained. So, you

can upload files to it, you can also

load design systems to it. But, because

it doesn't really have a memory system,

most of the time you will need to rework

that for every project that you do. And

so, that's a big contrast versus Claude

Code. And just here I have my second

brain illustrated for me to be able to

show it visually. And you can see here

that this whole workspace, it has

something like 60,000 files already. And

what this essentially is is just a

folder in my machine, which if you're

using File Explorer, this is how it

would look. And this has all of those

memory and all of those skills that I

was talking about, as well as contacts

on the applications as well as routines

that I am running. And by the way, if

you need a starter pack on setting up

your own context and your agentic

operating system, what I did is just

publish this nine-page guide, which you

can either read to or just give it to

your Claude Code to get you started. And

that's just available down in the pin

comment below if you need it. And so, to

give another example of the benefit of

using Claude Code {slash} design, what

we can actually do is use {slash} design

with our own skills. If I send this

prompt where I'm invoking this skill

called {slash} generate, which I talked

about in a previous lesson and I'll just

link it in this video as well. And

that's just a skill that connects to all

of the AI video and image models so that

I can freely use them on a pay-as-you-go

basis instead of subscribing to

something like Hexfield. But, I'm just

asking Claude Code here to generate a

relevant video for the site and place it

as the background. And if I send that

over, and once that's done, you can see

here that it generated this dot matrix

video of a robot. And let's just go

ahead and actually maximize that so you

can see. And it was able to generate

that with the skill that I have in my

Claude Code context, place it in the

background as I directed. And so, it's

just much more flexible because in

Claude design, even if you check skills

here in their drop-down, it actually

doesn't let you create new skills in

here. And the only ones they have here

are the default ones that Anthropic

ships. And so, if you want a bit more

flexibility, and if you want to use your

native skills in Claude Code, then using

{slash} design in Claude Code instead of

going for Claude design may be for you.

And finally, as a last example, if you

want to actually deploy this website,

meaning publish it on the internet, if

you try to do that from within Cloud

Design, so I'm saying here to push this

to Vercel, which is a well-known

platform that hosts websites for you for

free, it's now telling me to do it

myself, basically. But if I do that in

Cloud Code, and I'll ask to deploy this

site to Vercel, you see that it did just

that, and it's now live in this URL. So,

it's much more seamless, and really much

more flexible if you're just using Cloud

Code. And obviously, because it's Cloud

Code, you're also just not limited to

just designing websites. In fact, you

can probably do all of the templates

that Cloud Design has here. This one,

for instance, is a 3D object made with

that /design skill. You can design email

templates like this, mockups for mobile

app designs. And so, pretty much, if

you're designing something and want to

use Cloud Code because of the rich

context that you've built up, it's

probably a good idea to try out this

/design skill, especially with all those

features that I talked about. I hope

that was useful, and as always, thanks

for watching until the end, because that

helps the channel a lot, and I'll see

you all next time. Cheers.

>> [music]