俄里根
面向人工智能时代的MCP原生设计系统。
Origen通过以下方式公开组件、令牌和规范 模型上下文协议（MCP），允许AI代理查询设计决策，生成实现代码，并保持设计代码的一致性。
包裹
| 包装 | 描述 |
|---|---|
@origen/tokens | W3C DTCG格式的设计令牌 |
@origen/react | React组件库 |
@origen/mcp | 用于AI集成的MCP服务器 |
安装
# Install dependencies
pnpm install
# Build all packages
pnpm build使用React组件
在项目中安装React包：
pnpm add @origen/react @origen/tokens导入和使用组件：
import { Button, Input, Card, Select, Modal } from "@origen/react";
import "@origen/tokens/build/css/tokens.css";
function App() {
return (
Click me
Card Title
Card description here
Content goes here
Footer actions
);
}可用组件
| 组件 | 类型 | 描述 |
|---|---|---|
| 按钮 | 简单 | 交互式按钮，有6种变体和4种尺寸 |
| 输入 | 简单 | 文本输入字段 |
| 卡片 | 复合物 | 带页眉、标题、描述、内容、页脚的容器 |
| 选择 | 复杂 | 下拉选择（基本UI） |
| 模态 | 复杂 | 对话框/模态叠加（基本UI） |
按钮变体
Default
Destructive
Outline
Secondary
Ghost
Link按钮尺寸
Small
Default
Large
🔔使用MCP服务器
配置Claude桌面
添加到您的 claude_desktop_config.json:
{
"mcpServers": {
"origen": {
"url": "https://your-vercel-deployment.vercel.app/api/mcp"
}
}
}可用的MCP工具
所有工具都使用 registerTool() 打字图案 outputSchema 并返回人类可读的结果 content 机器可读 structuredContent.
| 工具 | 说明 |
|---|---|
get_tokens | 按类别（颜色、间距、排版、半径）获取设计标记 |
get_component_spec | 获取组件的完整规格 |
get_code | 使用指定的props生成实现代码 |
search_components | 按描述或用例搜索组件 |
compose_interface | 从自然语言意图生成组合UI |
get_layout_pattern | 获取具有结构和代码的预构建布局模式 |
validate_accessibility | 验证WCAG 2.1 AA可访问性的JSX/组件 |
MCP查询示例
获取颜色标记：
Use the get_tokens tool with category "colors" and theme "light"获取按钮规格：
Use the get_component_spec tool with component "button"生成代码：
Use the get_code tool to generate a destructive large Button with text "Delete"搜索组件：
Use the search_components tool with query "form input"编写界面：
Use the compose_interface tool with intent "create a login form with email and password"获取布局模式：
Use the get_layout_pattern tool with pattern "form-layout" and options.title "Contact Us"验证可访问性：
Use the validate_accessibility tool with code ""MCP资源
MCP服务器还公开资源：
| 资源URI | 描述 |
|---|---|
tokens://all | 所有设计代币 |
tokens://colors | 颜色标记 |
tokens://spacing | 间隔标记 |
tokens://typography | 排版标记 |
component://button | 按钮规格 |
component://input | 输入规格 |
component://card | 卡片规格 |
component://select | 选择规格 |
component://modal | 模态规范 |
设计代币
代币遵循 W3C设计令牌社区组（DTCG） 格式：
{
"color": {
"$type": "color",
"blue": {
"500": { "$value": "#3b82f6" }
}
}
}语义令牌
| 令牌 | 亮 | 暗 |
|---|---|---|
background | 白色 | 板岩-950 |
foreground | 板岩-950 | 板岩-50 |
primary | 蓝-600 | 蓝-500 |
secondary | 板岩-100 | 板岩-800 |
destructive | 红色-600 | 红色-500 |
muted | 板岩-100 | 板岩-800 |
border | 板岩-200 | 板岩-800 |
发展
# Run all packages in dev mode
pnpm dev
# Build specific package
pnpm --filter @origen/tokens build
pnpm --filter @origen/react build
pnpm --filter @origen/mcp build
# Lint
pnpm lint
# Test MCP tools
npx tsx scripts/test-mcp.ts部署
MCP服务器已配置为Vercel部署。部署 packages/mcp 目录：
cd packages/mcp
vercel deploy许可证
麻省理工学院