Knowledge Base: AI + Design Systems

Quick answers to common questions about AI and design systems. Each topic includes curated links, tools, and practical next steps.

AI Fundamentals for Designers

What is MCP and why should designers care?

MCP (Model Context Protocol) lets AI assistants talk directly to your design tools. Instead of copy-pasting, your AI reads Figma files, queries tokens, and runs audits automatically.

What is a CLI and do I need to learn it?

CLI (Command Line Interface) is a text-based way to talk to your computer. The most powerful AI tools (Claude Code, Cursor) run in the terminal.

How do I write better prompts for design work?

Be specific. Give context (your tech stack, conventions). Show examples of what good output looks like.

What are Claude Code skills vs cowork mode?

Skills are reusable instructions you trigger with /skill-name. Cowork runs multiple Claude instances in parallel on different tasks.

AI + Design Tokens

How do I name design tokens?

Every system names tokens differently. The three philosophies: property-first (Polaris), role-first (Carbon), semantic-abstract (Material).

How do I make my tokens AI-readable?

Structure tokens in 3 layers (primitive, semantic, component). Use consistent naming. Add descriptions to every token.

How do I generate dark mode tokens from light mode?

Map your light mode semantic tokens to dark mode equivalents. AI can do this in seconds if your naming is consistent.

How do I set up design tokens across multiple brands?

Separate primitives (shared) from semantic tokens (per-brand). Each brand overrides the semantic layer.

AI + Components

How do I generate component specs with AI?

Give AI the component name, your design system context, and the output format you want. It generates props, states, tokens, and accessibility notes.

How do I audit my design system with AI?

Run 5 checks in 30 minutes: token naming, component health, accessibility, visual consistency, documentation coverage.

How do I use Playwright for design system testing?

Playwright automates browsers: screenshot components, check visual regressions, audit accessibility, test user flows.

AI + Figma

How do I connect Figma to AI coding tools?

Enable the Figma Dev Mode MCP Server, then add the SSE URL to your editor config (Cursor, Claude Code, VS Code).

How do I push Figma components to Storybook with AI?

Use Claude Code to read Figma component structure via MCP, generate React code, and create Storybook stories automatically.

What are the best AI tools for designers?

Cursor (code editor), Claude Code (CLI), Figma MCP (design bridge), Tidy (DS health), Firecrawl (web scraping), Granola (meeting notes).

Design System Strategy

How do I audit a design system in 30 minutes?

Five checks: token naming, component health, accessibility, visual consistency, documentation coverage. All using AI tools.

What metrics should I track for my design system?

Adoption rate, component coverage, token usage, accessibility score, contribution frequency, time-to-ship.

How should I structure my design system team in 2026?

The role of design technologist is expanding. AI changes what one person can do. Teams are smaller but more capable.

How do real companies build design systems?

We’ve interviewed teams at Netflix, Meta, Porsche, Volvo, Thomson Reuters, Swisscom, Mayo Clinic, Pinterest, and more.