adeo-mozaic-mcp - 为Claude等AI助手集成Mozaic设计系统查询服务的MCP工具

探索

Adeo Mozaic MCP

Mozaic MCP服务器是一个为Claude等AI助手提供ADE0的Mozaic设计系统查询服务的工具，通过索引设计令牌、组件文档、图标和CSS工具类，使AI能够获取设计系统信息并生成代码片段。

开发者工具知识管理与记忆 #设计系统 #组件查询 #代码生成 #AI助手 .TypeScript

评分 : 2分

下载量 : 7.1K

更新时间 : 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`	验证数据库完整性