# Claude Code Skills for Designers

Channel: AI for Work
Video: https://www.youtube.com/watch?v=1pV7bvbaCFg
Duration: 13 min
Language: English
Words: 2336
Transcript page: https://viewrankai.com/tools/youtube-transcript/1pV7bvbaCFg

---

[0:00] If you want to up your game when it comes to front-end generation using Claude Code and skills, keep watching. I'm going to show you a professional process that works in an enterprise environment. Thus, it's going to work everywhere. So the entire process is you can either run the entire process or you can pick any skill at any point But the way I like to work is I do start with the grill me skill which is the top one and it goes through the design brief, then the information architecture,

[0:26] design tokens. there is the front-end design skill that actually builds the components on the pages then the optional one which is the design review. Once the LLM the work can either use the MCP server, something like a playwright MCP server So the first skill, which is a grill me skill, the most important one. This one is not for the lazy people because the LM is

[0:48] actually going to grill you. You might end up spending like 20 minutes answering questions, but that is the purpose of this skill. And it probably is the shortest skill, which is funny enough. The LLM needs to be relentless to understand your requirements, so you and the LLM are on the same page. The next step if you follow

[1:07] this flow is the design brief. looks through the process, looks through the actual code base as well. It is trying to identify there is a design system, if there are components already in the repository. If there are no components or design system, is going to load the next step as well. Once this finishes, then there is the

[1:27] information architecture. So the LLM is going to go through all the documentation so far figure out needs to be captured in the information architecture. It might ask you some questions if it's a very complicated feature like a multi-page or are redesigning the navigation patterns and so on. Now, the design token can also be skipped the fourth step, you have a design system and components in your

[1:51] repository. This is where the brief into tasks, takes all the documentation, mainly the design brief, and it turns it into separate tasks. So can actually the tasks, find the dependencies, and obviously also gives you where it is. The sixth one, which is the build phase, that's where the LLM actually produces code, is the front-end design skill. And then there is the last

[2:15] step, which is the design review. So we have our front end generated. There's a few ways we can go about this. So we can either a screenshot, paste that into Claude Code, and then kick off Review Skill. Another way you can use the seventh design review step is when the sixth is finished, the front-end design step is finished, you can use a Playwright MCP server that can kick off the headless browser, Okay, let me show you how to set this up, it's super easy, it applies to any skill in Claude Code, so if you are going to navigate to the GitHub repo, there's going to be a link in the

[2:49] description and scroll down and find the npx add command. All you need to do is just copy it. Then just paste that in the terminal and press enter. What is going to happen is going to load the the installer CLI tool, which you get an option to select which skills you want to get access to.

[3:08] So I'm just going to select all of them. design brief, design flow, design review, design tokens, frontend design skill, grill me skill, and information architecture. We just press enter. We get the choice of the application we want to use the skills So I'm just going to use Claude Code. And if you pay attention here on the

[3:29] right hand side, let me maybe zoom in. You're going to see two folders appear, agents and claude. So that's where the skills will be. press enter. It is going to ask me, do I want to these skills only for the project, this project, or globally? I'm just going to choose projects in this case. you don't know what to do,

[3:47] just pick the recommended. And once I hit enter, it is going to just ask me to confirm again. And if I press enter again last time, you're going to see two folders pop up here with the skills. And that is about it. So we've got our skills here. There you go. You've got your agents. the skills, the design skills that going to just elevate your when you're working either with Claude Code or cursor Now that your skills are installed in this project, all we need

[4:13] to do is just run Claude. just to confirm they are here. If we look at the list, we should see design flow, design review, design tokens, All those skills are currently in Claude, code available to us to use in this tool. Okay, cool. So I'm going to go through the entire flow. So if you type in slash and then you're going to see

[4:36] design skills that I currently have here. So I'm just going to use flow, press "Tab" and then, "Hey, I want to work on a would be an asset management application." this vague so you guys can actually see it's going to grill in this case, what kind of questions are we going to get how many, and it can be odd sometimes depending on

[5:01] scope of the feature. Grill Me is going to be the first one, the skill, design brief, information architecture, design tokens, brief to tasks, and then front-end design and design review. So it's asking if we want to skip anything in this case. I am not going to skip anything. I'm going to try and show you the full workflow. Okay, so let's start with the phase one, which is grill me, the LM says, "I'm going to stress test your thinking before we

[5:27] commit anything to paper." Yes, please, run all the skills. And we'll see what happens. Let's see what the first question is going to Okay, so because the problem we gave was super vague, it is asking us about the type and domain of the assets I want to track. and it gives you a few options, physical assets, IT assets, But then every single time you interact with these skills, they

[5:46] will give you some suggestions. This is the most important step in all the flow. So that's the second branch of the decision design tree that the skill is using. It is actually asking us about the target user and scale. Good stuff. We've got the grill summary. So we went through what was it nine

[6:05] questions, nine questions. You might get more depending on the the feature you are working on and So you can always like cross check if this is what you want to do. And then it is asking us now if we want to move to the design brief and obviously we do. So let's go. Before it actually creates a design brief, it needs to ask you a few

[6:25] questions which are just design related. Like the first section was about the requirements, what it needs to do the application. Now it's about how we want the application to actually look like. It is actually asking us about the emotional tone of it, and then it gives you recommendations, then it also gives you a few ideas when it comes to

[6:47] inspiration. So you can see linear being mentioned, you can see Google admin console being mentioned, And then the accessibility aspect of it as well, We are at the step of generating tokens, which we just completed. It has saved it to materialtheme.css file. there's actually a lot in here, take our design brief which is here as you can see it's going to break down into tasks and Save that to a separate markdown file for it to be able to track every single task got a foundation got our core UI have got somewhere here responsive and polish phase 6 which is actually using the front-end design skill to build the actual applications using

[7:31] the design brief and so on. Okay, so it finished generating. As you can see, this is the front end that we've got after the first pass. at the folder. So you see it created a folder, design, and then the IT asset management, which is a subfolder. The way this skills works, next time you're going to run it not to override the design brief and information architecture and tasks, it's going to create another subfolder And you are going to end up with a design brief file, information architecture file, and then the tasks file Okay, so here is our generation

[8:03] dashboard, assets, categories, reports. kind of looks like an IT asset management. Not too exciting, I guess that's the point. We can filter, we can sort. empty states are in place. We can click on the asset, which opens the dialogue. we can edit that as well. So let's make a change, save. We can add an asset Then categories, get the information how many laptops,

[8:29] desktops and so on we have. We can click and change the icon change the name. Good stuff. Let me just screenshot a few and then we can actually the design review. So again slash design review and then paste the screenshot. Let's maybe take a few others. And I'm going to show you a different way which is probably a better way which fully autonomous using the

[8:53] MCP server. So I don't have to go and this now which is a little bit tedious especially if you have a lot of pages. So do this first manually just in case you guys don't have Playwright MCP server. And design review images is going to go analyze the images, at the skill itself, what it needs to do We've got our design review back the LLM and it has a few

[9:18] it wants to actually propose. Categories page views sparse not chart segment ordering is wrong. Okay interesting dark mode is First time I have ever heard that better than most production admin tools. Wow an ego. has finished, mainly accessibility and some code changes, is a good thing as well, because the LLM's like, you know, if you use Figma Make, or whatever else it probably is going to

[9:47] ignore the accessibility aspect of it. So that's actually a good thing here. So let's have a look at it So that's what it looks like. It's not the most flashiest website, but I think that's actually intentional and that's good an asset management One thing that I want to actually run is the in Google Chrome. So this allows you to a website, see how it kind of scores in terms of accessibility,

[10:13] performance, and other things. So am just going to pick navigation, desktop is fine, performance, accessibility, best practices, analyze the page. So we'll see what kind of a score are we going to get. One thing is, you know, generating beautiful UIs, the other thing is actually making it accessible and performant, right? So in this case,

[10:34] 91 performance is pretty good. It's actually very good. And accessibility 100%. So design review definitely worked. Best practices, 81. It's an API, we're not using an API, so pretty happy with this. One last thing I want to show you is the Playwright MCP server because it's also part of my kind of a design workflow and how I use skills with

[10:57] MCP server. If you have no idea how to get access or even check if you have it just type in slash MCP then if you hit enter it's going to show you the list of MCP servers you have. As you can see at the bottom I've got the plugin it's an MCP, Playwright MCP. If you don't have that you can do and so if you were to navigate left and right it's going to jump to different tabs and plugins should be Playwright MCP I have that already installed it is going to be

[11:29] me in the install tab. If you don't have that MCP server yet just go to discover find Playwright MCP enter install it it's super useful and it's really worth doing it. just want to show you how the Playwright MCP works. And I'm asking it to use the Playwright MCP open the browser. It's like a headless version of Chrome. then take screenshots

[11:50] and run the design review. Let's see what happens. Okay, so guys, this is not me, this is Claude Code is just going through the website making sure it takes screenshots and then it's gonna analyze those screenshots the design skill review. So again, this is running itself, I'm not doing anything. Guys, so this is it for today.

[12:11] Thanks for watching. I'm gonna put all the links in the description After being an individual contributor for over 29 years now and also a design manager, it is super obvious to me that most important thing right now is having a process. The old design process or pseudo process because there was really never a process.

[12:33] I believe it is gone at this point. The AI tools are getting way better and much faster. But the thing to remember is that without process you're gonna get faster. But you're gonna get chaos as well. You're gonna end up wasting a lot of time. If you are a designer, either starting or a senior designer, I'm going to be creating more videos that are just specific to designer community

[12:55] and individual contributors in general. So hit that subscribe button and I'm going to see you in the next one. So thanks for watching and bye.

---

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