用 gpt-image-2 把设计图变成真实网页：六步工作流完整指南

用 gpt-image-2 把设计草图变成真正能跑的前端代码——一份稳定的六步工作流完整指南。

前言

OpenAI 最近发布了顶级图像模型 gpt-image-2，立刻引爆了整个行业。

它不仅能生成惊艳的图片，更厉害的是——你可以用它把一张设计草图变成真正能跑的前端代码。

很多人在讨论"用 AI 从图片生成 UI"这件事。他们说得没错，确实可以。但没告诉你的是：如果没有正确的策略，你大概率会失败三四次才能勉强复刻出差不多的东西。

这篇文章是一份完整的六步工作流，帮你稳定地把任何设计图变成真实的网页 UI。不是魔法公式，但能让你少走弯路、省下大量 token。

关于 img-to-frontend Skill

作者为这套工作流专门做了一个 Codex Skill，叫 img-to-frontend。它封装了从图片到前端代码的完整流程：生成四个设计变体 → 反向拆解提示词 → 构建 UI → 标注微调。

第一步：明确你的起点提示词

第一步很简单——调用 img-to-frontend skill 启动工作流，然后告诉 AI 你想要什么样的页面。

你已经有明确的想法？那就把细节尽可能写清楚：审美偏好、氛围感、目标受众、网站类型（SaaS、市场、个人主页等）、配色方案、图标文件路径等。

还没想好也没关系，可以模糊一些。但提前给的方向越明确，最终结果越接近预期。

如果 Mock 设计图缺少页脚或其他你想添加的元素，直接在提示词里补上。让它用同样的视觉风格扩展页面。

第二步：头脑风暴，生成四个设计方案

提交提示词后，系统会立即生成四个风格各异的设计变体，作为你的参考起点。

上图展示了 AI 生成的四个 Peak Path Fitness 健身网站概念方案。每个方案的标题、布局、配色、功能模块都不同。系统会问你："你想用哪个概念进入构建阶段？1、2、3 还是 4？"

几个重要建议：

• 想要更多变体？直接要求更多
• 四个都不满意？修改提示词再生成一组
• 不要选择过于复杂的"花哨"UI——元素太多、图表太密的设计很难精确复刻

选中一个你满意的设计，进入下一步。

第三步：把图片反向拆解成详细提示词

这一步是整个工作流的核心差异化所在。

问题是：一致性。 有些 UI 能做得很好，有些就差很多。怎么解决？

答案是：不要直接说"照着第二张图做"，而是让 AI 为这张图片写一份极其详细的实现提示词。

为什么要这样做？因为实现模型需要一个强有力的起点提示和一份视觉参考，才能稳定地产出高质量结果。让模型真正思考"要构建这样一个 UI 需要什么"，而不是简单地"复制这张图"。

上面左侧面板展示了 AI 生成的实现指令，翻译过来是：

实现要求：

• 在构图、间距、配色和整体外观上严格参考目标图片
• 构建一个真正可用的市场页面作为首页
• 不要营销式着陆页
• 不要假数据
• 不要模拟浏览器外壳
• 不要使用真实品牌 Logo
• 保持 UI 干净、高端、有编辑感、视觉沉稳

以及详细的构建指令：

确保在构建过程中不断对照参考图片，确保所有排版、间距、边距、内边距、图形、颜色和样式都是精确复刻。同时向下扩展页面，添加更多列表项和匹配风格的页脚。循环迭代直到完全匹配。

如果原始设计图缺少页脚或其他你想添加的元素，在提示词里补上。

强烈建议整个工作流使用 GPT-5.5。

第四步：开始构建

详细提示词生成后，先花一分钟读一遍你要花大量 token 去执行的内容。 补充任何遗漏的重要细节。

一个小技巧：把原始设计图的截图直接贴回给 Agent，让它在上下文中明确看到目标。

你可以这样提示：

参考这张图片，确保最终实现与它完全匹配。如果发现任何偏差，立即修正。

Codex 用 10 分 16 秒构建了完整的 Shoez 市场页面，生成了 index.html、styles.css 和参考图片。最终通过 Playwright 在桌面端和移动端都验证了没有布局溢出。

第五步：标注和微调

别指望一次就能完美复刻设计图。但应该能得到一个相当不错的起点。

页面上可能会有尺寸不对的元素、字体不匹配、SVG 生成质量差、间距问题。这些都是容易修的小问题。Codex 内置的浏览器标注工具可以一次性处理所有这些。

标注工具的使用方式：你可以在元素上直接输入修改指令，比如：

"将这些图标在容器中垂直居中"

点击 Codex 完成的 UI，浏览器会自动打开。点击右上角的 "Annotate" 开始选择需要修改的元素。有两种选择方式：

• 直接高亮选中一个元素或容器
• 拖拽鼠标框选任意区域

选中后会弹出一个文本框，列出你想做的修改。你也可以用语音输入。

把所有修改一次性提交。 根据 UI 复杂度，可能需要几轮修改，但每次都会明显更接近目标。根据经验，几乎每次都能在十次以内的后续提示词中达到满意效果。

第六步：持续迭代和个性化

到这里，教程基本结束了。虽然只构建了半个着陆页，但最难的部分已经完成——你有了一个可用的视觉风格和代码基础。

现在可以用同样的风格生成更多图片、子页面，模型会从现有代码中推断出风格。你有了所有需要的工具来完成剩下的页面。

一个特别酷的地方：gpt-image-2 可以生成你网站需要的所有图片素材。

上面展示了用 gpt-image-2 生成品牌 Logo 的提示词：

为一家叫 "Shoez" 的鞋店创建一个现代、专业的 Logo。包含一个简洁的运动鞋图标和醒目的 "Shoez" 文字标识。使用干净的黑、白、红配色方案，背景透明。

实际上，下面展示的所有图片和 Logo 都是由 gpt-image-2 生成的。

画廊：完整案例展示

案例一：Shoez 球鞋二手市场

原始设计草图：

经过 8 次提示词迭代后的最终效果：

AI 生成的品牌 Logo：

案例二：Peak Path Fitness 健身网站

最终着陆页效果（6 次提示词迭代）：

AI 生成的独立素材：

结语

这个工作流的核心价值在于两件事：

第一，利用 AI 的非确定性进行视觉头脑风暴。 你可能还没想好页面长什么样，让 AI 先给你四个方向。

第二，减少方差。 有了这套策略，你能更稳定地得到一个靠谱的起点，而不是浪费大量时间和 token 去试错。

gpt-image-2 的能力远不止于此。这份指南只是一个起点——你可以用它构建更复杂、更惊艳的网站。关键是：先把基础打好，再逐步叠加复杂度。

原文来源：@LLMJunky，作者：码间AI楠哥