Design Systems for Beginners (Claude Code + Figma)
Your design system is built for humans. The moment you hand it to an AI agent, it starts inventing buttons, guessing at spacing, and hallucinating variants you never built. That's because it can't answer the most important questions it's silently asking: should I use this component, which variant, what goes inside it, what rules must I obey, and what should I never do.
In this week’s video, I walk through how to take your Figma design system into Claude Code and make it agentic. First we will learn about about encoding your existing components as structured metadata an AI can actually query. Then I build one button end to end using Figma MCP, Claude Code and Storybook so you can see exactly what this looks like in practice.
This is part one of a series on agentic design systems.
What You'll Learn:
• Why your design system is invisible to AI agents right now
• The three pillars every agentic component needs (props, relationships, tokens)
• Why anti-patterns matter as much as patterns
• Why semantic naming beats technical naming for AI agents
• How to build your first agentic component with Figma MCP + Claude Code + Storybook
Resources:
• AI Component Metadata Skill (Chris): https://github.com/cris-achiardi/clau...
• Figma MCP: https://help.figma.com/hc/en-us/artic...
• Agentic Design System Guide: Sign up for the community and you get access to this and tons of other resources! https://designproject.io/community/?u...
Timestamps
0:00 Why design systems built for humans break AI agents
1:09 The 3 pillars every agent-ready component needs
2:00 The 4 metadata decisions that make components AI-readable
4:44 Installing the AI component metadata skill in Claude Code
9:21 Good vs bad tokens in Figma (and why descriptions matter)
12:02 Building a button with the Figma MCP
16:24 Reviewing the output and fixing what the agent missed
20:14 Turning the workflow into a reusable skill
If this is your first time using Claude Code, I'd recommend starting with my setup guide first so you can follow along: • Claude Code + Cursor + GitHub: The New AI ...
Design-to-Code Workshop for companies! 🚀
Want to help your product team implement design-to-code? I'm running workshops to make that happen! Apply using this form: https://tally.so/r/WOPNPP
Join TDP Community as a Founding Member NOW - Waitlist Open! ⭐
https://designproject.io/community/?u...
Watch more like this:
• I Used Claude Design on a Real Product Feature • I Used Claude Design on a Real Product Fea...
•Is UI Design Dead? • Is UI Design Dead?
•GitHub for Designers: Everything You Need to Know • GitHub for Designers: Everything You Need ...
•I Tested Figma Against Paper. The Winner Surprised Me
• The AI Design Tool That Figma Doesn't Want...
•Figma Wireframes Are Dead. Here's How Product Teams Are Replacing Them • Figma Wireframes Are Dead. Here's How Prod...
•Stop using V0 and Lovable to prototype, use Claude Code instead: • Stop using V0 and Lovable to prototype, us...
•I Built My Entire Design System in 4 Hours With AI. Full Tutorial (Claude + Cursor + Figma): • I Built My Entire Design System in 4 Hours...
•Stop Wasting Dev Time on Frontend: Figma to Code in 8 Minutes: • Stop Wasting Dev Time on Frontend: Figma t...
•Figma to Component Library in 2 days | Claude Code + Storybook Tutorial: • How I Build a Component Library in 2 days ...
🔔 Subscribe for weekly insights about AI, design, and product here: @thedesignproject
CONNECT WITH ME:
🌐 https://designproject.io/
💼 LinkedIn: /diannealter
About The Design Project: We help B2B SaaS product teams ship faster by combining AI tools with strategic design expertise. We've worked with 50+ teams (including companies acquired by Slack, Nvidia, and MrBeast) to cut product cycles in half using battle-tested AI workflows and design systems.