让AI先搞清楚“这是在哪”

AI需要知道这个搜索栏具体用在哪、为谁服务。指令越具体，生成的细节越到位。比如：

• “电商APP首页顶部的搜索栏，带语音图标和热门关键词提示”——它明确了位置（顶部）、平台（APP）、附加功能（语音+热词）
• “后台管理系统左上角全局搜索，支持模糊匹配和历史记录下拉”——点明了系统属性（后台）和交互细节（模糊匹配、下拉历史）
• “新闻网站PC端导航栏右侧的搜索框，点击展开为宽幅输入区”——区分了设备（PC）、行为（点击展开）和视觉变化（宽幅）

只是模糊地说“加个搜索栏”，很容易生成一个孤立的组件，缺少图标、占位符、间距甚至响应式逻辑这些配套细节。只有把场景绑定了，AI才能自动补全这些要素。

用设计师的语言描述交互逻辑

MasterGo AI会解析自然语言中的结构关系。与其生硬地罗列技术参数，不如用设计师的口吻写一句自然的话，把下面这些要素嵌进去：

• 位置关系：比如“固定在顶部导航栏右侧”或“居中置于卡片标题下方”
• 组合元素：比如“左侧带放大镜图标，右侧有清空按钮，聚焦时边框高亮”
• 状态反馈：比如“输入时显示实时搜索建议列表”或“无结果时展示友好提示文案”
• 设计偏好：比如“圆角8px，主色#2563EB，暗色模式下背景为#1e293b”

这些描述不是技术参数的堆砌，而是设计师沟通时自然会用的句式。AI能更好地将它们映射到Figma或MasterGo的设计系统规则里，生成结果也更接近预期。

文字说不清时，草图是最好的补救

如果反复调整文字描述都达不到预期，最高效的办法是上传一张手绘草图或竞品截图：

• 用纸笔简单画个框线图，标出“这里放搜索”和“下面接结果列表”，AI就能识别区域层级
• 截取微信搜索页或淘宝首页的搜索框这类真实界面，加上提示词“按此风格复刻，适配我的旅游APP首页”
• 注意图片要清晰显示结构关系，避免纯文字截图或模糊照片

MasterGo的图像理解能力已经能支持从低保真草图还原成高保真的可编辑组件，比纯文字描述少很多歧义。

生成后，这两处微调几乎每次都要做

AI输出的搜索栏原型虽然大体可用，但通常有两处地方需要手动轻调：

• 文字层替换：双击占位文本（比如“搜索商品…”），直接改成自己的业务词（比如“搜目的地、酒店、攻略…”）
• 交互链路补全：选中搜索框，在右侧属性面板开启“交互”，添加“点击时跳转至搜索结果页”或“回车触发搜索动效”
• 响应式适配：在画布顶部切换到“移动端”预览，如果AI生成的搜索栏被压缩了，可以拖拽调整宽度或启用“自动换行”选项

这些操作都在MasterGo画布内完成，不需要切出工具，改完立刻就能看到效果。