怎么用 ChatGPT 设计 UI。

ChatGPT 能把一个 UI 从粗糙的想法一路做成能用的界面，但每一步都有最适合它的地方。用 Chat 来构思，用生图探索视觉风格，再用 Codex 做出能打开、能对比、能上线的真实界面。

更新于 2026年11月5日 · 阅读约 7 分钟

简短回答

能，ChatGPT 可以设计 App 或网站的 UI。按你当前所处的步骤，选对应的模式：

步骤	ChatGPT 里最合适的地方	你能得到什么
梳理想法	Chat	一份设计需求说明、界面清单和用户流程
探索视觉	生图	几个视觉方向的设计稿图片
做出真实界面	Codex	能打开、测试和修改的 HTML 文件
对比和打磨	搭配画布的 Codex	多个界面并排，改得很快
上线	在你的代码库里用 Codex	用你的框架实现选定的设计

Chat 和 Work 适合思考和写文档。Codex 是专为软件工作打造的模式：它能读写你项目里的文件，而这正是把设计变成真东西的关键。在 ChatGPT 桌面应用里，在产品选择器中选 Codex 就行。

第 1 步：在 Chat 里梳理想法

先从对话开始，而不是直接做设计。让 ChatGPT 把一个粗糙的想法整理成需求说明：产品给谁用，需要哪些界面，每个界面必须展示什么。

提示词

我在设计一个帮人多读书的习惯打卡 App。帮我写一份一页纸的设计需求说明：目标用户、最重要的五个界面、每个界面展示什么，以及三种可选的视觉风格，每种用一句话描述。如果有不清楚的地方，先问我最多三个问题。

把这份需求说明留好。后面每一步你都要把它贴进去，这样每一步都从同样的背景出发。

第 2 步：用图片探索视觉风格

在写任何代码之前，设计稿图片是看风格的一种低成本方式。ChatGPT 的图像模型 gpt-image-2 很擅长生成文字清晰可读的界面图。在 Chat 里，直接让它出图就行。在 Codex 里，在提示词里加上 $imagegen，就能直接调用图片生成 skill。

提示词

$imagegen 根据这份需求说明，生成三张首页设计稿图片，每种视觉风格一张。iPhone 屏幕，390×844，界面要逼真，文字和数字要像真的一样，不要设备外框。三张图的内容保持完全一致，只改变风格。

把这些图当作情绪板，而不是规格说明。生成图里的小字和精确间距仍然需要检查。在 Codex 里，生图消耗使用额度的速度也是普通一轮对话的三到五倍，所以探索时生成几张就好，别一下生成几十张。

第 3 步：用 Codex 做出真实界面

图片展示的是界面可能的样子。HTML 文件则是一个你能点击、能调整大小、能逐行修改的界面。切换到 Codex，打开一个项目文件夹，让它把界面写成代码：

提示词

根据附件里的需求说明和我选中的那张设计稿图片，把首页做成一个自包含的 HTML 文件，390×844，CSS 内联，使用系统字体。然后在单独的文件里再做两个内容相同的备选方向：一个更大胆，一个更安静。

把你喜欢的那张设计稿图片附上，Codex 就能照着它的布局和氛围来做。每个界面一个自包含文件，每个版本都能单独拿走使用，也容易修改。

第 4 步：把几个方向并排对比

一个浏览器标签页一个标签页地看三个设计，太慢了。把它们放在一起：

不用插件： 让 Codex 做一个对比页，把三个界面排成一行。
用画布插件： Codex Design 给 Codex 加了一块画布，界面会以实时 HTML 的形式并排出现，旁边还能放你的参考图。一句提示词就能安装。

然后选定一个方向，或者把你喜欢的部分组合起来：「大胆版的头部，配上安静版的卡片」就是一条很好的下一步指令。

第 5 步：用具体的反馈来打磨

点明元素，说清怎么改。「让它更出彩」没给 agent 任何可以下手的地方。下面这样才行：

提示词

优化那个安静的方向：
- 让连续打卡计数成为第一眼看到的东西。
- 卡片内边距减到 16px，激活状态只用一个强调色。
- 其他部分保持不变。

对于动手比描述更快的改动，比如字号或某个颜色的深浅，可以直接改 HTML，或者在 Codex Design 画布上选中元素，在属性面板里调整。

第 6 步：把设计变成生产代码

方向确定后，让 Codex 用你的框架、组件和颜色，在真正的 App 里把它重新实现出来。HTML 设计稿就成了规格说明：

提示词

在我们的 SwiftUI App 里实现已经确定的首页。布局和间距参照 home-calm.html，使用 Theme.swift 里的颜色，并复用我们现有的卡片组件。

让效果更好的几个技巧

给出真实尺寸。 手机用 390×844，桌面网页用 1440×900。
用真实内容。 像样的名字、数字和日期，能暴露出占位文字掩盖掉的布局问题。
让它多出几个方案。 三个有意拉开差异的方向，胜过同一个方向的十个小变体。
加一个设计 skill。 Taste Skill 这类 skill 能让 Codex 在字体排印和布局上更有主见。参见最适合 UI 设计的 Codex skill。

常见问题

ChatGPT 能帮我设计一个 App 吗？

它能把界面设计出来，也能把界面做出来。Chat 帮你规划界面，生图展示它们可能的样子，Codex 把它们写成能运行的代码。拿主意的仍然是你：选哪个方向、改什么、什么时候算完成。

ChatGPT 有 UI 设计插件吗？

有。插件可以在 ChatGPT 桌面应用的 Chat、Work 和 Codex 里使用，也可以在 Codex CLI 里使用。Codex Design 就是一个 UI 设计插件，它给 Codex 加了一块可视化画布。OpenAI 的插件目录里也有一个 Figma 插件，适合在 Figma 里工作的团队。

做 UI 设计该用 ChatGPT 还是 Codex？

两个都是 ChatGPT。想点子、写需求说明用 Chat；想要真实的文件时就切到 Codex，得到能打开、能对比、能修改，还能搬进代码库的界面。