Can AI build an entire design system from scratch? Not yet. But hand it the most tedious parts of design system work — token audits, documentation, consistency checks — and it's 50x faster. UI Collective's Kirk shared the workflow he actually uses, and the core is the Figma MCP + Cursor combination.
What Is This?
Let's be honest about the current state of AI and design systems. There's a lot AI still can't do:
- Build variable libraries from scratch
"Build me a variable library for a SaaS healthtech startup" — doesn't work. Requires considerable input and iteration. - Create Figma designs using your design system
Even Figma Make tries but falls short. You get padding of 138.07px and missing text styles. - Build components
AI creates designs but uses groups instead of auto layout frames — unusable in practice.
So what can AI do well? Auditing and documentation. The repetitive verification work that makes your eyes bleed — AI handles it in seconds.
What Changes?
Previously, verifying that design system tokens were properly applied meant clicking through every component one by one. Hundreds of elements on a single dashboard? Brutal.
| Manual Audit | AI Auto-Audit (Figma MCP + Cursor) | |
|---|---|---|
| Time | Minutes per component | Seconds for entire page |
| Accuracy | Human eye dependent (error-prone) | Rule-based auto-detection |
| Consistency | Varies by auditor | Same rules, same results every time |
| Scale | Grows linearly with pages | Nearly independent of page count |
Kirk's practical workflow splits into two key automations:
Automation 1: Design Token Audit
Feed your Figma token table (token name, light/dark mode values, description) to Cursor via a Figma link, and AI auto-generates a Cursor Rule. This Rule defines usage guidelines like "surface-default is for backgrounds only, text-primary is for text only."
Then create a reusable Command. Call @check-variables with a Figma link, and AI analyzes every element to find incorrect variables. Results are specific: "Text is using a border variable → should use text-primary-on-color," or "Border is a hardcoded hex → apply border-default."
Automation 2: Component Documentation
Share a Figma component link, and AI analyzes it to auto-generate docs covering name, purpose, when to use, when not to use, accessibility guidelines, properties, and variants. Copy this straight to Zero Height or Supernova.
Important Note
AI-generated docs are a starting point, not a finished product. Always review and add context. Set your Rule to explicitly request confirmation when AI needs to make assumptions about component usage.
Getting Started
- Install Cursor + Connect Figma MCP
Download from cursor.com, click "Add MCP to Cursor" from the Figma MCP catalog. Set your Figma personal access token as an environment variable. - Prepare Your Token Table
You need a Figma table with token names, light/dark mode values, and descriptions. If you don't have one, create it now — it's the foundation for AI automation. - Generate Cursor Rule
Pass your token table's Figma link to Cursor and ask "create variable usage rules from this." AI generates a Rule file organizing each token's usage context. - Create Reusable Command
Go to Cursor Settings → Rules and Commands, create a "check-variables" Command with step-by-step audit instructions that accept a Figma link as input. - Run + Iterate
Call the Command with any design or component's Figma link for instant audit results. Build similar Commands for documentation generation.
