mozaic

Name: mozaic
Author: MerzoukeMansouri

本地服务

github.com/MerzoukeMansouri开发工具

代码仓库

关于 mozaic

mozaic 是面向编码项目的 MCP 服务和 Agent 技能集，可供编码 Agent 使用 ADEO 的 Mozaic Design System。它提供设计参考，并支持为多种 UI 框架生成代码。

主要功能

01查询设计令牌和组件
02生成 Vue、React、Web Component 和 Freemarker 代码
03搜索图标和文档
04浏览 CSS 实用工具和样式指南
05提供 8 种交互式 Agent 技能

适用场景

01为 Vue 或 React 应用生成 Mozaic 组件
02制作界面样式时查找令牌值
03查找图标或 CSS 布局工具
04构建界面前参考样式指南模式

MCP 相关

MCP 服务提供 19 种工具，用于查询 Mozaic 令牌、组件、图标、文档、实用工具和样式指南，以及生成代码。编码 Agent 连接本地 stdio 服务；项目也提供单独的 HTTP API。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "merzoukemansouri-mozaic": {
      "command": "npx",
      "args": [
        "-y",
        "mozaic-mcp-server"
      ]
    }
  }
}

启动命令npx -y mozaic-mcp-server

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npmmozaic-mcp-server2.14.3stdio

工具

收录的工具列表 · 更新于 2 周前

参数	类型	必填	说明
format	enum	否	输出格式：json（结构化）、scss（$variables）、css（--custom-properties）、js（常量）json \| scss \| css \| js
category	enum	是	令牌类别：colors、typography、spacing、shadows、borders、screens、grid 或 allcolors \| typography \| spacing \| shadows \| borders \| screens \| grid \| all