AI导哈

设计系统AI助手

一个AI原生的设计系统服务器，为LLMs和代理提供设计系统和设计令牌的深度知识，支持智能设计系统演进、令牌分析和设计师与开发者交接。

  • by teyepe
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 teyepe/systembridge-mcp

使用说明

systembridge mcp：设计系统的mcp服务器

一种人工智能原生模型上下文协议（MCP）服务器，为LLM和代理提供设计系统和设计令牌的深入知识，实现智能设计系统演化、令牌分析和设计师到开发人员的交接。

这是什么？

系统桥mcp 教AI助手（如Claude、GPT或自定义代理）如何使用您的设计系统。人工智能不仅可以回答有关设计的问题，还可以：

  • 了解您的设计标记： 浏览、搜索和解释调色板、间距比例和排版
  • 规划新功能： 描述您需要什么（“登录页面”），获取所需的组件和令牌
  • 移交前审核设计： 检查您的设计是否具有所需的所有令牌，找出差距，验证可访问性
  • 匹配颜色和组件： 上传屏幕截图或描述用户界面，获取与您的系统匹配的内容
  • 生成和验证令牌： 创建调色板，检查WCAG对比度，构建语义标记
  • 改进你的系统： 转换令牌、迁移命名、管理主题和品牌

设计师： 将其视为了解您的令牌库的设计系统助手。问“错误状态用什么红色表示？”或“我应该在这个模型上应用什么令牌？”——不需要代码。

开发者： 一个编程接口，用于使用AI原生工具设计令牌，以进行分析、转换和代码生成。

快速开始

您需要什么： Node.js 18+和支持MCP的AI助手（例如。 克劳德桌面光标）。

  1. 在您的设计令牌项目中安装：

    npm install -D systembridge-mcp

  2. 在项目根目录中添加配置文件 （可选；适用合理的默认值）：

    // .systembridge-mcp.json or systembridge-mcp.config.json
{ "tokenPaths": ["tokens/**/*.json", "design-tokens/**/*.json"] }

  3. 添加到MCP配置 （例如。 .cursor/mcp.json 光标）：

    {
  "mcpServers": {
    "systembridge-mcp": {
      "command": "npx",
      "args": ["systembridge-mcp"]
    }
  }
}

  4. 重启你的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塔索斯·德尔维纳加斯。

致谢

建立在 模型上下文协议, 样式词典, 莱昂纳多，以及 WCAG 2.1受W3C DTCG、Tokens Studio以及Primer、Polaris和Carbon设计系统的启发。

技术支持： GitHub 问题 · GitHub讨论 · MCP故障

相关 MCP