MasterGo AI 生成原型间距不统一的核心原因是缺乏显式设计约束和系统规范绑定；需通过Design Tokens定义间距值、Wireframe锚定结构、分区块生成及D2C Pro校验四步实现精准控制。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
MasterGo AI 生成原型时出现间距不统一，核心原因不是 AI “出错”，而是缺乏显式的设计约束和系统级规范绑定。它不会自动继承团队的视觉节奏，必须通过设计令牌（Design Tokens）、结构锚定和分步引导来校准输出。关键在于把“期望的间距规则”变成 AI 能识别、能执行的信号。
用 Design Tokens 锁定基础间距值
MasterGo AI 能自动提取并应用项目中的 Design Tokens，但前提是这些值已明确定义且可被识别。
- 在「资源库」→「设计令牌」中创建标准间距变量，例如：space-8（8px）、space-16（16px）、space-24（24px），单位统一为 px
- 确保这些 Token 已发布到团队库，并在当前文件中启用「同步团队资源库」
- AI 生成前，在提示词中直接引用，例如：“按钮组内间距使用 space-16，卡片内边距设为 space-24”——这比写“留白适中”更有效
以 Wireframe 为结构锚点强制对齐
AI 容易自由发挥，导致模块位置漂移、间距浮动。用低保真线框图作为不可编辑的底层参考，能大幅压缩其解空间。
MaterialDesign风格下拉菜单jquery插件
下载
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
- 将 Wireframe 图层重命名为 [REF] Layout，锁定 + 降低不透明度至 30%
- 在其上方新建 Frame，尺寸严格匹配；再用透明描边矩形精确复刻关键区域（如 header、list、footer），并标注语义名称（如 “NAV_BAR”、“ITEM_LIST”）
- 选中这些辅助矩形，启用 Auto Layout，统一设置 item spacing 为 space-16 —— 这相当于给 AI 划出“只能在这里生成”的安全区
分区块触发生成，绑定局部间距逻辑
一次性输入整页描述，AI 容易混淆不同区域的间距意图。拆解后逐块生成，每块都带明确的上下文约束。
- 用鼠标框选某一个辅助矩形（如只选 “USER_PROFILE” 区域），再点击 MasterGo AI 的「在选区内生成」
- 提示词聚焦该区块：例如“头像直径 40px，昵称与状态标签垂直居中，三者间等距为 space-8，整体与矩形上边距为 space-16”
- 生成后组件会自动吸附到辅助矩形边界；若未吸附，右键选择「固定到顶部/左侧」，避免手动拖拽引入误差
用 D2C Pro 反向校验并固化间距关系
生成后，别急着导出。利用 MasterGo 的 D2C Pro 功能做一次反向验证——它能把设计稿转成代码，同时暴露隐藏的间距不一致问题。
- 选中生成的模块 → 右键 → 「D2C Pro → 生成代码预览」
- 观察 CSS 中 margin/padding 是否全部映射为 token 值（如 padding: var(--space-24);），而非硬编码像素（如 padding: 22px;）
- 若发现硬编码，说明该处未绑定 Token 或 Auto Layout 未启用，返回修改后重新触发 D2C 校验，直到所有间距均以 token 形式呈现
