systembridge mcp：设计系统的mcp服务器
一种人工智能原生模型上下文协议（MCP）服务器，为LLM和代理提供设计系统和设计令牌的深入知识，实现智能设计系统演化、令牌分析和设计师到开发人员的交接。
  
______________________________________________________________________
这是什么？
系统桥mcp 教AI助手（如Claude、GPT或自定义代理）如何使用您的设计系统。人工智能不仅可以回答有关设计的问题，还可以：
- 了解您的设计标记： 浏览、搜索和解释调色板、间距比例和排版
- 规划新功能： 描述您需要什么（“登录页面”），获取所需的组件和令牌
- 移交前审核设计： 检查您的设计是否具有所需的所有令牌，找出差距，验证可访问性
- 匹配颜色和组件： 上传屏幕截图或描述用户界面，获取与您的系统匹配的内容
- 生成和验证令牌： 创建调色板，检查WCAG对比度，构建语义标记
- 改进你的系统： 转换令牌、迁移命名、管理主题和品牌
设计师： 将其视为了解您的令牌库的设计系统助手。问“错误状态用什么红色表示？”或“我应该在这个模型上应用什么令牌？”——不需要代码。
开发者： 一个编程接口，用于使用AI原生工具设计令牌，以进行分析、转换和代码生成。
______________________________________________________________________
快速开始
您需要什么： Node.js 18+和支持MCP的AI助手（例如。 克劳德桌面光标）。
- 在您的设计令牌项目中安装：
npm install -D systembridge-mcp- 在项目根目录中添加配置文件 （可选；适用合理的默认值）：
// .systembridge-mcp.json or systembridge-mcp.config.json
{ "tokenPaths": ["tokens/**/*.json", "design-tokens/**/*.json"] }- 添加到MCP配置 （例如。
.cursor/mcp.json光标）：
{
"mcpServers": {
"systembridge-mcp": {
"command": "npx",
"args": ["systembridge-mcp"]
}
}
}- 重启你的AI助手。 查找MCP图标——您应该看到 32工具 来自systembridge mcp。使用项目级配置时不需要路径配置。
下一页： 入门指南 | 客户端设置 （光标、VS代码、克劳德）| 代理说明 （可选AI指导）。\ 对于当地发展： 测试.
______________________________________________________________________
对话示例
对于设计师
“我需要设计一个包含数据表和统计卡的仪表板。我需要哪些组件和令牌？”
AI使用 plan_flow 识别UI模式，列出所需的组件，并告诉您要填充哪些令牌槽。
“我使用按钮、文本输入、卡片和模态。我的设计系统涵盖了所有内容吗？”
AI使用 audit_design 检查缺少的令牌、命名问题和可访问性问题。
“我看到一个颜色为#3B82F6、#EF4444、#F3F4F6的UI。哪些代币匹配？"
AI使用 analyze_ui 通过感知颜色匹配来找到最接近的标记。
对于开发者
生成一个色调为220、色度为0.7的品牌调色板，并将其映射到灯光模式的语义标记
AI使用 generate_palette + map_palette_to_semantics + check_contrast 创建可访问的令牌。
“对我的设计令牌进行全面审核。检查命名、可访问性和覆盖率。”
AI使用 audit_semantics + analyze_coverage + check_contrast 制作健康报告。
“我有一些不符合我们命名约定的遗留令牌。请帮助我安全地迁移它们。”
AI使用 analyze_topology → generate_refactor_scenarios → execute_migration 计划和执行迁移。
______________________________________________________________________
特性
| 区域 | 工具 |
|---|---|
| 设计师智能 | plan_flow, audit_design, analyze_ui |
| 令牌管理 | search_tokens, validate_tokens, transform_tokens |
| 语义标记 | scaffold_semantics, audit_semantics, analyze_coverage, describe_ontology |
| 颜色和可达性 | generate_palette, map_palette_to_semantics, check_contrast |
| 主题和品牌 | list_brands, resolve_brand, list_themes, resolve_theme, diff_brands, diff_themes |
| 鳞片 | analyze_scales, generate_scale, suggest_scale, derive_density_mode, audit_scale_compliance, generate_fluid_scale |
| 迁移 | analyze_topology, audit_figma_usage, generate_refactor_scenarios, execute_migration |
| Figma | extract_figma_tokens, validate_figma_tokens, generate_component_docs |
7个预构建的提示编排了多种工具：创建令牌、审计令牌、设计语义令牌、设计调色板、从头开始设计、设计移交审查、组件参考。
完整参考： docs/features.md
______________________________________________________________________
文档
| 指南 | 说明 |
|---|---|
| 入门指南 | 完整安装、配置选项、故障排除 |
| 客户端设置 | 按客户端设置（光标、VS代码、克劳德桌面、克劳德代码） |
| 代理说明 | 可选的AI使用指南和规则模板 |
| 本地测试 | 测试用 npm link 没有绝对路径 |
| 对于设计师 | 设计器工作流程，示例提示，无代码使用 |
| 对于开发者 | CLI、MCP API，扩展服务器、测试、基准测试 |
| 特性 | 完整功能和工具参考 |
| 配置 | 配置文件、环境变量、令牌路径 |
| 迁移系统 | 风险评估和情景生成 |
| 迁移执行器 | 执行、验证和回滚 |
| Figma集成 | Figma变量同步和验证 |
| 特工_安多夫 | LLM和代理的体系结构指南 |
______________________________________________________________________
贡献
欢迎捐款。分叉，创建一个特征分支，进行更改，运行 npm run build，并提交拉取请求。
看 docs/AGENT_HANDOFF.md 用于代码库架构。
______________________________________________________________________
许可证
麻省理工学院——见 许可证版权所有©2024–2026塔索斯·德尔维纳加斯。
______________________________________________________________________
致谢
______________________________________________________________________
技术支持： · · MCP故障