MasterGo_AI_怎么实现_AI_自动生成原型空状态页面？

先抛个核心观点：MasterGo AI 用来生成空状态页面，真正的价值并不在于“一键生成一个完整页面”，而在于你能不能把自己的需求说清楚、讲明白。说白了，空状态本来逻辑结构就比较简单，但它的视觉表达和文案撰写却极度依赖场景上下文。AI很容易出现泛化，忽视你具体的使用背景。所以，关键不在于AI能做什么，而在于你是不是主动告诉AI——谁在什么情况下看到了什么界面，以及你希望他下一步做什么。

明确空状态的触发条件和用户身份

AI不会聪明到自动识别“这个地方需要空状态”。别指望它自己猜，你必须把条件写进提示词。

• 首先，标明具体模块，比如“订单列表页顶部搜索框下方”、“消息通知区域”、“收藏夹卡片区”。
• 其次，写清楚触发原因：“当用户未创建任何订单时”、“当搜索无结果时”、“当用户尚未关注任何话题时”。
• 最后，点出目标用户角色：“新注册用户”、“刚开通权限的管理员”、“首次访问的游客”。

描述内容结构与行为引导

空状态不只是一张装饰图，而是一组有功能意图的视觉组合。AI需要你帮它拆解出来：

• 主图标：比如“线性扁平风格的空购物车图标，蓝色主色 #4A90E2”。
• 标题文案：带语气和目的，比如“还没添加商品？”，别写干巴巴的“购物车为空”。
• 辅助说明：解释原因或降低预期，比如“你可以从首页浏览热门器械，加入购物车试试”。
• 主操作按钮：明确动词和目标，比如“去挑选健身器材”、“立即创建第一个订单”、“开始关注话题”。
• 可选次级动作：比如“查看帮助文档”、“联系客服”、“跳过引导”。

指定视觉规范与一致性要求

别把空状态单纯当作“装饰”去处理，它需要融入整体的设计语言。把这些细节告诉AI，能让风格不跳脱：

• 复用已有组件：比如“使用项目中统一的 Primary Button 样式”、“图标尺寸与 Tabbar 图标一致（24×24px）”。
• 继承色彩系统：比如“主按钮色使用品牌主色 #FA2549，文字用 #333，辅助文案用 #999”。
• 对齐现有间距：比如“图标与标题间距为 16px，标题与说明文字为 8px，整体区域上下留白 40px”。
• 适配响应式：比如“在移动端显示居中文案，在桌面端左侧对齐并增加右侧插图”。

用迭代指令补全细节（这是关键一步）

首版输出经常缺少情绪感或交互暗示。不需要重写整个提示，直接追加指令微调即可，省时又高效。

• “把图标换成更柔和的插画风格，带一点小幽默感”。
• “按钮增加悬停动效示意（在原型模式中可点击）”。
• “在说明文字后加一个‘常见问题’折叠面板，默认关闭”。
• “给整个空状态区域加一层浅灰色背景（#F9FAFB），圆角 12px”。

空状态这件事，本质上不复杂，但很容易被忽略：它的价值不在于“有没有”，而在于“是否让人愿意下一步行动”。MasterGo AI 能帮你快速搭出骨架，但真正让它生效的，是你对用户此刻心理和路径的判断——把这点写进提示词，AI 才能真正帮你落地。