AI导哈

设计系统开发套件

Origen是一个基于模型上下文协议（MCP）的原生设计系统，提供组件、令牌和规范，支持AI代理查询设计决策、生成实现代码并保持设计与代码一致性。

  • by krishnanihar
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 krishnanihar/origen

使用说明

俄里根

面向人工智能时代的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 (
    <div>
      <Button variant="default" size="lg">
        Click me
      </Button>

      <Input placeholder="Enter text..." />

      <Card>
        <Card.Header>
          <Card.Title>Card Title</Card.Title>
          <Card.Description>Card description here</Card.Description>
        </Card.Header>
        <Card.Content>Content goes here</Card.Content>
        <Card.Footer>Footer actions</Card.Footer>
      </Card>

      <Select
        options={[
          { value: "1", label: "Option 1" },
          { value: "2", label: "Option 2" },
        ]}
        placeholder="Select an option"
      />
    </div>
  );
}

可用组件

组件 类型 描述
按钮 简单 交互式按钮，有6种变体和4种尺寸
输入 简单 文本输入字段
卡片 复合物 带页眉、标题、描述、内容、页脚的容器
选择 复杂 下拉选择（基本UI）
模态 复杂 对话框/模态叠加（基本UI）

按钮变体

<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

按钮尺寸

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">🔔</Button>

使用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 "<Input placeholder='Email' />"

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

许可证

麻省理工学院

相关 MCP