锁定功能区块，分模块生成

别试图让AI一次性画出一整页。先在画布上按照线框图划分出明确的区域——例如“搜索栏”“商品列表”“筛选弹窗”——每个区域单独选中，再触发AI生成。这样做能有效避免AI把“筛选按钮”和“排序下拉框”合并成一个组件，或者把“加入购物车”误判为普通文本。

举个例子，如果你只框选顶部的搜索区域，提示词可以这样写：“生成搜索模块：左侧图标（放大镜SVG），中间输入框（圆角8px，占宽70%，默认提示文字‘搜商品’），右侧语音按钮（麦克风图标，尺寸24×24）；所有元素水平居中，上下内边距16px。” 你看，这一步就把模糊的“生成一个搜索栏”变成了精准的模块指令。

绑定真实交互意图，而非视觉描述

AI最容易在哪里翻车？它常常把“点击跳转”当作装饰元素，而不是一个动作。你需要把交互意图直接写进提示词，而不是只描述外观。比如：

• 写“‘立即购买’按钮需支持点击后弹出规格选择浮层”，而不是只说“红色按钮，文字加粗”
• 写“‘收藏’图标点击后变为实心❤️并显示‘已收藏’toast”，而不是“爱心图标，红色”
• 写“列表项支持左滑唤出‘删除’操作，右滑唤出‘分享’”，而不是“每行有三个点图标”

MasterGo AI在Agent模式下能够识别这类行为动词，生成带有交互锚点的组件，后续可以直接连线配置原型流程，省去大量手动调整的功夫。

利用团队库+设计令牌硬约束输出

启用预置团队库（比如Ant Design或你们自建的组件库）后，AI会优先调用已有组件，而不是自由绘制。更重要的是，它会自动继承颜色、间距、圆角等设计令牌值。你设定好主色#2563EB、按钮高度40px、标准间距8px，AI生成的按钮就会严格遵循这些数值，不会出现“蓝色偏紫”或“按钮太高挤占列表空间”这类干扰功能使用的偏差。

如果发现AI仍然偏离预期，可以在提示词末尾追加一句硬约束：“必须使用团队库中的Button组件，禁用自定义样式。” 这一招，实测下来效果非常直接。

生成后立刻做功能校验，而非外观验收

话说回来，也别只顾着调整视觉。生成之后，先别急着看“好不好看”，一定要先验证“能不能用”。这里有几个快速校验点：

• 检查按钮是否自带交互热区（选中后右侧属性栏显示“交互”标签）
• 点击列表项，是否已预设hover态或选中态变体
• 输入框是否已绑定placeholder和focus状态
• 弹窗组件是否包含关闭X按钮及蒙层点击收起逻辑

不符合就立刻反馈，但别只说“按钮不对”。更好的方式是：“将‘登录’按钮改为提交表单动作，触发表单校验并显示错误提示。” 这样具体、结构化的指令，能让AI立刻明白你的意图，远比空泛的“这不对”有效得多。