Design System MCP Server
A design system packaged as a Model Context Protocol (MCP) server. AI coding agents such as Claude Code and Cursor connect to it and build on-brand UI in any codebase, using the real components and tokens instead of guessing at styles.
- Role
- Designed and built end to end.
- Year
- 2026
- Stack
- MCP, Design systems, Claude Code, Cursor
The problem
AI coding agents write UI quickly, but without access to a team's design system they invent their own spacing, colours and components. The result runs, but it drifts off-brand, and someone has to clean it up by hand afterwards.
How it was built
01Expose the design system as tools and context
The server makes the design system available to agents through MCP, so an agent can look up the right component or token at the moment it needs one rather than relying on whatever was pasted into a prompt.
02Work with any agent, in any codebase
Because MCP is an open protocol, the same server works with Claude Code, Cursor and other MCP clients. The design system travels with the developer instead of being tied to one editor or one repository.
Stack decisions
Why each piece was chosen, rather than just what was used.
Model Context Protocol
An open standard for giving agents tools and context. Packaging the design system once as an MCP server makes it usable by every compatible agent.
Claude Code and Cursor
The two agents the server was built to serve, and the environments where off-brand generated UI showed up most.
What it does
- Design system served to AI coding agents over MCP
- Works with Claude Code, Cursor and other MCP clients
- On-brand UI generated in any codebase
Related work
Building something similar?
Naman Gundaniya takes on full stack and AI projects like this one. Available for hire, replies within 24 hours.