快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

命令预览

npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools

详细介绍

Mozaic MCP服务器

](https://www.npmjs.com/package/mozaic-mcp-server) ](https://www.npmjs.com/package/mozaic-mcp-server) ![License: MIT](https://opensource.org/licenses/MIT) ![Documentation](https://merzoukemansouri.github.io/adeo-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工具，无需安装：

🎮 开放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

许可证

MIT许可证-请参阅许可证文件以获取详细信息。

支持

对于问题或疑问：

📚 阅读在线文档
🎮 试试 MCP游乐场
🐛 打开一个问题
📖 检查技能文档
🎨 审查 Mozaic设计系统文件

______________________________________________________________________

建于❤️ 为ADEO社区

*莫桑比克设计系统由ADEO维护*

目录标签

设计系统开发工具TypeScriptClaude本地部署前端开发AI辅助开发组件库设计令牌

支持客户端

Claude DesktopClaude

接入字段

传输方式（transport，传输协议）

stdio

鉴权方式（authType，认证方式）

session

运行时（runtime，运行环境）

Node.js

来源包（packageName，安装包名）

mozaic-mcp-server@latest

工具数量（toolCount，工具数）

11

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

stdiosession部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

来源信息

MCP World

mcpworld.com

/detail/9651cc5c19112ac1832af693fd99f87f

Mozaic MCP Server 是一个为 Mozaic 设计系统提供交互式技能和程序化访问工具的开发工具包，适用于前端开发者和设计师。

继续浏览同类 MCP

更多开发工具 MCP（20,396）返回 MCP 目录

上一个 MCP

Add Skill

一套用于配置和管理AI代理的工具集，包括浏览器调试、代码搜索、项目连接、文档访问和技能安装等功能，适用于开发者和AI助手集成。

下一个 MCP

Ad Exchange Buyer API

MCP服务器是一个基于OpenAPI自动生成的模型上下文协议服务器，用于处理API交互和测试。

Adeo Mozaic MCP