Component Builder MCP

设计系统组件生成器MCP服务器

MCP（模型上下文协议）服务器，提供按照kickstartDS设计系统模式构建UI组件的指令和模板。

特性

此MCP服务器公开了帮助LLM理解和生成以下代码的工具：

• 部件结构：组件的标准文件组织
• JSON模式首次开发：用于定义组件API的架构模板
• 反应模式：具有Context模式的纯功能组件
• 客户端行为：DOM交互的分离JavaScript
• SCSS/BEM 造型：设计令牌层和BEM命名约定
• 故事书集成：故事模板和文档

安装

npm install

用法

使用克劳德桌面

添加到您的 claude_desktop_config.json:

{
  "mcpServers": {
    "design-system-component-builder": {
      "command": "node",
      "args": ["/path/to/component-implementation-mcp/src/index.js"]
    }
  }
}

使用VS代码+复制码

添加到您的VS代码设置中：

{
  "mcp.servers": {
    "design-system-component-builder": {
      "command": "node",
      "args": ["${workspaceFolder}/src/index.js"]
    }
  }
}

可用工具

get-ui-building-instructions

获取构建UI组件的全面说明。 总是先打电话 在任何组件开发工作之前。

get-component-structure

获取新组件的标准文件结构和创建顺序。

get-json-schema-template

生成用于定义组件道具的JSON模式模板。模式是组件API的真实来源。

get-react-component-template

按照设计系统模式（纯函数式、forwardRef、Context模式）获取React组件模板。

get-client-behavior-template

获取使用kickstartDS Component类向组件添加客户端JavaScript行为的模板。

get-scss-template

获取带有BEM命名和设计令牌层的SCSS模板。

get-storybook-template

通过模式集成获取故事书故事模板。

get-defaults-template

获取组件默认道具的默认文件模板。

get-token-architecture

获取有关三层设计令牌架构的文档。

list-existing-components

列出设计系统中的所有现有组件及其文件结构。

设计系统模式

组件文件结构

每个组件都位于自己的文件夹中，其中包含托管文件：

src/components/{component-name}/
├── {ComponentName}Component.tsx     # React implementation
├── {ComponentName}Props.ts          # TypeScript types (generated)
├── {ComponentName}Defaults.ts       # Default prop values
├── {component-name}.schema.json     # JSON Schema (source of truth)
├── {component-name}.scss            # Component styles
├── _{component-name}-tokens.scss    # Design Tokens
├── {ComponentName}.stories.tsx      # Storybook stories
├── {ComponentName}.mdx              # Documentation
└── js/                              # Client behavior (optional)
    └── {ComponentName}.client.js

JSON模式优先

组件API在JSON模式中定义，然后生成类型：

1. 创建 {component-name}.schema.json
2. 跑 yarn schema 生成TypeScript类型
3. 使用生成的类型实现组件

纯React组件

组件是没有局部状态的纯函数：

• 使用 forwardRef 用于转发参考
• 使用上下文模式进行组件覆盖
• 使用 deepMergeDefaults 对于道具默认值
• 客户端行为分为 .client.js 文件

设计令牌层

Branding Tokens (--ks-brand-*)
         ↓
Semantic Tokens (--ks-*)
         ↓
Component Tokens (--dsa-*)

相关

• kickstartDS -底层设计系统框架
• 模型上下文协议 -协议规范

许可证

麻省理工学院