Everything you need to know
about AI + Design Systems

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.

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

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

Skills are reusable instructions you trigger with /skill-name. Cowork runs multiple Claude instances in parallel on different tasks. Skills encode process, cowork scales execution.

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

Three philosophies: property-first (Polaris), role-first (Carbon), semantic-abstract (Material). Every system does it differently, but all agree on using prefixes, separating concerns, and documenting the "why."

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

Map light mode semantic tokens to dark mode equivalents. AI can do this in seconds if your naming is consistent and you have a clear primitive palette.

Separate primitives (shared) from semantic tokens (per-brand). Each brand overrides the semantic layer. Material Design does this well with ref vs sys tokens.

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

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

Playwright automates browsers. Screenshot components across themes and viewports, check visual regressions, audit accessibility, test user flows.

Use AI to analyze your component against common patterns. It flags missing states (hover, focus, disabled, loading, error) and responsive behaviors.

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

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

No. Figma Make generates layouts from prompts, but it needs a well-structured design system to produce good results. The design system IS the product now.

Adoption rate, component coverage, token usage, accessibility score, contribution frequency, time-to-ship. Track what changes behavior, not vanity metrics.

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

We have interviewed teams at Netflix, Meta, Porsche, Volvo, Thomson Reuters, Swisscom, Mayo Clinic, Pinterest, Indeed, and many more.