I humbled myself quickly.

Six months ago, I managed design systems the way most teams do: make and isolate small changes, coordinate with developers on implementation, write documentation manually, run audits when time allowed, and hand off specs for each new feature. It worked, but it was slow. By the time we'd audit for consistency and migrate to proper tokens, we'd accumulated new debt. It was a constant game of catching up. Maybe that’s why I disliked design system work at the time; it felt retroactive,

Then I spent half a day setting up Figma MCP — and realized I'd fundamentally misunderstood what my role was becoming and the impact of system-level design work in the AI Age.

The shift isn't just technical: Yes, AI coding agents (Claude Code, Cursor, GitHub Copilot) can now generate production code directly from Figma. And yes, code can flow back into design-editable files.

More interestingly, design systems work is moving from team coordination to individual orchestration. What used to require a researcher, developer, documentation specialist, and QA person can now be handled by one designer orchestrating AI partners, custom GPTs, and automation agents.

This isn't about AI replacing designers. It's about designers operating at a completely different level of impact. Instead of executing tasks, you're architecting systems. Instead of managing handoffs, you're maintaining infrastructure that AI agents read from and write to. Your design system isn't just a style guide anymore — it's the foundation that enables an entire AI team to work effectively.

Here's what I set up, what broke, how I fixed it, and how it's changing the way I think about design systems work.

Give credits where they are due:

I want to thank these pioneers for creating and sharing their resources with the world:

From Teams to Individuals — The X-Shaped Designer

The shift happening now: AI is driving a fundamental restructuring from team-based to individual-orchestrated work. What used to require cross-functional teams can now be accomplished by individuals building their own "team" of AI partners, custom GPTs, and automation agents.

The visual:

        AI Partner (strategic thought partner)
             ↓
    Individual Designer (You) ← Orchestrator
    ↓        ↓         ↓
GPT-UX    GPT-Design  GPT-Content
Research   Audit      Rewriter
Helper    Reviewer
    ↓        ↓         ↓
Agents: Auto-tag transcripts, Weekly roundups, Post-meeting summaries

From T-shaped to X-shaped:

T-shaped (old model): Deep in one discipline, broad awareness of adjacent fields. You collaborate across functions but stay in your swim lane. Design systems are deliverables you hand off.
X-shaped (new model): Deep in design AND orchestrating systems that span code, operations, and automation. You're not becoming a developer — you're becoming the conductor of an ecosystem where AI handles execution while you handle strategy, architecture, and quality control.

What this means for design systems work:

You don't write documentation — you architect systems that auto-generate it
You don't manually audit for consistency — you set up AI infrastructure that audits continuously
You don't hand off static specs — you maintain machine-readable systems that enable bidirectional translation
You don't manage component libraries alone — you orchestrate AI partners that help maintain, document, and evolve them

The individuality shift: Where you used to need:

A researcher to conduct user interviews
A developer to prototype
A documentation specialist to write component docs
A QA person to audit for accessibility

You now orchestrate:

AI Partner for research synthesis and strategy
Claude skills for specific repeated tasks (UX research helper, design audit reviewer, content rewriter)
Agents for automation (auto-tag transcripts, generate weekly roundups, send post-meeting summaries)

This isn't about working alone: It's about operating at higher leverage. You still collaborate with humans on strategy, judgment calls, and creative direction. But the mechanical, repeatable, documentation-heavy work? That's now your AI team's responsibility, which you orchestrate.

Why design systems are central to this shift: A well-tokenized, properly documented design system isn't just for human developers anymore. It's the foundation that lets your AI team work effectively. When your system is machine-readable:

Your AI partners can audit it accurately
Your custom GPTs or Skills.md can reference it reliably
Your agents can generate from it consistently

The design system becomes infrastructure for AI-orchestrated work, not just a style guide.

The Problem — Design Systems in the AI Age is a Fundamentally Different Practice

What’s true and hard to understand:

Design-to-code isn't "export to React" anymore — it's AI agents reading your Figma file and writing production code and vice versa: code can become design-editable files
This requires design systems to be machine-readable: proper tokenization, consistent naming, clear documentation
Most design systems have: hardcoded values, inconsistent spacing, components duplicated across pages, tokens defined but not applied
The gap: Manual design system audits take weeks. Migration to proper tokens takes months. By then, your debt has compounded, and your competitor has shifted 10 product versions.

What's possible now:

AI can audit your entire design system in minutes
Find every hardcoded color, inconsistent spacing value, duplicate component
Generate migration plans for tokenization
Produce multi-platform documentation automatically
But the setup isn't straightforward — which is what this article is about

What I Set Up (The Foundation)

The tools:

Figma MCP Server (official from Figma) — reads design context, generates code from Figma nodes
Figma Console MCP (open source by Southleft) — deep canvas control, token operations, component manipulation
Design Systems MCP (Southleft) — structured knowledge base for design system documentation
Claude Code — AI terminal tool that connects everything

High-level architecture:

Claude Code (terminal) connects to three MCP servers
Figma MCP Server reads designs via OAuth
Figma Console MCP connects to Figma Desktop via WebSocket bridge
Design Systems MCP provides design pattern knowledge
All tools work together to audit, analyze, and generate

Why this matters: This isn't just one more AI tool — it's infrastructure. Once set up, you have an AI that can read your actual design files, understand your token structure, and work within your system's constraints.

The Setup Journey — What Actually Happened

Timeline: ~4 hours (with troubleshooting)

Phase 1: Prerequisites (30 minutes)

Installed Homebrew, Node.js
Generated Figma Personal Access Token
Enabled Figma MCP Server in Dev Mode
What went smoothly: The basics installed without issues

Phase 2: The Real Path — Native Onboarding (30 minutes once we found it)

What broke: Manual terminal configuration with Bearer tokens didn't work
Figma MCP uses OAuth, not simple API tokens
Following terminal-based instructions opened room for multiple failure points
Token expired errors, connection failures, "needs authentication" loops
How we actually fixed it:
- Used Figma's native MCP onboarding flow in Dev Mode (just click "Enable")
- Used Claude Code's built-in /mcp command to trigger proper OAuth flow
- Let the native tools handle authentication instead of manual config
Key lesson: Don't overcomplicate with terminal commands when native UI flows exist. The "5-minute setup" is actually true — if you use the right entry points. Figma and Claude Code both have built-in MCP onboarding that Just Works. Terminal configuration is for edge cases, not the happy path.

Phase 3: Getting Console MCP Connected (1 hour)

What broke: Figma Console MCP installed but didn't show up in available tools
Desktop Bridge plugin needed but wasn't connecting
WebSocket connection required between plugin and MCP server
How we fixed it:
- Downloaded and imported Desktop Bridge plugin into Figma Desktop
- Ran the plugin (shows "MCP ready" when working)
- Restarted Claude Code to pick up the connection
Key lesson: Some MCPs need multiple pieces (server + plugin + desktop app) all running simultaneously

Phase 4: Verification (30 minutes)

Confirmed all three MCPs showing up in Claude Code
Tested basic commands
Ready for actual workflows

Honest assessment: The setup took longer than "5 minutes for a developer" promised in docs. But once working, it's infrastructure — you set it up once and use it for months. The troubleshooting time was almost entirely in Phase 2 before we found the native onboarding flows.

First Use Case — AI-Powered Design System Audit

The workflow: Instead of manually reviewing every component for consistency, you give Claude a single prompt:

Audit my Figma design system for inconsistencies. Focus on:
- Hardcoded color values that should use tokens
- Inconsistent spacing values
- Components with different naming patterns
- Variables that are defined but not actually used

Use this file: [FIGMA_FILE_URL]
Group findings by severity: Critical, Moderate, Minor.

What Claude does:

Reads entire file structure via Figma Console MCP
Analyzes every component, style, and token
Identifies patterns and inconsistencies
Produces categorized report with specific locations and values
Suggests token mappings from existing library

Why this matters for AI-age design:

AI coding agents need consistent, tokenized systems to generate accurate code
Manual audits miss things and take weeks
This audit runs in minutes and catches everything
Output becomes the migration roadmap

Real output (what you actually get):

List of hardcoded hex values with component names and suggested token replacements
Spacing inconsistencies mapped to your spacing scale
Duplicate components across pages flagged
Variables defined but never applied
Priority ranking for what to fix first

Beyond Auditing — 8 More Use Cases

Quick overview of the other workflows enabled by this setup:

Accessibility Auditing — WCAG 2.1/2.2 compliance checks with specific fixes using your tokens
Ticket Validation — Verify designs against acceptance criteria before handoff

Multi-Technology Component Handoff — Generate React, Angular, SwiftUI, and Jetpack Compose specs simultaneously from one Figma component
Token and Variable Migration — Automated migration plan and execution for moving to proper token usage
Component Documentation — Generate anatomy, variants, props tables, usage guidelines automatically

Usability Analysis — First-pass heuristic evaluation before user testing
Design System from Scratch — Scaffold token architecture and component hierarchy for new projects
Conceptualization — Explore design directions within your actual system constraints

The pattern: All workflows share the same foundation — AI that can read your actual design files, understand your token structure, and work within your system's constraints. Not generic generation, grounded in your reality.

The Bigger Picture — Tokenization as Infrastructure and Designer as the System Orchestrator

Why tokenization matters now:

Design tokens used to be "nice to have" for consistency
Now they're infrastructure for AI-to-code-to-design workflows
AI agents read tokens to understand design intent
Proper tokenization = accurate code generation
Inconsistent systems = AI making wrong assumptions

What "AI-ready" means for design systems:

Tokens over hardcoded values — Everything references a token, not raw values
Consistent naming — Patterns AI can parse and apply
Clear documentation — Component usage, variants, states all documented
Single source of truth — No duplicate components across pages
Variables properly applied — Not just defined, actually used

The shift in mindset:

Design systems aren't just for human developers anymore
They're being read by AI agents that generate code
The more machine-readable your system, the better the generated code
Auditing and cleanup isn't tech debt work — it's enabling new workflows

What I'd Tell Someone Starting This Tomorrow

Do this:

Block 4-6 hours for initial setup (not 30 minutes)
Follow the Hugo França toolkit — it's the most complete guide
Use native onboarding flows (Figma Dev Mode + Claude Code /mcp) not terminal config
Test with a small file first, not your entire design system
Start with the Design System Audit workflow — it shows value immediately

Skip this:

Don't manually configure OAuth tokens via terminal — use the built-in UI flows
Don't try all workflows at once — master one, then expand
Don't run token migration on your entire system in one session — batch it

The ROI math:

Setup: 4-6 hours (mostly OAuth troubleshooting if you miss the native flows)
Design system audit that would take 2 weeks: now 10 minutes
Component documentation that takes 2 hours per component: now 7 minutes
Multi-platform handoff specs: single prompt instead of 4 separate documents
Payback: immediate for any team with an active design system

Where This Is Heading — Infrastructure, Not Magic

Where this is heading: Design systems were built for human developers. Now they need to work for AI agents too — and AI agents can work back into design systems. This isn't one-way handoff anymore. It's bidirectional infrastructure. Tokenization, consistency, and documentation aren't nice-to-haves — they're what enables designers to orchestrate rather than just execute.

What you can do now:

Audit your design system (even manually) for AI-readiness
Start tokenizing hardcoded values
Document your components properly
Or set up Figma MCP and let AI do the audit for you

The designer-as-orchestrator shift: The future isn't designers replaced by AI. It's designers operating at a higher level — building and maintaining the systems that AI agents read from and write to. Your job isn't shrinking. It's scaling.

The question isn't whether to prepare — it's whether you're ready to shift from executing design to orchestrating systems.

This is Part 3 of an ongoing series on X-shaped people and the future of creative teams. Read Part 1: The X-Shaped Individual: Solving for Problems in 3D and Part 2: It's Only Through Doing That You Become: How X-shaped people are made — and how teams can grow them

Thu Do is a hands-on product owner with 10+ years bringing products from 0-to-1 across startups, Fortune 500 consultancies (BCG, PwC), and innovation studios. She helps early-stage to early-growth companies ($1-10M ARR) and innovation teams turn big visions into competitive market-ready products and services through human-centered design, product alignment, and AI innovation. This article originally appeared on Thu's Tech Dialect. Find her on LinkedIn.

Co-created with Claude