怎么用 AI 生成 UI 设计稿。
AI agent 几分钟就能把一句话变成可以点开的 UI 设计稿。关键是按你要回答的问题选对精度：用线框图定布局，用高保真的 HTML 设计稿看真实效果，用效果图先试氛围。
更新于 2026年11月6日 · 阅读约 7 分钟
AI 设计稿的三种形式
| 形式 | 做成什么 | 最适合 | 局限 |
|---|---|---|---|
| 线框图 | 灰色的 HTML | 先把布局和内容定下来 | 看不出视觉风格 |
| 高保真设计稿 | 带样式的 HTML | 看真实效果，按真实尺寸检查 | 改起来比线框图慢 |
| 设计效果图 | AI 生成的图片 | 还没有布局时，先试几种氛围 | 不能点击、缩放或直接修改 |
和编程 agent 一起工作时，HTML 设计稿通常是更好的默认选择：任何浏览器都能打开，会随真实屏幕尺寸变化，而且离生产代码已经走了一半。图片更适合前期，还在想产品应该是什么感觉的时候。
第 1 步：把界面说清楚
先说明这个界面是做什么的、谁在用、上面必须有什么。内容越具体，布局就越具体。
我们需要一个[卖咖啡订阅的烘焙坊]的后台首页。使用者是[首席烘焙师，每天早上看一次]。页面上必须有：[活跃订阅数、本周发出的袋数、流失率、营收和目标的对比、最近 8 周的每周发货量、本周计划烘焙的豆子和状态]。桌面端，1440×900。
第 2 步：用线框图定布局
线框图只回答一个问题：这个布局能不能按正确的顺序放下这些内容？保持灰色，先别讨论颜色。
把这个后台首页做成低保真线框图，一个独立的 HTML 文件，1440×900：用虚线边框的灰色方块，每个方块里写清楚放什么，不要颜色，不要真实样式。最重要的信息放在最前面。
把方块挪来挪去，直到层级对了为止。这个阶段改动几乎没有成本。
第 3 步：做成高保真设计稿
布局定下来之后，保持不动，再加上视觉设计。告诉 agent 设计方向、真实数据，如果有品牌规范也一起给它。
把确认好的线框图做成高保真设计稿，放在一个新的 HTML 文件里。布局保持完全不变。风格：[温暖安静，米色背景，深棕色侧边栏，主要按钮和本周数据用一个铁锈红强调色]。用真实感的数据：名字、数字、日期和状态。图表用 HTML 和 CSS 画。
如果你有设计系统，用一个 DESIGN.md 文件就能让每张设计稿都符合品牌，不用在每条提示词里重复规则。
第 4 步：用效果图试氛围（可选）
确定风格之前，设计效果图是快速试几种方向的好办法。在 Codex 里，加上 $imagegen 就能调用生图 skill。
$imagegen 用三种不同风格生成这个后台首页的设计效果图：温暖的杂志风、深色的技术风、明亮友好的风格。桌面端屏幕，界面里的文字和数字要真实，不要设备外框。
选定一个方向，再把喜欢的那张图附在第 3 步的提示词里。把图片当参考：小字和精确间距还需要检查。
第 5 步：做几个版本并排比较
让 agent 针对同一个界面做两三个刻意不同的版本，然后放在一起看。在 Codex Design 画布上，每个版本都以实时 HTML 的形式排在其他版本和线框图旁边，哪里变了一眼就能看出来。
用同样的内容再做两个版本的设计稿：一个信息更密，给重度用户；一个数字更大、细节更少，适合早上快速看一眼。每个版本单独一个文件。
第 6 步：交出去
- 给相关的人看： 直接分享 HTML 文件或截图。HTML 文件在任何浏览器里都能打开，看到的是真实尺寸下的真实布局。
- 交给开发： 让 agent 用你的框架和组件，在 App 里重新实现确认好的设计稿。设计稿就是规格说明，和怎么用 Codex 做 UI 设计里讲的一样。
小技巧
- 一个界面一个文件。 文件小，改起来快，也方便比较。
- 先定布局，再定风格。 改线框图只要几秒，重新改三张设计稿的样式要久得多。
- 用真实尺寸和真实数据。 桌面端 1440×900，手机 390×844，数字要可信。
- 留意千篇一律的模板感。 要避开哪些，见怎么让 AI 做的设计不像 AI 做的。
常见问题
AI 能根据文字描述生成线框图吗？
能。把界面和要放的内容描述清楚，让它生成低保真的 HTML 线框图，就像第 2 步那样。Codex 会给你一个能打开、能修改、还能继续做成高保真设计稿的文件。
设计稿做成图片还是 HTML？
想快速试氛围就用图片；凡是要按真实尺寸评估、或者要落地成代码的，用 HTML。HTML 设计稿可以点击、缩放和修改，而且能直接变成代码。
还需要 Figma 吗？
探索和比较设计方向时不需要。把设计系统放在 Figma 里的团队，通常仍然用它做共享组件库和交付。