UI 和原型怎么做

AI 设计的 UI 难看，通常不是只改几个颜色和间距就能解决。先用对模型，再生成足够多的方向，最后把喜欢的方向整理成设计规范，后面的页面都按同一套规范实现。

AI 设计的 UI 很难看，怎么优化？

1. 先用对模型

如果重点是审美和视觉探索，可以优先试 Fable 5、Opus 5 这类视觉能力更强的模型。Anthropic 当前默认建议从 Opus 5 开始；Fable 5 仍是更高上限、也更贵的选择。Opus 4.8 还在，但已经是旧型号。

如果希望把生图、设计分析和前端实现放在同一条工作流里，可以用 GPT Image 2 + Codex / GPT-5.6：先生成效果图，再让 Codex 分析并实现，最后继续对照修改。

2. 生成多组原型图，再挑一个方向

不要让 AI 只生成一张图就直接写代码。先描述用户、场景和页面目标，让模型生成多组不同的布局、信息层级和视觉方向，然后从中挑一个真正喜欢、也适合产品的方向。

3. 把选中的方向写成设计规范

选定原型后，让 AI 整理一份可以反复执行的设计规范，至少包括：

• 页面层级和信息优先级；
• 字体、字号、颜色和对比度；
• 间距、栅格、圆角、边框和阴影；
• 按钮、表单、卡片、导航等组件状态；
• 桌面端与手机端的响应式规则；
• 页面完成后的截图验收标准。

后面新增页面或修改 UI 时，都把这份规范一起交给 AI。这样不会每次都重新猜“什么才叫好看”。

已经有原型图或明确 UI 要求

直接把这些材料交给 GPT-5.6：

• 原型图、截图或竞品参考。
• 哪些信息最重要。
• 必须保留的交互和页面状态。
• 字体、颜色、间距和组件约束。
• 桌面端与手机端的验收截图尺寸。

让它先复述页面结构和视觉规则，再开始实现。不要只说“做得高级一点”。

如果只是局部调整按钮、间距、颜色和组件状态，ChatGPT Pro 用户也可以优先试 GPT-5.3 Codex Spark；它更快，但不适合替代 GPT-5.6 处理复杂、开放式设计任务。

没有 Spark 权限时，GPT-5.6 配合低到中等推理强度就够了。

从零开始，没有原型图

推荐流程：

1. 先拆用户旅程和页面目标。
2. 先画 wireframe（线框图），确定页面结构、信息层级和关键交互。
3. 用 GPT Image 2、Gemini 3.1 Flash Image（Nano Banana 2）等图像模型生成多组视觉方向；讨论布局和审美时，再用 Fable 5 或 Opus 5。读图和改前端也可以用 Gemini 3.7 Flash，但它不直接出图。
4. 选定一个方向，整理成设计规范。
5. 再让 GPT-5.6、Codex 或其他编程 Agent 按规范实现。
6. 实际打开页面，对照原型图和设计规范持续修改。

wireframe 是什么？

Wireframe 就是线框图：它只表达页面有哪些区域、内容怎么排列、用户下一步能做什么，不负责最终颜色、字体和装饰。可以把它理解成装修前的平面图，先确认房间和动线，再决定墙面颜色和家具风格。

线框图可以很简单：几个方框、标题、按钮和箭头就够了。它的作用是尽早发现页面结构和流程问题，避免在视觉已经做得很漂亮之后才发现信息层级不对。

不要把视觉探索和完整页面开发塞进同一个巨大 Prompt。先决定设计，再写代码。

Gemini Flash 能不能直接生图

当前官方最新的 Flash 文本模型是 Gemini 3.7 Flash。它擅长读图、讨论 UI、生成交互式 Web UI 和前端代码，但官方标明不支持图片生成。更早的 3.6 / 3.5 Flash 同样是只出文字。

需要图片原型时，应使用 Gemini 3.1 Flash Image（Nano Banana 2）、Gemini 3 Pro Image，或 Gemini 产品里的图像生成入口。

ChatGPT / Codex 的内置图像生成使用 gpt-image-2。

可以直接复制的 UI Prompt

先分析我提供的原型图、截图和现有页面，不要立即修改。

请先告诉我：
1. 页面最重要的信息层级；
2. 当前视觉规则和组件规律；
3. 哪些地方与现有设计不一致；
4. 你准备怎样修改；
5. 桌面端和手机端分别怎样验收。

确认后再实现。完成后实际打开页面，对照原型图检查。

继续看：AI 模型推荐与测评 · 20 个 AI 编程常见坑