adeo-mozaic-mcp - 為Claude等AI助手集成Mozaic設計系統查詢服務的MCP工具

探索

Adeo Mozaic MCP

Mozaic MCP服務器是一個為Claude等AI助手提供ADE0的Mozaic設計系統查詢服務的工具，通過索引設計令牌、組件文檔、圖標和CSS工具類，使AI能夠獲取設計系統信息並生成代碼片段。

開發者工具知識管理與記憶 #設計系統 #組件查詢 #代碼生成 #AI助手 .TypeScript

評分 : 2分

下載量 : 7.4K

更新時間 : 2025-12-29

打開站點

什麼是Mozaic MCP Server?

Mozaic MCP Server是一個專門為AI助手設計的服務器，它連接了ADEO的Mozaic設計系統。通過這個服務器，AI助手（如Claude）可以直接查詢設計系統的各種資源，包括設計規範、UI組件、圖標庫和文檔。這就像是給AI助手配備了一個設計系統的專屬圖書館管理員，可以快速找到你需要的信息。

如何使用Mozaic MCP Server?

使用這個服務器非常簡單：首先需要安裝並啟動服務器，然後在支持MCP協議的AI助手（如Claude Desktop）中配置連接。配置完成後，你就可以直接向AI助手詢問Mozaic設計系統的相關問題，比如“Mozaic的按鈕組件有哪些屬性？”或“給我一個藍色的主色調代碼”。AI會通過服務器獲取準確信息並回答你。

適用場景

這個服務特別適合以下場景：1) 前端開發者在編寫代碼時需要快速查閱設計規範；2) 設計師需要確認設計系統的一致性；3) 團隊新成員學習Mozaic設計系統；4) 在代碼審查時驗證是否符合設計規範；5) 快速生成符合設計系統的UI代碼片段。

主要功能

組件查詢

支持查詢Vue和React組件的完整信息，包括屬性、插槽、事件和示例代碼。可以按類別瀏覽所有可用組件。

設計規範查詢

提供586個設計規範的查詢，包括顏色、字體、間距、陰影、邊框等，支持按類別篩選。

圖標搜索

包含1,473個圖標的搜索功能，支持按名稱、類型（導航、媒體、社交等）或尺寸（16-64px）篩選，提供SVG和React/Vue代碼。

CSS工具類

提供6大類CSS工具類的查詢，包括Flexy網格系統、容器、邊距、內邊距、比例和滾動控制，共500+個類名。

文檔全文搜索

支持在281個文檔頁面中進行全文搜索，包括設計系統文檔和Storybook使用指南。

代碼生成

根據設計規範自動生成Vue或React組件代碼，確保代碼符合Mozaic設計系統標準。

安裝指南

提供組件的安裝命令、導入方式和快速開始代碼，幫助開發者快速集成組件。

優勢

一站式查詢：整合了Mozaic設計系統的所有資源，無需在不同文檔間切換

AI友好：專門為AI助手優化，提供結構化的數據接口

即時準確：基於最新的Mozaic版本（2.x），確保信息的時效性

多框架支持：同時支持Vue 3和React組件

代碼即用：提供的代碼示例可以直接複製使用

侷限性

需要配置：需要在AI助手中進行服務器配置才能使用

依賴網絡：需要從GitHub倉庫獲取最新數據

學習曲線：需要了解基本的MCP協議概念

僅限Mozaic：只支持ADEO的Mozaic設計系統，不適用於其他設計系統

開發中功能：部分功能（如安裝指南）還在測試階段

如何使用

安裝服務器

首先需要安裝Mozaic MCP Server。使用包管理器（如pnpm）進行安裝。

構建數據庫

服務器需要構建本地數據庫來存儲設計系統數據。這個過程會自動從Mozaic的GitHub倉庫獲取最新數據。

啟動服務器

啟動MCP服務器，它將通過標準輸入輸出（stdio）與AI助手通信。

配置AI助手

在支持MCP的AI助手（如Claude Desktop）中配置服務器連接。通常需要在配置文件中添加服務器信息。

開始查詢

配置完成後，就可以直接在AI助手中詢問Mozaic設計系統的相關問題了。

使用案例

快速查找按鈕組件

開發者在編寫界面時需要知道Mozaic按鈕組件的所有可用屬性和事件。

設計規範確認

設計師需要確認某個顏色值是否符合Mozaic設計規範。

圖標選擇

需要為導航菜單尋找合適的圖標。

佈局實現

需要實現一個響應式佈局，使用Mozaic的網格系統。

代碼生成

需要快速創建一個符合Mozaic規範的卡片組件。

常見問題

我需要安裝什麼才能使用這個服務器？

這個服務器支持哪些AI助手？

數據是最新的嗎？如何更新？

這個服務器是免費的嗎？

支持哪些設計系統版本？

如果遇到問題怎麼辦？

這個服務器會影響AI助手的性能嗎？

我可以擴展這個服務器來支持其他設計系統嗎？

🚀 Mozaic MCP 服務器

這是一個 MCP（模型上下文協議）服務器，它將 ADEO 的 Mozaic 設計系統 開放給 Claude 及其他 AI 助手使用。該服務器能讓 AI 助手便捷地查詢設計系統中的各類信息，提升設計和開發效率。

查看文檔 | 試用演示

⚠️ 重要提示

本項目正在積極開發中，歡迎貢獻代碼和提供反饋！

🚀 快速開始

pnpm install
pnpm build   # 編譯 TypeScript 並構建數據庫
pnpm start   # 啟動 MCP 服務器

✨ 主要特性

此服務器對整個 Mozaic 設計系統進行索引，使其可通過 MCP 工具進行查詢。AI 助手能夠：

查找設計令牌（顏色、間距、排版等）
獲取包含屬性、插槽、事件和示例的組件文檔
搜索並獲取帶有 SVG/React/Vue 代碼的圖標
搜索文檔頁面
生成組件代碼片段

📦 安裝指南

pnpm install
pnpm build   # 編譯 TypeScript 並構建數據庫
pnpm start   # 啟動 MCP 服務器

📚 詳細文檔

索引內容

類型	數量	描述
設計令牌	586	顏色、排版、間距、陰影、邊框、屏幕尺寸、網格佈局
Vue 組件	52	屬性、插槽、事件、示例
React 組件	39	屬性、回調函數、示例
圖標	1,473	15 個類別的 SVG 圖標（354 個唯一圖標，每個圖標有 5 種尺寸）
CSS 實用工具	6	彈性佈局、容器、邊距、內邊距、比例、滾動（500+ 個類）
文檔	281	支持全文搜索的 MDX 頁面

文檔來源：

設計系統文檔（220 頁）
Vue Storybook 文檔（58 頁） - 入門指南、使用說明
React Storybook 文檔（3 頁） - 入門指南、使用說明

MCP 工具

組件工具

工具	描述
`get_component_info`	獲取 Vue/React 組件的詳細信息（屬性、插槽、事件、示例）
`list_components`	按類別列出框架組件
`generate_vue_component`	生成 Vue 組件代碼
`generate_react_component`	生成 React 組件代碼

CSS 實用工具

工具	描述
`get_css_utility`	獲取 CSS 實用類和示例（彈性佈局、邊距等）
`list_css_utilities`	按類別列出可用的 CSS 實用工具（佈局、實用）

圖標工具

工具	描述
`search_icons`	按名稱、類型（導航、媒體、社交）或尺寸（16 - 64px）搜索圖標
`get_icon`	獲取帶有 SVG 標記和即用型 React/Vue 代碼的圖標詳細信息

安裝工具

工具	描述
`get_install_info`	獲取組件的安裝命令、導入語句和快速啟動代碼 (測試版)

其他工具

工具	描述
`get_design_tokens`	按類別（顏色、間距、排版、陰影、邊框、屏幕尺寸、網格佈局）查詢令牌
`search_documentation`	對所有文檔進行全文搜索

令牌類別

類別	數量	示例
顏色	482	`--color-primary-01-100`, `--color-button-solid-*`
排版	60	`--font-size-`, `--line-height-`
間距	19	`$mu025` 到 `$mu1000`（魔法單位系統）
屏幕尺寸	12	斷點：`s`, `m`, `l`, `xl`, `xxl`
陰影	3	帶有 x、y、模糊、擴散、不透明度的盒子陰影
邊框	3	邊框寬度
圓角半徑	3	邊框圓角值
網格佈局	4	間距、魔法單位、rem 值

CSS 實用工具

僅使用 CSS 的佈局和實用類（無 Vue/React 包裝器）。使用 get_css_utility 工具獲取完整的類列表和示例。

實用工具	類別	描述
彈性佈局	佈局	具有響應式類的 Flexbox 12 列網格
容器	佈局	具有最大寬度的響應式容器
邊距	實用	使用魔法單位比例的邊距實用工具
內邊距	實用	使用魔法單位比例的內邊距實用工具
比例	實用	寬高比實用工具（16:9、4:3、1:1 等）
滾動	實用	滾動阻止實用工具

架構

┌─────────────────────────────────────────────────────────────┐
│                     Claude 桌面端                          │
└─────────────────────────┬───────────────────────────────────┘
                          │ 標準輸入輸出
┌─────────────────────────▼───────────────────────────────────┐
│                    MCP 服務器                               │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ 工具：get_component_info、get_css_utility 等     │   │
│  └─────────────────────────┬───────────────────────────┘   │
│                            │                                │
│  ┌─────────────────────────▼───────────────────────────┐   │
│  │                 SQLite 數據庫                     │   │
│  │  令牌 | 組件 | 圖標 | CSS 實用工具 | 文檔 │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
                          ▲
                          │ 構建
┌─────────────────────────┴───────────────────────────────────┐
│                    源倉庫                      │
│  mozaic-design-system  │  mozaic-vue  │  mozaic-react      │
└─────────────────────────────────────────────────────────────┘

腳本

腳本	描述
`pnpm build`	編譯 TypeScript 並構建數據庫
`pnpm build:docs`	生成文檔圖表
`pnpm start`	啟動 MCP 服務器
`pnpm dev`	帶監聽功能的開發模式
`pnpm clean`	刪除 dist 目錄和數據庫
`pnpm test`	運行單元測試
`pnpm database:sanity`	驗證數據庫完整性