Claude Code Just Got Its Biggest Design Upgrade Of The Year (And Here's How To Master It)
CChase AI
컴퓨터/소프트웨어AI/미래기술
스크립트
00:00:00Claude Code just received its biggest upgrade to its front-end design capabilities in a long time with the brand new Slash Design skill.
00:00:07Now, the Slash Design skill essentially takes the best of the standalone Claude Design web app, which you see here, and inserts it into Claude Code itself.
00:00:16Instead of having to bounce between two separate applications or awkwardly transfer your designs from Claude Design to Claude Code, we now have the best of both worlds.
00:00:25Plus, we get the added functionality of all of our skills that we already use inside of Claude Code.
00:00:30So, we can stack this new Slash Design feature with things like Impeccable or the Taste skill, giving us way better outputs.
00:00:36So, today, I'm not only going to show you how Slash Design works, I'm going to give you the best workflow for getting the most out of it.
00:00:42So, if you do any front-end design work with Claude Code at all, you're going to want to stick around for this one.
00:00:46Now, the sell for the Ford Slash Design skill is what you see right here.
00:00:49Now, I'm inside of the Claude Desktop app, but the same thing applies if you're using the terminal.
00:00:53And it's the idea that when I do Ford Slash Design and I ask it to create something for me, it's going to generate an artboard very similar to the Claude Design web app.
00:01:02I have multiple options I can choose from, and when I look at these options, I can get very granular with what changes.
00:01:09As you can see over on the right, as I click on different components of the front-end design it's created, I can change pretty much everything.
00:01:17On top of that, I can very easily ask for multiple versions of the same sort of output, and once I like a particular version, then I can have Claude Code actually go to work and code this thing.
00:01:27This saves me a bunch of time versus being inside of the Claude Design web app, doing the whole thing, saying I want to transfer it over, putting it into a zip, dropping it in the folder, pointing in Claude Code, doing all that annoying stuff.
00:01:38And more than just being convenient, like I alluded to earlier, we can now stack skills.
00:01:43When I'm inside the Claude Design web app, I can't necessarily use or invoke something like the Impeccable skill or the Tay skill.
00:01:49I can do that here.
00:01:50So ultimately, my outputs are going to be way better, as well as being more convenient.
00:01:54Now, to use the design skill is very easy.
00:01:56All I'm going to do is do forward slash design, and then I'm going to prompt it for what I'm trying to create.
00:02:01So let's say I wanted to create a social media post, or think of something like an Instagram post, detailing what the new slash design skill does.
00:02:10And let's say I wanted to create three variations of this in three very separate design styles, and I wanted to use the Impeccable skill.
00:02:19I'm just going to open up my microphone and say something just like that.
00:02:22So can we create a mock-up for a social media post?
00:02:27Think of this being some sort of Instagram post detailing what the new Claude Code slash design skill does.
00:02:34I want three extremely different variations, so very different design styles, very different aesthetic styles.
00:02:41And when you do this, I want you to invoke the Impeccable skill to help you create this.
00:02:45Now, if I were to do the same exact skill inside of the Claude desktop app, it's going to populate inside of this sort of side panel, which is kind of why I like doing this inside of the desktop app, because everything's in one place.
00:02:57Inside of the terminal, what you're going to see is it's going to create an artifact, so it's essentially going to open up in my browser.
00:03:02So while not as convenient as a desktop app, it's still pretty easy to kind of do stuff.
00:03:06Now, before we look at the artifact, a quick word from today's sponsor, me.
00:03:10So I just released an updated version of my Claude Code Masterclass, and it is the number one way to go from zero to AI dev, especially if you don't come from a technical background.
00:03:19We focus on real use cases, practical use cases, and I update this every single week.
00:03:24So if you're someone who's trying to figure out how to actually use this insane tool, then this is for you.
00:03:32You can find it inside of Chase AI+.
00:03:33There is a link in the pinned comment.
00:03:35And here's a look at the artifact it created.
00:03:37So we have three different design styles for our Instagram posts, just like we saw inside of the desktop app.
00:03:44We have this property bar over here on the right.
00:03:46I can zoom in, I can click something, and I can start getting a lot more detail as to what exactly I'm adjusting.
00:03:52You'll also notice over here on the top right, we have a tweaks section, which right now is empty.
00:03:57At any time, I can prompt Claude Code to give me a tweaks panel, just like you would see inside of the Claude Design web app.
00:04:03And I can adjust even more things than what I see right here.
00:04:07So in terms of actually using this thing, relatively simple.
00:04:10Just forward slash design and ask what you want.
00:04:12Now, what should our workflow actually look like?
00:04:14How do we get the most out of this?
00:04:16Well, there is a simple three-step workflow you should use every single time you do any sort of front of design with Claude Code.
00:04:22And the first step is going to be inspiration because what I want to give Claude is not just a prompt saying, hey, I want three different stuff.
00:04:30What I ideally want to give Claude Code are some examples.
00:04:33I want to take screenshots of posters I like.
00:04:35I want to take screenshots of design styles I enjoy.
00:04:39Feed it to Claude Code and say, hey, can you create something in the same vein as this?
00:04:43Right now, we're just working on a poster, but this would also apply if you were creating like a landing page or a hero section or anything like that.
00:04:50Now, your next question should be, where can I find inspiration?
00:04:52And luckily, there are a ton of places to get ideas.
00:04:55One good website is Pinterest.
00:04:57I just threw in Instagram infographic and see all these potential designs.
00:05:01Another good one is Landbook, which is really good for sort of web design and hero sections.
00:05:06And we also have things like Dribbble, and that's Dribbble with three Bs.
00:05:11The idea is you just need to go out there and really you should start creating some sort of library of designs that you can always reference and bring to Claude Code when you want to design something.
00:05:21So you don't have to repeat this inspiration process every single time.
00:05:24So I'm going to take some screenshots of some I kind of like.
00:05:27I like this one.
00:05:29I think this looks pretty interesting.
00:05:31And remember, you're just sort of going for like a general aesthetic that you want Claude to pull from.
00:05:36And I think this one looks pretty interesting as well.
00:05:39So now I'm going to drop those three screenshots into the prompt window.
00:05:43And now I'm going to essentially give it the same prompt we gave it before, which is like, hey, I want that sort of Instagram post.
00:05:48I want three different versions.
00:05:49Except this time, I'm going to say, reference these screenshots.
00:05:52I want these to be used as inspiration.
00:05:54You can have a different sort of design for each sort of screenshot.
00:05:59And I'm also going to say, hey, make sure to use the Impeccable skill.
00:06:02And I'm also going to tell it, if it wants to generate outside assets, to use something like the Higgs field MCP that I have.
00:06:09You could use other things, like if you have like file.ai for other sort of image generators.
00:06:14The idea is, because we're inside of Claude code now, we can pull whatever we want into this design process.
00:06:19And again, you don't have to use outside images if you don't want to.
00:06:23But this is what my prompt is going to sound like.
00:06:25So let's actually recreate these three posts we've done.
00:06:29Again, we're using the slash design skill.
00:06:31But I've dropped three screenshots in here.
00:06:33And I would like to use those as inspiration for our design process.
00:06:37So I want three new generations.
00:06:39Do one generation that pulls from each of these appropriate screenshots.
00:06:43Again, use the Impeccable design skill.
00:06:45And remember, you have access to the Higgs field MCP.
00:06:48So if you feel like you need to generate outside assets that we can use for the posters, do that as well.
00:06:55I leave that up to your discretion.
00:06:56And that's really step one and two of this process.
00:06:59Step one being find the inspiration.
00:07:00And step two is actually using those additional skills that we really can't use inside of the Claude design web app.
00:07:08And if you're like, hey, you keep mentioning Impeccable, I have no idea what this is.
00:07:11This is just an open source free skill you can add to Claude code.
00:07:16And it's all about front end design.
00:07:18Essentially, its whole shtick is it recognizes what AI slop looks like, gets rid of it, and adds better design principles to whatever you're creating.
00:07:26And if you want a deeper dive into that, I have videos that go very in-depth into how to best use Impeccable.
00:07:31And now here's a look at the new posters that Claude created using Slash design.
00:07:35And you can see they definitely pull from that inspiration we gave it.
00:07:39And at any point, just like before, I can zoom in here.
00:07:43I can take a look at the properties and I can start editing things.
00:07:46Now, let's talk about the tweaks.
00:07:49So this design has no tweakable controls yet.
00:07:50Describe what you want to adjust in Claude will add a tweaks panel for it.
00:07:53Well, let's do that because now we're sort of in step three of the process where we want to start just tweaking things until we like it.
00:08:00So what I'm going to do is open up the terminal, where are you at, and say, hey, can we now add some tweakable controls here?
00:08:10I'd like the tweaks to be very aggressive.
00:08:12So I want to be able to edit almost anything as much as I can, like as much as possible using the tweaks panel inside of Claude design.
00:08:21So now you can see this tweaks part over here on the right.
00:08:24And so we're looking at this one in the middle.
00:08:25So I can change the color of the paper, right?
00:08:29What do we want to do here?
00:08:30And also remember, these tweaks can also kind of just give you ideas.
00:08:33So at any point in time, you can also go back to Claude code and prompt your way into these different changes.
00:08:39Again, the big thing with seeing all this visually is just the fact that, like, I can now iterate so quickly versus having to prompt Claude code, wait for the generation, see if I like it, prompt Claude code, wait for the generation, right?
00:08:52This just makes the entire process so much quicker.
00:08:55So we can change how the text looks like.
00:08:58It can change the actual size, the weight, the ruling, so on and so forth.
00:09:03So like everything you see here can be edited.
00:09:06But also remember, we can do big changes as well.
00:09:08So I just don't like the general look of, you know, the second one.
00:09:12We can do that as well.
00:09:13Like I can give it another prompt saying, hey, I don't like the actual content of this.
00:09:17I want it to be more heavy in terms of it actually explaining to people what slash design does.
00:09:21So I can say something like for the dial design, the second one, I kind of want to go with that.
00:09:26But to be honest, I would kind of like to change the content.
00:09:29Again, we're kind of going for an infographic thing that explains what slash design actually brings to the table.
00:09:34So when you recreate it, you can ignore the other two.
00:09:36I just want to focus on that one for now.
00:09:38Go ahead and go to a web search and make sure you understand what slash design actually brings to the table and put that into the new version of this infographic.
00:09:48And here's the updated version of that poster.
00:09:49As you can see, a lot more information about what the new slash design actually does.
00:09:53And again, because we're using this new slash design skill, it's so easy to edit.
00:09:56Oh, I don't like the text here.
00:09:59I can move it wherever I want.
00:10:00I can adjust the actual text itself, et cetera, et cetera, et cetera.
00:10:03And so from here, you really just continue that three step process of inspiration, using the right skills and iterating on whichever design you like.
00:10:11So if we do want to go with this middle one, we would just tell clock code, hey, I only want to work with this middle one.
00:10:16And you would just iterate, iterate, iterate until you like what you've created.
00:10:20And then you can do whatever you want with it.
00:10:22Big picture, this slash design skill does make front-end design so much easier inside of cloud code itself.
00:10:28Oftentimes, we've had to rely on outside things like Impeccable to do sort of this live on the web type design.
00:10:34So definitely take the time to try out this new feature.
00:10:36I think it's perfect for anyone who is a cloud code person but has liked the cloud design web app and has just felt it's awkward to switch between the two of them.
00:10:45That's the niche.
00:10:46That's the audience it's addressing.
00:10:48So as always, let me know what you thought of this.
00:10:51Make sure to check out Chase AI Plus if you want to get your hands on my cloud code masterclass.
00:10:55And besides that, I'll see you around.