坦率的讲，这玩意真的会上瘾。

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

这种感觉太爽了，但很快就会遇到一个非常开发者的问题。

代码是跑了，功能是通了，但 UI 丑哭了。

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

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

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

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

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

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

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

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

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

它最打动我的地方，不只是能生成一个还行的页面，而是生成出来的东西天然就在 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，很多时候是文字到代码。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

你会以为我在 Codex 里点了授权就完事了，结果发现它还是读不了。

所以如果你也遇到 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。

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

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

现在我个人也能写出 App 的高审美UI了

如何跑通了个人开发者一个非常普遍的问题：代码是跑了，功能是通了，但 UI 丑哭了。

人工智能

前端

Codex与FigmaMake结合提升开发效率，通过AI生成UI原型再优化代码实现。从功能实现到视觉呈现，AI工具链让工程师突破专业边界，在现有页面基础上快速迭代出专业级UI设计。这套工作流特别适合个人开发者，通过截图生成4-5个主页面模板，在Figma中调整后由Codex实现代码转换，显著提升产品视觉品质。

ChatGPT

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

现在我个人也能写出 App 的高审美UI了

现在我个人也能写出 App 的高审美UI了

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐