%20--%3e%3cdefs%3e%3cstyle%3e%20.st0%20{%20fill:%20%23061b40;%20}%20.st1%20{%20fill:%20%23306af1;%20}%20.st2%20{%20fill:%20%235ce5cf;%20}%20%3c/style%3e%3c/defs%3e%3cg%3e%3cpath%20class='st0'%20d='M55,10.5h9v3h-9v9h12V7.5h-12v3ZM64,19.5h-6v-3h6v3Z'/%3e%3cpolygon%20class='st0'%20points='69%2016.5%2078%2016.5%2078%2019.5%2069%2019.5%2069%2022.5%2081%2022.5%2081%2013.5%2072%2013.5%2072%2010.5%2081%2010.5%2081%207.5%2069%207.5%2069%2016.5'/%3e%3cpolygon%20class='st0'%20points='95%2010.5%2095%207.5%2083%207.5%2083%2022.5%2095%2022.5%2095%2019.5%2086%2019.5%2086%2016.5%2095%2016.5%2095%2013.5%2086%2013.5%2086%2010.5%2095%2010.5'/%3e%3cpath%20class='st0'%20d='M40,1.5v21h11.6l1.4-1.4v-7.6h0c0,0-1.4-1.5-1.4-1.5l1.4-1.4V2.9l-1.4-1.4h-11.6ZM50,19.5h-7v-6h7v6ZM50,10.5h-7v-6h7v6Z'/%3e%3c/g%3e%3cpath%20class='st1'%20d='M23.1,24L14.7,4.8l-4.9,11.2h3.8l-1.8,4H3.3L12.1,0H2C.9,0,0,.9,0,2v20c0,1.1.9,2,2,2h21.1Z'/%3e%3cpath%20class='st2'%20d='M34,0h-16.8l10.6,24h6.2c1.1,0,2-.9,2-2V2C36,.9,35.1,0,34,0ZM32.5,20h-4V4h4v16Z'/%3e%3c/svg%3e)
Adeo Mozaic MCP
The Mozaic MCP Server is a tool that provides query services for ADE0's Mozaic design system to AI assistants such as Claude. By indexing design tokens, component documentation, icons, and CSS utility classes, it enables AI to obtain design system information and generate code snippets.
rating : 2 points
downloads : 6.1K
What is the Mozaic MCP Server?
The Mozaic MCP Server is a server specifically designed for AI assistants, which connects to ADEO's Mozaic design system. Through this server, AI assistants (such as Claude) can directly query various resources of the design system, including design specifications, UI components, icon libraries, and documentation. It's like equipping the AI assistant with a dedicated librarian for the design system, who can quickly find the information you need.How to use the Mozaic MCP Server?
Using this server is very simple: First, you need to install and start the server. Then, configure the connection in an AI assistant that supports the MCP protocol (such as Claude Desktop). After the configuration is complete, you can directly ask the AI assistant questions related to the Mozaic design system, such as 'What are the attributes of the Mozaic button component?' or 'Give me the code for the main blue color tone.' The AI will obtain accurate information through the server and answer you.Applicable scenarios
This service is particularly suitable for the following scenarios: 1) Front - end developers need to quickly consult design specifications when writing code; 2) Designers need to confirm the consistency of the design system; 3) New team members learn the Mozaic design system; 4) Verify compliance with design specifications during code review; 5) Quickly generate UI code snippets that comply with the design system.Main features
Component query
Supports querying complete information of Vue and React components, including attributes, slots, events, and example code. You can browse all available components by category.
Design specification query
Provides queries for 586 design specifications, including colors, fonts, spacing, shadows, borders, etc., and supports filtering by category.
Icon search
Includes a search function for 1,473 icons, supports filtering by name, type (navigation, media, social, etc.) or size (16 - 64px), and provides SVG and React/Vue code.
CSS utility classes
Provides queries for 6 major categories of CSS utility classes, including the Flexy grid system, containers, margins, paddings, ratios, and scroll controls, with a total of more than 500 class names.
Full - text document search
Supports full - text search in 281 document pages, including design system documentation and Storybook usage guides.
Code generation
Automatically generates Vue or React component code based on design specifications to ensure that the code complies with the Mozaic design system standards.
Installation guide
Provides installation commands, import methods, and quick - start code for components to help developers quickly integrate components.
Advantages
One - stop query: Integrates all resources of the Mozaic design system, eliminating the need to switch between different documents
AI - friendly: Optimized specifically for AI assistants, providing a structured data interface
Real - time and accurate: Based on the latest Mozaic version (2.x), ensuring the timeliness of information
Multi - framework support: Supports both Vue 3 and React components
Ready - to - use code: The provided code examples can be directly copied and used
Limitations
Requires configuration: Server configuration is required in the AI assistant to use
Network - dependent: Needs to obtain the latest data from the GitHub repository
Learning curve: Requires understanding of basic MCP protocol concepts
Mozaic - only: Only supports ADEO's Mozaic design system and is not applicable to other design systems
Features in development: Some features (such as the installation guide) are still in the testing phase
How to use
Install the server
First, you need to install the Mozaic MCP Server. Use a package manager (such as pnpm) for installation.
%20--%3e%3cdefs%3e%3cstyle%3e%20.st0%20{%20fill:%20%230080ff;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20class='st0'%20d='M16.2,11.1c.4.5.4,1.2,0,1.8l-4.7,7.1h-3.8l5.3-8L7.6,4h3.8l4.7,7.1Z'/%3e%3c/svg%3e)
Build the database
The server needs to build a local database to store design system data. This process will automatically obtain the latest data from the Mozaic GitHub repository.
Start the server
Start the MCP server, which will communicate with the AI assistant through standard input and output (stdio).
Configure the AI assistant
Configure the server connection in an AI assistant that supports MCP (such as Claude Desktop). Usually, you need to add server information to the configuration file.
Start querying
After the configuration is complete, you can directly ask the AI assistant questions related to the Mozaic design system.
Usage examples
Quickly find the button component
Developers need to know all available attributes and events of the Mozaic button component when writing the interface.
Confirm design specifications
Designers need to confirm whether a certain color value complies with the Mozaic design specifications.
Icon selection
Need to find suitable icons for the navigation menu.
Layout implementation
Need to implement a responsive layout using the Mozaic grid system.
Code generation
Need to quickly create a card component that complies with Mozaic specifications.
Frequently Asked Questions
What do I need to install to use this server?
Which AI assistants does this server support?
Is the data up - to - date? How to update it?
Is this server free?
Which design system versions are supported?
What should I do if I encounter a problem?
Will this server affect the performance of the AI assistant?
Can I extend this server to support other design systems?
Related resources
Official documentation
Complete project documentation, including architecture descriptions, API references, and usage guides
Online experience
Online demonstration and experience environment, allowing you to try the functions without installation
GitHub repository
Project source code, where you can view the code, submit issues, or participate in contributions
Mozaic design system
Official website of the ADEO Mozaic design system
Model Context Protocol
Official documentation and specifications of the MCP protocol
Claude Desktop
AI assistant desktop application supporting MCP
Duckduckgo MCP Server
Certified
The DuckDuckGo Search MCP Server provides web search and content scraping services for LLMs such as Claude.
Python
60.3K
4.3 points
Notion Api MCP
Certified
A Python-based MCP Server that provides advanced to-do list management and content organization functions through the Notion API, enabling seamless integration between AI models and Notion.
Python
18.3K
4.5 points
Gitlab MCP Server
Certified
The GitLab MCP server is a project based on the Model Context Protocol that provides a comprehensive toolset for interacting with GitLab accounts, including code review, merge request management, CI/CD configuration, and other functions.
TypeScript
20.2K
4.3 points
Markdownify MCP
Markdownify is a multi-functional file conversion service that supports converting multiple formats such as PDFs, images, audio, and web page content into Markdown format.
TypeScript
30.0K
5 points
Figma Context MCP
Framelink Figma MCP Server is a server that provides access to Figma design data for AI programming tools (such as Cursor). By simplifying the Figma API response, it helps AI more accurately achieve one - click conversion from design to code.
TypeScript
56.3K
4.5 points
Unity
Certified
UnityMCP is a Unity editor plugin that implements the Model Context Protocol (MCP), providing seamless integration between Unity and AI assistants, including real - time state monitoring, remote command execution, and log functions.
C#
27.7K
5 points
Gmail MCP Server
A Gmail automatic authentication MCP server designed for Claude Desktop, supporting Gmail management through natural language interaction, including complete functions such as sending emails, label management, and batch operations.
TypeScript
19.2K
4.5 points
Minimax MCP Server
The MiniMax Model Context Protocol (MCP) is an official server that supports interaction with powerful text-to-speech, video/image generation APIs, and is suitable for various client tools such as Claude Desktop and Cursor.
Python
40.5K
4.8 points