让 AI 更好理解你的设计系统

MasterGo AI 工具（AI 设计助手、AI 快搭、MCP Server）在理解你的设计系统时，设计稿的组织质量直接影响 AI 输出的准确性。本文讲解如何通过优化设计系统的组织方式，让三套 AI 工具都能更好地理解和使用你的设计资产。

核心原则

AI 工具通过分析设计系统的结构、命名和变量关系来理解设计意图。以下四个维度是 AI 理解设计系统的关键入口。

一、变量体系：AI 的"设计词典"

使用语义化 Token 命名

AI 工具通过变量名来推断属性的用途。语义化命名的变量让 AI 能更准确地映射到代码中的对应 CSS 属性。

推荐的命名层级：

color / brand / primary     →  AI 识别为品牌主色
color / text / primary      →  AI 识别为正文字色
color / background / page   →  AI 识别为页面背景色
spacing / md                →  AI 识别为中号间距
font / size / heading-xl    →  AI 识别为大标题字号
radius / md                 →  AI 识别为中号圆角

建立完整的 Token 覆盖

确保以下常用属性都绑定了变量而非硬编码值，这样 AI 工具在处理设计稿时能识别出设计系统的约束规则：

颜色（填充、描边、阴影色）
间距和边距
字号、字重、行高
圆角
边框宽度
阴影参数

当 AI 工具选中一个图层时，右侧面板会展示该图层关联的 Token 信息。如果某个属性未绑定变量，AI 只能读取到具体数值，无法理解其设计语义。

处理 Token 冲突

当一个图层同时匹配多个 Token 时，MasterGo 会显示警告图标。AI 工具面对 Token 冲突时，需要在多个可能的取值中猜测，可能导致不一致的输出。保持图层的 Token 绑定单一且明确。

二、组件结构：AI 的"组件地图"

保持组件命名一致

AI 工具通过组件名称来识别和映射组件。保持设计组件名与前端的组件名一致，能显著提高 AI 生成代码的准确率：

设计：Button/Primary/Large → 代码：<Button type="primary" size="large">
设计：Input/Search → 代码：<Input.Search />

使用变体而非多个独立组件

将同一组件的不同状态组织为变体（Variant）集合，而非创建多个独立组件。这让 AI 能理解它们之间的关系：

推荐：一个 Button 组件集，包含 Primary/Secondary、Default/Hover/Disabled 等变体避免：分别创建 PrimaryButton、SecondaryButton、DisabledButton 等独立组件

合理使用自动布局

AI 工具理解自动布局比理解手动定位准确得多。自动布局能告诉 AI：

元素之间的排列方向（横向/纵向）
间距规则（固定间距 vs 自适应）
元素如何响应容器变化（填充 vs 适应内容）

三、文件组织：AI 的"资源索引"

保持组件库文件的整洁

删除废弃组件和草稿图层，避免 AI 读取到过时信息
将不常用的历史组件移入归档页面，而非删除（方便回退）
组件库文件中只保留组件本身，不混杂设计稿页面

在组件库中设置示例页面

在组件库文件中添加一个示例页面（命名为 _examples 或「使用示例」），展示组件在实际界面中的组合方式。AI 工具可以通过这些示例学习组件的正确用法。

前缀标记内部组件

使用 _ 或 . 前缀标记不希望 AI 工具推荐给用户的内部组件（如 _internal/DividerHelper）。这些组件不会被发布到团队库。

四、通过 MCP Server 连接 AI 与设计系统

当你通过 MCP Server 将设计文件连接到 AI 编码工具（Cursor、Claude Code 等）后，良好的设计系统组织将直接转化为高质量的 AI 输出：

结构化数据：AI 通过 getDesignSections 读取设计分区，清晰的分区结构让 AI 能快速定位目标组件
SVG 获取：通过 getDesignSvgs 获取图标资源，确保 AI 使用的是设计系统中的正确图标
文本提取：通过 getDesignTexts 获取精确文案，避免 AI 猜测文本内容

自查清单

在让 AI 工具接入你的设计系统前，按以下清单自查：

[ ] 变量命名语义化（表达用途而非具体值）
[ ] 颜色、间距、字体等常用属性已绑定变量
[ ] 组件使用变体管理状态，而非独立组件
[ ] 所有图层有意义的命名，无默认名称
[ ] 自动布局覆盖所有容器
[ ] 组件库文件整洁，废弃组件已清理或归档
[ ] 内部组件已用前缀标记
[ ] 组件描述已填写完整

常见问题

问题	原因	解决方法
AI 生成了错误的颜色值	颜色属性未绑定变量，AI 读到了硬编码色值	将颜色属性绑定到语义化变量
AI 未识别出组件类型	组件名称与前端代码不对齐	统一设计与开发的组件命名规范
MCP 返回数据结构混乱	设计稿层级过深或命名不规范	简化组件层级，规范图层命名
AI 图标引用错误	图标未正确组织或命名模糊	规范图标命名，使用组件集管理

让 AI 更好理解你的设计系统 ​

核心原则 ​

一、变量体系：AI 的"设计词典" ​

使用语义化 Token 命名 ​

建立完整的 Token 覆盖 ​

处理 Token 冲突 ​

二、组件结构：AI 的"组件地图" ​

保持组件命名一致 ​

使用变体而非多个独立组件 ​

合理使用自动布局 ​

三、文件组织：AI 的"资源索引" ​

保持组件库文件的整洁 ​

在组件库中设置示例页面 ​

前缀标记内部组件 ​

四、通过 MCP Server 连接 AI 与设计系统 ​

自查清单 ​

常见问题 ​