The argument in one line.
A Claude Code Skill encodes your design system's repeatable patterns once and lets the AI reach for them automatically based on context, so your whole team stops re-teaching AI the same rules on every session.
Read if. Skip if.
READ IF YOU ARE…
- You are a designer or design lead at a B2B SaaS team using Claude Code or Codex and tired of pasting the same context files on every task.
- You are trying to systematize design-to-code handoff so multiple team members get consistent AI output.
- You have a component library or token system with enough rules that you keep re-explaining them to AI.
- You want to know whether pre-built public skills could save you from building your own from scratch.
SKIP IF…
- You have not set up Claude Code yet — a separate setup guide is linked as a prerequisite.
- You are looking for design system architecture advice independent of AI tooling.
The full version, fast.
Most design work has repeatable patterns — tokens, component conventions, handoff rules — and AI users typically re-paste this context on every session. A Claude Code Skill solves this: it is a skill.md file with a description specific enough that the AI auto-detects when to load it, so no manual invocation is needed. The presenter team publishes a free public repo of design-focused skills installable in one npx command. The video demos extracting design tokens from a live site and building a custom component-token-audit skill from scratch — both triggered by natural-language prompts with no explicit skill name invocation.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:44
01 · The re-teaching problem
Cold open states the core problem: teams keep re-teaching AI the same design patterns on every session.
00:44 – 02:55
02 · What a skill actually is
Defines a skill vs. a .md file: auto-triggers from description, bundles skill.md plus templates and company context. Shows the design.md skill anatomy.
02:55 – 03:38
03 · The design-system unlock
Explains why design systems are the ideal skill use case: component conventions, tokens, and handoff rules are all repeatable, high-stakes patterns.
03:38 – 05:37
04 · Installing skills via npx
Demos npx skills add command, spacebar-select menu, and the choice between project-level and global installation.
05:37 – 08:01
05 · Tour of available skills
Walks through the public skill library: Figma Bridge, FigmaGen, Extract DS, AI Components, Caveman, Prompt Evaluator, Market Psychology. Shown via an 8-bit video-game UI.
08:01 – 11:09
06 · Live demo: Extract DS on Carrot
Shows the Carrot open-source product, prompts naturally to extract its design system, and Extract DS auto-fires. Output is a JSON of colors, fonts, and spacing values.
11:09 – 13:46
07 · Building a custom skill from scratch
Audits Carrot components to find hard-coded values, runs token extraction, then asks Claude to create a skill for this repeatable task. The skill-creation guidance skill writes the new skill.md automatically.
13:46 – 14:34
08 · Recap and CTA
Summarizes the skill-vs-markdown distinction and encourages viewers to use skills in their design systems. Subscribe CTA.
Lines worth screenshotting.
- A Claude Code Skill auto-triggers based on its description — no pasting, no calling it by name. If your prompt matches the description, the skill loads.
- The key difference from a .md file: you have to summon a .md file every time; a skill is just there when it is relevant.
- Skills can bundle multiple files — skill.md, templates, and company context — so the AI knows exactly which documents to pull without being told.
- Installing a team full skill library takes one npx command and a spacebar-select menu.
- Installing globally means every Claude Code project on your machine automatically gets the skills, not just the current one.
- Design system rules are the ideal candidate for skills: tokens, component conventions, and handoff patterns are high-repetition, high-stakes, and easy to encode once.
- The Extract DS skill auto-fires when you describe wanting to extract a design system from a URL — no slash command required.
- Building a custom skill is itself a skill-guided action — the skill-creation guidance skill ensures the new skill follows proper structure.
- Skills evolve: when you find a repeatable fix the AI keeps getting wrong, update the skill rather than manually correcting each occurrence.
Build it once, let the AI remember it forever.
WHAT TO LEARN
The real cost of not using skills is not one bad output — it is every future output where the AI reverts to generic behavior because context was forgotten.
- A skill description is its trigger: write it precisely enough that the AI can match your natural-language prompt without being told the skill name.
- Skills can reference multiple files — templates, company context, token definitions — so the AI pulls the right documents automatically instead of you attaching them each session.
- Installing a skill globally means it follows you across every project; project-level scopes it to one repo. Choose based on whether the pattern is universal or product-specific.
- You can build a custom skill by asking Claude to create a skill for a repeatable task — the skill-creation guidance skill handles structural requirements automatically.
- Skills evolve alongside the product: when a pattern keeps failing, update the skill rather than correcting each instance manually.
- The Extract DS skill turns any live URL into a design token foundation — useful at project start or when reverse-engineering a reference site visual language.
- Component metadata skills capture when to use, when not to, and constraints — preventing future contributors from misusing components in ways the original designer did not intend.
Terms worth knowing.
- Claude Code Skill
- A structured instruction set stored as skill.md that an AI agent loads automatically when the user prompt matches the skill description — distinct from a markdown file which must be manually attached or invoked.
- Extract DS
- A pre-built Claude Code Skill that scrapes colors, fonts, and spacing from a given URL and outputs a normalized design token file usable as a starting point for a design system.
- npx skills add
- A CLI command that fetches a published skill bundle from a remote repo and installs selected skills either globally or at project level, enabling team-wide sharing of custom AI instructions.
- Design token
- A named variable representing a visual decision — a color, spacing value, or font — stored in a centralized file so components reference the variable rather than a hard-coded value, enabling consistent updates.
- FigmaGen
- A skill that takes existing code components and generates correctly structured Figma components from them, handling the code-to-design direction of design-to-code workflows.
Things they pointed at.
08:11productCarrot (open-source prototype feedback widget)
Lines you could clip.
00:00
“So most of us keep teaching AI the same patterns over and over. A skill ends that.”
02:43
“A skill is something that your AI reaches for on its own.”
10:05
“We did not prompt it. We gave it the right context so it knew exactly which skill to pull.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphor
So most of us keep teaching AI the same patterns over and over. A skill ends that. You build it once or grab someone else's skill, and you could just reuse it.
Let me show you what a skill is and how to wire it into your design system. Hey. I'm Diane.
I'm the founder of The Design Project. We help over 50 b to b SaaS teams ship products faster with AI. Right now, we're heads down building indentic design systems, and skills are a big part of how we're doing it.
So let's get into what a skill is. I'm gonna share my screen. So this is my team's agent skills repo.
This is public. I'm gonna share this with you guys, and you guys can get access to all of the skills that my team uses regularly. .
But to take a step back and understand what a skill is is first, a skill is not just a dot m d markdown file. It's way more than that. So unlike a dot m d file, it's a skill that loads only when it wants to be used.
So that means that when you look into a skill, you're gonna see a few things. So here are some examples of skills. Let's look at one of the most popular skills that exist, and I'll walk through some of these as well.
If we look at the design.md, it has a name and a description. So this description is really important because this means that if you have the skill loaded and you prompt something like, hey.
I need to build and design a new screen. It's going to pull in this skill because it understands that you're designing a new screen.
So unlike dot MD files is you have to call them. You have to upload them. Hey.
I wanna use this dot MD file here. A skill is just programmed already. So if you just use the right context, it's just gonna apply it.
Same with if you're doing accessibility. If you use an accessibility tool, if you use an accessibility skill, it's just gonna pull that skill directly and make sure that everything you're building is already accessible without you even have to say, hey.
I wanna use this accessibility skill. So let's go a little bit deeper about what a skill is. So a skill is made up of a skill dot md.
You also can have a template. So I'm gonna show you a skill that I've built, a skill that has more than just skill.md.
You can see it has company context and templates. So that means that in the skill, it's going to reference use this template dot m d, or make sure that you update this dot m d to include company context.
So that means when you're running this skill and you have this information already programmed in, it's gonna pull it's gonna know which MD files to pull. So just to kind of summarize, a skill is something that your AI reaches for on its own. So you don't have to paste anything.
You don't have to paste a markdown. It reads the description of the skill.
It sees if the request that you're asking matches it, and then it pulls it in. So you're building the skill or you bring on a skill that someone already created, and you run it once, then you don't have to think about it again.
This is a really big unlock for design systems because your component conventions, your tokens, your handoff, everything there, those are all repeatable patterns. And so you can make a skill on your own that is very custom to your own component library and design system, and it's gonna have your whole team able to move more quickly.
An example of that that I'm using with some of my customers is we're using, um, a really complex grid into our systems, and there's a lot of rules and regulations and functions of how to use the grid. And we created a skill for that grid. So that means every time a designer needs to spin up a new feature with that grid in place, I can just run the skill, and it's gonna make sure that it's compiling and aligning the grid to be exactly how I need to use it.
Let's see actually how to get all of the skills. So most skills, if they are built correctly, they will have NPX installation.
This is recommended. What this means is it's just a really easy way for your team to download and spin up a skill. So I'm gonna copy this, n p x skills, add design project agent skills, and I'm gonna go into I'm gonna go into my terminal, and I'm gonna paste.
What it's doing is it's saying here are all the skills that are in this bundle. You also could do each skill individually, which is showing you instructions.
You don't have to download every single one of these skills if it's not relevant to you. You also can go in here and you can select. So these are all the skills that we use regularly as a team and you can decide which ones you want to do.
So for instance, if I want to select that skill, I'll hit spacebar. I'm hitting spacebar on all of these.
If I don't want to use them, I'll just skip over it. Right?
Okay. And then I'm gonna hit enter. Now it's gonna ask a couple different things, um, additional.
Do I want any of these skills that they recommend? No. I don't.
So I'm gonna hit enter again, and then it's telling me, do I wanna install this by a project level for this specific project or global? I wanna install these global, which means it's gonna live on my computer, um, as my local host, and it's gonna be applied to any project I use.
Done. So now all of my skills are loaded.
So now let's go open a file. So I'm gonna run Codex.
Okay. Perfect. Oh, I have some MCPs that don't work.
That's okay. I'll fix them later. So now, for instance, we need to figure out I'm gonna show you specific examples of how to use a skill.
So first, let me go back to some of the skills we had. So we created this really fun page for you guys to understand when and what skills to use and what skills were available here.
Um, so, basically, we made this a , and we gave it recipes.
So, essentially, here are a few skills for Figma. So these come with your Figma MCP, but they're really relevant for you.
Um, if you are taking a design from Figma into code, you it'll call the skill automatically. But just to tell you a little bit more, it's basically gonna make sure that it automatically before Figma even writes anything, it's gonna debug any weird things with Figma.
And then vice versa, FigmaGen is actually gonna go in. And if you're bringing something from code to Figma, it's gonna make sure that it's building Figma the correct way.
So if you wanna go get this individual skill, I've actually made it really easy. You can just copy it, and exactly what we said, you can just put this one skill in, or you can go here and you can actually open up the repo with this skill in it. Um, next, we have some decisions and AI prompts.
So these are some fun ones that we use pretty regularly. Um, this is basically market psychology.
So if you're trying to write landing pages or copy, it's going to kind of act as, um, making sure that it's sparring with you and understanding what are the goals in the audience. It's really fun because it's like a back and forth for a lot of research and understanding. Um, this one is really great because, um, so, basically, anytime that I am writing a prompt, it's gonna evaluate it, and it's gonna tell me the best way to do a prompt.
So, again, you don't have to call. This is gonna happen kind of automatically here. Now let's talk more specific to design systems.
There's a few here, and we're continuously adding and building more design system ones, so you'll see. But extracts, yes. So this is basically if you have a new project, um, and you wanna extract a design system is basically you can say, hey.
I want to, um, extract the current design system of this website. So it's basically a design MD that it's creating here, which is really cool.
And this one, I love to use if I'm doing metadata. So if I'm building out a component and I wanna make sure that it has the component has all of the reasons how to use that component, how not to use that component, when and where, I highly suggest this one.
Um, I have a video, which I will link to you, where you can see a little bit more details about how to use and how to build an agentic design system. Um, and then I just have some other ones which you can kind of read to yourself that are fun. And we even have even more on here on our skills so you can walk through that.
Okay. So for instance, this extract DS, like, we can prompt it so that it's gonna extract, um, use that extract DS. Okay.
So we're gonna use an example. This is, um, a product called Carrot. It's open source.
It's actually a product that my team is building right now. It's super, super cool. A little quick description about it is, basically, as my team is spinning up more and more design to code, we're doing a lot of prototypes, and we're finding a gap where we are not able to get correct good feedback from stakeholders.
Like, they come in looms or they come in documents. Um, so we created this widget where, essentially, you can go to any page, and you can leave go here.
I want this text to change to level in. Send.
I can do more, like, specifics. I don't like this color.
And what it's gonna do is it's going to create this place where you can go in, see all of the feedback, And there's a a bigger level, so you can see what's open.
You can see what's approved. You can see all. You can go in.
You can complete them. You can reopen them. Um, and there is a whole other part of it, which is a dashboard.
Okay. So see, I'm a designer. I'm coming in.
I'm seeing, okay. I actually wanna fix these two things. So I'm gonna click the plus, and it's going going to into ready for agent.
And what this means is when I connect my agent, I'm actually able to fix these agentically, saying fix these bugs, and it's going to go ahead and fix them automatically in the code base versus me having to make any changes.
Um, so it's really cool. I'm gonna share a little bit more about it, but we're gonna be working off the repo here because this is kind of a new project. So for instance, I wanna build a design system, and I don't have any tokens or styling.
I'm going to come here and say, can we extract the design system from this website that we will be building this product on.
I'm gonna paste it. And look. I will be using the extract design system skill for this.
Right? So we didn't prompt it. We gave it the right context so it knew exactly which skill to pull.
So while this is running, if this feels like a lot and you're kind of new to this and you're working in a team and your product team is wondering how do we actually build this design to code process, how do we update design systems that are agentic, I am currently, um, we have a couple slots for workshops where I come in and I assess the situation, what's working, what's not working.
And, um, we work together to come up with a process that you and your team can actually bring into the product so that you can scale the the design to code process. And if you're interested, there is a link in the description to learn a little bit more about pricing and, um, how exactly the workshops work and the agentic design system works.
Okay. So it looks like it has created it and saves it as a JSON file.
The keys that extracted, the primary, the fonts, the spacing. So this is a great start to your design.md and to understand how to build your tokens. Um, so this is an example of a quick and easy way to use a cloud skill.
Now I wanna show you how to create your own skill. Let's do this. How I like to create a skill is first, if I'm doing a repeating action.
So let's say I'm building a component library, um, and the first thing is I want to audit the the main components that we have.
So I'm gonna say, can we do an audit of the components that we currently have in the actual product? So this is not a skill. This is me just prompting AI.
Yeah. So this is interesting. It's pulling these components, but they're they're not the atoms.
They're the full. So I wanna extract widget tokens. Yeah.
Let's start with extracting the widget tokens. Okay. Perfect.
So what's super cool here is that it went in to the components, and it made sure it was using all of the tokens and not using fixed. So see here, it was just using these hard coded values, and then it actually turned it into the tokens colors that it should be using.
I want to make sure that any component that I'm building is also running this skill to make sure that it is using the tokenized. So I'm gonna say, I would like to create a skill for this so that every component that I'm creating, it's going and checking and making sure it's using the token.
So it's going to use the skill creation guidance for creating the skill. So what that means is this creation skill creation is also a skill.
It's gonna go on and make sure that it's creating the skill following the layout and patterns and structure that a skill is needed to use. So super cool.
Working on it right now. So here's the skill written out here.
The name and the description win to audit and create a product component. So the UI styling the repo's design tokens instead of scattered hard code let me read that again.
So the description, audit and create a caret product component so UI styling uses the repo's design tokens instead of scattered hard code values. Perfect. This is the sources, the workflow.
What must use tokens? Brand colors, fonts.
Okay. There's a lot of good rules in here. Would you like to yes.
Okay. So, basically, we can find the skill. It's already here.
Component audit token. Here it is. Um, so it exists here.
It's we can and, also, as we continue to create more components, we might want to update the skill. So if we find something where we keep having to repeat or the skill doesn't work great, we can fix it, and then we can say, hey.
Update the skills. The skill will always be updated with the latest ways to, um, create the best process.
So that's basically how a skill works. Super, super easy to create, to use existing skills.
It is a really great way if you have repeatable patterns that you wanna create seamless experience. It also makes sure that you don't have to think about it. It just that's the biggest difference from a dot m d file.
You have to be like, hey. I wanna use this dot m d file. No.
It just exists there. If you have the right description, it's gonna pull it when needed, you're just gonna always be creating the most updated best version of your product because you have all these skills in place.
So go ahead. Get out there. Use skills in your design systems.
Excited to see what you guys do. And if you like this video, please like and subscribe below. I'm putting out content weekly on how to build better products with AI.
I'll see you in the next one.
The Hook
The bait, then the rug-pull.
Every time you start a new Claude Code session, you paste the same context: here are my tokens, here are my component rules, here is how handoff works. A skill ends that loop. You build the instruction set once, give it a description precise enough that the AI recognizes when it applies, and from that point forward the AI reaches for it on its own.
Named ideas worth stealing.
02:04list
Skill Anatomy (three parts)
- skill.md (name, description, workflow)
- Templates (.md files for structured outputs)
- Company context (project-specific constants)
Every skill can carry up to three layers of files; the skill.md is required, templates and context are optional but powerful for design system work.
Steal forAny repeatable multi-file workflow where context needs to stay consistent across team members
00:44concept
Skill vs. Markdown Distinction
Markdown files require explicit invocation; skills auto-trigger from description matching. The difference is whether the AI reaches for the context or waits to be handed it.
Steal forFraming any 'build once, apply always' AI workflow
05:37list
The Design System Skills Stack
- Figma Bridge
- FigmaGen
- Extract DS
- AI Components
- Caveman
- Prompt Evaluator
- Market Psychology
Seven pre-built skills covering the full design-to-code loop, available free via the public agent-skills repo.
Steal forAnyone building an AI-assisted design workflow from zero
How they asked for the click.
VERBAL ASK
10:27product
“We have a couple slots for workshops where I come in and I assess the situation, what's working, what's not working.”
Soft mid-video pitch framed as a collaborative team assessment rather than a sales pitch. Not interruptive — placed while a demo is running. Second CTA is standard subscribe at end.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
- Design to Code Workshop for Companies 🚀 Apply using this link ↗
- More information on our workshops here ↗
- The Claude skills my team uses to build design systems (free) ↗
- My walkthrough on building an agentic design system ↗
- If this is your first time using Claude Code, I'd recommend starting with my setup guide first so you can follow along ↗
- Design.md: How to make your design system work with AI ↗
- How to Use the Mobbin MCP with AI (Full Tutorial) ↗
- I've Been a Claude Code Lover for a Year. Then I Tried Codex ↗
- Don't Build a Design System from Scratch (Claude Code + Figma + ShadCn) ↗
- I Used Claude Design on a Real Product Feature. My Honest Review ↗
- Is UI Design Dead? ↗
- Stop using V0 and Lovable to prototype, use Claude Code instead ↗
- I Built My Entire Design System in 4 Hours With AI. Full Tutorial (Claude + Cursor + Figma) ↗
- Stop Wasting Dev Time on Frontend: Figma to Code in 8 Minutes ↗
- Figma to Component Library in 2 days | Claude Code + Storybook Tutorial ↗
- Join TDP Community as a Founding Member NOW!⭐ ↗
Visual structure at a glance.
