Primitiv
๐ ๐ ๐ ๐ช ๐ง - Design contract layer for your codebase. Scans Figma, code, Storybook, and token files, reco
What is Primitiv?
Primitiv is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to ๐ ๐ ๐ ๐ช ๐ง - design contract layer for your codebase. scans figma, code, storybook, and token files, reco
๐ ๐ ๐ ๐ช ๐ง - Design contract layer for your codebase. Scans Figma, code, Storybook, and token files, reco
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- MCP protocol support
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx primitivConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Primitiv
Primitiv is a design contract layer MCP server that scans Figma files, TypeScript/JSX codebases, Storybook, and token files to create a unified source of truth for your design system. It detects token misuse, surfaces hardcoded literals, and exposes conflicts between design sources so AI assistants can enforce design consistency during code generation. Teams use it to prevent design drift across large codebases and give AI tools accurate knowledge of which tokens, components, and variants are actually available.
Prerequisites
- Node.js 18+ or Bun runtime
- An MCP-compatible client (Claude Desktop, Cursor, VS Code with MCP extension)
- Figma access token (optional, for Figma source scanning)
- A Storybook instance running locally (optional, for Storybook source scanning)
- A TypeScript/JSX codebase to scan
Install Primitiv
Install the Primitiv package globally or as a project dependency using npm or Bun.
npm install @ai-by-design/primitiv
# or
bun add @ai-by-design/primitivInitialize configuration
Run the init command to auto-detect your framework, generate a primitiv.config.js, and write the MCP config file for your client.
npx @ai-by-design/primitiv initEdit primitiv.config.js to add your sources
Open the generated primitiv.config.js and configure the sources you want scanned. Add a Figma token and fileId if you want Figma scanning; point to your Storybook URL for component discovery.
module.exports = {
sources: {
codebase: { root: "./src", patterns: ["**/*.tsx"] },
figma: { token: process.env.FIGMA_ACCESS_TOKEN, fileId: "YOUR_FILE_ID" },
storybook: { url: "http://localhost:6006" }
},
governance: {
sourceOfTruth: "codebase",
onConflict: "warn"
},
output: { path: "./primitiv.contract.json" }
}Build the design contract
Run the build command to scan all configured sources, reconcile conflicts, and output the contract JSON that the MCP server will serve.
npx @ai-by-design/primitiv buildStart the MCP server
Start the Primitiv MCP server. It hot-reloads whenever the contract file changes, so it stays current as you develop.
npx @ai-by-design/primitiv serveConfigure your MCP client
Add Primitiv to your Claude Desktop or other MCP client configuration so the AI assistant can call the design contract tools.
Primitiv Examples
Client configuration
Claude Desktop configuration for Primitiv MCP server using the serve command.
{
"mcpServers": {
"primitiv": {
"command": "npx",
"args": ["@ai-by-design/primitiv", "serve"]
}
}
}Prompts to try
Example prompts once Primitiv is connected to your AI assistant.
- "What color tokens are available in our design system?"
- "Show me all conflicts between our Figma tokens and the codebase"
- "Get the Button component details including all variants and props"
- "List any hardcoded color literals that bypass our design contract"
- "What design patterns have been inferred from our codebase?"Troubleshooting Primitiv
The build command finds no components or tokens
Check that primitiv.config.js points to the correct source root and that the file patterns (e.g., **/*.tsx) match your actual file extensions. Run npx @ai-by-design/primitiv verify to check contract freshness.
Figma scanning fails with authentication error
Ensure the FIGMA_ACCESS_TOKEN environment variable is set in the shell where you run the build, or hard-code the token temporarily to confirm connectivity. The token must have read access to the target file.
MCP server starts but the client cannot find any tools
Make sure the serve command is running before the client connects, and that the config file path in the MCP client JSON matches the actual location of primitiv.config.js. Restart the client after updating the config.
Frequently Asked Questions about Primitiv
What is Primitiv?
Primitiv is a Model Context Protocol (MCP) server that ๐ ๐ ๐ ๐ช ๐ง - design contract layer for your codebase. scans figma, code, storybook, and token files, reco It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Primitiv?
Follow the installation instructions on the Primitiv GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Primitiv?
Primitiv works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Primitiv free to use?
Yes, Primitiv is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.
Primitiv Alternatives โ Similar Developer Tools Servers
Looking for alternatives to Primitiv? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
โ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
โ 155.8kJava ้ข่ฏ & ๅ็ซฏ้็จ้ข่ฏๆๅ๏ผ่ฆ็่ฎก็ฎๆบๅบ็กใๆฐๆฎๅบใๅๅธๅผใ้ซๅนถๅใ็ณป็ป่ฎพ่ฎกไธ AI ๅบ็จๅผๅ
Gemini CLI
โ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
โ 87.3kโญ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
โ 86.0kModel Context Protocol Servers
CC Switch
โ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Primitiv in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Primitiv?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.