MasterGo_AI_如何解决_AI_生成设计间距不统一问题？

说起来，MasterGo AI 本身并不会在生成后去“修复”间距不统一的问题。它的思路要更前置——通过设计系统预设、Token 管理和结构化约束，让间距从生成的那一刻起就受到控制。关键不在于事后调整，而在于让 AI 理解并继承团队已有的间距规范。

用 Design Token 统一定义间距尺度

MasterGo 的 Design Token（设计令牌）支持集中管理常用间距值，比如说，你可以在系统里定义

、、 这样的变量。这些不是拍脑袋想出来的数字，而是按 4 或 8 的倍率建立的模度体系。更关键的是，当 AI 在生成组件时，如果项目已经配置并启用了这套 Token 库，它会优先调用预设值，而不是随机输出一个数。

• 在 MasterGo「设计系统」中新建 Sizing 类型的 Token，命名时尽量清楚，比如

  space-xs=4
  ，

  space-sm=8
  ，

  space-md=16
• 记得将 Token 设为「团队共享」，这样 AI 插件的上下文才能读到最新版本
• 写提示词的时候，尽量避免“留 13px 空隙”这种数字，改用“使用标准中等间距”或直接引用 token 名称

在 Auto Layout 中绑定间距逻辑

如果 AI 生成的模块没有启用 Auto Layout，或者只是靠手动拖动来对齐，子元素之间的间距迟早会漂移。MasterGo 支持在容器级开启结构化布局，并且可以把内边距（Padding）、项目间距（Item Spacing）这些参数直接拴到 Token 上。

• 选中 AI 生成的卡片、列表、轮播等 Frame，右键启用「自动布局」
• 在右侧属性面板里，点一下 Padding 或 Spacing 字段旁边的下拉箭头，选一个已经定义好的 Token（比如

  space-md
  ）
• 确认字段显示为蓝色 Token 图标，而不是灰色的纯数字——这代表绑定成功，后面新增子项也会自动继承这个间距

用组件库 + 别名系统对齐研发侧理解

说到本质，间距不一致很多时候不是设计师的错，而是设计师和前端之间的“翻译”出了偏差。比如说，设计师提了一句“卡片之间空一格”，前端那边可能理解成 margin-bottom: 16px，也可能误用 padding 或 flex gap。MasterGo 的 DSM（设计系统管理平台）通过别名映射来解决这个问题。

• 给

  space-md
  设一个别名，比如

  component-gap
  或

  list-item-spacing
• 这样前端在 Cursor 或工程里读到这个别名时，能清楚知道它具体是干什么用的，而不是光看一个数字
• 未来如果设计稿调整

  space-md = 20px
  ，所有绑定这个 Token 的组件和导出的代码都会同步更新，不需要手动一个个改

生成后一键校验与批量修正

到这步，基本已经是收尾活了。MasterGo 提供的「设计规范检查」插件（部分企业版支持）可以扫描画布上所有用了 Auto Layout 的模块，识别那些没有绑定 Token 的间距字段，以及偏离模度的异常值——比如出现 18px、27px 这种不是 4 的倍数的数值。找到之后，支持一键替换成最近似的标准值。

• 运行检查前，确保当前画布已经链接到一个有效的 Design System
• 对那些高亮显示的“未标准化间距”，可以批量选中 → 右键 →「应用间距预设」→ 指定

  space-16
• 历史遗留的纯数字间距，工具会问你要不要转为 Token 引用，转完之后就算纳入统一管控了