Mesh Design System MCP Server

MeshMCP - 网格设计系统MCP服务器

一个基于Studio的模型上下文协议（MCP）服务器，它为Claude Code（VS Code）提供了访问网格设计系统组件、设计令牌和原型设计工具的功能。

特点/功能

• 🎨（彩绘/艺术创作） 组件发现 - 列出所有Mesh设计系统的组件
• 📋 翻译成中文是：清单 组件详情 - 获取道具、示例和设计指导
• 🎨（颜料桶，常用于表示与绘画、艺术相关的内容） 设计令牌 - 访问颜色、排版和间距标记
• 🔄 翻译成中文是：🔄（这个符号本身在中文中没有直接对应的含义，但可以理解为“循环”或“重复”的概念，具体翻译时可能需要根据上下文来确定其准确含义。）不过，直接以该符号表示时，通常无需翻译，保留原样即可。若需表达其含义，可描述为“循环”或“重复”的意思。 占位符数据 - 生成逼真的保险/医疗测试数据
• 🔍 看起来像是一个放大镜的符号，常用于表示搜索、查看细节或寻找某物。在中文中，可以简单地翻译为“🔍（放大镜）”或者根据上下文意译为“仔细查看”、“搜索”等。但直接作为符号使用时，通常保留原样或用文字描述其含义。 用例搜索 - 为特定的UI模式查找组件
• 💻 电脑/笔记本电脑 代码生成 - 使用Mesh组件生成React原型代码
• ⚡（闪电符号，常用于表示快速、活力、能量或电子设备等） 智能缓存 - 基于文件的缓存，使用TTL（生存时间）以提升性能

快速入门

1. 安装依赖项

⚠️ 依赖项已修复！ 见 INSTALL.md 翻译为中文是：“安装指南文件（或：安装说明文件）” 请参阅详细的安装说明。

pip install -r requirements.txt
playwright install chromium

2. 测试服务器

python3 test_mcp.py

3. 在VS Code中进行配置

添加到 ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json：

{
  "mcpServers": {
    "mesh-design-system": {
      "command": "python3",
      "args": ["main.py"],
      "cwd": "/Users/luke.ylias/Documents/GitHub/MeshMCP"
    }
  }
}

重启 VS Code 并开始与Claude一起使用这些工具！

可用工具

项目结构

MeshMCP/
├── main.py                    # FastMCP server entry point
├── requirements.txt           # Python dependencies
├── test_mcp.py               # Test script
├── SETUP.md                  # Detailed setup guide
├── QUICK_START.md            # Quick reference
├── scrapers/
│   └── mesh_scraper.py       # Web scraping with Playwright
├── cache/
│   └── cache_manager.py      # File-based caching
├── generators/
│   └── data_generator.py     # Placeholder data generation
└── models/
    └── mcp_models.py         # Pydantic models

它是如何工作的

Claude Code (VS Code)
    ↓ stdio (JSON-RPC)
FastMCP Server (main.py)
    ↓
┌─────────────────────────────┐
│  mesh_scraper.py (Playwright)│ → Mesh Design System
│  cache_manager.py (File)    │ → cache_data/
│  data_generator.py (Faker)  │ → Test data
└─────────────────────────────┘

故障排除

服务器无法连接？

# Verify installation
python3 test_mcp.py

# Check MCP package
pip list | grep mcp

缓存问题？

# Clear cache (will regenerate)
rm -rf cache_data/

Playwright 出现错误了吗？

# Reinstall browsers
playwright install --force chromium

文档

• QUICK_START.md 翻译为中文是：“快速入门指南.md”（注：".md"通常表示Markdown格式的文件，这里未直接翻译，但在实际语境中，可以根据需要解释为“Markdown文档”或保持原样以表示文件类型）。不过，为了简洁明了，通常可以简译为“快速启动指南.md” - 三步完成安装与配置
• SETUP.md 翻译为中文是：“设置说明文件.md” - 完整的安装指南及故障排除方法

技术栈

• MCP SDK（MCP软件开发工具包） - 克劳德集成模型上下文协议
• 剧作家 - 用于组件数据的网页抓取
• Faker（注：Faker是电竞选手Faker Lee Sang-hyeok的英文名，中文常译为“ Faker”或根据个人习惯可译为“李相赫”等，此处保留原英文名以体现其电竞界的知名度） - 真实的澳大利亚保险数据生成
• Pydantic（注：这是一个Python库的名称，直接翻译可能无具体含义，但在此保留原名以指代该库） - 数据验证
• aiofiles（通常可译为“异步文件操作库”或根据具体上下文翻译为更贴切的名称） - 异步文件操作用于缓存

许可证

详见LICENSE文件。