AI导哈

设计系统组件协议服务器

一个自动发现、分析并提供智能访问设计系统组件的模型上下文协议（MCP）服务器，可与VS Code和GitHub Copilot无缝集成，使设计系统可通过自然语言搜索和查询。

  • by patrickeaton
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 patrickeaton/design-system-mcp

使用说明

设计系统MCP服务器

A. 模型上下文协议（MCP）服务器 它自动发现、分析并提供对设计系统组件的智能访问。与VS Code和GitHub Copilot无缝集成，使您的设计系统可以通过自然语言进行搜索和查询。

🚀 这是什么？

该软件包将基于故事书的设计系统转化为智能、可搜索的知识库，人工智能助手可以理解并与之交互。MCP服务器自动执行以下操作，而不是手动记录组件：

  • 🔍 发现组件 从您的故事书文件
  • 📊 分析组件结构 （道具、插槽、变体、示例）
  • 🏷️ 提取元数据 （标签、类别、描述）
  • 🤖 提供AI友好的API 用于组件搜索和分析
  • ⚡ 启用自然语言查询 比如“我有什么按钮？”或“显示表单组件”

🏗️ 建筑

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   Storybook     │───▶│  Design System   │───▶│   VS Code +     │
│   Files         │    │  MCP Server      │    │   GitHub        │
│   (.stories.tsx)│    │                  │    │   Copilot       │
└─────────────────┘    └──────────────────┘    └─────────────────┘
                              │
                              ▼
                    ┌──────────────────┐
                    │  Component       │
                    │  Knowledge Base  │
                    │  (Parsed & Indexed)
                    └──────────────────┘

⚡ 快速开始

1.安装

# Clone or download the package
cd your-design-system
yarn install

2.构建服务器

# Compile TypeScript to executable
yarn build

3.配置VS代码

创建 .vscode/mcp.json:

{
  "servers": {
    "design-system-mcp": {
      "type": "stdio",
      "command": "${workspaceFolder}/mcp-server.sh",
      "args": ["serve"],
      "cwd": "${workspaceFolder}"
    }
  }
}

4.开始使用

重新启动VS Code并询问GitHub Copilot：

  • “我有哪些可用的按钮？”
  • “在我的设计系统中搜索表单组件”
  • “分析按钮组件”

🛠️ 运作原理

组件发现管道

Storybook Files (.stories.tsx)
         ↓
┌─────────────────────┐
│ File System Scanner │  ← Finds all story files
└─────────────────────┘
         ↓
┌─────────────────────┐
│ Parser Chain        │  ← Extracts component info
│ • Storybook Parser  │
│ • Comment Parser    │  
│ • OpenAI Enhancer   │
└─────────────────────┘
         ↓
┌─────────────────────┐
│ Component Database  │  ← Structured component data
│ • Props & Types     │
│ • Examples & Docs   │
│ • Tags & Categories │
└─────────────────────┘
         ↓
┌─────────────────────┐
│ MCP Server         │  ← JSON-RPC API for AI tools
│ • search_components │
│ • list_components   │
│ • analyze_component │
│ • get_system_info   │
└─────────────────────┘

支持的文件模式

  • 故事： **/*.stories.@(js|jsx|ts|tsx|mdx)
  • 组件： 与楼层或指定路径共置
  • 框架： React、Vue、Angular、Svelte、Web组件

🔧 CLI命令

开发命令

# Scan for components (dry run)
yarn tsx src/main.ts scan

# List discovered components
yarn tsx src/main.ts list

# Generate MCP JSON output
yarn tsx src/main.ts generate

# Parse with enhanced analysis
yarn tsx src/main.ts parse --parsers storybook,openai,comments

生产命令

# Build executable
yarn build

# Start MCP server
./mcp-server.sh serve

# Test server locally
node test-search.js

🧩 MCP工具API

服务器为AI助手提供以下工具：

search_components

按名称、描述或标签搜索组件。

输入：

{
  "query": "button",
  "searchIn": ["name", "description", "tags"]
}

输出：

[
  {
    "name": "Button",
    "description": "Primary UI component for user interaction",
    "tags": ["interactive", "form", "primary"],
    "importPath": "import { Button } from '@components/Button';",
    "props": [...],
    "examples": [...]
  }
]

list_components

列出所有组件，可选择过滤。

输入：

{
  "category": "actions"  // optional
}

analyze_component

对特定组件进行深入分析。

输入：

{
  "componentName": "Button",
  "filePath": "./src/Button.tsx"  // optional
}

get_design_system_info

系统概述和元数据。

输入：

{}

🎯 解析器链系统

该包使用可配置的解析器链来提取最大的信息：

1.故事书解析器

  • 提取物： 组件名称、描述、参数、故事
  • 分析： 变体、示例、故事元数据
  • 推断： 根据组件名称和内容分类

2.评论解析器

  • 发现： JSDoc评论和 @dsm 块
  • 提取物： 手动注释和辅助功能注释
  • 支持： JSON和YAML元数据块

3.OpenAI增强器（可选）

  • 增强功能： 描述和分类
  • 推断： 缺少道具和使用模式
  • 生成： 示例和最佳实践

配置示例

{
  "parsers": {
    "enabled": true,
    "mergeStrategy": "merge",
    "parsers": [
      {
        "name": "storybook",
        "enabled": true,
        "weight": 1,
        "config": {
          "extractVariants": true,
          "extractExamples": true
        }
      },
      {
        "name": "openai",
        "enabled": false,
        "weight": 2,
        "config": {
          "model": "gpt-4o-mini",
          "temperature": 0.3
        }
      }
    ]
  }
}

📁 项目结构

design-system-mcp/
├── src/
│   ├── main.ts                 # CLI entry point
│   ├── commands/
│   │   ├── serve.ts           # MCP server implementation
│   │   ├── scan.ts            # File discovery
│   │   ├── parse.ts           # Component parsing
│   │   └── generate.ts        # Output generation
│   ├── parsers/
│   │   ├── implementations/
│   │   │   ├── storybook-parser.ts
│   │   │   ├── comment-parser.ts
│   │   │   └── openai-parser.ts
│   │   └── parser-chain.ts
│   ├── utils/
│   │   ├── storybook.ts       # Storybook utilities
│   │   └── config.ts          # Configuration management
│   └── models.ts              # TypeScript definitions
├── dist/                      # Compiled output
├── examples/                  # Sample components
├── .vscode/
│   └── mcp.json              # VS Code MCP configuration
├── mcp-server.sh             # Server wrapper script
└── package.json

🔍 组件分析功能

自动检测

  • 组件名称 从文件名和导出
  • 道具和类型 来自TypeScript接口
  • 变体 来自故事书参数和控件
  • 分类 从命名模式和内容分析

元数据抽取

  • 标签 从故事元数据和推断模式
  • 例子 从故事定义
  • 文档 来自评论和描述
  • 依赖项 来自进口和关系

智能分类

// Automatically categorized as "actions"
export const Button = ({ primary, size, label }) => { ... }

// Automatically categorized as "forms" 
export const TextInput = ({ value, onChange, placeholder }) => { ... }

// Automatically categorized as "layout"
export const Card = ({ children, padding, shadow }) => { ... }

🎨 用法示例

自然语言查询

# Through GitHub Copilot in VS Code:
"What buttons do I have available?"
"Show me all form components"
"How do I use the Card component?"
"Find components with 'primary' variants"
"What components are in the 'navigation' category?"

程序化使用

// Direct CLI usage
import { parseStorybookFile } from './src/utils/storybook';

const components = await parseStorybookFile(
  './examples/button/button.stories.tsx',
  'react'
);

MCP集成

// Test MCP server locally
const response = await fetch('http://localhost:3000', {
  method: 'POST',
  body: JSON.stringify({
    jsonrpc: '2.0',
    method: 'tools/call',
    params: {
      name: 'search_components',
      arguments: { query: 'button' }
    }
  })
});

⚙️ 配置

设计系统配置(dsm.config.json)

{
  "name": "My Design System",
  "rootDirectory": "./src",
  "framework": "react",
  "storybook": {
    "storiesPattern": "**/*.stories.@(js|jsx|ts|tsx)"
  },
  "output": {
    "mode": "single-file",
    "outputPath": "./design-system-mcp.json"
  },
  "baseImportPath": "@components"
}

环境变量(.dsmrc)

OPENAI_API_KEY=your_api_key_here
DESIGN_SYSTEM_NAME="My Design System"

🧪 测试

# Test component discovery
yarn tsx src/main.ts scan --verbose

# Test MCP server
node test-search.js

# Test specific parser
yarn tsx src/main.ts parse --parsers storybook

🤝 贡献

  1. 添加新解析器 在 src/parsers/implementations/
  2. 扩展组件模型 在 src/models.ts
  3. 添加新的MCP工具 在 src/commands/serve.ts
  4. 改进分类 在解析器实现中

📄 许可证

MIT许可证-有关详细信息，请参阅许可证文件。

由以下材料制成❤️ 适用于希望其组件可被发现且对人工智能友好的设计系统团队。

相关 MCP