现在AI写UI，让我已不再硬凹审美了

事情是这样的。

最近我一直在用 Codex 搞 vibe coding。

你脑子里有一个工具 App 的想法，跟 Codex 一顿聊，功能拆出来，页面搭起来以前要卡半天的工程细节，现在可以一路推进下去。

但很快就会遇到一个非常工程师的问题。

代码是跑了，功能是通了。

但 UI 丑哭了。

不是那种稍微不精致的丑，是你自己看着都沉默的那种丑。

页面明明有了所有功能，但就是不像一个能给人用的产品。

这才是最折磨的地方。

写代码的时候，报错会告诉你哪里炸了。虽然难受，但至少它在讲道理。

UI 不一样。

你看着不舒服，但它不报错。

你知道它丑，但不知道怎么把它改对。

所以我最近开始认真琢磨一件事。

既然 Codex 已经能把工程开发往前推这么多，那 UI 这块能不能也别靠我自己硬凹了。

我之前试过一些生成 UI 的产品，比如 Stitch。

我个人感受很直接，Stitch 有时候像审美回到了 2000 年附近，我就不在泥坑里挣扎了。

Figma Make 不一样。

它最打动我的地方，不只是能生成一个还行的页面，而是生成出来的东西天然就在 Figma 生态里。

这点太重要了。

因为 UI 不是一张图，UI 是可以继续编辑、继续协作、继续沉淀的东西。

你如果只是拿到一张漂亮截图，当然爽一秒。但后面想改文案、调间距、整理组件，马上又回到痛苦里。

Figma Make 生成之后，可以继续进 Figma Design 改图层、调 spacing、换文案。

它更像是把一个会设计的 agent，请进了你的工作流。

我现在比较推荐的做法，是别上来就让它设计整个产品。

这件事很诱人，但也容易翻车。

产品越大，需求越混，agent 越容易在细节里飘。

更稳的方式是，先让 Figma Make 生成 4 到 5 个主要页面。

比如首页、列表页、详情页、编辑页、设置页。这一步不追求一步到位。

追求的是让产品从一坨能跑的代码，变成一个有视觉秩序的东西。

更关键的是，把当前已经开发出来的界面截图发给 Figma Make。

因为你不是让它凭空幻想一个产品。你是在告诉它，这里已经有一个真实页面，只是不好看，只是层级不清楚，只是细节比较糙。你帮我在现有功能基础上，把它整理成一个更像产品的 UI。

这就像把毛坯房交给设计师。不是说，来，给我造一个宇宙飞船。而是说，房子在这儿，格局大概这样，你帮我装得像样一点。

一下子就靠谱很多。

Figma Make 生成主页面之后，还会给出一些 UI 设计要求。

比如整体风格、颜色倾向、组件层级、页面一致性。

这些东西看起来像说明文档，但对后面的 Codex 开发非常有用。

因为 Codex 最怕的不是写不出代码，最怕的是你给它一个非常含糊的审美要求。

你跟它说，好看一点，高级一点，现代一点。

它当然会努力，但结果经常变成黑底渐变大卡片，配几个圆角按钮。

不是不能看，就是你看多了会觉得，怎么所有产品都长一个样。

但如果你把 Figma Make 生成的 UI 原型、设计要求、页面结构一起给到 Codex，它就有抓手了。

它知道按钮该是什么尺寸，间距大概是什么节奏，列表该怎么排。

这时候 Codex 就不是在凭感觉写 UI，它是在照着一个真实设计稿，把页面实现出来。

你想想看，这个变化其实很大。以前我们用 Codex 做 vibe coding，很多时候是文字到代码。

现在中间多了一层 Figma。

文字先变成可编辑的 UI 原型，再让 Codex 读取原型，把它还原到代码里。

这条链路一旦跑通，工程师做产品的手感会完全不一样。

不是因为你突然变成设计师了。

而是因为你终于不用在完全没有视觉参照的情况下，硬着头皮把 UI 写出来。

更骚的是，现在 Codex 里可以直接用 Figma 插件。

在对话框里 @figma，就能把 Figma 相关能力调出来。

你可以让 Figma Make 先把页面方向定下来。

然后让 Codex 读取这个原型文件。

再让它按设计稿去改你已有的页面。

它不是完美的。

说实话我也不觉得现在这套流程已经完全无脑。

你仍然要审稿，看它有没有把间距写歪，有没有在移动端搞出奇怪的溢出。

但这件事的门槛已经被明显磨平了。

以前你是从 0 到 1 硬画 UI。

现在你更像是在一个还不错的初稿上做导演。

这个差别，对个人开发者太重要了。

当然，这里面有个小坑，顺带说一下。

在 Codex 里授权 Figma 的时候，需要去 ChatGPT 里做账号关联设置。

如果这一步没做，Codex 可能会一直显示无法读取 Figma 文件。

我当时却是也给我整不会了。

所以如果你也遇到 Codex 读不到 Figma 文件，不要第一时间怀疑提示词。先去 ChatGPT 账号设置里检查 Figma 关联，这块真的能省很多无意义的折腾。

回到这条工作流本身。

我现在越来越觉得，AI 编程真正有意思的地方，不只是写代码变快。

更大的变化是，原来那些卡在专业分工边界上的东西，开始能被普通人摸到了。

以前你是工程师，你就主要在工程世界里活动。现在你要做 UI，就会撞到设计世界的墙。

虽然墙还在，但墙上突然多了一把梯子，Figma Make 是一把梯子，Codex 也是一把梯子。

它们不能替你决定你要去哪里，但它们能让你先爬上去看看。

如果你最近也在用 Codex 做自己的小产品，我真的建议你试一下这条链路。

不要搞宏大项目。

就拿你现在那个最丑的页面开刀。

截图给 Figma Make，生成 4 到 5 个主页面，在 Figma Design 里手动修明显问题，再让 Codex 通过 @figma 读取原型改代码。

这个过程一开始可能会有点笨拙，甚至可能比你手写 CSS 更慢。

但它会把你从纯工程师的惯性里拽出来。

你会开始关心页面统一性，关心按钮状态，关心空页面是不是尴尬，关心移动端有没有炸。

这些以前你也知道重要，但总是拖到收尾才处理。

现在它们会更早进入你的工作流，这就够了。

我不知道这套流程对每个人是不是都好用，我也还在摸索。

但我越来越相信，未来最厉害的个人创作者，不一定是单项能力最强的人，而是最会把 agent、工具、平台、审美判断和自己的真实需求串起来的人。

写代码的时候，请 Codex 上场，做 UI 初稿的时候，请 Figma Make 上场，需要把原型落回代码的时候，再让 Codex 去读 Figma。

中间你站在那里，负责判断，负责取舍，负责说这个不行，那个有点意思，这个方向继续。

这听起来不像传统意义上的开发，但我觉得，这可能就是新的创作。

既然已经看到了这里，正好也对 AI 感兴趣，不如点一个关注🌟哇，有料的AI一手了解，如果觉得内容还不错，也欢迎点赞👍、转发🫴和推荐❤️～