mastergo ai 通过 agent 和 chat 两种模式辅助设计:agent 模式用于目标明确的批量编辑,chat 模式用于模糊需求的诊断建议;需优先校准页面结构,再分块精修高频失真模块,并结合参考图与设计稿链接双输入确保细节准确。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

MasterGo AI 并不是一键“全自动优化路径”的工具,它不替代你做决策,而是把设计逻辑显性化、操作过程结构化,帮你更快定位问题、更准执行调整。关键在于用对模式、喂对信息、分步推进。
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件,你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
明确当前任务类型,选对 AI 模式
AI 设计助手提供两种核心模式,适用场景完全不同:
- 用 Agent 模式 直接改图:适合已知问题、目标清晰的操作,比如“把这 6 张卡片统一圆角为 8px”“将所有标题文字颜色改为 #333”“重命名所有按钮图层为 ‘Btn_Primary’”。它能直接调用画布编辑能力,批量执行,省去手动点选+属性面板重复操作。
- 用 Chat 模式 辅助判断:适合模糊需求或卡点分析,比如“这个后台页面顶部布局看起来松散,可能哪里出了问题?”“为什么导出后图标边缘有锯齿?该怎么设置?”AI 会结合设计规范、常见陷阱和 MasterGo 工作机制给出诊断建议,帮你理清下一步该调什么、为什么调。
把“页面结构”作为第一轮校准重点
很多翻车都源于骨架没立稳。AI 还原页面时,首版常在容器层级、网格系统、主次分区上出错——比如把统计卡片塞进错误的 Flex 容器,或让侧边栏和内容区未对齐同一栅格线。
建议操作:
- 先选中整个页面容器,用 Agent 模式输入:“检查并修正主布局框架,确保顶部导航、侧边栏、主内容区三者使用一致的间距基准(如 24px)和响应式断点逻辑”;
- 再单独选中顶部区域,输入:“按设计稿链接中的栅格定义,重新划分 6 张卡片的排列方式,每张卡片宽度均分且留白相等”。
针对高频失真模块,用“块状精修法”逐块闭环
像统计卡片、表单列表、数据图表这类嵌套深、样式杂的模块,AI 容易把文字、图标、背景打包识别成一张图,导致无法单独调整。
正确做法是:
- 不要把整块截图喂给 AI,而是拆解为最小可编辑单元(例如:只截取卡片图标 + 文字标签部分);
- 在 Agent 模式下,选中该局部图层,输入:“分离图标与文字为独立图层,图标使用矢量图标库(Ant Design),文字字号设为 14px,行高 20px,颜色 #666”;
- 完成一块后,立刻用“设计规范检查”功能验证色值、字体、圆角是否对齐团队库。
用参考图 + 设计稿链接双输入,锚定细节标准
单靠文字描述或单张截图,AI 对“微妙差异”理解力有限。比如“稍暗一点的灰色”“卡片阴影比按钮浅一档”,这种主观表述极易偏差。
实际有效组合是:
- 上传本地高清截图(标注关键尺寸/色块位置);
- 同时粘贴 MasterGo 设计稿文件链接(确保权限开放);
- 在提示词里明确写:“所有间距以设计稿链接中的标注为准;所有色值从设计稿取色器获取;所有字体大小参照设计稿文本样式定义”。
不复杂但容易忽略:AI 不是猜你想要什么,而是严格执行你告诉它的规则。路径是否顺畅,取决于你有没有提前把“什么是正确”说清楚、分层次、带依据。










