Transcript
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.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video