UI 和原型怎么做
根据是否已有原型图，选择更合适的模型和 UI 实现流程。
AI 设计的 UI 难看，通常不是只改几个颜色和间距就能解决。先用对模型，再生成足够多的方向，最后把喜欢的方向整理成设计规范，后面的页面都按同一套规范实现。
AI 设计的 UI 很难看，怎么优化？
1. 先用对模型
如果重点是审美和视觉探索，可以先试 Sonnet 5.5 或你现有套餐中的视觉模型。先让它分析参考图，再比较实际方案，不必只为一个新型号升级订阅。
如果希望把生图、设计分析和前端实现放在同一条工作流里，可以用 GPT Image 2 + Codex / GPT-6.1 Sol：先生成效果图，再让 Codex 分析并实现，最后继续对照修改。GPT Image 2 官方能力说明。
2. 生成多组原型图，再挑一个方向
不要让 AI 只生成一张图就直接写代码。先描述用户、场景和页面目标，让模型生成多组不同的布局、信息层级和视觉方向，然后从中挑一个真正喜欢、也适合产品的方向。
3. 把选中的方向写成设计规范
选定原型后，让 AI 整理一份可以反复执行的设计规范，至少包括：
- 页面层级和信息优先级；
- 字体、字号、颜色和对比度；
- 间距、栅格、圆角、边框和阴影；
- 按钮、表单、卡片、导航等组件状态；
- 桌面端与手机端的响应式规则；
- 页面完成后的截图验收标准。
后面新增页面或修改 UI 时，都把这份规范一起交给 AI。这样不会每次都重新猜“什么才叫好看”。
已经有原型图或明确 UI 要求
直接把这些材料交给 GPT-6.1 Sol：
- 原型图、截图或竞品参考。
- 哪些信息最重要。
- 必须保留的交互和页面状态。
- 字体、颜色、间距和组件约束。
- 桌面端与手机端的验收截图尺寸。
让它先复述页面结构和视觉规则，再开始实现。不要只说“做得高级一点”。
局部调整按钮、间距和组件状态时，先用现有主力模型，提供前后截图和明确的修改范围。
从零开始，没有原型图
推荐流程：
- 先拆用户旅程和页面目标。
- 先画 wireframe（线框图），确定页面结构、信息层级和关键交互。
- 用 GPT Image 2 或现有工具中的图像生成模型，生成多组视觉方向；再让 Sonnet 5.5 或主力模型分析布局与审美。
- 选定一个方向，整理成设计规范。
- 再让 GPT-6.1 Sol、Codex 或其他编程 Agent 按规范实现。
- 实际打开页面，对照原型图和设计规范持续修改。
wireframe 是什么？
Wireframe 就是线框图：它只表达页面有哪些区域、内容怎么排列、用户下一步能做什么，不负责最终颜色、字体和装饰。可以把它理解成装修前的平面图，先确认房间和动线，再决定墙面颜色和家具风格。
线框图可以很简单：几个方框、标题、按钮和箭头就够了。它的作用是尽早发现页面结构和流程问题，避免在视觉已经做得很漂亮之后才发现信息层级不对。
不要把视觉探索和完整页面开发塞进同一个巨大 Prompt。先决定设计，再写代码。
Gemini Flash 能不能直接生图
读图和生图是两种能力。用 Gemini 或其他模型前，检查对应模型页是否支持图片输出；只支持图片输入的文本模型，可以分析参考图，但不能直接交付图片。
需要原型图时，选择产品里的图像生成入口，再把结果交给编程 Agent 实现。
可以直接复制的 UI Prompt
先分析我提供的原型图、截图和现有页面，不要立即修改。
请先告诉我：
1. 页面最重要的信息层级；
2. 当前视觉规则和组件规律；
3. 哪些地方与现有设计不一致；
4. 你准备怎样修改；
5. 桌面端和手机端分别怎样验收。
确认后再实现。完成后实际打开页面，对照原型图检查。用角色形象做一套可复用的配图
除了 UI，文章和文档的配图也可以让 AI 生成一套长期复用的视觉语言，让别人一看就知道是你的东西。
做法是：
- 找一个你喜欢的开源插画风格，比如 GitHub 上爆火的「小黑」。把仓库链接交给 AI，让它仿照这个黑白极简风格，生成你自己的版本。
- 调整到你满意。原始版本线条往往太细、冲击力不够，就让 AI 加粗、重画，再固化成 Skill。
- 用 Imagegen 生成角色形象。ChatGPT / Codex 内置的
gpt-image-2就能出效果，第一版常常就够用。 - 批量生成配图。风格定下来后，
@你的文档让 AI 按内容配图；量大时开多个 Agent 并行。 - 压缩并上传对象存储。配图要上网站，就先压缩成适合网页的格式，再上传到 R2 / S3，用网址引用，不要塞进仓库。
如果只是想先跑通，直接用公开的插画 Skill，或者参考 MakerJackie 的 Skills。原始分享见 我用 AI 把小黑做成 01MVP 插画风格。
继续看：AI 模型推荐与测评 · 20 个 AI 编程常见坑