---
name: ai-ui-prompts
description: AI 生图提示词模板
---

# AI 生图提示词模板

## 标准工作流

AI 生图不能直接替代前端规格。UI-facing feature 必须执行"早期方向图 + 最终规格图"两轮生图：

1. 完成 `docs/product/prd-lite.md` 初稿、`docs/product/page-inventory.md` 初稿和轻量 `docs/product/requirement-interface-matrix.md`，确保每条 P0/P1 需求至少映射到页面、区域、字段、操作和状态。
2. 完成 `docs/design/page-rules-draft.md`，写清页面类型、信息密度、基础视觉方向、关键组件、状态要求和禁止事项。
3. 使用 `docs/design/early-ai-image-brief.md` 生成第一轮方向图，图片保存到 `artifacts/ai-images/early/`。
4. 使用 `docs/design/early-ui-review.md` 评审方向图，并把结论反哺到 PRD、页面清单、状态矩阵和需求-界面追溯矩阵。
5. 完成 `docs/product/requirement-interface-matrix.md`、`docs/product/difficulty-research.md` 和测试追溯文档，确保每条 P0/P1 需求都映射到页面、状态、字段、操作、接口、验收、测试数据和证据。
6. 完成 `docs/design/design-brief.md`，写清 CSS / token 要求：颜色、字体、字号、间距、圆角、阴影、状态色、信息密度和响应式。
7. 使用 `docs/design/ai-image-brief.md` 生成或编辑第二轮多状态规格图。
8. 使用 `docs/design/ui-image-review.md` 评审图片。未通过时继续编辑图片，不进入代码。
9. 使用 `docs/design/image-to-frontend-spec.md` 把通过的图片转换为前端规格，再交给 Codex 实现代码。

## Prompt Enrichment Gate

生成图片前，提示词不能只包含页面名称和一句风格描述。每个页面 prompt 必须先合并以下输入：

- `docs/design/frontend-skill-intake.md`：前端 skills 约束和 `prompt_enrichment_matrix`。
- `docs/product/requirement-interface-matrix.md`：需求、页面、字段、操作、状态映射。
- `docs/design/page-rules-draft.md` 或 `docs/design/design-brief.md`：信息密度、组件、token 和禁止事项。
- `docs/product/page-inventory.md`：页面编号、平台、路径和优先级。

每个页面 prompt 至少包含这些段落：

1. 画布与设备：平台、尺寸、页面编号、页面类型。
2. 产品语境：目标用户、核心任务、页面在主流程中的位置。
3. 信息架构：一级/二级区域、视觉焦点、阅读顺序。
4. 组件清单：导航、卡片、表格、筛选、表单、弹窗、抽屉、底部栏。
5. 字段与数据：必须出现的字段、格式、状态标签、金额/库存/时间格式。
6. 交互与反馈：主按钮、次按钮、禁用态、确认态、成功/失败反馈。
7. 状态覆盖：正常、空、加载、错误、权限、业务异常。
8. 视觉原则：来自 `frontend-skill-intake.md` 的密度、层级、留白、颜色、字体、圆角、阴影。
9. 响应式约束：移动端安全区、桌面栅格、固定比例和不可重排区域。
10. 图标与视觉资产：图标风格、按钮图标、禁止自造低质符号。
11. 中文文案：必须照抄的短中文文案。
12. 禁止项：不得新增需求外功能、不得乱码、不得营销化后台、不得省略 P0 状态。

如果某个页面缺少字段、状态或组件约束，先回补 `frontend-skill-intake.md` 或需求矩阵，不直接生图。

## Codex Responses API 生图方式

当当前 Codex 配置使用自定义 `wire_api = "responses"` provider，而内置 `image_gen` 工具不可见时，优先使用当前 Codex provider 的 `/v1/responses` + `image_generation` 工具链路，不要直接调用官方 Images API。

已验证的约束：

- 认证优先读取 `C:\Users\<user>\.codex\auth.json` 中的 `OPENAI_API_KEY`，只在进程环境变量中使用，禁止打印或写入仓库。
- endpoint 使用当前 Codex provider 的 `base_url` 拼接 `/v1/responses`。
- 不要把 `gpt-image-2` 作为顶层 `model` 直接请求；在 ChatGPT OAuth/Codex 账号模式下可能返回 `The 'gpt-image-2' model is not supported when using Codex with a ChatGPT account.`。
- 顶层 `model` 使用当前 Codex 文本模型，例如 `gpt-5.5`；图片通过 `tools: [{ type: "image_generation" }]` 触发。
- `instructions` 必填。
- `input` 必须是消息数组，不是字符串。
- 成功响应中的图片在 `output[]` 里查找 `type == "image_generation_call"`，读取其 `result` 字段并按 base64 解码为 PNG。
- 响应里的 `status` 可能仍显示 `generating`，只要顶层响应 `status == "completed"` 且 `result` 有值，就可以落盘并进入人工/视觉评审。
- 第一轮方向图保存到 `artifacts/ai-images/early/`；测试图或临时验证图保存到 `output/imagegen/`，不要混入正式评审目录。

PowerShell 请求骨架：

```powershell
$configBaseUrl = "http://your-codex-provider"
$auth = Get-Content "$env:USERPROFILE\.codex\auth.json" -Raw | ConvertFrom-Json
$headers = @{
  Authorization = "Bearer $($auth.OPENAI_API_KEY)"
  "Content-Type" = "application/json"
}
$payload = [ordered]@{
  model = "gpt-5.5"
  instructions = "You are an image generation assistant. Use the image_generation tool when the user asks for an image."
  input = @(@{
    role = "user"
    content = @(@{
      type = "input_text"
      text = "<把 early-ai-image-brief 或单页生图提示词放在这里>"
    })
  })
  tools = @(@{
    type = "image_generation"
    size = "1024x1024"
    quality = "low"
  })
}
$res = Invoke-RestMethod `
  -Uri "$configBaseUrl/v1/responses" `
  -Method Post `
  -Headers $headers `
  -Body ($payload | ConvertTo-Json -Depth 12) `
  -TimeoutSec 360
$img = $res.output | Where-Object { $_.type -eq "image_generation_call" } | Select-Object -First 1
[IO.File]::WriteAllBytes("artifacts\ai-images\early\mobile-M-PAGE-001-home.png", [Convert]::FromBase64String($img.result))
```

## Responses 并发生成规则

早期方向图和第二轮规格图应按页面拆分为多个独立 prompt，并发生成，而不是把所有页面塞进一个超长 prompt。

并发生成要求：

- 先创建 `docs/design/ai-image-jobs.jsonl`，一行一个页面任务，字段包括 `id`、`platform`、`page_id`、`title`、`prompt`、`out`、`priority`。
- `prompt` 必须通过 Prompt Enrichment Gate，不能是页面名短句。
- 默认并发数为 3；图片服务稳定且无 429 时可提升到 5。
- 每个任务最多重试 2 次；失败要记录错误，不得用其它页面图片顶替。
- 输出文件必须使用稳定语义文件名，例如 `mobile-M-PAGE-003-product-detail.png`。
- 并发完成后生成 `artifacts/ai-images/early/manifest.md`，记录每张图的 prompt source、输出路径、响应 id、状态和评审结论。

PowerShell 7 并发骨架：

```powershell
$auth = Get-Content "$env:USERPROFILE\.codex\auth.json" -Raw | ConvertFrom-Json
$baseUrl = "http://your-codex-provider"
$headers = @{
  Authorization = "Bearer $($auth.OPENAI_API_KEY)"
  "Content-Type" = "application/json"
}
$jobs = Get-Content docs\design\ai-image-jobs.jsonl | ForEach-Object { $_ | ConvertFrom-Json }

$jobs | ForEach-Object -Parallel {
  $job = $_
  $headers = $using:headers
  $baseUrl = $using:baseUrl
  $payload = [ordered]@{
    model = "gpt-5.5"
    instructions = "You generate UI direction images. Use image_generation. Preserve the requested Chinese UI copy exactly."
    input = @(@{
      role = "user"
      content = @(@{ type = "input_text"; text = $job.prompt })
    })
    tools = @(@{ type = "image_generation"; size = "1024x1024"; quality = "medium" })
  }
  $res = Invoke-RestMethod -Uri "$baseUrl/v1/responses" -Method Post -Headers $headers -Body ($payload | ConvertTo-Json -Depth 12) -TimeoutSec 360
  $img = $res.output | Where-Object { $_.type -eq "image_generation_call" } | Select-Object -First 1
  if (-not $img.result) { throw "No image result for $($job.id)" }
  New-Item -ItemType Directory -Force -Path (Split-Path $job.out) | Out-Null
  [IO.File]::WriteAllBytes($job.out, [Convert]::FromBase64String($img.result))
  [PSCustomObject]@{ id = $job.id; out = $job.out; response_id = $res.id; status = $res.status }
} -ThrottleLimit 3
```

## 早期方向图提示词结构

```
生成"[产品/功能名称]"的第一轮 UI 方向图

目标：
- 用于在完整 PRD 和测试矩阵定稿前校准页面方向、信息架构和信息密度
- 发现需求、字段、状态、导航路径和后台运营视图的问题

输入真相源：
- `docs/product/prd-lite.md` 初稿
- `docs/product/page-inventory.md` 初稿
- 轻量 `docs/product/requirement-interface-matrix.md`
- `docs/design/page-rules-draft.md`
- `docs/design/frontend-skill-intake.md`

设备与页面：
- 移动端：[列出 P0 移动端页面]
- 桌面后台：[列出 P0 后台页面]

语言与文字质量：
- 默认使用简体中文生成所有可见 UI 文案
- 必须照抄关键中文文案清单，不要自由编造小字
- 不要出现乱码、伪中文、拼音占位、Lorem ipsum 或随机英文字母
- 小字号说明文字必须短句化，避免大段不可读文字

设计方向：
- 信息密度：[低/中/高，按产品场景说明]
- 视觉气质：[品牌/行业方向]
- 关键组件：[底部导航、商品卡、表格、筛选、详情抽屉等]

必须体现：
- 每条 P0/P1 需求对应的页面入口
- 正常态、空态、错误态、权限态或关键业务异常态的位置
- 主要字段、主要按钮、主要状态标签和关键操作反馈

禁止：
- 不要新增 Product Spec 没有的功能
- 不要把营销装饰放在运营后台主区域
- 不要省略 P0 页面
- 不要生成乱码、伪中文、随机字符或不可读关键文案
```

## 默认语言与文字质量

除非用户明确指定其他语言，AI 生图提示词必须默认要求**简体中文界面文案**。

写入 `docs/design/early-ai-image-brief.md` 和 `docs/design/ai-image-brief.md` 时必须包含以下约束：

- 所有可见 UI 文案、标题、按钮、标签、表格列名、状态、错误提示默认使用简体中文。
- 英文只允许用于必要品牌名、产品名、专有名词、技术缩写或真实 API/代码字段；业务界面文案不要中英混排。
- 禁止乱码、伪中文、无意义拉丁字母、拼音占位、Lorem ipsum、随机字符、错别字密集的小字。
- 对容易生成乱码的小字号长文本，改成短中文词组或结构化数据，不要求图像模型渲染大段正文。
- 提示词必须给出关键中文文案清单，让图像模型照抄，而不是自由编造。

`docs/design/early-ui-review.md` 和 `docs/design/ui-image-review.md` 必须检查文字质量：只要出现明显乱码、假字、伪中文、错误中英混排或不可读关键文案，图片不得进入下一阶段，必须重新编辑图片提示词并再生成。

## 基础提示词结构

```
生成"[页面名称]"的 UI 设计图

页面类型：[列表页/详情页/表单页/仪表盘/登录页]
设计风格：[Ant Design/Element Plus/Material Design]
设备类型：[桌面端/移动端]（宽度）
输入真相源：[PRD / requirement-interface-matrix / early-ui-review / design-brief / design-tokens / component-map / screen-states]

语言与文字质量：
- 默认使用简体中文生成所有可见 UI 文案
- 必须照抄关键中文文案清单，不要自由编造小字
- 不要出现乱码、伪中文、拼音占位、Lorem ipsum 或随机英文字母
- 小字号说明文字必须短句化，避免大段不可读文字

必须生成以下状态的设计图：
1. 正常态（有数据）
2. 空态（无数据）
3. 加载态
4. [其他需要的状态]

页面元素：
- 顶部区域：[描述]
- 内容区域：[描述]
- 底部区域：[描述]

边界场景：
- 文本超长：[处理方式]
- 数据超多：[处理方式]

CSS / Token 要求：
- 颜色：[来自 design-tokens]
- 字体/字号：[来自 design-brief]
- 间距/圆角/阴影：[来自 design-tokens]
- 表格/表单密度：[来自 design-brief]

交互说明：
- [关键交互]

禁止：
- 不要添加需求矩阵中没有的功能
- 不要省略 required state
- 不要使用与 Design Tokens 冲突的样式
- 不要生成乱码、伪中文、随机字符或不可读关键文案
```

## 图片编辑提示词结构

```
基于上一版 UI 图继续编辑，不改变已通过评审的信息架构和组件结构。

需要修复：
- [来自 ui-image-review.md 的失败项]
- 如有乱码/伪中文/不可读关键文案，逐项替换为明确中文短文案

保持不变：
- [已通过的布局、组件、颜色、状态]

补充状态：
- [需要补充的页面状态]

禁止：
- 不要新增 Product Spec 没有的功能
- 不要改变已通过评审的需求映射
- 不要保留任何乱码、伪中文、拼音占位或随机字符
```

## 列表页示例

```
生成"订单列表页"的 UI 设计图

页面类型：列表页
设计风格：Ant Design 5.x 风格，简洁专业
设备类型：桌面端（1440px宽度）

必须生成以下状态的设计图：
1. 正常态：显示10条订单数据
2. 空态：无订单时的引导界面
3. 加载态：骨架屏效果

页面元素：
- 顶部：面包屑、页面标题、"新建订单"按钮
- 筛选区：状态下拉、时间范围、搜索框
- 表格列：订单号、客户名、金额、状态、时间、操作
- 底部：分页器

边界场景：
- 订单号超长：最多20字符+省略号
- 客户名超长：最多10字+省略号

状态标签颜色：
- 草稿：灰色
- 待审核：橙色
- 已通过：绿色
- 已拒绝：红色
```

## 表单页示例

```
生成"新建订单"表单页的 UI 设计图

页面类型：表单页
设计风格：Ant Design 5.x 风格
设备类型：桌面端（1440px宽度）

必须生成以下状态的设计图：
1. 初始态：空表单，显示必填项标记
2. 校验错误态：显示字段错误提示
3. 提交中态：提交按钮显示loading

页面元素：
- 顶部：面包屑、页面标题
- 表单区域：基本信息卡片、订单信息卡片
- 底部操作栏：取消、保存草稿、提交

表单规则：
- 必填字段标记红色星号
- 错误提示显示在字段下方
```

## 移动端示例

```
生成"订单列表"移动端页面的 UI 设计图

页面类型：列表页
设计风格：iOS 风格
设备类型：移动端（375px宽度）

必须生成以下状态的设计图：
1. 正常态：订单卡片列表
2. 空态：无订单引导
3. 下拉刷新态
4. 上拉加载态

页面元素：
- 顶部导航栏：返回、标题、筛选图标
- 标签栏：全部/待付款/待发货/已完成
- 订单卡片：店铺名+状态、商品信息、金额、操作按钮

交互说明：
- 下拉刷新
- 上拉加载更多
- 左滑显示删除
```

