“GPT Image 2 可以直接出 PSD，还能把图变成 HTML”这句话只说对了一半。gpt-image-2 本身负责生成和编辑图片；PSD 与 HTML 通常是其他工具围绕这张图片继续完成的文件。 如果不先分清交付物，最后很容易得到一个后缀是 .psd、实际只有一层的文件，或者一份看起来像设计稿、却无法响应式布局的网页。
先按最终用途做选择：需要抠图、合成或多尺寸投放时，拿透明 PNG/WebP 和独立素材；需要设计师继续改文字、蒙版与效果时，在 Photoshop 中建立并保存分层 PSD；需要交给前端维护时，让 Codex 读取设计图和项目约束，编写 HTML/CSS/组件，再在浏览器里验证。
| 你真正要交付的结果 | GPT Image 2 可以直接提供什么 | 还需要谁完成 | 最关键的验收 |
|---|---|---|---|
| 一张成品图 | PNG、JPEG 或 WebP | 通常不需要额外工具 | 尺寸、透明度、文字与视觉内容 |
| 可编辑 PSD | 可作为底图或独立素材的位图 | Photoshop 或能写 PSD 的程序 | 图层是否有意义、文字能否改、蒙版能否继续用 |
| 可运行网页 | 视觉参考和图片素材 | Codex 等编码代理与浏览器 | 响应式、语义、交互、可访问性、资源加载 |
API 为什么不会直接返回 PSD 或 HTML
OpenAI 当前的 gpt-image-2 模型页面把它定义为图片生成与编辑模型。它可通过 Image API 的生成和编辑接口使用，也可以在支持图片生成工具的对话流程里工作。
真正决定文件能力的是输出合同。OpenAI 的图片生成文档只列出三种 Image API 输出格式：默认 PNG，以及可选的 JPEG、WebP。返回内容是 base64 编码的图片数据。文档没有 PSD 图层树、HTML 节点、CSS 规则或组件状态这样的返回字段。
这并不等于“用 GPT Image 2 做不出 PSD 或网页”。更准确的说法是：模型先提供像素或视觉理解，Photoshop、Codex 或脚本再创建目标文件。 当 ChatGPT 能调用 Photoshop，或 Codex 能读取图片并写项目文件时，用户看到的是一条代理工作流的最终结果，而不是图片模型突然多了一种原生文件格式。
透明背景也要单独看。OpenAI 目前把 gpt-image-2 的透明背景标为 preview，需要把 background 设为 transparent，并使用 PNG 或 WebP；JPEG 不支持透明背景。透明图很适合人物、产品、装饰和图标素材，但“背景透明”仍不等于“自动分成多个 Photoshop 图层”。
分层 PSD：关键不是能打开，而是能继续编辑
Adobe 对 PSD 格式的定义很明确：它用于保留 Photoshop 的图层、效果和其他编辑能力。因此，把一张 PNG 放进 Photoshop 再另存为 .psd，技术上会得到 PSD 文件，却不一定得到有价值的分层稿。
一个真正可交付的 PSD 至少要回答这些问题：
- 背景、主体、装饰、文字与调整是否分成了能理解的图层或组；
- 文字是否仍是可编辑文本，而不是已经烙进像素；
- 局部变化是否使用蒙版或独立调整层，而不是破坏性地改在底图上；
- 隐藏某个图层后，下面的内容是否完整，还是只留下模型猜出来的空洞；
- 关闭并重新打开文件后，图层、字体、颜色与混合效果是否仍然正常。
Adobe 的 Photoshop for ChatGPT 教程展示了另一条容易被简称为“ChatGPT 出 PSD”的路径：先在 ChatGPT 中连接 Photoshop，再把结果送到 Photoshop 网页版继续编辑。教程中的色相/饱和度调整以独立调整层和图层蒙版存在。这里产生可编辑能力的是 Photoshop，而不是 Image API 的 PNG 响应。
连接器功能会更新，账户和地区也可能不同。最稳妥的做法不是照抄某篇教程的按钮名称，而是在连接 Photoshop 后先问“当前可用的工具有哪些”，再决定是直接做非破坏性调整，还是把素材送到 Photoshop 网页版或桌面版继续处理。
让拆层更有用的请求方式
不要只说“转成 PSD”。把下游要改什么写清楚，工具才知道应该保留什么：
text请把这张活动海报整理成可继续编辑的 Photoshop 文档。 背景、人物、产品、装饰和文字分别组织；能保留为文本的内容不要栅格化； 局部调色使用调整层和蒙版。图层按用途命名并分组。 完成后重新打开文件，确认隐藏每个主要组时不会暴露缺失背景。
如果目标只是网页素材，反而不必追求复杂 PSD。Photoshop 可以通过 File > Export > Layers to Files 逐层导出文件。设计师也可以直接交付经过命名的 Logo、产品图、背景纹理和图标，再配上字体、色值与间距说明。这通常比让前端从一个混乱的 PSD 猜意图更省时间。
图片转 HTML 不是“把图片放进网页”
Codex 可以把截图或设计图作为图片输入。OpenAI 的 Codex 图片输入说明建议同时说明图片展示的内容、需要检查的区域、目标结果和约束。也就是说，图片只提供视觉上下文；布局规则、组件关系和交互要求仍要用文字补全。
一个最差但常见的“图转 HTML”结果是：
html<main> <img src="page.webp" alt="整个页面的设计截图" /> </main>
它在某个桌面宽度上看起来最像原图，却没有可选中的标题、真实按钮、表单状态、移动端重排或可维护组件。浏览器只看到一张图片。真正的实现应该重建信息关系，让文字成为文字、按钮成为按钮、列表成为列表，并只把照片、插画或纹理保留为图片素材。
给 Codex 的请求可以包含这些信息，但不需要替它预写每一行代码：
text这是一张产品落地页的视觉稿。请在当前项目中实现它，而不是把整张图嵌入页面。 沿用仓库现有组件和设计 token；正文、按钮和表单使用语义化 HTML。 桌面端与手机端都要可用，并补齐 hover、focus、loading、error 和 disabled 状态。 先识别需要单独导出的图片素材，再实现页面。完成后启动本地页面， 分别在 1440px、768px 和 390px 视口检查溢出、文字换行、键盘操作与控制台错误。
如果页面包含响应式图片，不能只靠 CSS 把同一张大图缩小。MDN 的响应式图片指南说明了 srcset、sizes 与 <picture> 的作用：让浏览器按视口和像素密度选择合适资源。视觉稿无法告诉浏览器这些规则，编码阶段必须补上。
两条工作流怎样衔接最稳
对于海报、电商主图和社交素材，先建立可编辑 PSD 更合理。让 GPT Image 2 生成底图或独立元素，在 Photoshop 中整理图层、文字与蒙版，最后从确认过的图层导出 WebP/PNG。此时 HTML 只负责正确展示素材，不需要把图片内部每个装饰都重写为 DOM。
对于产品页、后台界面和应用原型，应该反过来：先把视觉稿当方向参考，由编码代理在真实项目里创建组件；只有照片、插画、Logo 或无法用 CSS 表达的纹理才继续使用生成图片。需要修改图片局部时，可使用 Image API 的编辑接口；不过 OpenAI 说明蒙版只是提示性引导，不保证像 Photoshop 选区一样完全贴合，因此边缘、文字与品牌元素仍要人工查看。更具体的接口注意事项可继续参考本站的 OpenAI 图片编辑蒙版指南。
还有一种常见情况：设计师只需要“可交接”，而不是“每个像素都可编辑”。这时最好的交付可能是一个简洁 PSD，外加独立资源目录、字体与色值说明、响应式行为说明和可点击 HTML 原型。文件越复杂并不代表交付越专业；真正重要的是下一位协作者能否低成本修改。
收件时用这组测试快速判断
收到 PSD 后，不要只看缩略图。先复制一份文件，依次隐藏主要图层组，编辑一段文字，替换一个产品图，调整蒙版边缘，再关闭重开。若任何一步只能回到整张底图重做，这份文件的编辑价值就很有限。
收到 HTML 后，也不要只在作者的浏览器里看。至少执行这些检查：
- 关闭图片或让某个资源返回 404，确认页面结构和替代文本仍可理解；
- 用键盘走完主要按钮、链接和表单，焦点必须可见；
- 在窄屏、中等宽度和宽屏查看，没有水平滚动条或遮挡；
- 改一段真实文案长度，卡片和按钮不会立刻崩掉；
- 检查浏览器控制台和网络面板，没有资源路径、脚本或水合错误；
- 将实现截图与原稿并排比较，但把差异分成视觉偏差与功能错误，不为追一个像素破坏可维护性。
最终可以用一句话判断：要像素，找 GPT Image 2；要可编辑图层，让 Photoshop 参与；要能维护和运行的页面，让编码代理在真实代码库里实现并用浏览器验收。 只要交付物、负责工具和验收标准三者对得上，“PSD 分层”和“图转 HTML”就不再是模糊的营销词，而是可以稳定复用的生产方法。
