de en es ja ko ru zh

Mozaic MCP Server

Name: Mozaic MCP Server
Author: MerzoukeMansouri

by MerzoukeMansouri

Overview Schema Source Related Servers Discussions Admin

TypeScript

Local

Mozaic MCP Server

npm version npm downloads License: MIT Documentation

Автономные навыки для Claude Code и MCP-сервер для Mozaic Design System от ADEO.

📚 Документация • 🎮 MCP Playground

Обзор

Этот пакет предоставляет два взаимодополняющих инструмента для работы с системой дизайна Mozaic в ИИ-ассистентах:

🤖 Навыки Claude Code — 7 интерактивных навыков для пошаговой сборки компонентов и использования дизайн-токенов
🔌 MCP-сервер — сервер протокола Model Context Protocol с 17 инструментами для программного доступа к ресурсам Mozaic

Что включено

Тип ресурса	Количество	Описание
Дизайн-токены	586	Цвета, типографика, отступы, тени, границы, брейкпоинты
Компоненты	131+	Vue 3, React, Web Components и макросы Freemarker с полной документацией
Иконки	1,473	SVG-иконки в 15 категориях
CSS-утилиты	6	Flexy grid, Container, Margin, Padding, Ratio, Scroll
Документация	281	Руководства по использованию и лучшие практики с поиском
Инструменты MCP	17	Программный доступ ко всем ресурсам
Навыки Claude	7	Интерактивные рабочие процессы для Vue, React, Web Components, Freemarker и универсального использования

Related MCP server: mcpsystem.design MCP Server

Быстрый старт

Интерактивная установка (рекомендуется)

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 Playground

Playground позволяет:

Интерактивно тестировать все 11 инструментов MCP
Просматривать компоненты, токены и иконки
Генерировать фрагменты кода
Искать по документации

Навыки Claude Code

6 автономных навыков, предоставляющих интерактивные рабочие процессы для сборки с использованием Mozaic.

Доступные навыки

Навык	Описание	Вариант использования
mozaic-vue-builder	Интерактивный генератор компонентов Vue 3	Создание Vue-приложений с Mozaic
mozaic-react-builder	Интерактивный генератор компонентов React/TSX	Создание React-приложений с Mozaic
mozaic-webcomponents-builder	Интерактивный генератор Web Components	Создание фреймворк-независимых приложений с нативными веб-компонентами
mozaic-freemarker-builder	Интерактивный генератор макросов Freemarker	Создание серверных шаблонов на Freemarker
mozaic-design-tokens	Эксперт по дизайн-токенам и стилям	Доступ к цветам, типографике, отступам
mozaic-css-utilities	CSS-утилиты и макеты	Создание адаптивных макетов
mozaic-icons	Поиск и интеграция иконок	Поиск и использование иконок Mozaic

Как работают навыки

Навыки активируются в Claude Code автоматически в зависимости от контекста, либо вы можете вызвать их вручную:

User: "I need a login form with Mozaic"

Claude Code автоматически активирует подходящий навык (генератор Vue или React) и проведет вас через:

Выбор компонента
Настройку пропсов
Генерацию кода
Инструкции по установке

Подробную документацию см. в SKILLS.md.

Инструменты MCP-сервера

14 программных инструментов для доступа к ресурсам Mozaic через протокол Model Context Protocol.

Доступные инструменты

Инструмент	Категория	Описание
`get_design_tokens`	Токены	Запрос токенов по категории (цвета, типографика, отступы и т.д.)
`get_component_info`	Компоненты	Получение пропсов, слотов, событий и документации компонента
`list_components`	Компоненты	Список компонентов по категории или фреймворку
`generate_vue_component`	Генерация кода	Генерация кода Vue 3 SFC с пропсами
`generate_react_component`	Генерация кода	Генерация кода React/TSX с TypeScript
`generate_webcomponent`	Генерация кода	Генерация HTML нативного Web Component с импортами
`get_webcomponent_info`	Web Components	Получение атрибутов, слотов, событий, CSS-свойств
`list_webcomponents`	Web Components	Список веб-компонентов по категории
`generate_freemarker`	Генерация кода	Генерация кода макроса Freemarker с конфигурацией
`get_freemarker_info`	Freemarker	Получение опций конфигурации макроса и его использования
`list_freemarker`	Freemarker	Список макросов Freemarker по категории
`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

Конфигурация

Добавьте в настройки Claude Code или Claude Desktop:

Для Claude Code (в .claude/settings.json):

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

Для Claude Desktop (в ~/Library/Application Support/Claude/claude_desktop_config.json):

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

Примеры использования

Использование навыков в Claude Code

Навыки активируются автоматически на основе вашего запроса:

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-команды

CLI adeo-mozaic-install-tools предоставляет несколько команд:

# 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 Design System:

# 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)
Зафиксируйте изменения, используя Conventional Commits
Отправьте изменения в ветку (git push origin feature/amazing-feature)
Откройте Pull Request

Соглашение о коммитах

Мы используем семантическое версионирование с обычными коммитами:

feat: — Новая функция (минорное обновление версии)
fix: — Исправление ошибки (патч-обновление версии)
feat!: или BREAKING CHANGE: — Критическое изменение (мажорное обновление версии)
chore:, docs:, style:, refactor:, test: — Без обновления версии

Ресурсы

Документация и инструменты

📚 Документация: https://merzoukemansouri.github.io/adeo-mozaic-mcp/
🎮 MCP Playground: 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 Design System: https://mozaic.adeo.cloud/
MCP Protocol: https://modelcontextprotocol.io/
Claude Code: https://code.claude.com/

Лицензия

Лицензия MIT — подробности см. в файле LICENSE.

Поддержка

По вопросам или проблемам:

📚 Прочитайте онлайн-документацию
🎮 Попробуйте MCP playground
🐛 Откройте issue на GitHub
📖 Проверьте документацию по навыкам
🎨 Ознакомьтесь с документацией Mozaic Design System

Создано с ❤️ для сообщества ADEO

Mozaic Design System поддерживается ADEO

This server cannot be deployed

Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

Maintenance

ActivityMaintained

ResponsivenessNo issues

Resources

Need Help?

Related Servers

Related MCP Connectors

SupernovaOAuth
io.supernova
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Design Tools Documentation Access Developer Tools
1
design-system
app.zaklad
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
Design Tools Developer Tools
2
Tseha A
io.tseha
Serves your design system and coding standards to coding agents, so they stop guessing.
Developer Tools Documentation Access
942
21st.dev AOAuth
dev.21st
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Design Tools Developer Tools AI & Machine Learning
2

Related MCP Servers

MCP Modus
Documentation Access Developer Tools
julianoczkowski
A
license
A
quality
C
maintenance
Provides AI assistants with access to complete Modus Web Components documentation, enabling instant help with component usage, design system guidelines, and project setup directly in your IDE.
Updated 3 months ago (2026-07-06 14:50 UTC)
10
24 npm
4
MIT
mcpsystem.design MCP Server
Developer Tools Software Architecture Content Management Systems
heyadam
A
license
Not graded
quality
D
maintenance
Provides AI assistants with access to a production-ready design system including Tailwind CSS component patterns, style guides (colors, typography, spacing), and Web Components specifications for consistent UI development.
Updated 4 months ago (2026-06-04 11:52 UTC)
7 npm
MIT
WordPress Design System MCPofficial
Design Tools Content Management Systems
Automattic
F
license
Not graded
quality
F
maintenance
Provides AI assistants with access to WordPress Design System component information and design guidance.
Updated 4 months ago (2026-06-08 12:21 UTC)
9
-
Material 3 MCP Server
Design Tools Documentation Access
weppa-cloud
A
license
A
quality
D
maintenance
Provides AI agents with tools to access Material 3 design components, design tokens, icons, and accessibility guidelines across multiple frameworks.
Updated a year ago (2025-09-30 01:52 UTC)
8
29 npm
6
MIT

Mozaic MCP Server

Обзор

Что включено

Быстрый старт

Интерактивная установка (рекомендуется)

Установка одной командой

Проверка статуса установки

Попробуйте перед установкой

Навыки Claude Code

Доступные навыки

Как работают навыки

Инструменты MCP-сервера

Доступные инструменты

Конфигурация

Примеры использования

Использование навыков в Claude Code

Программное использование инструментов MCP

CLI-команды

Архитектура

Расположение файлов

Разработка

Предварительные требования

Настройка

Структура проекта

Сборка базы данных

Вклад в проект

Соглашение о коммитах

Ресурсы

Документация и инструменты

Связанные ресурсы

Лицензия

Поддержка

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

MCP Modus

mcpsystem.design MCP Server

WordPress Design System MCPofficial

Material 3 MCP Server