设计系统MCP服务器

设计系统MCP服务器

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

MCP服务器功能

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

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

调试MCP服务器

要调试MCP服务器，请执行以下操作：

1. 运行内存中的调试脚本：

$ deno task debug-mcp

此脚本：

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

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

设计令牌生成

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

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

令牌生成过程

令牌使用以下方式处理 样式词典 其工作流程如下：

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

要生成令牌，请执行以下操作：

$ deno task build-tokens

生成的文件被放置在 src/design-system/style-dictionary/dist 目录，可以导入到您的组件中。