# AI Editor RSP — Owner UX / Conversion Deep Product Review

- Date: 2026-06-04
- Reviewer: 墨策
- Production URL: https://aieditorrsp.net/ai-photo-prompt-editor
- Task: t_2bd28b27
- Verdict: PM_NO_GO

## 0. 结论

PM_NO_GO。

Owner 反馈成立。生产站比上一轮 Closeout Acceptance 有进步，但核心图片编辑器仍没有达到“用户看得懂、敢点击、能看到结果、知道如何升级”的产品门槛。

最关键的失败点：上传后仍没有真实源图预览，只显示文件名；生成失败/额度耗尽后没有强升级 CTA；右上角没有登录后用户信息/会员/credit 面板；结果预览与下载未能在生产环境验证通过。

## 1. 实测证据

实测方式：Playwright + production mobile viewport 390x844 + 真实文件上传 + Generate click + direct checkout route check。

证据目录：
`/root/.hermes/kanban/boards/site-review/workspaces/t_2bd28b27/evidence/`

截图：
- 初始编辑器：`01-editor-initial-mobile.png`
- 上传后：`02-editor-after-upload-mobile.png`
- 点击 Generate 后 loading：`03-editor-loading-mobile.png`
- 生成阻塞/额度耗尽状态：`08-generation-wait-final.png`
- Pricing 页：`05-pricing-mobile.png`
- Direct checkout monthly：`09-direct-checkout-monthly.png`

结构化证据：
- `product-review-evidence.json`
- `generation-wait-evidence.json`
- `checkout-direct-evidence.json`

关键 API 证据：
- `GET /api/credits` 200，返回 unauthenticated free plan / daily_limit=2 / checkout links。
- `POST /api/generate-image` 402，页面状态变为 `LOGIN_REQUIRED / Generation blocked`。
- `GET /api/checkout/stripe?plan=monthly` 302 → `/api/auth/login?...` → Google OAuth sign-in page。

## 2. Owner 反馈逐项复盘

| Owner issue | Production evidence | Product verdict |
|---|---|---|
| 上传图片后没有图片预览，只显示本地路径/文件名 | `02-editor-after-upload-mobile.png`：上传区显示 `source-test-image.png`；DOM `images: []`；状态区仍是占位插画，不是源图 | FAIL |
| Generate loading 体验弱；四种 style prompt 缺少缩略图/差异说明 | `03-editor-loading-mobile.png`：有 `PENDING / Starting generation`，但按钮未禁用，仍显示 `GENERATE PREVIEW EDIT`；style cards 有 material icon 和名字，但卡片内无缩略图、无使用场景、无差异说明 | PARTIAL_FAIL |
| 完成后只显示文字，看不到预览/下载/打开按钮 | 本轮未进入 successful generation；402 后只有 `Generation blocked` 文本，没有结果预览/下载/打开按钮。成功结果状态仍未被 production browser evidence 证明 | FAIL / UNVERIFIED |
| 右上角需要登录后个人信息、头像、用户名、会员状态、剩余 credit/权益，并作为升级入口 | Header/mobile nav 只有 Menu / Sign in；credit 信息在编辑器卡片中，不是登录后全局账户 surface；未见头像、用户名、会员、credits badge | FAIL |
| 付费引导转化未深测：free quota、credit exhausted、upgrade CTA、pricing/checkout path、post-generation upsell | Pricing 可见；direct checkout 会先走 Google OAuth；但 quota exhausted 状态只显示 `Sign in to continue or upgrade to Pro`，CTA 区仍是 `OPEN EDITOR / SIGN IN`，没有 `Upgrade to Pro` / `Buy credits`；post-generation upsell 无法验证 | PARTIAL_FAIL |

## 3. 产品门禁判断

当前不能继续按 PM_CONDITIONAL_GO 交给 Final Re-QA。

原因：上一轮验收主要覆盖 route、SEO、pricing 文案、upload-required feedback、mobile fold 等外层条件；owner 本轮反馈指向核心价值链路：

`上传源图 → 看见源图 → 选择风格 → 理解等待 → 看见生成图 → 下载/打开 → 额度耗尽时升级`

这条链路还没有完整成立。尤其是图片产品里“看不见图片”属于 P0，不是 polish。

## 4. Product Contract for Implementation

### 4.1 Upload preview contract

必须实现：
- 用户选择文件后，上传区立即显示源图缩略预览。
- 文件名只作为辅助 metadata，不作为主反馈。
- 预览区必须有：source image label、文件名、尺寸/类型（若可得）、Replace image、Remove image。
- 移动端首屏内必须能看到已上传图片的可识别缩略图。
- 对 WebP/JPG/PNG 均验证。

验收：
- Playwright `setInputFiles()` 后截图必须看到真实源图内容。
- DOM 必须出现 `<img>` 或 CSS background preview，不能只有 filename。
- Evidence screenshot: after-upload mobile + desktop。

### 4.2 Loading state contract

必须实现：
- 点击 Generate 后主按钮禁用，文本变为 `Generating...` 或 `Creating preview...`。
- 状态区显示 2–3 步进度：Uploading image / Applying style prompt / Preparing result。
- 给等待预期：`Usually takes 10–30 seconds`。
- 禁止重复点击导致多次请求。
- Loading 状态必须保留源图预览和当前 style 选择。

验收：
- Screenshot 中按钮 visibly disabled。
- DOM button `disabled=true` 或明确 aria-disabled。
- Network 只发出一次 `/api/generate-image`。

### 4.3 Style cards contract

必须实现：
- 四个 style card 不只显示名称；每张卡至少包含 icon + thumbnail/example swatch + 1 句用途说明。
- 卡片差异必须让用户知道何时选择：Editorial / Product Shot / Social Visual / Cyberpunk。
- 当前选中态要明显；移动端 2x2 可读。
- 点击卡片后 prompt 文案或 style metadata 变化要清晰。

建议文案：
- Editorial: polished portrait / creator headshot / soft studio light。
- Product Shot: clean commerce background / realistic shadow / preserve label。
- Social Visual: high contrast social crop / text-safe space / campaign mood。
- Cyberpunk: neon atmosphere / stylized scene / not for realistic identity use。

验收：
- Screenshot 能区分四张卡，不依赖 hover。
- Browser evidence 证明点击各 style 后 prompt/status 改变。

### 4.4 Generated image preview/download contract

必须实现：
- 成功后结果区直接展示 generated image preview。
- 同屏提供 `Download image`、`Open full size`、`Try another style`、`Edit prompt`。
- 结果区必须保留 source preview 或 before/after 对比，至少先做 source/result 两卡。
- Provider 返回 image URL/base64 时必须立即渲染图片，而不是只显示文字。
- 失败状态必须有 retry + upgrade/sign-in 的明确动作。

验收：
- Production browser evidence 必须跑出一次 successful generation。
- Screenshot 必须看到生成图、download/open controls。
- DOM 必须有 result image element and usable link/button。

### 4.5 Account / credits surface contract

必须实现：
- Header 右上角登录后展示 avatar、username/email short label、plan badge、remaining credits。
- 匿名状态展示 Sign in + remaining free quota mini badge，例如 `2 free edits left`。
- 点击 credit badge 打开 account/credits popover，包含 upgrade CTA。
- 移动端 menu 内也要展示 plan/credits，不只桌面 header。

验收：
- Anonymous screenshot: header/free quota entry visible。
- Logged-in screenshot: avatar/name/plan/credits visible。
- API evidence: `/api/credits` response reflected in UI。

### 4.6 Upgrade / checkout conversion path contract

必须实现：
- Free quota exhausted / 402 / LOGIN_REQUIRED 状态中直接出现 `Upgrade to Pro` 与 `Buy credit pack`，不要只给 `Open editor / Sign in`。
- Pricing CTA 已有 monthly / credit_pack；补 yearly 或明确本轮不卖 yearly。
- Checkout requires Google login 是合理的，但用户必须知道登录后会继续到 Stripe。
- Post-generation success 后显示轻量 upsell：`Need more edits? Upgrade to 200 credits/month`。
- Credit exhausted 状态必须展示剩余额度、消耗规则、失败不扣 credit。

验收：
- Anonymous quota exhausted screenshot: visible Upgrade/Buy Credits CTA。
- Direct checkout screenshot: `/api/checkout/stripe?plan=monthly` redirects to Google OAuth with return_to preserved。
- Logged-in checkout screenshot: reaches Stripe Checkout or documented blocked by missing test account.

## 5. Acceptance Criteria

修复后重新验收必须包含以下浏览器证据，不能只看代码：

1. Mobile 390x844：初始 editor screenshot。
2. Mobile 390x844：上传后真实源图预览 screenshot。
3. Desktop 1280x800：上传后真实源图预览 screenshot。
4. Mobile：四个 style card 逐个点击后的状态证据。
5. Mobile：Generate loading screenshot，按钮禁用且有等待说明。
6. Production successful generation screenshot：生成图可见。
7. Production result actions screenshot：Download / Open full size / Try another style 可见。
8. Free quota exhausted screenshot：Upgrade to Pro / Buy credit pack 可见。
9. Pricing screenshot：Free / Pro / Credit Pack / checkout CTA 可见。
10. Direct checkout evidence：monthly checkout route 302 到 login；登录后能继续 Stripe（若无测试账号则 block 标注）。
11. Logged-in header screenshot：avatar、username、plan、remaining credits 可见。
12. Network evidence：只发一次 generate request；失败不扣 credit；成功后扣 credit。

## 6. Recommended downstream tasks

需要拆四条修复线：

1. Design：重画 editor state system，覆盖 upload preview、style cards、loading/result/error/upgrade、account credit header。
2. Frontend：实现真实 preview、按钮禁用、result preview/download、quota exhausted upgrade CTA、header/account surface。
3. Backend：补 credits/session/account API 与 result image rendering contract，验证 failed provider calls 不扣 credits，成功扣 credits。
4. Pricing：修正 pricing contract；三档或说明例外；补 yearly/Business 口径；credit exhausted / post-generation upsell 文案。

## 7. Final verdict

PM_NO_GO。

只有当生产站用浏览器证据证明：上传后能看到源图、生成成功后能看到结果图并下载、额度耗尽时能直接升级、登录后能看到账户/credits surface，才可以重新进入 Product Acceptance / Final Re-QA。