怎么用 Codex 做 UI 设计。
Codex 不光能写 App 界面和网页的代码，也能把它们设计出来。诀窍是把它当成一位需要你交代需求的设计师，而不是一个按下去就出结果的按钮：给它背景信息，让它多出几个方案，再给它能照着改的反馈。
更新于 2026年11月5日 · 阅读约 8 分钟
Codex 在 UI 设计上能做什么
Codex 是 OpenAI 的编程 agent。它能在你的项目里读写文件、运行命令，所以在 UI 工作上，它可以：
- 用 HTML 和 CSS 写出界面。 想要一份逼真、可点击、任何浏览器都能打开的设计稿，一个自包含的 HTML 文件是最快的办法。
- 照着图片来做。 附上一张截图、一张草图，或者一张你喜欢的参考图，让 Codex 照着它的布局或氛围来做。
- 按你的要求修改。 只要 Codex 能看到自己写的文件，一句「把卡片做得柔和一点」或「把间距收紧一些」就够了。
- 把结果搬进你的代码库。 方向定下来以后，还是同一个 agent，就能用你的框架和组件把它重新实现一遍。
Codex 本身缺的，是一个能同时看到好几个设计的地方。每个 HTML 文件都要在单独的标签页里打开，对比设计方向就很慢。正是为了补上这个缺口，我们做了 Codex Design，一个 Codex 的画布插件。装不装它，都能照着这篇教程来做。
第 1 步：写一份设计需求说明
需求说得含糊，结果就会很平庸。一份好的需求说明要回答五个问题：产品是什么，谁在用，需要哪些界面，想要什么感觉，以及有哪些限制条件，比如屏幕尺寸、品牌色或字体。
设计一个咖啡订阅 App 的首页，App 名叫 Ember & Bean。用户是平时已经在家自己冲咖啡、希望每两周收到一袋新的单一产地咖啡豆的人。首页要展示下一次配送、两款为用户挑选的烘焙豆，以及一条简短的冲煮小贴士。 做成 390×844 的移动端界面，放在一个自包含的 HTML 文件里，CSS 写成内联。使用系统字体。不要用外部图片：咖啡袋用 CSS 画出来。
要求「只用一个自包含文件」很重要。这样每个界面都能单独拿走使用，改起来快，预览也方便。
第 2 步：要几个方向，而不是一个
第一版设计很少是最好的。让它做三个有意拉开差异的方向，这样你是在真正不同的方案之间做选择，而不是在同一个想法的几个变体里挑。
为这个界面做三个设计方向，每个方向单独一个文件： A — 温暖、杂志感，标题用衬线字体 B — 大胆、深色，只用一个明亮的强调色 C — 柔和、安静，圆角卡片，留白充足 内容保持完全一致，这样我们只比较视觉风格。
第 3 步：把设计并排放在一起看
评判之前，先把几个方向摆在一起。层级、密度和调性上的差别，并排放着一眼就能看出来，一个标签页一个标签页地翻就难多了。
- 不用插件： 在浏览器里逐个打开 HTML 文件，或者让 Codex 做一个对比页，把三个界面嵌在同一行里。
- 用 Codex Design： 让 Codex 把这些界面放到画布上。它们会以实时 HTML 的形式并排出现，你还可以在旁边放上参考图。想试试的话，一句提示词就能安装 Codex Design。
选定一个方向，或者说出你喜欢每个方向里的哪些部分：「B 的配送卡片，配上 C 更安静的配色」就是一份很好的下一轮需求。
第 4 步：用具体的反馈来打磨
点明某个元素、再说清怎么改的反馈，Codex 最容易接得住。对比下面两种说法：
- 弱：「让它好看一点。」
- 强：「把问候语加大到 32px，把卡片内边距减到 16px，让配送进度条成为第一眼看到的东西。」
优化方向 C： - 问候语放大，日期缩小。 - 配送进度放在烘焙豆推荐前面。 - 强调色只用一种绿色，而且只用在激活状态上。 - 其他部分保持不变。
「其他部分保持不变」几乎每次修改都值得加上。它能防止 agent 把你本来已经满意的部分也重新设计一遍。
第 5 步：手动微调细节
有些改动，动手比描述更快：调一下字号、试三种深浅不同的颜色，或者把内边距挪几个像素。你可以直接改 HTML；如果用 Codex Design，在画布上选中元素，就能在属性面板里改它的字体、颜色和间距。下次你让 Codex 改东西时，它看到的就是更新后的文件。
第 6 步：把设计变成生产代码
设计稿是规格说明，不是最终代码。方向一旦确定，就让 Codex 在你的 App 里把它重新实现出来：
在我们的 React Native App 里实现已经确定的首页。 使用我们现有的 Button 和 Card 组件，以及 theme.ts 里的颜色。 布局和间距按照 asset/coffee-home-soft.html 这份设计稿来。
让效果更好的几个技巧
- 给出真实尺寸。 手机用 390×844，桌面网页用 1440×900。不给尺寸，布局就容易跑偏。
- 用真实内容。 像样的名字、价格和日期，能暴露出「Lorem ipsum」掩盖掉的布局问题。
- 能给图就别只靠说。 一张参考截图传达风格，比一大段形容词快得多。
- 写明你的设计 token。 如果有品牌色、字体或间距体系，就写进需求说明里，让每个方向都用上。
- 一个文件只放一个界面。 这样每次修改都很小，检查起来也容易。
常见问题
Codex 真的能做 UI 设计，还是只会写代码？
两样都能。界面是由 HTML 和 CSS 构成的，而这些正是 Codex 写的，所以它能产出完整的视觉设计。质量取决于你的需求说明，以及你的反馈有多具体。
我还需要 Figma 吗？
如果只是探索和测试设计方向，不需要。很多团队仍然保留 Figma，用来维护共享的设计系统和做设计交接。HTML 设计稿有一个优势：它本身就已经是代码了。
用 Codex 做设计一定要装插件吗？
不需要。这篇教程里的所有步骤，用普通的 HTML 文件就能完成。Codex Design 这样的画布插件，能让你更快地对比和打磨多个界面。