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 目錄中，可在組件中導入使用。