Codex + GPT-5.5 实战：先用 GPT-image-2 画图，再用 GPT-5.5 按图实现

你是不是也踩过这种坑：

• 你把设计规范、颜色、字号、间距都写清楚了。
• 模型一上来就给你堆一大坨 UI。
• 结构混乱、交互诡异、文案像外星人。

最近更顺手的一套打法是：先画后写。

• 用 GPT-image-2 把 UI 先“定稿成图”。
• 再让 GPT-5.5 盯着这张图拆组件、写代码、补交互。

好处很直接：你不再跟模型辩论“审美”，你只让它做“施工队”。😎

说明：本文基于近期社区体验与 Codex 工具链的常见用法整理。不同账号、地区、套餐的上下文与价格可能有差异，以你后台显示为准。

你会用到的东西

• Codex（用来跑工程化开发流程：代码生成、改动、预览、局部修改）
• GPT-5.5（偏强：编程、Agent、文档处理、代码理解与落地）
• GPT-image-2（偏强：UI 视觉稿、布局、风格参考）

如果你之前的痛点是“延续现有网站风格很难”，这套流程会很救命。

一套能落地的工作流（照抄就能用）

1）把“你的网站风格”变成可投喂的素材包

别只丢一句“按我们的网站风格来”。模型听不懂。

你要准备一个 Style Pack，内容越具体越省心：

• 你的线上地址（可访问的话）
• 3～5 个典型页面截图（首页、列表、详情、表单、弹窗）
• 设计 token（颜色、圆角、阴影、字号、间距）
• 组件约定（按钮、输入框、卡片、表格、Toast）
• 文案口吻（偏“克制”、偏“活泼”、偏“B 端严肃”）

建议你直接在仓库里放一个：

/docs/style-pack/
  - tokens.json
  - components.md
  - copy-tone.md
  - screenshots/

这一步做完，后面每次加功能都能复用。

2）用 GPT-image-2 先把 UI 画出来（把审美争论掐死）

在 Codex 里让 GPT-image-2 出图时，别只说“画一个设置页”。

你要说清：信息结构 + 交互状态 + 风格约束。

可直接复制的出图提示词：

生成一张 B 端 Web 应用的“团队设置 / Team Settings”页面 UI 设计图，尺寸 1440x900。

风格：参考我提供的截图，整体克制、留白足、圆角 10、阴影轻、主色 #3B82F6。

布局：左侧侧边栏（含 6 个菜单项），右侧主区域为卡片式表单。

模块：团队名称、团队头像上传、默认时区下拉、成员管理表格（含邀请按钮）、危险操作区域（解散团队）。

状态：按钮 hover、表单校验错误提示、空成员列表 empty state。

出图的目的只有一个：让页面长什么样“有据可依”。

你不需要一次画到 100 分。

• 70 分就够了，能定布局、定层级、定风格。
• 细节交给后面实现时微调。

3）让 GPT-5.5 “按图施工”，别让它自由发挥

接下来把图丢给 GPT-5.5，要求它输出“可合并的改动”。

你要把任务拆成：

• 页面路由/入口
• 组件拆分
• 状态管理
• API 协议（没有就先 mock）
• 样式落地（严格贴合截图）

可直接复制的实现提示词：

你现在是前端开发。

目标：严格按我给的 UI 截图实现 Team Settings 页面。

技术栈：React + TypeScript + Tailwind（如果项目里不是这个栈，改成我项目实际栈）。

约束：

• 不要重设视觉风格，不要“你觉得更好看”。以截图为准。
• 输出为可直接提交的代码改动：新增/修改哪些文件、每个文件的内容。
• 把页面拆成组件：Sidebar、SettingsCard、MemberTable、InviteDialog、DangerZone。
• 文案用简体中文，口吻克制。
• 先给 mock 数据与 loading/empty/error 三种状态。

验收标准：页面结构、间距、按钮样式、空状态与错误提示位置都要贴合截图。

你会发现它更像“工程师”，而不是“设计师”。这就对了。

4）把“改一改”变成可控的局部迭代

很多人返工，是因为一句话改动太大。

你要学会用这种指令：只改局部，别动其他。

局部修改提示词模板：

只改 MemberTable：

• 表头固定
• 行 hover 增加浅底色
• 每行右侧增加“移除”按钮（危险样式）
• 不要改页面其他任何样式与结构

Codex 如果支持区域修改/预览，你就用它。

你会明显感觉到：改动变小了，合并更稳了。

5）让它写文档，省掉你一晚上

GPT-5.5 处理文档这块挺香的。

别让它写“漂亮废话”，让它写团队真要用的：

• 这个页面有哪些状态、怎么触发
• API 字段说明
• 组件职责
• 埋点/日志位置

文档提示词：

基于当前实现，生成 /docs/team-settings.md：

• 页面功能清单
• 交互与异常状态
• 组件分层与职责
• API 协议（字段表格）
• 后续可扩展点（不超过 6 条）

要求：短句、可执行、别写空话。

真实开发场景怎么用（给你三套常用脚本）

场景 A：给已有产品加一个新功能页

你要的不是“做一个新页面”。 你要的是“像原来就长在那儿”。

做法：

• 先用 GPT-image-2 按现有风格出图
• 再让 GPT-5.5 复刻布局与组件
• 用局部修改指令补细节

这套流程对“风格延续”特别友好。

场景 B：做 Agent / 自动化脚本

如果你要跑一段自动化：登录、点击、抓取、填写表单。

建议你把目标拆成 3 层：

• 策略：要达成什么（比如“把每个客户的欠费状态导出”）
• 步骤：每一步怎么操作
• 保护：遇到弹窗、验证码、加载慢怎么办

让模型输出：

• 可重试机制
• 超时策略
• 日志点

你会少掉很多“跑一半断了”的破事。

场景 C：处理一堆文档/合同/PRD

别让模型“阅读理解”。

让它产出明确结构：

• 风险点列表
• 待确认问题（给业务/法务提问）
• 变更影响范围
• 需要补的字段

一句话：你要的是决策材料，不是作文。

避坑清单（踩一个就要加班）

• 只给一句“按我网站风格来”：必翻车。准备 Style Pack。
• 让 GPT-5.5 从 0 做视觉：大概率一般般。把视觉交给 GPT-image-2。
• 一次改太多：用“只改某个组件/某个区域”的指令。
• 没有验收标准：把“像截图”写进验收条款，细到空状态、错误提示位置。
• 忽略成本：上下文越大、输出越长，账单越疼。能拆任务就拆任务。

模型怎么选：按钱包和场景来

你要是偏海外模型、也能接受订阅费：

• 创意内容（脚本、策划、文案脑暴）：Claude Code + Claude Opus 4.6 依然很能打
• 通用开发/数据分析/文档处理/工程落地：Codex + GPT-5.5 更省心

你要是偏国内模型：

• Claude Code + GLM-5.1
• 或 Claude Code + MiMo-V2.5-Pro

选型别纠结“谁是王”。你就问自己一句：我今天要交付什么？

你可以直接照着跑的“今日练习” ✅

• 用你现有产品的 3 张截图做一个 Style Pack
• 用 GPT-image-2 画一个“新功能页”的 UI 图
• 用 GPT-5.5 按图实现页面
• 用局部修改指令把一个组件磨到你满意
• 让它补一份 /docs/xxx.md 交付文档

做完这一套，你会明显感觉：模型不再是“灵感工具”，而是“能干活的同事”。