ds-pilot

一个将您的设计系统（组件 + 令牌）暴露给 AI 代理的 MCP 服务器。防止代理创建重复的组件或硬编码本应作为令牌的值。

安装

npx @lyse-labs/ds-pilot init

这将：

• 检测您的组件目录和令牌文件

• 在 .mcp.json 中配置 MCP 服务器

• 将设计系统说明添加到您的 CLAUDE.md 中

使用方法

MCP 服务器（供 AI 代理使用）

npx @lyse-labs/ds-pilot serve --components ./src/components --tokens ./tokens.json

配置完成后，您的 AI 代理可以：

• search_components("button") — 查找现有组件

• get_component_props("Button") — 查看属性、类型、默认值

• list_tokens("color") — 列出所有颜色令牌

• get_token("color.primary") — 获取特定令牌值

CLI（供您使用）

# List all components
npx @lyse-labs/ds-pilot list components --dir ./src/components

# List tokens filtered by type
npx @lyse-labs/ds-pilot list tokens --file ./tokens.json --type color

# Search components
npx @lyse-labs/ds-pilot search button --dir ./src/components

# Show component props
npx @lyse-labs/ds-pilot props Button --dir ./src/components

支持的格式

组件

• React (.tsx, .ts, .jsx, .js)

• Vue / Nuxt (.vue，带有 <script setup lang="ts">)

• 带有类型、默认值和结构化变体的属性

• 命名导出和默认导出

令牌

• DTCG JSON (W3C 标准)

• 普通嵌套 JSON (Figma 导出)

• CSS 自定义属性

• 别名解析和组元数据

工作原理

1. 扫描器读取您的代码库并提取组件名称、属性和令牌值

2. MCP 服务器将这些数据作为 AI 代理可以调用的工具暴露出来

3. CLAUDE.md 说明告诉代理在创建新组件之前先检查现有组件

代理不再盲目猜测，而是开始复用现有资源。

许可证

MIT