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。中间你站在那里，负责判断，负责取舍，负责说“这个不行，那个有点意思，这个方向继续”。这听起来不像传统意义上的开发，但可能，这就是新的创作。