MasterGo AI 的“AI 智能填充”这两年被不少人误以为是花哨的贴图工具,其实它真正干的事——把结构化数据跟设计元素动态绑定到一起,让文字、图片、图标乃至交互状态自动匹配业务语义。而且它不依赖外部 API 调用,完全基于画布上下文和预设规则在本地完成填充,生成的内容可以直接编辑、导出,也符合团队规范。
说白了,这套能力解决了设计稿“看起来像真的”这一痛点,而不是让你手工一条条粘贴测试数据。下面拆解它的具体玩法。
识别并标记需填充的元素类型
AI 填充的第一步,是让系统搞清楚“哪里要填什么”。MasterGo 会自动识别常见的语义图层:比如带“标题”“副标题”“价格”“评分”“头像”“商品图”这类命名或样式的文本/容器节点。当然,你也能手动标注——双击文本层,在内容里输入{name}、{price}之类的占位符,AI 立刻就明白这是个数据字段。
- 命名规范越清晰,识别越精准:把按钮图层重命名为“加入购物车按钮”,比单纯写“按钮”更可能触发正确的填充逻辑
- 图标类图层如果已经关联了 Iconfont 或组件库图标名(比如“icon-cart”),AI 会优先调取对应矢量资源,而不是凭空生成新图标
- 表格、列表这类容器,得先启用“自动布局”,AI 才能按行或按列批量填充多组数据
选择填充来源与模板
选中图层后,右侧属性面板找到「AI 填充」按钮(快捷键 Ctrl+Shift+F / ⌘Command+Shift+F),就能呼出填充面板。系统提供了三类常用数据来源:
- 内置模板库:涵盖电商(商品名/价格/销量)、内容平台(标题/摘要/作者/时间)、后台系统(用户姓名/角色/状态标签)等高频场景。选中即填,字段映射也能微调。
- 上传 CSV/JSON 数据:手头有运营数据或测试集?直接上传。AI 自动解析字段名,然后尝试匹配图层命名——比如 CSV 里有 “product_name”,它就会优先填入命名里带 “name” 或 “标题” 的文本层。
- 手动输入示例数据:在面板里输入 1–3 条真实样例(例如“iPhone 15 Pro, ¥8999, ⭐4.8”),AI 会据此推断格式规律,然后批量延展填充其余同类图层。
控制填充精度与风格一致性
填充不是一次性的,它允许你持续干预。生成后发现价格全是整数,但实际需要保留小数?或者头像尺寸不统一?别急,有办法:
- 对已填充的文本层,右键选择「AI 重填」→ 弹窗里勾选“保留数字精度”“强制中文标点”等选项即可。
- 批量填充图片时,右侧面板提供「填充模式」:选“适应”保持比例,“充满”填满区域,“拉伸”适配容器——不同商品卡片可以混合使用。
- 如果一组按钮需要统一显示“已下单”“待发货”这类状态文字,选中全部按钮 → 启用 AI 填充 → 选择「状态标签模板」→ 指定状态流转顺序,AI 就会自动生成对应文案及颜色变化。
与设计系统联动实现合规填充
当团队已经配置了设计系统(DSM),AI 填充会主动对齐规范:字体大小严格匹配“正文-小号”层级,价格数字自动套用“数值强调色”,评分图标调用组件库里注册的 star 组件,连“¥”符号是左对齐还是右对齐都按品牌指南来执行。
- 填充前,记得确认画布已绑定企业私有组件库(在「设置 → 设计系统」中启用)
- 如果某字段填充结果偏离了规范(比如用了非标准灰色值),AI 会在图层旁边标出黄色感叹号,点击即可一键修正为 DSM 定义值
- 导出代码时,填充内容会自动转成 React/Vue 中的 data 属性或 props,默认启用 v-for / map 渲染逻辑,省去了额外的手动改写
