Mozaic MCP服务器
独立的克劳德代码技能和MCP服务器 Mozaic设计系统 ADEO。
概述
该软件包提供了两个互补的工具，用于在人工智能助手中使用Mozaic设计系统：
- 🤖 克劳德编程技能 -引导组件构建和设计令牌使用的5种交互技能
- 🔌 MCP 服务器 -模型上下文协议服务器，配备11个用于程序化访问Mozaic资源的工具
包含什么
| 资源类型 | 计数 | 描述 |
|---|---|---|
| 设计符号 | 586 | 颜色、排版、间距、阴影、边框、断点 |
| 组件 | 91 | Vue 3和React组件，附带完整文档 |
| 图标 | 1473 | 15个类别的SVG图标 |
| CSS实用程序 | 6 | 柔性网格、容器、边距、填充、比率、滚动 |
| 文档 | 281 | 可搜索的使用指南和最佳实践 |
| MCP工具 | 11 | 以编程方式访问所有资源 |
| Claude Skills | 5 | 用于Vue、React和不可知用途的交互式工作流 |
快速开始
交互式安装（推荐）
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools使用箭头键和空格键选择组件，然后按Enter键安装。
一个命令安装
# Install everything (skills + MCP server)
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools all
# Install only skills (for Claude Code)
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools skills
# Install only MCP server (for Claude Desktop)
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools mcp检查安装状态
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools list安装前尝试
直接在浏览器中测试MCP工具，无需安装：
操场让你：
- 交互式测试所有11个MCP工具
- 浏览组件、令牌和图标
- 生成代码片段
- 搜索文档
克劳德编程技能
5种独立的技能，为与Mozaic一起构建提供交互式工作流程。
可用技能
| 技能 | 描述 | 用例 |
|---|---|---|
| 莫萨克真空发生器 | 交互式Vue 3组件生成器 | 使用Mozaic构建Vue应用程序 |
| mozaic反应生成器 | 交互式React/TSX组件生成器 | 使用Mozaic构建React应用程序 |
| 莫萨克设计符号 | 设计符号和造型专家 | 访问颜色、排版、间距 |
| mozaic css实用程序 | CSS实用程序类和布局 | 构建响应式布局 |
| 莫萨克图标 | 图标搜索和集成 | 查找和使用Mozaic图标 |
技能如何发挥作用
技能在Claude Code中根据上下文自动激活，或者您可以手动调用它们：
User: "I need a login form with Mozaic"Claude Code会自动激活相应的技能（Vue或React构建器），并指导您完成以下操作：
- 组件选择
- 道具配置
- 代码生成
- 安装说明
看 SKILLS.md 详细文档。
MCP服务器工具
通过模型上下文协议访问莫桑比克资源的11个程序化工具。
可用工具
| 工具 | 类别 | 描述 |
|---|---|---|
get_design_tokens | 令牌 | 按类别（颜色、排版、间距等）查询令牌 |
get_component_info | 组件 | 获取组件道具、插槽、事件和文档 |
list_components | 组件 | 按类别或框架列出组件 |
generate_vue_component | Code Gen | 使用props生成Vue 3 SFC代码 |
generate_react_component | 代码生成 | 使用TypeScript生成React/TSX代码 |
search_documentation | 文档 | 全文搜索281个文档页面 |
get_css_utility | CSS | 获取CSS实用程序类和示例 |
list_css_utilities | CSS | 列出可用的CSS实用程序 |
search_icons | 图标 | 按名称、类型或类别搜索1473个图标 |
get_icon | 图标 | 获取图标SVG和框架代码 |
get_install_info | 安装 | 获取npm/yarn/pnpm安装命令 |
配置
添加到您的克劳德代码或克劳德桌面设置：
克劳德代码 （in .claude/settings.json):
{
"mcpServers": {
"mozaic": {
"command": "npx",
"args": ["-y", "mozaic-mcp-server"]
}
}
}适用于克劳德桌面 （in ~/Library/Application Support/Claude/claude_desktop_config.json):
{
"mcpServers": {
"mozaic": {
"command": "npx",
"args": ["-y", "mozaic-mcp-server"]
}
}
}使用示例
在Claude代码中使用技巧
技能会根据您的请求自动激活：
You: "I need a responsive grid with 3 columns"
Claude: [activates mozaic-css-utilities skill]
Here's the Flexy grid solution...You: "Add a shopping cart icon"
Claude: [activates mozaic-icons skill]
I found these cart icons...以编程方式使用MCP工具
配置后，Claude可以直接使用MCP工具：
You: "What design tokens are available?"
Claude: [calls get_design_tokens tool]
Found 586 tokens across 7 categories...You: "Generate a React button component"
Claude: [calls get_component_info, then generate_react_component]
Here's your Button component with TypeScript...CLI命令
这 adeo-mozaic-install-tools CLI提供了几个命令：
# Interactive mode (default)
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools
# Install all components
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools all
# Install skills only
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools skills
# Install MCP server only
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools mcp
# Check status
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools list
# Remove components
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools remove skills
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools remove mcp
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools remove all
# Show help
npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools --help建筑
┌─────────────────────────────────────┐
│ Claude Code / Claude Desktop │
│ │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Skills │ │ MCP Server │ │
│ │ (5 total) │ │ (11 tools) │ │
│ └─────────────┘ └─────────────┘ │
│ │ │ │
└──────────┼────────────────┼─────────┘
│ │
▼ ▼
┌──────────────────────────┐
│ Shell Scripts (14) │
│ ↓ sqlite3 queries │
└──────────────────────────┘
▼
┌──────────────────────────┐
│ SQLite Database │
│ ~/.claude/mozaic.db │
│ │
│ • 586 tokens │
│ • 91 components │
│ • 1,473 icons │
│ • 281 docs │
└──────────────────────────┘文件位置
安装后：
~/.claude/
├── mozaic.db # SQLite database (all Mozaic data)
├── skills/ # Claude Code skills
│ ├── mozaic-vue-builder/
│ ├── mozaic-react-builder/
│ ├── mozaic-design-tokens/
│ ├── mozaic-css-utilities/
│ └── mozaic-icons/
└── (Claude Code settings.json) # MCP server config
~/Library/Application Support/Claude/
└── claude_desktop_config.json # Claude Desktop MCP config发展
先决条件
- Node.js≥25.2.0
- pnpm（推荐）
设置
# Clone the repository
git clone https://github.com/MerzoukeMansouri/adeo-mozaic-mcp.git
cd mozaic-mcp-server
# Install dependencies
pnpm install
# Build the project (compiles TypeScript + builds database)
pnpm build
# Run tests
pnpm test
# Start MCP server in debug mode
pnpm start:debug项目结构
mozaic-mcp-server/
├── src/ # TypeScript source code
│ ├── index.ts # MCP server entry point
│ ├── tools/ # MCP tool implementations
│ └── database/ # Database utilities
├── skills/ # Claude Code skills
│ ├── mozaic-vue-builder/
│ │ ├── skill.md # Skill instructions
│ │ └── scripts/ # Shell scripts (4)
│ └── ... # Other skills
├── scripts/ # Build and utility scripts
│ ├── build-index.ts # Database builder
│ └── generate-docs.ts # Documentation generator
├── data/ # Generated database
│ └── mozaic.db
├── repos/ # Mozaic Design System repositories (git submodules)
│ ├── mozaic-design-system/
│ ├── mozaic-vue/
│ └── mozaic-react/
├── bin/ # CLI entry points
│ └── install.js # Installation CLI
└── website/ # Documentation website构建数据库
SQLite数据库是从Mozaic设计系统存储库构建的：
# Update submodules
git submodule update --init --recursive
# Build database
pnpm build该指数：
- 设计代币来自
mozaic-design-system/packages/tokens - 组件来自
mozaic-vue和mozaic-react - 图标来自
mozaic-design-system/packages/icons - 来自所有存储库的文档
贡献
欢迎投稿！请遵循以下指南：
- 分叉存储库
- 创建要素分支(
git checkout -b feature/amazing-feature) - 使用提交更改 常规提交
- 推到分支(
git push origin feature/amazing-feature) - 打开拉取请求
承诺公约
我们使用语义版本控制和常规提交：
feat:-新功能（小版本凹凸）fix:-Bug修复（补丁版本碰撞）feat!:或BREAKING CHANGE:-重大变化（主要版本碰撞）chore:,docs:,style:,refactor:,test:-无版本冲突
资源
文档和工具
- 📚 文档: https://merzoukemansouri.github.io/adeo-mozaic-mcp/
- 🎮 MCP游乐场: https://merzoukemansouri.github.io/adeo-mozaic-mcp/#/playground
- GitHub: https://github.com/MerzoukeMansouri/adeo-mozaic-mcp
- npm: https://www.npmjs.com/package/mozaic-mcp-server
相关资源
- Mozaic设计系统: https://mozaic.adeo.cloud/
- MCP协议: https://modelcontextprotocol.io/
- 克劳德代码: https://code.claude.com/
许可证
MIT许可证-请参阅 许可证 文件以获取详细信息。
支持
对于问题或疑问：
- 📚 阅读 在线文档
- 🎮 试试 MCP游乐场
- 🐛 打开一个问题
- 📖 检查 技能文档
- 🎨 审查 Mozaic设计系统文件
______________________________________________________________________
建于❤️ 为ADEO社区
*莫桑比克设计系统由ADEO维护*