primitiv

Overview

Primitiv serves as the design contract layer for AI agents, reconciling conflicts between design sources like Figma, codebase, Storybook, and token files. It exposes a machine-readable contract through MCP that agents can query before building UI. The system scans sources, detects conflicts, and applies governance rules to produce a single authoritative answer. It runs entirely locally, keeping design assets private and ensuring no code leaves your machine.

Try asking AI

After installing, here are 5 things you can ask your AI assistant:

• get_design_context

  Get all tokens, components, conflicts, and inferred rules from the design contract

  Try:What's the current design context?Try:Show me all design tokens and componentsTry:Get the full design contract
• get_token

  Look up a specific design token by name

  Try:What's the value for the primary color token?Try:Get the spacing tokenTry:Find the font-size-xl token
• get_component

  Look up a specific component and its props

  Try:Show me the Button component definitionTry:What props does Card accept?Try:Get the header component
• get_conflicts

  Get unresolved conflicts between design sources

  Try:Show me any unresolved design conflictsTry:What conflicts exist between Figma and code?Try:List all conflicts
• get_inferred_rules

  Get design rules Primitiv has extracted from codebase patterns

  Try:What design rules were inferred?Try:Show me the spacing patterns in the codebaseTry:Get the color system rules

Comparable tools

Installation

npm install @ai-by-design/primitiv
# or
bun add @ai-by-design/primitiv

npx @ai-by-design/primitiv init

{
  "mcpServers": {
    "primitiv": {
      "command": "npx",
      "args": ["@ai-by-design/primitiv", "serve"]
    }
  }
}

FAQ

What sources does Primitiv support?

Currently supports codebase (CSS variables, TypeScript tokens, React components), with adapters for Figma and Storybook in development. New sources can be added via adapters.

How does it handle conflicts between design sources?

Primitiv surfaces conflicts between sources and resolves them according to your governance configuration. You can set source of truth (codebase, Figma, etc.) and conflict resolution strategy (error, warn, auto-resolve).

Compare primitiv with