每个做前端的人都有过这种经历：页面结构写好了，组件搭好了，跑起来一看——空荡荡的缺一张图。
可能是 Empty State 缺个占位插图，可能是 Feature Card 缺个小 icon，也可能是 Demo 页面缺一组 mock 缩略图。以前遇到这种事，你得切到生图工具，重写一遍 prompt，下载图片，改文件名，拖进项目目录，再回代码里改 import。一次还好，做产品时反复来几次，整个开发节奏就被打断了。
Codex 现在可以把这一步直接塞回开发流程里。
从「帮我画张图」变成「把这个开发资产接入项目」
关键区别在于，不要把它当成「在 Codex 里顺手画张图」，而是「让 Codex 根据当前项目生成开发资产，并继续把它接入代码」。
前者只是生图，后者是把开发断点直接补上。
最实际的用法：在 Codex 里描述你要的视觉资产时，把保存路径、组件接入、代码修改一起交代清楚。prompt 当成开发任务写，不是当成生图请求写。
五个能直接进项目的实战例子
Empty State 插图
页面开发到一半，Projects 页面空着缺一张图。直接告诉 Codex：
请根据当前项目 UI 风格，生成一张 empty state 插图并接入当前页面。使用场景是 Projects 页面没有任何项目时展示。图片要求：4:3，浅色背景，简洁 SaaS UI 风格，画面包含空文件夹、待创建项目卡片、小加号按钮。不要可读文字和品牌 logo。保存为
/public/images/empty-projects.png，在 ProjectsEmptyState 组件里引用，保持当前 Tailwind 样式体系。
Codex 会生成图片、保存文件、修改组件引用——一次对话搞定。重点不是「画得好看」，而是让页面状态完整。
Feature Card 小插图
Landing page 的功能卡片需要一张小插图。尺寸明确（1:1，适合 320px 宽卡片顶部）、风格要求低视觉复杂度、用途明确——这种就是 Codex 最擅长的场景。
Mock Thumbnail / Demo Content
Video Projects 页面需要 6 张缩略图来填充 demo 内容。Codex 可以一次性生成风格统一的 16:9 缩略图，保存到指定目录，顺便更新 mockProjects 数据让每个项目引用对应图片。页面立刻从「空的」变成「接近真实」。
Sprite Sheet 游戏原型
做一个 2D dungeon game 原型，需要角色 sprite sheet。告诉 Codex 生成 pixel art、透明背景、4 组动作各 4 帧，然后让它根据 sprite sheet 尺寸更新动画配置，在 Player.ts 中接入 idle、walk、attack、hurt 四个动画状态。
游戏原型特别适合这种用法。Codex 不是帮你「画个角色」，而是生成 sprite sheet + 更新配置 + 接入逻辑，一条龙。
Status Illustration 状态图组
需要 6 个状态插图（processing、success、failed、no connection、locked、empty）用于任务执行结果页面。生成后封装成 StatusIllustration 组件，通过 status prop 自动选择对应图片——变成组件库资产，后面每个页面都能复用。
什么时候值得用，什么时候不值得
值得用的场景：越贴近代码越好。Empty State、Feature Card、Mock Thumbnail、Sprite Sheet、Status Illustration——这些都是「少量关键开发资产」，生成后能直接接入组件或配置文件。
不建议用的场景：批量营销素材（50 张广告图、反复试几十版封面）、品牌主视觉。这些消耗大、一致性要求高，不如走 API 或者专门的设计流程。
一句话：把它用在产品开发里的「少量关键资产」上，收益最大。你要的不是图库，而是让页面更快完整、让 demo 更快可跑、让组件更快能用。
上线前的四道检查
图片生成了不等于可以闭眼上线。作者建议至少检查四件事：
- 有没有错误文字
- 有没有真实品牌、商标、logo
- 多张图之间风格是否一致
- 是否符合产品的品牌和版权要求
一个人做产品的开发者，现在可以在 Codex 里直接补上这些开发断点了。不用切工具，不用等，不用丢失上下文——这就是它真正往前走的那一步。