中篇：Image2 生图很好看，为什么开发出来很丑？AI 视觉到小程序落地的方法

# 中篇：Image2 生图很好看，为什么开发出来很丑？AI 视觉到小程序落地的方法 ## 写在前面 很多虾友现在都在用 AI 生图做产品界面。 这件事非常有价值。以前我们做一个小程序，往往卡在审美上：设计稿不好看，组件太普通，页面像后台系统，产品气质出不来。现在有了 Image2、GPT Image 这类工具，我们可以很快生成高级感强、氛围感足、视觉统一的界面。 但我们这次做 AI 酒友小程序时，也踩到了一个很典型的坑： **Image2 生成的图很好看，但直接照着开发，小程序页面还是会变丑。** 甚至有时候会更尴尬：图是高级的，开发出来像是把几个按钮后贴在图片上，既不像真实小程序，也不像原来的设计图。 这篇中篇就讲这个问题：**AI 生图到底应该怎么参与小程序开发？** 我们的结论是： **Image2 不是用来直接生成最终页面的，而是用来定义视觉气质、背景资产和组件风格；真正可点击、可输入、可滚动、可变化的部分，必须用小程序真实组件实现。** ## 一、一开始为什么会失败 最初我们看到 Image2 生成的小程序画面，非常兴奋。 它的画面有氛围，有光影，有卡片层次，有高级的按钮，有整体的产品感。相比普通小程序默认组件，它明显更有商业展示价值。 于是我们自然会想：能不能就按照这张图开发？ 但真正做起来，问题马上出现。 第一，整张图不是标准小程序结构。 AI 生图经常会生成一个“手机截图感”的画面，里面可能带着手机顶部状态栏、小程序胶囊按钮、边框、刘海区域。如果我们把它直接当背景放进小程序，就会出现真实微信小程序外壳和图片里的假外壳叠在一起，很怪。 第二，图里的按钮不是可交互组件。 图里的按钮很好看，但它只是像素。如果我们在上面覆盖真实按钮，很容易出现： - 文字和原图文字重叠 - 点击区域对不准 - 按钮位置在不同机型上偏移 - 原图按钮和真实按钮风格不一致 - 用户看起来像在点一张海报 第三，图里的文字不可动态变化。 小程序里很多内容是动态的：次数会变、酒友会变、消息会增加、漂流瓶状态会变、申请交换状态会变。如果这些文字在图片里固定死，就无法承载真实产品。 第四，图里没有真实布局约束。 AI 生图可以画出很漂亮的卡片，但它不需要考虑： - 文案变长会不会溢出 - 按钮热区够不够 - 输入框如何唤起键盘 - 消息列表如何滚动 - 不同手机宽高如何适配 - 用户点击后状态如何变化 所以我们一开始的问题，不是 Image2 不行，而是我们误用了它。 ## 二、U 型思考：Image2 的本质价值是什么 遇到问题后，我们没有简单否定 Image2，而是往下想：它真正擅长什么？ Image2 最擅长的是： - 定义产品气质 - 建立视觉方向 - 生成背景氛围 - 提供色彩、光影、材质参考 - 生成头像、插画、局部视觉资产 - 帮团队快速统一审美 它不擅长的是： - 生成真实可用的交互结构 - 处理动态状态 - 保证按钮热区 - 适配所有机型 - 管理输入、滚动、跳转、数据流 也就是说，Image2 应该站在“视觉导演”的位置，而不是“前端工程师”的位置。 这句话很关键： **AI 生图负责让产品有气质，前端组件负责让产品能使用。** 当我们把这个关系摆正，开发策略就清楚了。 ## 三、我们最后采用的方法：背景图 + 真实组件 后来我们逐渐形成了一套更稳定的方法： **用 Image2 生成背景、氛围、头像、装饰资产；用真实小程序组件实现按钮、输入框、聊天、状态、导航。** 比如 AI 酒友小程序里，我们使用了： - 背景图：营造酒、夜晚、微醺、霓虹、情绪陪伴的氛围。 - 酒友头像：灵魂镜像、舒舒、李白、杜甫、恋酒匹配官等角色形象。 - 场景图：一个人喝、情侣、朋友局、云碰杯。 - 局部视觉：漂流瓶、记忆卡、社交氛围。 但所有核心交互都用真实组件： - 扫码按钮 - 场景选择卡片 - 酒友选择列表 - 聊天气泡 - 输入框 - 发送按钮 - 漂流瓶草稿 - 申请交换 - 我的入口 - 联系方式保险箱 这样做的好处是： 第一，页面仍然好看。 背景和头像带来了 Image2 的高级感，产品不会像普通模板小程序。 第二，交互是真实的。 按钮可以点击，输入框可以输入，聊天可以滚动，状态可以变化。 第三，后续可以接后台。 因为关键数据不是写死在图里，而是由组件绑定状态。 第四，不同机型更容易适配。 真实组件可以用 `rpx`、弹性布局、滚动区域、最大宽度约束去适配。 ## 四、一个关键经验：不要把整张图当页面 我们踩过一个坑：想把 Image2 生成的整张页面当作背景，然后在上面覆盖透明按钮。 这个方法看起来省事，但实际不适合做复杂小程序。 它只适合非常简单的活动页，比如： - 一个静态宣传页 - 一个单按钮落地页 - 一张海报式引导页 但它不适合 AI 酒友这种有聊天、有状态、有社交、有输入、有权益消耗的产品。 原因很简单：**真实产品不是一张图，而是一套会变化的状态系统。** 如果整张图都是背景，开发会被图片绑死。按钮位置、文字长度、列表高度、滚动区域都会变成问题。 所以我们后来更推荐： - 背景可以是一张完整氛围图。 - 卡片可以用 CSS 半透明毛玻璃实现。 - 按钮用真实组件做渐变和圆角。 - 图标和头像可以单独生成。 - 文案放在组件里，不放死在图片里。 这就是“图像定义气质，组件承载交互”。 ## 五、小程序界面落地时必须检查的细节 Image2 到小程序落地，最容易出问题的是细节。 这次我们遇到了很多具体问题，虾友可以直接拿去做检查清单。 ### 1. 页面尺寸 生图时要尽量按小程序常见比例生成，不要生成带手机外壳的截图。 建议提示词里明确： - 不要手机边框 - 不要状态栏 - 不要小程序胶囊按钮 - 只生成应用内容区域 - 竖屏移动端界面 - 留出顶部安全距离 否则真实小程序里会出现两个顶部。 ### 2. 背景和组件层级 背景图不应该遮住组件。 我们采用： - 背景图固定铺满 - 加一层暗色或渐变遮罩 - 内容层放在上面 - 卡片使用半透明毛玻璃 这样既能看到背景，又能保证文字可读。 ### 3. 边距 小程序页面很容易做得挤。 尤其是聊天页，如果左右边距过大，对话气泡会很窄；如果上下功能太多，Agent 的内容区域会被压缩。 我们最后把核心聊天页做了调整： - 页面边距从较宽收紧到更适合移动端的距离。 - 对话区高度加大。 - 顶部身份卡压缩。 - 能力按钮压缩成快捷工具。 - 发送后自动滚动到底部。 这让页面更像真正的对话，而不是一个功能面板。 ### 4. 按钮文案 按钮文字不要太长。 小程序按钮空间有限，如果按钮上塞很多字，会显得低级，也容易不居中。 建议： - 主按钮 2-4 个字 - 副文案放在按钮下方或卡片说明里 - 不要让按钮承担解释任务 比如“申请交换”可以， “申请交换微信并等待对方确认”就太长，应该把解释放在状态卡里。 ### 5. 滚动区域 聊天类产品一定要处理自动滚动。 如果用户发完消息，Agent 回复了，但用户还要手动往下滑，这种体验会非常差。用户会觉得 Agent 没有回应，或者产品卡住了。 我们后来给聊天列表加了 `scroll-into-view`，每次新增消息都自动滚到最新消息。 这是一个小技术点，但对陪伴感影响很大。 ### 6. 动态状态 页面不能只看静态截图。 每个页面都要问： - 初始状态是什么？ - 用户点击后状态怎么变？ - 次数不足怎么办？ - 申请已发出怎么办？ - 重复扫码怎么办？ - 记录已生成后再次进入怎么办？ Image2 生图不会替你回答这些问题，开发时必须补上。 ## 六、给虾友的一套标准流程 如果你正在做 AI 小程序，我建议按这个流程来： 第一步，先用文字定义产品气质。 比如： “这是一个深夜微醺、情绪陪伴、带一点社交可能性的 AI 酒友小程序。” 不要一上来就生成页面。先把气质说清楚。 第二步，用 Image2 生成视觉方向图。 可以生成 3-5 张不同风格，比较哪一种最贴近产品灵魂。 这一步不是为了直接开发，而是为了找到视觉语言。 第三步，拆解资产。 从方向图里拆出： - 背景 - 头像 - 场景图 - 卡片风格 - 按钮风格 - 色彩系统 第四步，设计真实页面结构。 用前端组件重新搭建： - 页面容器 - 顶部信息 - 内容区 - 状态区 - 输入区 - 底部操作 第五步，用 CSS 还原气质。 用渐变、透明度、毛玻璃、阴影、圆角、字体大小去靠近 Image2 的感觉。 第六步，跑真实交互。 不要只看截图，要亲自点： - 从扫码进入 - 选择场景 - 选择酒友 - 发送消息 - 投漂流瓶 - 申请交换 - 生成记忆卡 - 回到我的 只有跑完整路径，才知道产品是不是成立。 ## 七、中篇总结 Image2 对小程序开发非常有价值，但它不是万能钥匙。 它最大的价值不是“替你生成页面”，而是： **帮你建立一个原本很难快速获得的高级视觉方向。** 真正落地时，我们要记住： **图片负责气质，组件负责交互，状态负责产品成立。** 如果你把 Image2 当最终页面，很容易做成一张好看的假界面。 如果你把 Image2 当视觉导演，再用小程序组件去实现真实交互，就能做出既好看又能用的 AI 产品。 这是我们这次最重要的经验之一。