Research Project
Origen
The first design system built for the AI era. Give LLMs programmatic access to query design decisions instead of hallucinating tokens.
The Problem
LLMs hallucinate design decisions. They generate plausible-looking code with hardcoded colors like bg-red-500 instead of your semantic tokens.
<button className="bg-red-500 text-white px-4 py-2 rounded"> Delete </button> // Hardcoded values // No semantic meaning // Breaks with theme changes
<Button variant="destructive"> Delete </Button> // Uses: var(--destructive) // Semantic token // Theme-aware
Monorepo Architecture
Three packages working together to bridge design and AI.
Design tokens in W3C DTCG format
- Semantic color system
- Light/dark themes
- Typography scales
- Spacing & radius
React component library
- 5 core components
- Variant system
- TypeScript-first
- Tree-shakeable
MCP server for AI agents
- 7 queryable tools
- Resource URIs
- Typed schemas
- Vercel-ready
7 MCP Tools
Expose your design system through the Model Context Protocol. Each tool returns typed, machine-parseable responses.
get_tokens
Retrieve design tokens by category with theme support
get_tokens({ category: "colors" })get_component_spec
Fetch complete component specifications
get_component_spec({ name: "Button" })get_code
Generate implementation code with semantic tokens
get_code({ component: "Button", variant: "destructive" })search_components
Find components via natural language queries
search_components({ query: "form input" })compose_interface
Generative UI from natural language intent
compose_interface({ description: "login form" })get_layout_pattern
Access pre-built structural templates
get_layout_pattern({ pattern: "dashboard" })validate_accessibility
Audit JSX for WCAG 2.1 AA compliance
validate_accessibility({ jsx: "<Button>..." })Queryable Resources
Access design data through URI-based resources. AI agents can directly query tokens and component specifications.
tokens://allComplete token collectiontokens://colorsColor palette tokenstokens://spacingSpacing scale tokenstokens://typographyTypography tokenscomponent://buttonButton component speccomponent://inputInput component speccomponent://cardCard component speccomponent://selectSelect component speccomponent://modalModal component specHow It Works
Watch how Claude uses Origen to generate design-system-aware code.
Create a destructive button for deleting items
Querying Origen for the Button component with destructive variant...
{
"jsx": "<Button variant=\"destructive\">Delete</Button>",
"tokens": {
"background": "var(--destructive)",
"color": "var(--destructive-foreground)"
}
}Here's your destructive button using Origen's semantic tokens:
<Button variant="destructive"> Delete </Button>
5 React Components
Production-ready components with full variant and size systems.
<Button variant="default">Click me</Button>
W3C DTCG Tokens
Design tokens following the W3C Design Tokens Community Group specification. Semantic tokens automatically adapt to light and dark themes.
Colors
background
#0F172A
primary
#3B82F6
destructive
#EF4444
Spacing
Border Radius
Get Started
Connect Origen to Claude Desktop in seconds.
Claude Desktop Configuration
{
"mcpServers": {
"origen": {
"url": "https://mcp-alpha-green.vercel.app/api/mcp"
}
}
}Quick Setup
Open Claude Desktop settings
Navigate to MCP Servers configuration
Add the Origen server config (copy from left)
Restart Claude Desktop
Start querying your design system!
Roadmap
Foundation
Jan 2025CurrentCompose & Validate
Feb 2025AI-Native
Q1 2025Production
Q2 2025Built With
A research project by Krishna Nihar Sunkara