Track / Tooling
Tooling & infrastructure
The 2026 design system stack — Figma Dev Mode MCP, agent integrations (Claude Code, Cursor, Codex), modern token pipelines, MCP-served component graphs. The practices that survived the AI shift, the tools that got built, and the anti-patterns to avoid.
Want the full stack, category by category? See the complete tooling guide.
01 / The shift
From handoff to context
Design tooling spent a decade automating the handoff. The next decade is about removing it — making the design context machine-readable so AI agents can build against it directly.
- 01DocumentStorybook + Style Dictionary2014–2020
- 02SyncTokens Studio + GitHub2020–2024
- 03ServeFigma MCP + agents2024–now
Document the system
Storybook + Style Dictionary + Zeroheight. The system documented itself for humans.
Sync the system
Figma Variables + Tokens Studio + GitHub. The system synced design and code via tokens.
Serve the system
Figma MCP + design-system MCP + agents. The system serves itself to machines.
02 / The new pipeline
Figma → MCP → agent → repo
The end-to-end flow that's replacing screenshot-based handoffs. Each stage is a real protocol, not a vibe.
- 01
Source of truth
Figma Variables hold tokens and component metadata. Dev Mode exposes them to local agents.
Figma Variables + Dev Mode
- 02
Protocol layer
Figma's Dev Mode MCP server publishes the selected frame, its tokens, and the component graph over local HTTP.
Figma Dev Mode MCP · localhost:3845
- 03
Agent context
Claude Code, Cursor, or Codex queries the MCP server, fetches the design context, plus your design system's own MCP for component conventions.
Claude Code · Cursor · Codex
- 04
Code in your repo
Agent generates components against your tokens and conventions, opens a PR. Review happens against the diff, not a screenshot handoff.
PR · code review · ship
- 01
Open the canvas
Designer selects a frame in Figma Dev Mode. The Dev Mode MCP server is already running on localhost:3845.
- 02
Agent reads context
Claude Code (or Cursor / Codex) calls get_code on the Figma MCP. Returns the frame's structure, tokens, and component graph.
- 03
Agent reads your system
The same agent calls your design system's MCP (e.g. @designsystems-one/mcp) for component conventions, token names, and patterns.
- 04
Agent writes code
Components generated against your tokens and your registry primitives. Not raw Tailwind hex; bg-[var(--color-primary-600)].
- 05
Human reviews the PR
Engineer reviews the diff, runs visual regression, accepts or refines. Handoff finally has a real artifact.
03 / Wire it up
Connect Figma MCP and your design system MCP to your agent
Both servers run side-by-side. Figma MCP serves the canvas; your design system MCP serves component conventions and tokens. The agent reads both.
04 / The stack
Categories that matter in 2026
The shape of the toolkit has changed. AI agents are now a category, not a side feature. MCP bridges are infrastructure, not novelty.
AI agents
Where the design-to-code work actually happens now. Each integrates with MCP servers, registries, and design tokens.
Claude Code
Anthropic's CLI agent. Reads MCP servers, edits files, runs builds, opens PRs.
Cursor
AI-first IDE. .cursor/mcp.json wires Figma MCP and your design system's MCP into every chat.
Codex (OpenAI)
OpenAI's coding agent (CLI + cloud). Speaks MCP, generates components from Figma frames, runs in CI.
GitHub Copilot
Embedded in VS Code and JetBrains. Strong on completion, weaker on agent-style multi-step work.
v0 (Vercel)
Generates React + Tailwind UI from prompts; ships with shadcn primitives and Geist tokens.
Design tools + MCP bridges
Where the design context originates and how it leaves the canvas. Figma still dominant; MCP is the new protocol layer.
Figma
Dominant design surface. Dev Mode + Variables + the Dev Mode MCP server make it machine-consumable.
Figma Dev Mode MCP
Local HTTP server at 127.0.0.1:3845 that exposes the selected frame's structure, variables, and component graph.
Tokens Studio
Figma plugin that round-trips W3C-spec design tokens between Figma and code.
Penpot
Open-source design tool gaining traction as a Figma alternative with native token + dev handoff.
Framer
Interactive design with code components. Strongest for marketing surfaces; AI generation has matured.
Tokens + token pipelines
How design decisions get from the source of truth into every platform's code. The W3C Tokens spec is now the lingua franca.
W3C Design Tokens spec
The standardized JSON format ($value, $type, $description) every modern tool exchanges through.
Style Dictionary
Amazon's transformation engine — turns one token source into CSS, SCSS, JS, iOS, Android, Flutter outputs.
Tokens Studio CLI
Companion to the Figma plugin — sync, transform, and validate token sets in CI without opening Figma.
DesignSystems.one Token Generator
OKLCH-based generator with twelve export formats including W3C Design Tokens (DTCG) and Tokens Studio JSON, shareable URL state, named brand kits, and an /api/tokens endpoint.
Component development
Where components are built, isolated, and stress-tested. The Storybook monoculture has loosened; alternatives matter.
Storybook 8+
Still the dominant component workshop. The Vite-based v8 stack finally made cold starts tolerable.
Ladle
Lightweight Storybook alternative from Uber — faster build, smaller footprint, no add-on bloat.
shadcn registry pattern
Components-as-code distribution — copy-paste primitives into your repo, owned forever, no SemVer dance.
Pigment / Panda CSS
Build-time CSS-in-JS engines that compile components against tokenized themes — zero runtime cost.
Documentation
Living docs that stay current because they're generated from the code (and increasingly, the agents). Static SaaS docs are losing.
Storybook Docs
The default. Component-coupled docs that update with the component code; MDX for narrative.
Nextra / Fumadocs / Mintlify
MDX-driven static docs that live in the same repo as components. Easy AI-agent contributions.
Zeroheight
Hosted documentation platform — strong for non-engineering audiences and Figma-first teams.
Supernova
Design system platform with automated docs and multi-platform token + asset distribution.
Quality & visual regression
Visual regression, accessibility, and behavior tests — increasingly authored by agents but still owned by humans.
Chromatic
Visual regression on Storybook. Still the standard for design-system review workflows.
Playwright
Cross-browser end-to-end runner. The 2026 winner over Cypress for new projects; agent-written specs work well.
axe-core + axe-playwright
Programmatic accessibility scanning in CI. Pair with /tools/accessibility-checklist for the human-review layer.
Vitest browser mode
Real-browser unit + integration tests that share a config with your Vite app. Replacing JSDOM-era stacks.
05 / Token pipeline
The 2026 path tokens travel
Single source, W3C spec exchange, transform on the way out. The pipeline is more standardized now than at any point in the last decade.
- 01
Figma Variables (or your token-generator config)
- 02
Tokens Studio → W3C Tokens JSON
- 03
Style Dictionary or first-party build
- 04
CSS · Tailwind config · iOS / Android · React Native · Web Components
- 05
Components, docs, marketing — and AI agents via MCP
Compare two configurations of this pipeline side by side with the token diff tool — generate the artifact, see what shifts.
06 / Watch out for
Anti-patterns the AI shift introduced
A new tooling generation comes with a new set of failure modes. These are the ones that bite design system teams in the first year of AI-assisted work.
Auto-shipping agent-generated components
Agents are excellent at scaffolding, mediocre at edge cases. Component code goes through the same review as human-written code.
Treating MCP as a magic export button
An MCP server only exposes what you put in it. If your design system has unclear semantic tokens, the agent will produce unclear semantic code.
Building one MCP per consumer
Avoid one server per agent. Stand up one canonical MCP for your system; every agent points at it.
Skipping the W3C tokens spec
Custom token JSON formats lock you out of every tool that speaks the spec. The spec is boring, stable, and the right call.
Versioning the agent prompt instead of the system
Don't make the agent prompt your spec. Spec lives in the docs and tokens; the prompt is just plumbing.
07 / Choose deliberately
A 2026 selection framework
Most teams don't need every tool listed here. The shape of your stack should follow your team size, your delivery cadence, and how much of your work is human-driven vs agent-driven.
- Does it speak the W3C Tokens spec or a stable adjacent standard?
- Does it expose itself over MCP — or via a stable JSON API agents can wrap?
- Will it survive a major-version bump of your design tool / framework?
- Can a junior designer or engineer use it without a six-page runbook?
- Is the maintainer org healthy — funding, release cadence, public roadmap?
- Tokens (Figma Variables + W3C export) — the foundation everything else assumes.
- One agent + the Figma Dev Mode MCP — pick Claude Code, Cursor, or Codex; commit.
- Component workshop (Storybook or Ladle) — wire to the same tokens.
- Visual regression (Chromatic) and a11y scanning (axe) — gate PRs on both.
- Your own design system MCP — ship it once the system has stable conventions.
08 / Further reading
Where to go next
Playbook · Tokens, not values
The three-layer token model and the W3C spec — the reason MCP works.
Component registry + MCP
The site's own shadcn-compatible component registry, installable by agents.
Playbook · Distribution & adoption
How systems actually get adopted — npm, registry, agent surfaces, forcing functions.