Claude Code Just Became a Design Tool

0:00Claude did it again. Claude Code now has a design skill. And I don't mean give it a prompt and get a pretty screenshot wrapped in a static HTML. With this new design skill, Claude can create real UI, graphic designs, and even complete design systems. And then you can actually manipulate those designs directly on a canvas, changing typography, composition, spacing, and more. So today I'm going to see how far I can push cloud code as a design tool. First I'll take my existing website and turn

0:33it into a complete design system. Then I will use that design system to create a hotel booking app. And finally I will use the same design system to create multiple Instagram carousel variations. So let's see what this thing can actually do. But before we begin, I just wanted to say thank you Mobbin for sponsoring this video. And more on that a little bit later. All right. So I opened my

0:55clot and here what we need to do, we need to go to the code mode, not the design mode, the code mode. And in the code mode, you need to create a folder where you're going to work and where you're going to work on your files. So I already connected my folder here. And here's the juicy part,

1:10the new update. So you just run the skill and you use forward slash and you type in design. And here's different options of what you can use design for, but I'll use design just for now. But what I want to do, I want to create a design system from my personal website that I have right now. Over here, I'm actually working on rebuilding it. But in any case, let's go back to Claude and let's paste in the prompt. Here's the prompt. Use design skill analyze my website and create design system from it. And I will use Sonnet 5 for this because we don't actually need Opus for this kind

1:47of task. And I'll use a high input. And now let's run the prompt. And this is what I'm getting. So basically it's loading. As you can see, it analyzed my website and it created a design system artifact. Here it is. And basically on the right now we have this dashboard or canvas. Let's make

2:08it larger so I can zoom in. So basically it looks like like Figma, right? Uh with all the artboards. And now I can like click on the artboard and I can actually export it as a uh PNG and even the HTML. So this is super cool because I can export the pages in code and with images and everything there and then I can use it to build for example I can use cloud code to build a website from from this artifact from this frame. Uh but I I don't want to do that right now. I just want to see what's going on here. So basically yes this is my website sergeichyrkov.com design system. We can see the

2:51colors that I use in my website. We can see uh the typography examples. Uh this is the color palette. Uh and this is the typography. So I can see that uh these are the display the headlines the section titles. Beautiful. The logo over here uh so also numerals and buttons and controls. So this is good. Uh also we have the foundations for the radius and spacing as we can see them over here for small for 12 pixels, medium 24 pixels and large 28 pixels. Also we have the circle circle items spacing over here. This is super cool. And what else? What else? Uh we have even elements

3:33from my website. So we have the buttons over here. Different buttons, different tags. Let's check them out. So basically the button uh yeah buttons over here maybe some tags over here. So this is super cool and of course yeah the the color cards. Nice. So this looks good. Uh what I can do now I can basically select any of these things and I can actually work with them. You see

4:00I can modify them if I need to. But I don't want to do it right now. Let's go to the second prompt. For the next example, I want to create design layouts for a hotel booking app. Let's call it Hotelios. But I'm not sure about the correct user flows and best practices uh of the hotel booking apps or just any travel apps. So that's why I need to get some inspiration from and here where Mobbin comes in. And if you don't know what Mobbin is, Mobbin is a platform with world's most extensive app design library with over 600,000 screens, 1,500 industry-leading apps, and over 300,000 user

4:39flows. Product designers and builders like you and me use Mobin to find realworld design inspirations without going through a bunch of conceptual UX UI designs made for portfolio 6. do competitor search effortlessly and discover the best practices and stay upto-date with the latest trends. So, if you're looking for the inspiration for your next website or an app, this is totally the best place to be. So, be sure to check out Mobbin and use my special link from the description below that is mobbin.com/chyrkov. That's CHYRKOV to get your 20% off discount on a pro plan. And thank you so much Mobin for sponsoring this video. So in my case I want to go to the category and I want to

5:25go to travel and in travel I want to search for the booking com. So I'll be using this example as a reference for my next prompt and in cloud code I will use again the skill design and I'll paste in the prompt. So here it is and design home hotel search hotel results screens for my hotel booking app hotel use my design system that would the one that we created in the first example for styles use Mobbin mcp and here guys you need to check out that you have connected Mobbin to your account in Claude let's do it right now so let's go to settings and let's go to extensions

6:06and let's see the browse extensions and here we need to search for Mobbin. Here it is. You need to click on Mobin and you need to connect it here. So mine is already connected. So use Mobbin MCP to analyze. And here's the link to the reference on Mobbin's website. This is the the booking com example for home screen search and hotel results screens. Keep their best practices. And I'll use Opus 5 for this example. And high output. And let's run the prompt. And here it is. This is the result we're getting. Check this out. So basically Claude used mobin MCP and here we can see that it actually pulled the examples and pulled the flows of booking the hotel from

6:50the homepage. Pulled the screens from Mobin over here. And these are the search screens also. It got it from Mobin's website. And then these are the search results screens with hotels you see over here. So it understood the user flow that has to be in my screens. Gave me some summary. Also it told me that it used my design system, my fonts and my colors. And it designed home, search and results screens. And let's see how it looks now. So I will just open it over here. We have three screens and we can actually move this thing up over here. These are like notes and we can see

7:27three three screens. This is super cool. We see my design system here. This is very important. We can see stays, flights, and cars. Nice. But I don't want to use cars because, for example, in my app, we're going to have only stays and flights. So, basically, I can select cars and I can delete it. Uh, so we'll have only stays and flights. And actually, what I want to do, I want to make it in the center maybe. No. Or we can make it like sort of fill this container, right? So, we go to properties over here on the right. And look at this. What we can do? We can

8:01use fill. Nice. And we can use justify center. Nice. So basically just like in Figma. So we we changed this layout a little bit already. And this is super cool. And what next? Next I have this part. Pick up where you left off and travel more. So basically this is like a promo banner. I want

8:23to move it up a little bit. So I want to move it like this. All right. So we'll use this for an ad. Nice. So this is good. This is good. Where to go? I kind of like this part, the search. And these are the results. The results are good as well. All right. Nice. So basically what we can do, we can of course update these little hearts icons, but other than that looks nice. And we can update the color. This is like the rating. So basically we can use the color from my design system but it doesn't pull it right now from um from the design system but I can change it to for example

9:03uh with the color picker right so I can use the color picker. Yep. And I can change the the text color to black. Yep. Like this. And leave it like that. All right. So it looks good. Yeah. So this is like an example of what you can do. All right. And now I can save and it will be saved. And then I can actually export this into code using HTML. And then I can use cloud code to implement this in code and actually build an app from these designs. So for the next example, I want to show you how to create Instagram carousel that you can post in your Instagram account by using the design system

9:44that we just got from my website. So again I will use the forward slashdesign skill and I will paste in the prompt. So use a skill design to create Instagram carousel with cover five slides and CTA to follow using my design system. Here I pointed to the my design system over here. As you can see topic is design with cloud code latest feature design and five case studies and give me three variations on this topic to pick from and I will use opus 5 for this with high effort and let's run the prompt and this is what I'm getting right now look it's loading so this was the answer from

10:29code over here uh and as you can see it gave me like a summary what it did and it shows me like three variations. First one is editorial mono. B and this is second variant ink terminal and C is lime blocks. Very intriguing. Let's see what's going on. So the first one is right here. As we can see these are like cards. Looks exactly like Figma canvas, right? It also gives me like sticky notes over here and it says what it's done. Uh let's check them out. So these are pretty cool, right? Um it uses the the title over here. So this is the cover. It got my name actually like sort of

11:09my like my logo. It shows that there this is the first out of seven slides. This is like the button to go to the next slide. Uh added my website over here. Very cool. So it uses my typography from my website my colors and this looks pretty clean. So you know we can see that it uses sort

11:25of like examples of the prompts that we can use. So this is the first use case design systems. The second use case is screens and flows. So basically it shows how to use that. Yeah, nice. I kind of like it. I think it's too clean. I mean like too too much white for me. And I love the the last one over here. Look, check this out. This looks super cool. The black one. And look, it didn't add my handle, my Instagram handle, because I didn't tell them to do that. Well,

11:54I guess you could find it on the website, but it didn't. In any case, look of what we can do. We can actually click here and I can edit this right inside of my canvas. So this is nice. And the coolest thing is there over here. I can open the properties panel. I can click on this element over here. And look at all of these things. This is actually what we used to have in Claude design mode. And this looks very similar to what we have in Figma. So we have the sizing every everything here uh like outer layouts features paddings all this stuff and also we have the typography

12:34and here is the size and I want to change the size for example to 40 so I click here and now yes now it's 40 it looks good and how about if we make it uppercase yes this is super cool now I can save it and publish it of course and what else I can do I can export everything so I can export them as PNGs and send them to my Instagram. So, this is super nice. Again, this was the first examples, first variation. Let's check out the other ones. And let's click over here on the left. And we can see we have another variations of my carousel. Let's see the B version. Wow, look at this. Now,

13:14it's in black. Actually, it says it's like ink terminal. Okay, nice. So, it uses the accent colors for my salad color. Uh, and basically it's the same thing, but it's like in dark mode, right? Yeah, it's pretty good. And the last slide is with the salad background, the salad green. I kind of like it even more than the black one. Uh, let's check out the third variation. Wow, this one is completely different. Check this out. It actually uses the style from my homepage. Let's check it out. So I have this kind of like bento style grid and yeah it uses this bento style for creating these slides. Yeah, looks pretty good, right? And it also pulled the the blue color

14:00that I had on the website as well. So I think these are this is a super great results. We can publish them. We can download them and publish them. Thank you so much for watching this video. I hope it inspired you to use new design skill in code and to try it out. And if you want to learn more about design and AI vibe coding tools and workflows, be sure to subscribe to my channel if you haven't already and like the video if you like it. This is super important to me. And thank

14:27you so much again, Mobbin, for sponsoring this video. And I'll see you in the next one. Bye-bye.