Agentic Design Systems
Make your design system readable by AI agents and coding tools.
What you'll learn
- ✓ Understand what an agentic design system is
- ✓ Build a taste stack that teaches AI your visual standards
- ✓ Connect Figma to AI coding tools via MCP
- ✓ Run a full DS audit in 30 minutes
About this path
Your design system is no longer just for humans — AI coding tools and agents will read it too. This path teaches you what an agentic design system is, how to structure knowledge for AI consumption, and how to audit yours in 30 minutes.
In this path
15 lessons- 01
What Is an Agentic Design System? (Part 1)
Part 1 of the Agentic Design Systems series, based on Romina's IDS 2026 talk. A design system built for AI agents, not just humans. Stops hallucination before it ships.
- 02
CLAUDE.md + tools.md: The Two Files Every AI Project Needs
Why AI coding tools need both a project rules file and a tools file, what belongs in each one, and how to connect them so agents stop guessing your stack.
- 03
The Taste Stack: Project Rules, Local Markdown, and Skills
Why AI-generated websites look the same, and how to fix it with a three-layer system that teaches your AI tool your visual standards, motion language, and copy tone.
- 04
Understand MCP in 10 Minutes (and Why It Changes Your AI Setup)
The one protocol that lets AI read your Figma, GitHub, and docs directly. A plain-English explainer for designers, with examples of what it unlocks in real work.
- 05
Connect Your Figma Designs to Claude and Cursor
Stop copy-pasting screenshots into AI. Set up Figma Dev Mode MCP so Claude and Cursor can read your designs directly, then ship code that actually matches your file.
- 06
Figma to Code with MCP
End-to-end workflow for converting Figma designs to production code using MCP servers. From design to implementation in minutes, not hours.
- 07
Convert Figma Variables to CSS Custom Properties
Export Figma variables and transform them into production-ready CSS custom properties your engineers can use immediately.
- 08
Pull Component Data from the Figma API
Programmatically access your Figma components, styles, and variables. Build audits, reports, and automations on real data.
- 09
Taste Skills Are the New Design Tokens
Why the next generation of design systems will be measured in skills, not components. A strategic essay on the shift from visual tokens to promptable taste.
- 10
Build Your Own Taste Skill: Turn Your Design Preferences Into Reusable AI Rules
A hands-on workshop to convert your personal design taste into a /taste-skill command. By the end, Claude will generate UI that looks like yours, not like everyone else's.
- 11
Your First UX Review Agent: A 30-Minute Hello World for Designers
Build a working UX review agent in 30 minutes. Point it at any screen, get back a prioritized list of first-time user issues, accessibility problems, and copy fixes. The concrete 'aha' moment of Claude Code for designers.
- 12
How to Prompt Claude to Audit a Figma Design
A 5-version walkthrough showing how a bare prompt becomes a production-ready design audit. Built on the same iterative method Anthropic teaches internally.
- 13
Trust Levels: How Agents Earn Autonomy (Part 2)
Part 2 of the Agentic Design Systems series. The five trust levels (Observer, Advisor, Junior, Senior, Autonomous), what each one is allowed to do, and the exact criteria to promote an agent from one level to the next.
- 14
Audit a Design System in 30 Minutes
A step-by-step workflow to audit any design system using AI tools. Check token naming, component health, accessibility, and visual consistency in one session.
- 15
Build Free Design System Docs with Astro Starlight
Mintlify is $120 a month. Supernova is enterprise pricing. Astro Starlight is free, fast, and good enough for most design system teams. Here is the full setup, the styling, the Figma embeds, and the AI-assisted automation.
Ready to start?
Begin with lesson 01: What Is an Agentic Design System? (Part 1)
Start pathExplore other paths
AI Design Starter Path
A plain-language beginner path from first setup to your first agent-ready design system context.
Beginner AI Setup
Your first week with AI design tools. From zero to working setup.
Claude Code
Install Claude Code, pick the right surface, and teach it your team rules with custom skills.
Visual Direction & Style
Stop saying "make it premium." Learn to give AI real visual direction.
Design System Automation
Token audits, naming conventions, and component reviews with AI.
Automation for DS Teams
GitHub Actions, browser automation, and overnight pipelines that run while you sleep.
Codex for Designers
Set up Codex, teach it your project rules, and turn repeatable design QA into reusable skills.
Motion & Animation
A simple, hands-on path for UI motion: learn the vocabulary, then practice the core moves with interactive demos.