---
title: "用截图当 UI 规格"
summary: "CLI 的 -i 可以在第一条提示里附上图片。设计稿、报错弹窗、产品草图都能直接当规格。"
category: prompt
level: starter
surfaces: [cli, app]
tags: ["图片", "UI", "-i"]
canonical: /tips/image-prototype/
---

# 用截图当 UI 规格

CLI 的 -i 可以在第一条提示里附上图片。设计稿、报错弹窗、产品草图都能直接当规格。

```bash
codex -i screenshot.png "按这张图做页面。约束：只用现有设计 token，不要引入新的 UI 库。"
codex --image before.png,after.png "对比这两张，只列回归，不要改行为。"
```

多图用逗号，或重复 `--image`。IDE 里按住 Shift 再把图片拖进合成器，否则编辑器会抢走 drop。

适合：

- 还原设计稿
- 复现视觉 bug（附上错误截图）
- 把白板照片变成任务拆解

仍然要写 Constraints 和 Done when。图片解决「长什么样」，写不出「怎样算完成」。

## 来源

- [OpenAI · Image inputs](https://learn.chatgpt.com/docs/image-inputs)
- [Codex CLI Cheat Sheet](https://www.agenticcodingweekly.com/p/codex-cli-cheat-sheet)