# Claude Code Just Dropped /Design. (Master it in 8 Minutes).

Channel: Tristen O'Brien
Video: https://www.youtube.com/watch?v=Fqlc0N1qyMo
Duration: 8 min
Language: English, written by YouTube
Words: 2034
Transcript page: https://viewrankai.com/tools/youtube-transcript/Fqlc0N1qyMo

---

[0:00] Cloud code just released a slash command called slashd designign and it is the most useful command that they have given us all year. Basically what it does is it designs your page before it builds anything which means that it hands you an artboard which are just editable design options so nothing gets coded or built before you pick a design that you like. In this video I'm going to show you how you can run slashdesign. I'm going to show you the words that you

[0:23] have to use to get three real options. And then we're going to talk about why you would ever use slashdesign over the claw design app. But let's go ahead and start with what slashdesign actually is. In cloud code, when you type in forward slash, a little menu is going to pop up with a bunch of built-in commands. Each one of these commands is a shortcut with a prompt built into it. And it's there so you don't have to remember what to type in every single time you want to do that action. And slashdesign is one of those commands. So, what this actually does is when you run slashdesign and you

[0:54] give it some parameters, claude isn't going to just start building the app or the page that you want it to build. What it's going to do instead is it's going to take those parameters. It's going to take what you've asked for and it's going to open up a canvas and show you finished design concepts that you can choose from. And this is where you get to be a creative director. Each one of these designs is called an artboard. And what that really means is it's just a visual concept, a visual option that you can click on and then you can start to change things around. So if you click

[1:20] the headline like right here, you can retype anything you want in it. You can grab something. You can move it around. You can change the spacing. You can change the color. And you can do all of that right on the screen right on the concept that it gave you. Or you can look on the right hand side and over there you'll see that there is a panel that lets you edit things directly. So here's the problem that slashdesign is solving. Let's say that you want a landing page for your business and you type out a really good prompt and you hit enter and claude builds the whole

[1:46] thing for you. It probably would do a decent job. Claude is pretty good at that. But by the time that you're looking at it, every single design decision has already been made for you. So what would you do? Well, you would start typing new prompts into Claude. You would tell Claude that you want to make the header bigger or you want to move a section up or try a different font. With that, you are directing every single change by hand. And that is not efficient and that takes absolutely forever. You're also doing it blind because now you're describing a design instead of looking at a design. And

[2:16] that's how it used to work. But slashdesign changes that order around. Now you're making design decisions on how things should look before the page ever gets built. Okay, so let's do an example together on how you would actually run this. So if you wanted to use this, you would type in /design like you know, but then you would describe what you want and then how many different directions you want to see. So it sounds something like this. Give me three versions of a landing page for a dog grooming business. But you also want to give it something to look at. For example, if there's a site out there

[2:45] that you just love the layout, go ahead and take a screenshot of that or you can just grab the URL and then you're going to give it to Claude because what that does is that tells Claude the direction that you want to go for. Now, you're not copying anybody's site. You're not copying the work. All you're doing is

[2:58] you're pointing at a design style. That's what the pros do every single day. Now, for me, I usually use mobin.com, which is a big library of real websites and apps that you can browse through. But any site that you like would work. just take a copy of it or use the URL and give it to Claus. But the more specific you are, the more different that those three different designs are going to come back. And we do want them to be different. So, you're

[3:20] going to tell it a couple more things. You want to tell it what the page is for. And then you're going to tell it the job that the page is doing. So, it could sound something like this. You could say, "I want a landing page for my local dog grooming business. The only job of the page is to get people to book, and I want five different sections, and here are three images of the pages that I like the look of." or

[3:39] you can put in the URLs if you want to. And the reason why you want to ask for three is because you want three really different takes. You don't want the same design three separate times. You want them to look different because you want three different options. Now, you can also look at a project folder. If this is already in a project folder and you already have a product of your own with your own colors and your own logo and your own components, you can just work within that folder, right? So, you can tell Claude, "Hey, take a look at all these colors. I don't want you to invent

[4:05] anything new. Here's the page layout that I like, but make sure you're using all of my elements. But once you're done editing, once you like what you see, what you're going to do is you're going to take a look at the top of the canvas. Each one of these designs has its own name up there, and you're going to want to make sure that you remember that name because we're going to use it here just in a few minutes. And when you're done, look over on the right hand side. There is a save button. So, go ahead and click save. And then when you go back to

[4:27] Claude, you're going to tell it which one of these designs that you want to move forward with. Or you could have just deleted the ones that you didn't like. But there's one more really important thing that you need to do before you hit enter. And before I tell you what that is, if this video has been helpful so far, please subscribe to the channel and like the video and leave a comment. It's something that I really

[4:44] appreciate and it helps out the channel. So that one more thing I was talking about is images. Claude can't create images on its own, right? And a site, a website is a thousand times better if it has real images on it. So you can do a couple things here. One, you can generate your own images somewhere else and then come back and hand them to Claude to put them in. or you could use something like your nano banana API or you could use Higsfield. It doesn't matter which image generator you're using. You just need to make sure that this can have images. And when I hit

[5:10] enter and a few minutes later, we get to take a look at what we got here. Now, this shouldn't surprise you, right? Cuz we just picked out this design. And to me, this doesn't look bad at all. I'll call this version one. It's clean. It's professional. It's exactly what we picked in the canvas. If you don't like it, you could always ask Claw to generate something new. But if you do like it, this is where you get to keep building on top of it. Because right

[5:31] now, we just asked for a landing page. So maybe you want to add a booking system on the back end or you want to tie it into your calendar. That's when you go back into cloud code and then you start telling it what functionalities you want. And if you want different pages, you just go back to slashdesign and then you give some examples of what you want and then you start that process over. Some of you are probably thinking

[5:50] that there's already a claw design app. So why would I run this inside of cloud code? And that is a fair question because the app is really nice. It's a great place to design, but there's three things that I keep going back to that I feel like this makes it a better use inside of Claude Code. The first one would be where your project lives. If the thing that you're designing is part of a code base that you're already working in, well, Claude Code is sitting right there already. So, the design and the code never have to leave the same place. The second one would be what

[6:18] happens after you pick the one that you want. and Claude Code. If you give it the name of the artboard, it's going to start building it right then and there. Inside of the Claude design app, you do have to export it before handing it over to Claude and then it's going to build it. Not a big step, but a little bit more convenient if you're already in Claude Code. And the last one is what you're actually making. If this is going to become a real page or a real app, then do it inside of Cloud Code. If this is going to be a poster or a flyer or a

[6:45] social graphic or something like that, then you're going to want to do it inside of the Claude app because you don't need Claude code to create something like that. And look, this is still in research preview and that means that how it looks today inside of Claude Code is going to look completely different probably next week. And right now, it just comes down to personal preference to be honest. If you try it in Claude Code and you like it, well then use it there. If you try the app and you like the app better, then just use it in the app. But again, if you're going to be creating a website, if

[7:12] you're going to be creating an app, you have to give it a claw code anyway. So maybe it makes sense just to start there. Okay. Well, that is slashdesign. It's fairly easy. There's three things to remember here. One is you're always going to ask for at least three different directions so you have options to choose from. Two is you're going to be talking to it like you're talking to a client. You're going to tell it who it's for. You're going to tell it what the page has to do. And then you're going to give it examples of what you like. That way, it builds something with

[7:36] structure and not just guessing what it thinks you might like. And three is you're always going to check the output against the design that you pick because the artboard is going to give you the visual to start from, but it's not the finished product. It still can make mistakes. And if you want to see what Claude can actually do on the design side beyond this, well, check out my full claw design video right here. And if you like this video, please subscribe, give it a like, and leave a comment. and I will see you in the next

---

About this transcript
Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com).
ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts.
Free transcript tools, no account needed: https://viewrankai.com/tools
How to read any video this way: https://viewrankai.com/llms.txt