스크립트
00:00:00A good design really matters because if you want customers, your site's visuals are the first thing
00:00:05they judge. There are a lot of tools that help with this and Claude Design is one of the most
00:00:09powerful ones out right now. But a good design doesn't come from just prompting the tool. So in
00:00:14this video we're going to go through a five-stage process that you can run with Claude Design
00:00:18yourself. Whether you've never opened Claude Design or you've been using it for months, there's
00:00:22something here for you. If you've never opened it before, that's fine because we start from what the
00:00:27tool even is. And if you've already been designing in it, we go into how we integrate Claude Design
00:00:32with Claude Code to make it a lot more powerful. So use the timestamps below to jump straight there.
00:00:37Now if you're new to the channel, then welcome. We're actually a software company and we've built
00:00:41a full system for you around Claude Design based on our internal processes. So without wasting any more
00:00:47time, let's get into the video. This section is only for those who don't know what Claude Design is. So
00:00:52if you already know it, you can skip to the next one. It first came out as a research preview
00:00:57when Claude launched their Opus 4.7 model. It's basically a design tool with a really easy to use
00:01:02interface that lets anyone, even people who aren't technical, create good designs with just simple
00:01:07prompting. And it's available across all the paid plans. It doesn't stop at websites either. You can
00:01:12also design your slides, documents, and even create animations with it. Also Claude Design is available
00:01:17on both Claude Desktop and the Claude website. So you don't necessarily need to install the desktop app.
00:01:22If you want to use it on the app, you just download it, run the installation, and log in to your account.
00:01:27Then you open the sidebar, click on design, and its interface opens up where you can start using it.
00:01:32Claude Design gives you all the Claude models to choose from, even Fable, which is their most capable
00:01:37model, though you only get limited access to it. Their flagship for general use is still Opus,
00:01:42and it's still the best for designing. But the problem with these Opus models is that they just burn
00:01:46through a lot of tokens. Haiku, on the other hand, doesn't use nearly as many, but might need more
00:01:51refining to get a good design out of it. And on top of that, you can set the effort level for each
00:01:55model too. An effort level basically controls how hard the model thinks before doing anything. We use
00:02:01Opus 5, the latest model as of now, on medium effort for our design tasks because it lets us design
00:02:06easily without wasting too many tokens. It also lets you bring in all your MCPs and skills, which makes it
00:02:12way easier to use your own system right inside it. For those who don't know, MCPs are basically what let
00:02:18an agent connect to things outside of it, like other tools and services, and skills are sets of
00:02:23instructions that teach the agent how to do something better with step-by-step guidance and references it
00:02:28can follow. Now before you start, there's one thing to keep in mind. There's a limit to how many designs
00:02:33you can create. Claude Design runs on a 5-hour limit, but it isn't just for your designs. Everything else you
00:02:38do on Claude counts toward the same one. Within that 5-hour window, there's a cap on how many tokens you
00:02:44can spend, and once it runs out, you have to wait for those 5 hours to finish before you can use it
00:02:49again. And even though it's gotten so much better than when it first came out, Claude Design is still
00:02:53very token-hungry, so if you're using it heavily, expect your limits to run out faster. So in order to
00:02:59counter the extensive token usage, you need to take some steps before you jump in straight to prompting.
00:03:04These steps are important because they make sure that you get the design you want without wasting
00:03:09much tokens. The first thing you need to do is create the design.md file. This is a format that
00:03:15Google started, and it holds all the details of your brand's design. Your AI coding agent reads that file
00:03:20before it writes anything, so every screen it gives you comes out on brand. It never has to guess,
00:03:25so it never goes off-brand. Now Claude Design has a feature that lets you create design systems.
00:03:30A design system is basically a set of style choices that show up across your site. It contains your fonts,
00:03:35your colors, and all the other details that make up your design, and it lets you use those to build
00:03:40more designs. So all the designs built using a design system will follow the same style and look like
00:03:46part of the same site. But the main reason you want to start with a predefined design.md file is that
00:03:51all these models output designs that look identical. If you let Claude Design build the design system on its
00:03:57own, it just falls back to the generic colors and styles that the Opus models use everywhere, and
00:04:02because of that, your site ends up looking like every other AI built site out there. But if you
00:04:07handed a design.md to base the design system on, that file tells it exactly what you want, so it's way
00:04:12more controlled and doesn't fall back to those defaults. And as we already mentioned, the other
00:04:17reason is consistency. Since the whole design system is based on that one file, every page follows the
00:04:22exact same style, which is what keeps your multi-page site looking consistent. So for that, we made a skill
00:04:27that plans out the design.md for you. Now to use this skill, you run it inside Claude Code. And Claude
00:04:33Code is basically another tool by Anthropic. It is basically an AI coding tool you run in your terminal
00:04:39that can build entire apps for you. To install it, you just head to their official site, copy the install
00:04:45command, and run that command in your terminal. Once that's done, you type Claude in the terminal,
00:04:49and you can start using it by typing in your prompt. Since we were going to build the app in Claude
00:04:54Code, we just dropped this skill into the skills folder inside the .claude folder, which is basically
00:04:59where all of Claude Code's settings and configs live. You probably won't have this folder, but you can just
00:05:05tell Claude Code in the prompt box that you need to install skills in the project, and it's going to set it
00:05:10up for you and even put the skill in there by itself. The .claude folder won't be visible when you open it
00:05:15in Finder. That's because its name starts with a dot, and files that start with a dot get treated as
00:05:20system files, so Finder hides them by default. So to get in there, you need a code editor, which is
00:05:25basically an app that lets you see all your project files in one organized place. The one we use is
00:05:31VS Code, which is Microsoft's, and it's the one most builders use just because of how easy it is to work
00:05:36with. To install it, you head to their official site, download the installer for whatever system
00:05:40you're on, and run the installation. Then you just open your project folder inside it, and you'll be
00:05:45able to see everything, including the hidden ones. Then whenever you want to build an app, you just
00:05:49invoke this skill with its slash command, which is basically a shortcut you type with a slash to
00:05:54trigger it and give it a prompt telling it what you want to build. It interviews you and plans out the
00:05:59product's visual identity with you in detail, and once it's got everything, it writes out the
00:06:03whole design.md, and it also validates that against Google's standards by running the scripts. This skill
00:06:09also holds anti-slop references, which are basically all the common patterns that give a site away as AI
00:06:15built. So planning out a design.md first is really the best option. Also, if you're wondering where to
00:06:21get this skill, don't worry, we'll tell you later in the video. Now, the app we're building in this video
00:06:26is a project management app where you manage all your coding projects in one place. So to get started,
00:06:31first you give Claude Code a prompt with the slash command for the skill, telling it about the app you
00:06:36want to build in broad terms and what it's going to be used for, and it starts by analyzing the visual
00:06:41identity of your idea. Once it's got that, it starts asking you questions, like whether you've got a
00:06:46color in mind for your website. If you've already decided on your brand colors, you can hand them over,
00:06:51or you can let it choose on its own. Because you're using the skill, it won't default to slop colors,
00:06:55so you don't have to worry about that generic look, but it's still better to have them decided
00:07:00beforehand. What we usually do is use coolers, which is the site that generates and visualizes
00:07:05color palettes, so that you can see how the colors look together. Once you find a color combination
00:07:09that you like, you can click on export, then choose the code option, and it's going to give
00:07:14you this text that you can just copy and paste into Claude Code. Claude Code is going to put this
00:07:18inside your design.md files for you. After that, it's going to create the design.md file and run
00:07:24some verification steps. And the design file comes out exactly the way Google laid it out.
00:07:29Now that Google format is easy for the AI model to understand, but it's hard for you to actually
00:07:33picture the designs that are going to be generated from this, so you can't tell if it's the design that
00:07:38you want to finalize or if it needs to be changed. But don't test it inside Claude Design. You generate
00:07:43your designs there, and let's suppose you don't like them. Now you have to go back into the design.md,
00:07:48change it, and generate everything again. Every one of those rounds costs you tokens. There are a lot
00:07:53of tools that will just visualize a design.md for you, and one that we used is design.md.space. Any
00:07:59one of them shows you how your design file looks and how all the colors it picked for different areas
00:08:04work together. It visualizes all the elements too, which makes them way easier to decide on. Now this
00:08:10is just one way of creating a design.md, but there are others. If you don't want to make one on your
00:08:15own, you can just copy the design of a popular website as a sample. And honestly, copying one as
00:08:19a reference is what a lot of people already do. You take it in as a starting point and make changes to
00:08:24make it your own, just like how a lot of people have taken Notion's simple look and worked it into
00:08:29their own designs after a few tweaks. For that, there's a site called getdesign.md, which lists
00:08:34a lot of brands and all their styles as design.md files that you can go and get yourself. Since we
00:08:39already have a design.md of our own, we can move ahead with Claude Design and create a new
00:08:44design system from it. When you create a new one, it asks about the product details. But since you've
00:08:49got a design.md, you just upload that as an asset. And then it starts generating the new system by
00:08:55reading the file, creating to-dos and working through them one by one. After a bit, Claude Design
00:09:00creates the design system and visualizes everything for you, building out the different elements that'll
00:09:06be part of the app it's used in. Now for you to follow along with this workflow, you'll need this
00:09:10skill. We've put it up on GitHub and linked it in the description so you can get it for free.
00:09:14So to use it, just give this link to Claude Code and tell it to set it up for you and it will install
00:09:19it and place it in the .claude folder without you having to do anything. Now once the design system
00:09:24is locked and it's time to actually use it, there's another really important step before you start
00:09:29building the site. And that's creating wireframes of what you want to build. A wireframe is basically
00:09:34a rough sketch that lets you see where all the elements go and whether they're placed right. Now you
00:09:39could just straight up build the site instead but that causes problems. You'd have to wait a long
00:09:43time because Claude Design is slow to create designs and if after all that the design isn't what you
00:09:48need, you'd have to redo the whole thing. So to do that in Claude Design, select the design system you
00:09:53just made, select the wireframe option and give it a prompt with the details of how many screens you want.
00:09:58After that, it also lets you create multiple options for each screen so Claude can give you a few
00:10:03different styles of each screen to pick from. It won't take long to generate them and then you can
00:10:08look at the structure and go through all the variations it made for the same page. It's also
00:10:12got a commenting feature so to change any one thing, you just drop a comment on it. A comment basically
00:10:18sends the exact details of that element along with your prompt so Claude knows exactly which area needs
00:10:23changing and how. That makes it way better than just prompting and letting Claude figure out which
00:10:28area you mean on its own. And to add one, you just select the comment feature, click on the exact
00:10:33thing you want to change and type in the change you need. And you can add as many comments as you need.
00:10:38You could send them one by one but it's better to group them and send them all at once so it resolves
00:10:42them together and fixes everything in one go. That keeps your wait time to a minimum. So just keep
00:10:48tweaking it until you're happy with the structure and once you're done here, you can move on. And if
00:10:52you're enjoying the video so far, subscribe to the channel and hit the hype button. This small gesture of
00:10:57support goes a long way for us. Now once you've designed the wireframe, it's time to design the actual
00:11:03design design. You can also use the same design design to create a few variations. Since you usually
00:11:06ask Claude to make a few variations of the same design, you first pick which variation you want
00:11:10out of the ones you just made. Each of these pages is identified by its code number, so you just select
00:11:15it by that. After that, you give it a prompt telling it you want these screens turned into the actual full
00:11:20detail design and you tell it to keep the layout and structure from the wireframe with clean spacing
00:11:26and hierarchy. Claude design then reads all the elements it made while building the design system.
00:11:31And using those, it builds out the whole site so it comes out exactly according to the design system
00:11:36and the wireframe, just how we need it. Just like on the wireframe, you can comment and fix things
00:11:41here too. And you'll probably need a lot of changes because it tends to not pick button colors properly.
00:11:46Some buttons need to grab attention and should be in a bold color to stand out so you can ask it to
00:11:50fix those. And because it builds on top of the wireframe, the site comes out a little blank on
00:11:55its own with just the basic parts added in over the rough sketch so you can ask it to add textures
00:12:00and elements for a fuller look. You can also apply edits right on the design, so if you've got a minor
00:12:05change like deleting some element, you can do it directly on the design without prompting Claude for
00:12:10it. That way the change gets applied without you waiting around and wasting tokens on something that
00:12:15small. And once you're done making changes, you can ask Claude design to polish the overall look,
00:12:20and it makes these subtle, meaningful changes to the design. So the first version of the app is
00:12:25done now, but there's something missing and that's the animations. Now they're important because they
00:12:29make a site feel better to use and guide the eyes toward what actually matters. Things like scrolling
00:12:35into view or any other small touches make the site feel more alive. So for that, we gave Claude design
00:12:40a prompt to add animations across all the screens like things scrolling into view or any other small
00:12:45touches that make the site feel more alive. And we told it to keep them subtle and not make
00:12:50anything too springy since that can feel off. Once Claude design was done, you could see the scroll into
00:12:55view and text pop-up animations that make the whole site feel so much more interactive. And once you're
00:13:00happy with the design, you can move to the next step, which is the handoff. So the design in Claude
00:13:05design is finalized now, and it's time to actually give it life by turning it into the real product we're
00:13:10going to deliver in the end. Claude design didn't have this before, but now you can export your designs
00:13:15directly into Claude code. It uses the Claude design MCP, which is basically what lets Claude design and
00:13:21Claude code talk to each other. And it doesn't just work one way, it works both ways. So you can move
00:13:26your designs from Claude design into Claude code and bring them back over the same way too. You open Claude
00:13:31code again and paste in this prompt that you got from Claude design. It starts by reading the metadata,
00:13:36which is basically the summary info about the design, and then it lists out the project files. It reads the design
00:13:42system first, because that's where the design is defined, and then it reads all the elements one by
00:13:47one. Once it has the full design, it builds it out in your project, with all the animations that are in
00:13:52Claude design. But we had to double check this conversion to make sure it was done right. Visually,
00:13:57everything looked good, but there could still be internal issues when the raw code from Claude design
00:14:02gets turned into a real app. So we asked it for a deep review, and it started checking the design.md
00:14:08against what it actually built to see if the two matched up. And this review caught multiple issues
00:14:12like responsiveness problems, which just means the app wasn't looking right on different screen sizes,
00:14:17such as mobiles or tablets. What Claude design builds tends to have this problem, because it's
00:14:22still an early version, so whatever it designs comes out best for the exact thing it was made for. A design
00:14:27made for a website will look great there, but not always on other screen sizes, so we ran the fixes,
00:14:32and after that the visual part of the app was working and responsive. Now to actually finish this
00:14:36app and make it work, we needed to connect it to something called a database. So the problem right
00:14:41now is that even though the app is fully functional, and if we click on buttons, it will work and add
00:14:46details on a new project. But if we open the app again, all the progress that we made in the app will
00:14:51be gone. This is why we need a database so that all that data is stored inside the app and people can
00:14:57actually use it. So for that we used Supabase. It's one of the most popular backend providers out there,
00:15:02and one of the best ways to manage users and all your data. Now Supabase isn't new to us. We use it
00:15:08in almost every app we build, no matter who we're building for, and even a lot of our internal tools
00:15:12run their entire setup on it. That's because it takes a lot of the work off our hands that we'd
00:15:17otherwise have to do. It's also one of the most widely used databases, just because of how easy it
00:15:22is to connect with AI agents like Claude Code. Supabase also has an agent skill, which holds
00:15:28instructions, scripts, and resources the agent can use to work with Supabase more reliably. That way,
00:15:33it knows everything it needs to get the most out of Supabase's tools. To install it, you just copy
00:15:39the install command and give it to the agent, and inside that bundle there are two skills. One is the
00:15:43Supabase skill, which is basically a guide on how to use it, and the other is the best practices skill,
00:15:48which holds the best ways to optimize your app's performance. Once the installation is done,
00:15:53you'll see both new skills added to your project. The Supabase skill triggers whenever there's any
00:15:58database or login task, and the best practices skill kicks in if when you want Claude Code to make your
00:16:04app faster by mentioning the words "optimize performance" in your prompt. All of that's
00:16:08backed by a huge library of references for all kinds of issues. Once these skills are installed,
00:16:13you can give Claude Code a prompt to build the backend and connect the existing design to it,
00:16:18so the whole app actually works. Now, because we didn't want the agent working on the structure of
00:16:22how the app's data is organized, we'd already pre-made it ourselves and added it into the
00:16:27project's main folder. Since the skill is just a bundle of instructions, it can't reach your project
00:16:32on Supabase's servers and make changes there. It's just text telling the agent what to do,
00:16:36so it doesn't come with any tools that let it work on things outside the agent. That's why the Supabase
00:16:41skill asks you to connect either their CLI, which is the tool you run from the terminal,
00:16:46or the MCP. Either one gives the agent the tools to work on your Supabase project directly,
00:16:51so you're not doing anything manually. We went with the MCP because it's easier to set up,
00:16:56and we wouldn't have to deal with the keys that let the CLI log into your account. To connect it,
00:17:01you head to their official site, copy the install command for the agent you're using,
00:17:05and run it in the terminal that's open in your project folder. After that, you run the /mcp command
00:17:10inside ClaudeCode and you'll see it connected, but you won't be able to use it right away because it's
00:17:15not logged in. So once you select Authenticate, you'll be routed to the browser where you log in,
00:17:20and then the MCP will be connected. Once the MCP is connected, ClaudeCode then loaded the skill
00:17:25and got to work on the app. It made a lot of changes and ran tests against those database requests
00:17:30to make sure it built the best version. It also made sure it locked down all the areas that
00:17:34shouldn't be accessible to every user, all thanks to those guidelines in the skill. And just like that,
00:17:39Superbase handles the entire backend for you, all through the skill. So now the whole app is built
00:17:44and actually working. There's just one step left, which is deployment, basically putting it online
00:17:49so anyone out there can use it. But we're not going to get into that here, so keep an eye out for the
00:17:53upcoming videos where we go over it in detail. Now the skill we gave is actually a part of a bigger
00:17:59design system that we actually use internally in our projects. So if you want access to that system,
00:18:04you can get it inside AI Labs Pro, which is our community. That's also where you'll find
00:18:08other skills and resources that we show you in our videos, along with a place to interact with our
00:18:14team. So if you've found value in what we do and want to support the channel, this is the best way to
00:18:18do it. The link's in the description. That brings us to the end of this video. If you'd like to support
00:18:23the channel and help us keep making videos like this, you can do so by using the super thanks
00:18:28button below. As always, thank you for watching and I'll see you in the next one.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기