AI-First Design System & MCP Server
Turned a design system into AI infrastructure - an MCP server and 22 agent skills that let coding agents build on-system UI, and bug fixes in 3 days instead of 6 weeks.
- Client
- DriveNets
- Industry
- Networking / enterprise software
- Role
- Team Lead, Design System
- Timeline
- Jan - Jun 2026
1.5 mo3days
bug report → shipped fix
67components
up from 34, in 6 months
22skills
shared agent skills, codified
27releases
npm releases via Changesets
Context & challenge
Context
A shared React component library used by 100+ developers across multiple product teams.
Challenge
Scale the library and its adoption with a two-person team - and make it usable by the AI coding agents developers were already relying on.
Architecture · fig. 02
fig. 02 - design system as AI infrastructure
Figma, with variables and Code Connect, is the source for a library of 67 components documented in Storybook, with props documented for agents. The library is served by a design-system MCP server, consumed by multiple internal teams, to the coding agents Claude Code, Cursor and Codex, which produce on-system UI shipped by 100+ developers. Supporting it: a bug pipeline on Claude routines and cloud environments that triages and fixes reported bugs, cutting 1.5 months to 3 days; quality gates of 90% line coverage, Vitest browser mode with Playwright, and axe and jsx-a11y checks; and 22 agent skills for scaffolding, Figma-to-code, TDD and code review.
- 01 SourceFigmavariables + Code Connect
- 02 Library67 componentsStorybook · props documented for agents
- 03 MCP serverDesign-system MCPconsumed by multiple internal teams
- 04 Agents
- Claude Code
- Cursor
- Codex
- 05 OutputOn-system UIshipped by 100+ developers
- Bug pipeline · Claude routines + cloud envsTriage and fix reported bugs - 1.5 months → 3 days
- Quality gates90% line coverage · Vitest browser + Playwright · axe, jsx-a11y
- 22 agent skillsScaffolding · Figma-to-code · TDD · code review
- 01 SourceFigmavariables + Code Connect
- 02 Library67 componentsStorybook · props documented for agents
- 03 MCP serverDesign-system MCPconsumed by multiple internal teams
- 04 AgentsClaude Code · Cursor · Codex
- 05 OutputOn-system UIshipped by 100+ developers
What I built
- Design-system MCP server consumed by multiple internal teams; component props documented so Cursor, Claude Code and Codex generate on-system UI.
- 22 shared agent skills for component scaffolding, Figma-to-code, TDD and code review.
- Automated bug pipeline on Claude routines and cloud environments that triages and fixes reported bugs.
- Figma Code Connect for core components; Figma variables synced with code tokens across 170+ files.
- Quality gates: 90% line-coverage CI threshold, Vitest browser mode + Playwright, axe and jsx-a11y checks.
- Governance, contribution and adoption guidelines for the shared library.
Outcomes & role
- Bug report → shipped fix: 1.5 months → 3 days.
- Library grew 34 → 67 components in 6 months; 27 npm releases.
- Test suite grew from 1 to 64 files.
Team Lead of 2 senior engineers - people management plus hands-on technical leadership. Led the organization’s AI-adoption initiative for design-system work.
- MCP
- Claude Code
- Cursor
- Codex
- Claude Design
- React 19
- TypeScript
- Ark UI
- Radix UI
- TanStack
- Storybook
- Turborepo
- Figma
- Vitest
- Playwright
- Changesets
Stack
- MCP
- Claude Code
- Cursor
- Codex
- Claude Design
- React 19
- TypeScript
- Ark UI
- Radix UI
- TanStack
- Storybook
- Turborepo
- Figma
- Vitest
- Playwright
- Changesets