设计系统用的MCP服务器

该项目包括一个MCP（模型上下文协议）服务器，提供组件属性和设计令牌的信息。

MCP服务器特性

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

• getComponentProps：检索组件属性信息
• getTokens：从令牌文件中检索设计令牌信息

调试MCP服务器

要调试MCP服务器：

1. 运行内存调试脚本：

$ deno task debug-mcp

此脚本：

• 创建内存中的客户端-服务器连接
• 对检索组件属性和令牌进行示例调用
• 在控制台显示结果

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

设计令牌生成

设计令牌存储在src/design-system/tokens目录下的JSON文件中：

• color.json：颜色调色板和主题颜色
• typography.json：字体家族、大小、粗细
• spacing.json：间距比例
• radius.json：边框半径值

令牌生成过程

令牌通过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目录下，并可以导入到你的组件中。