AI / Workflow
Codex UI 太醜時：先用 imagegen 產生視覺目標，再讓 Agent 實作
Peter Steinberger 在 X 提出一個極短但實用的 Codex UI prompt：「use imagegen to re-imagine this design and implement that」。重點不是讓 Codex 硬寫美化，而是把流程改成 Prompt → Visual mockup → Code implementation，先給 Agent 看得見的審美目標，再進入 React/前端實作。
2026年7月5日2 分鐘閱讀👁 6
來源與驗證：
- Threads：AI郵報整理 Codex + imagegen UI 工作流
- Peter Steinberger 在 X 的原始貼文："If you think codex sucks at design, try "use imagegen to re-imagine this design and implement that"."（已讀到原文與互動數）
- OpenClaw Docs：image_generate / image generation tool
- OpenClaw Docs：Codex harness
這篇 Threads 的核心是 Peter Steinberger 的一句短 prompt：
use imagegen to re-imagine this design and implement that我有追到 X 原文，確實是 Peter Steinberger（@steipete，OpenClaw）發的。原文語境是：「如果你覺得 Codex 做設計很爛，試試這句」。
真正有價值的不是 prompt 本身，而是流程轉向
一般叫 Codex / Claude Code / Cursor 美化 UI，常見結果是：
- 功能都在；
- React component 也寫得出來；
- 但視覺像工程師臨時湊出來的 dashboard；
- 排版、字級、卡片層次、留白、視覺重心都沒有明確方向。
Peter 這句 prompt 的重點，是把工作流從：
Prompt → Code → UI改成：
Prompt → Visual mockup → Code implementation也就是先讓 image model 生成「看得見的審美目標」，再讓 coding agent 依照畫面實作。
為什麼這招有效
| 問題 | 只用文字 prompt | 先產 mockup |
|---|---|---|
| 審美模糊 | 「現代、漂亮、SaaS 感」太抽象。 | Agent 直接看到構圖、留白、層次。 |
| 版面決策 | 模型容易套 Bootstrap-ish 卡片。 | 可先決定 hero、cards、charts、sidebar、CTA。 |
| 迭代成本 | 做完才發現醜，再重構。 | 先在視覺層挑方向，再寫 code。 |