🚀 设计系统的MCP服务器
本项目包含一个MCP（模型上下文协议）服务器，它能够提供组件属性和设计令牌信息，为设计系统的开发和管理提供了有力支持。
🚀 快速开始
✨ 主要特性
MCP 服务器提供了两个主要工具：
getComponentProps：用于检索组件属性信息。getTokens：可从令牌文件中获取设计令牌信息。
📦 安装指南
文档未提及安装步骤，此处跳过。
💻 使用示例
基础用法
要调试 MCP 服务器，可按以下步骤操作： 运行内存dbg脚本：
$ deno task debug-mcp
此脚本具备以下功能：
- 创建一个内存中的客户端 - 服务器连接。
- 发出示例调用以检索组件属性和令牌。
- 在控制台中显示结果。
您还可以修改调试脚本来测试不同的组件或特定的令牌请求。
📚 详细文档
设计令牌生成
设计令牌存储在 src/design-system/tokens 目录中的 JSON 文件中：
| 属性 | 详情 |
|---|---|
| 颜色 | color.json 存储颜色 palette 和主题颜色 |
| 排版 | typography.json 记录字体家族、大小、重量 |
| 间距 | spacing.json 包含间距 scale |
| 圆角 | radius.json 存有边距 radius 值 |
令牌生成流程
令牌通过 Style Dictionary 处理，具体工作流如下：
- 在
tokens目录中的 JSON 文件中定义令牌值。 - Style Dictionary 根据
src/design-system/style-dictionary/config.json中的配置处理这些令牌。 - 输出格式包括：
- CSS 变量（tokens.css）
- JavaScript 模块（tokens.js）
- TypeScript 声明（tokens.d.ts）
生成令牌的命令如下：
$ deno task build-tokens
生成的文件位于 src/design-system/style-dictionary/dist 目录中，可在组件中导入使用。