MCP 能把设计数据交给 AI 编程工具，但只有设计稿坐标、颜色和文本，还不足以让代码稳定遵循团队规范。要减少重复组件、硬编码样式和品牌偏差，还需要把组件、变量、命名规则与代码映射组织成可读取的设计系统上下文。
本文解决“MCP 为什么需要设计系统，以及团队应该提供哪些上下文”。如果你需要先完成客户端和 IDE 连接，请参考 Pixso MCP 使用原理与连接指南。
MCP 为什么需要设计系统？
MCP 解决“如何传递上下文”，设计系统解决“哪些规则应该被复用”。如果画布里有十种相近的按钮、颜色由十六进制值散落定义，AI 即使准确读取，也只能忠实复制混乱。组件、变量和模式把隐含经验变成可引用对象，才能给模型更确定的选择。
因此，MCP 不是设计系统的替代品。它更像一条上下文通道：上游规范越清楚，下游生成结果越可控；上游存在重复、废弃或冲突规则，AI 也会把这些问题带进代码。
让 AI 遵循品牌规范需要哪四层上下文？
最小上下文可以分为基础变量、语义 Token、组件模式和工程规则四层。前两层决定颜色、字体、间距和圆角如何表达；组件模式说明不同状态与组合；工程规则则告诉 Agent 在代码库中如何复用和命名。
| 层级 | 示例 | AI 需要知道什么 |
|---|---|---|
| 基础变量 | blue-600、space-16 | 可用值、类型与停用状态 |
| 语义 Token | text-primary、bg-danger | 使用意图和主题映射 |
| 组件模式 | Button/Primary/Disabled | 变体、属性、状态与组合规则 |
| 工程规则 | 组件目录、CSS 方案、前缀 | 代码引用方式与禁止事项 |
Pixso 变量系统 可把颜色、数字、文本和布尔值作为设计 Token 管理，并将变量应用到颜色、尺寸、间距、圆角等属性。对 MCP 而言，变量引用比孤立数值更容易表达设计意图。
如何把设计系统接入 MCP 工作流？
先保证画布实例引用正确组件和变量，再让 Agent 读取目标容器，同时开放代码库中的对应实现。仅把设计系统文档链接丢进提示词，无法替代真实实例关系和代码引用。
- 清理目标页面中的脱离实例、重复组件和已废弃变量。
- 给组件变体与变量使用语义名称，并写明用途和限制。
- 在代码库中建立组件、Token 与文件路径的稳定入口。
- 让 Agent 先返回它识别到的组件、变量和可复用代码，再开始修改。
Pixso D2C 的 DSM 组件解析器可为设计组件实例配置前端标签和属性映射。它适合已有前端组件库的团队：生成时优先引用真实组件，而不是再次拼出一份相似 DOM。具体能力与席位要求以 Pixso D2C 文档 为准。
MCP 提示词如何写入设计系统约束？
提示词要同时说明“优先复用什么”和“禁止新增什么”。只写“遵循设计规范”太抽象；应给出组件目录、Token 文件、状态覆盖、断点策略和允许改动范围。
读取 Pixso 当前选中的页面容器，并先列出组件与变量引用。
实现时优先复用 src/components 和现有 design tokens；
不要新增重复按钮、输入框或第二套颜色变量；
将默认、悬停、禁用、加载和错误状态映射到现有组件属性；
完成后列出未找到映射的设计对象和所有硬编码值。如果团队正在搭建设计资产，可先参考 Pixso 设计系统 的组件与团队资源管理方式，再决定哪些规范必须进入每次 Agent 任务。
如何验收 AI 代码是否遵循设计系统？
验收不能只对比截图，还要检查引用关系。视觉相似的页面仍可能包含复制组件、无语义颜色和不可维护的魔法数字。建议把检查拆成设计侧、代码侧和运行侧三轮。
- 设计侧：组件实例、变量引用、变体状态和图层命名是否正确。
- 代码侧：是否复用现有组件与 Token，是否出现重复实现和散落数值。
- 运行侧：主题、断点、交互、空错状态和可访问性是否完整。
- 差异回写：无法映射的对象应进入设计系统待办，而不是被静默硬编码。
团队如何分阶段落地？
先从一个组件族和一个真实页面建立闭环，再扩展到整个产品。第一阶段固定按钮、输入框、卡片及核心颜色/间距 Token；第二阶段建立设计组件到代码组件的映射；第三阶段才把 MCP 提示词和验收脚本沉淀为团队模板。
- 统计目标页面中未引用组件或变量的比例。
- 选出高频组件，统一命名、变体和前端 API。
- 用同一页面执行三次生成，比较复用率与返工项。
- 将常见偏差转为可自动检查的规则。
- 每次设计系统升级后重新运行基准页面。
MCP 与设计系统的常见误区
- 把截图当设计系统：截图能提供视觉参考，但没有组件、变量和状态关系。
- 只整理设计侧：前端组件命名和属性不稳定，Agent 仍无法准确复用。
- 要求像素级还原：如果不同时限制结构，容易得到绝对定位和大量硬编码。
- 一次接入全部资产：上下文过大反而降低选择准确性，应按页面与组件族缩小范围。
MCP 设计系统常见问题
没有设计系统可以使用 MCP 吗？
可以，但更适合小范围探索。进入正式项目后，应至少整理核心组件、颜色、字体、间距和响应式规则，否则生成结果很难稳定复用。
有组件库为什么还会生成重复组件？
常见原因是设计实例已脱离、代码目录未提供给 Agent，或提示词没有明确“先搜索再新增”。需要同时检查设计引用和代码上下文。
MCP 能自动修复设计系统吗？
MCP 负责传递上下文，具体修复取决于客户端能力、权限和所调用模型。批量修改前应先输出差异清单，并由负责人确认。
如何衡量接入是否有效？
可跟踪现有组件复用率、硬编码 Token 数量、视觉差异数、构建通过率和人工返工时间，而不是只统计生成速度。
