Design System Analyzer

🚀 设计系统的MCP服务器

本项目包含一个MCP（模型上下文协议）服务器，它能提供组件属性和设计令牌的相关信息，为设计系统的构建和管理提供有力支持。

🚀 快速开始

MCP 服务器功能

MCP 服务器提供了两个主要工具：

• getComponentProps：用于检索组件属性信息。
• getTokens：可从令牌文件中获取设计令牌信息。

调试 MCP 服务器

若要调试 MCP 服务器，可按以下步骤操作：

1. 运行内存dbg脚本：

$ deno task debug-mcp

此脚本具备以下功能：

• 创建一个内存中的客户端 - 服务器连接。
• 发出示例调用，以检索组件属性和令牌。
• 在控制台中显示结果。

您还可以修改调试脚本来测试不同的组件或特定的令牌请求。

📦 安装指南

文档未提及安装步骤，若有相关需求可进一步补充。

💻 使用示例

基础用法

# 调试 MCP 服务器
$ deno task debug-mcp

# 生成设计令牌
$ deno task build-tokens

📚 详细文档

设计令牌生成

设计令牌存储在 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 目录中，可在组件中导入使用。