Codex 指南：从图像到真实 UI 的 6 个步骤

大家好！

OpenAI 最近发布了其最先进的图像模型 gpt-image-2（以下简称 GI2），并立即以其在众多基准测试中令人难以置信的文本到图像和图像到图像性能震惊了世界。

让我直截了当地告诉你。这个模型确实是一个阶跃性的变化，自 Nano Banana 以来，这是第一次真正的显著能力飞跃。

看看我运行的一系列测试，我生成了“开发者的 VS Code 终端”图像，从图像中提取了代码，然后运行了它。

引用推文观看：我让 GPT-Image-2 渲染开发者的 VSCode 窗口截图。GPT-Image-2 是一个智能模型。它不仅仅是渲染图像，它实际上在思考。这个模型拥有丰富的世界知识。完美的文本。可工作的代码。太迷人了！htt... https://x.com/i/web/status/2046695738847993957

令人印象深刻，对吧？还有更多这样的测试。

不久之后，我开始着手制作最佳初学者友好的工作流程，用于使用 GI2 构建真实产品。我看到很多人谈论从图像创建 UI。你知道吗？他们是对的！你可以做到。

引用推文前端在 6 个提示中完成，使用 GPT 5.4 没错。前端是由那个据称不能做前端的模型制作的 🫣 但实际上你可以。而且随着 Spud 的出现，它会变得更容易。也许我应该写一篇文章？🤔 https://t.co/aPyDFGEd1h https://x.com/i/web/status/2047299952423084119

但他们不会告诉你的是，如果没有合适的策略，你在紧密复制图像时可能会在 4 次中失败 3 次。

这是我的经验，也是为什么我相信我看到许多评论者说这对他们不起作用。这篇文章是为你准备的！

这引出了我的下一个观点：这不是一个神奇的公式。你仍然需要好好提示，付出努力，并在开始对逐渐成形的结果感到满意之前进行调整。这没关系！

这个练习的目的是做两件事：

首先，这是利用 AI 的非确定性来集思广益，思考你希望空白画布看起来如何的好方法。视觉头脑风暴。

其次，减少变化性。

通过本指南，你应该能获得更一致的起点，而不会浪费太多时间或代币。那么，让我们开始吧。

图像转前端技能指南#

一如既往，我为你制作了一个技能。我建议你下载它，并让它成为你的专属技能！这是一个持续改进中的作品，当然还有提升空间。如果你有改进建议，我很乐意听取。

对于本指南，我特别希望尽可能降低复杂度，让初学者也能轻松上手，但我同样期待听到高级开发者的反馈。

第一步：创建你的起始提示词#

这一步无需过多介绍。只需调用 img-to-frontend 技能即可开始工作流。如果你心中已有设计构想、起始点、参考图片或想要模仿的网站，请尽可能在开始时提供这些细节。

这并不意味着你不能模糊处理。也许你并不确定想要什么样子，这完全没问题。但如果你有具体想法，提前给出方向肯定会引导模型朝着更理想的结果发展。

markdown

嘿 Codex！让我们一起构建一个前端。使用 $img-to-frontend 技能生成一些设计稿。

这家企业叫 Peak Path Fitness，是一家面向忙碌成年人的本地化私教与康复工作室，专注于力量、灵活性和长期健康，没有大型健身房的强度压力和 intimidating 氛围。

Peak Path Fitness 提供一对一私教、小团体力量课程、灵活性指导、辅助拉伸、康复训练、运动评估和定制健身计划。工作室面向初学者、回归运动的运动员、有久坐办公僵硬的职场人士，以及经医生许可后从轻伤中恢复的成年人。

品牌调性应体现专业、扎实且平易近人。它不是硬核健美健身房，也不是花哨的健身网红品牌。页面应传达个性化关注、可衡量的进步、注重伤病的指导，以及平静但鼓舞人心的工作室环境。

主要目标：
- 鼓励访客预约免费运动评估。
- 清晰说明主要服务。
- 展示工作室对不同健身水平的包容性。
- 通过教练资质、客户成果和清晰流程建立信任。

其他有用的细节包括：审美偏好、氛围、目标受众、网站类型（SaaS、市场、个人等）、配色方案、图标和元素的文件路径等。

第二步：头脑风暴与生成设计#

提交第一步的提示词后，该技能会立即根据你的提示生成四种变体，它们在风格上各有特色，可作为参考或起点。这需要一些时间。让它完成所有图片生成。

进入第三步前的重要提示

如果你想要超过四个，可以要求更多。
如果前四个都不合你意，修改提示词并要求另一组。
不要选择高度复杂、"杂乱"的UI，即包含大量难以生成元素的设计（见下方示例2：页面拥挤、杂乱，包含许多图表、图标和元素）。

当你对某个设计满意后，选择该设计，技能将继续推进。

第三步：图像转提示词#

我相信这是本指南与其他同类指南的不同之处。因为，正如我之前所说，这些工作流的问题在于一致性。

有些UI效果很好，有些则不然。为了解决这个问题，我要求模型为代理编写一个极其详细的提示词，使其能够根据你选择的模拟图像创建真实的UI。

这里的思路是，它将为实现模型提供一个强有力的起始提示词，以及一个视觉参考，从而更一致地生成更高质量的结果。

我们不只是说"好的，构建第二张图"，而是迫使模型真正思考构建这样一个UI需要哪些要素。

markdown

我喜欢 #3。我希望你仔细记录页面上的所有元素：
- 英雄区中从文字到图像的渐变融合。
- 容器的间距。字体。美学风格。
- 精心编写你的提示词，使我们能够精确复制这张图片。

当你选择图片时，技能应该会自动执行此操作，但无论如何，引导它一下也无妨。我强烈建议在整个工作流中使用 GPT-5.5。所有示例都在 Medium 上。

注意：如果模拟UI缺少页脚或你想要的元素，请在提示词中包含这些内容。要求它使用相同的美学风格来扩展页面。

第四步：构建#

创建详细提示词后，最好先阅读一下你即将投入大量 token 的内容。添加任何重要细节或提示词中未包含的额外元素。

在这个环节，我非常喜欢做的一件事是：将我们选择的原始模拟UI图片复制并粘贴回代理的提示词中，使其明确处于上下文中，然后提供以下提示词：

markdown

按照概述仔细构建前端。

在构建页面时，你应该定期参考原始图片，对照页面检查你的工作，确保页面与原始图片尽可能达到像素级匹配。

仔细检查间距、字体、图标、标志、布局和文本，确保小细节也准确无误。

执行重于速度。准确性重于效率。确保它也能在移动设备上正常工作。

持续循环工作，参考原始图片，修复任何差异，直到最终输出与原始图片直接匹配。

第五步：标注与调整#

如果你认为这些工作流中的任何一个能在第一次尝试时就生成与模拟UI完美匹配的副本，那我现在就要泼你一盆冷水：它不会。但它应该是一个相当不错的起点。

页面上无疑会出现尺寸不当的元素、不匹配的字体、生成不佳的SVG以及间距问题。这些都是容易修复的问题，借助 Codex 应用内浏览器，你可以一次性直接解决所有问题！

需要多少次后续提示才能得到你满意的结果，显然取决于UI本身，但根据我的经验，在几乎所有情况下，我都能在不到十次后续提示内达成目标。

只需点击 Codex 应用中完成的UI，浏览器应该会自动打开。如果没有，请点击"视图"下拉菜单中的"打开浏览器标签页"开始操作。

页面在浏览器中打开后，点击右上角的"标注"开始选择需要修改的元素。有两种选择方式：

直接高亮一个元素或容器，然后点击它。
拖拽鼠标选择任何你想选的区域。

点击/选择后，会弹出一个小文本框，你可以在其中列出想要进行的更改。提示：你也可以使用语音 ☺️。

在页面各处重复此操作，直到所有你想做的更改都涵盖完毕，然后再发送提示。你可以一次性在同一个提示中添加任意数量的更改，所以不要害羞。

完成后，一次性全部发送。现在，让我再次打击你一下：你可能需要重复这个过程几次。这没问题。每次你都会明显更接近目标。专注于编写清晰、无歧义的提示词，让你的代理工作更轻松，你很快就能达成目标。

第六步：持续迭代、改进和个性化#

至此，教程基本完成。我们只构建了半个着陆页，但现在你已经有了一个视觉风格，你可以用它来生成其他元素、子页面等的图片，或者模型也可以从仓库中的现有代码推断出这种样式。

最困难的部分已经完成，现在模型有了一个可以继续构建的工作基础。而且你拥有了成功构建页面其余部分所需的所有工具。

这个工作流的一个非常酷的地方是，你还可以使用 GI2 生成你可能想在网站上展示的任何图片。事实上，你在我的两个示例中看到的每一张图片和标志都是由 GI2 生成的。

所以，发挥创意吧。加入你的个性。甚至可以使用 GI2 生成的图片为你的网站制作一些视频。你想深入多少都可以。我推荐使用 Bytedance Seedream 2.0 进行图像转视频。

现在，走出去，为你赢得 OpenAI Dev Day 的门票。大胆去创造。

引用推文想要获得 OpenAI DevDay 的早鸟票？用 GPT-5.5 和图像生成功能做些东西。每周，我们会选出 2-3 个最喜欢的作品，赠送 OpenAI DevDay 2026 的免费门票。Codex 将帮助我们找到最佳投稿，我们的团队将选出获胜者。回复时带上 #OpenAIDe... https://x.com/i/web/status/2049535650626785334

如果你喜欢这样的内容，请考虑关注我。

我以传统方式（像人类一样）撰写了整篇文章。这费了不少功夫，所以如果你能点赞和分享，我将不胜感激！

本指南更侧重于作为起点，但你绝对可以使用 GPT-Image-2 生成更复杂、更令人印象深刻的网站。我希望本指南对初学者更友好。

我毫无疑问会推出本系列的第二部分，届时我们将深入探讨如何生成动画元素，让你的观众真正眼前一亮。

世界是你的。永远不要忘记这一点。✌️

-威廉