Design System Analyzer

🚀 设计系统的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 处理，具体工作流如下：

1. 在 tokens 目录中的 JSON 文件中定义令牌值。
2. Style Dictionary 根据 src/design-system/style-dictionary/config.json 中的配置处理这些令牌。
3. 输出格式包括：
   • CSS 变量（tokens.css）
   • JavaScript 模块（tokens.js）
   • TypeScript 声明（tokens.d.ts）

生成令牌的命令如下：

$ deno task build-tokens

生成的文件位于 src/design-system/style-dictionary/dist 目录中，可在组件中导入使用。