# AI Editor RSP Hero Optimization — Product Acceptance Contract

- task_id: t_80f846b0
- role: moce / Product Acceptance
- project: /root/projects/aieditorrsp
- production_url: https://aieditorrsp.net
- screenshot: /root/.hermes/image_cache/img_f1c401f16193.jpg
- generated_at: 2026-06-03T07:53:00Z
- verdict: PM_NO_GO

## Product verdict

PM_NO_GO.

当前首屏方向成立：用户能在 5 秒内理解这是「AI image editor with prompt templates」。但首屏产品任务没有收敛，右侧 editor console 把上传、提示词、模板、额度、生成、IDLE 结果、账户、登录、付费入口全部塞进同一屏，导致核心路径被噪音稀释。按 Owner 截图和生产实测，Generate CTA 在 1366x768 / 1440x900 / 1280x800 都落到首屏外；移动端 390px 下 Generate 位于约 1842px，明显不满足首屏核心任务。

## 5-second test

- What: pass。H1「AI Image Editor With Prompt Templates」和首段能说明产品类型。
- Who: conditional pass。portraits / product shots / social assets 有出现，但主力用户没有通过首屏示例强化。
- Why now: partial。prompt templates 的价值出现了，但被 studio-console 技术氛围和账户/付费信息冲淡。
- Next action: fail。用户看到 Start Editing / View Templates / Get Started / Sign In / Generate Edit / Login with Google / Pro Monthly / Pro Yearly / Credit Pack，动作过多。
- First task clarity: fail。正确任务应是「Upload image → choose template / edit prompt → Generate edit」，但 Account Credits 和 IDLE state 抢占了任务空间。

## Production checks run

1. Read input brief: /root/.hermes/reports/aieditorrsp-hero-optimization-20260603/input-brief.md
2. Visual acceptance from screenshot: /root/.hermes/image_cache/img_f1c401f16193.jpg
3. Production browser snapshot: https://aieditorrsp.net/
4. Production HTTP check: `curl -I -L --max-time 15 https://aieditorrsp.net/` returned HTTP/2 200.
5. SEO local audit: `npm run seo:audit` returned `ok: true`; `/` word_count 1285, no failures.
6. Source inspection:
   - `src/app/page.tsx`: keeps `makeSeoMetadata("/")`, `SeoJsonLd route="/"`, `SeoExpansion route="/"`.
   - `src/components/ProductPreviewEditor.tsx`: contains `2 free generations left today`, `CreditAccountPanel compact`, full `statePanel` in home hero.
   - `src/components/CreditAccountPanel.tsx`: contains `Use free previews, or sign in for checkout`, `Login with Google`, `Pro monthly`, `Pro yearly`, `Credit pack`.
   - `src/app/globals.css`: `.studio-hero--tool` uses `align-items:center` and `min-height:calc(100vh - 64px)`; hero console has no product-safe height cap.

## Viewport evidence

Browser/CDP production measurements after loading https://aieditorrsp.net/:

| Viewport | Hero height | Console height | Generate button | Account panel | Product result |
|---|---:|---:|---|---|---|
| 1366x768 | 1291px | 1151px | top 901 / bottom 949 | top 1128 / bottom 1276 | fail: Generate + account below fold |
| 1440x900 | 1291px | 1151px | top 901 / bottom 949 | top 1128 / bottom 1276 | fail: Generate partly/fully below desired first-screen path |
| 1280x800 | 1291px | 1151px | top 901 / bottom 949 | top 1128 / bottom 1276 | fail: Generate below fold |
| 390x844 | 2482px | 2120px | top 1842 / bottom 1890 | top 2179 / bottom 2492 | fail: core CTA far below fold |

No horizontal overflow was detected in these checks, but vertical task depth is unacceptable.

## Product blockers

### P0-1: First-screen task is overloaded

Current first screen shows too many concepts at once:

- upload source image
- prompt textarea
- token / HD mode metadata
- four template cards
- `2 free generations left today`
- Generate edit
- IDLE result state
- Account Credits
- Login with Google
- Pro Monthly / Pro Yearly / Credit Pack

Required product behavior:

- Home hero must only teach and enable one task: upload image → choose template / prompt → generate preview.
- Account, checkout, receipts, paid credits, and pricing plans must not appear inside the first-screen hero console.
- Result/state area should appear only after user action or as a compact inline status, not as a full idle panel.

### P0-2: Generate CTA is not first-screen reliable

Owner requirement says Generate must be visible at 1366x768, 1440x900, 1280x800. Production measurement shows it starts at y=901 on desktop viewports and y=1842 on 390px mobile.

Required product behavior:

- Desktop: Generate button visible without scroll at 1366x768, 1440x900, 1280x800.
- Mobile 390/430: Generate button should appear within the editor task flow before any account/pricing/status expansion; target top <= 1100px, preferably <= 900px after hero copy.
- If upload + prompt + templates cannot fit, collapse templates to selected chips or 2x2 compact chips and move descriptions below the fold.

### P0-3: Login / paid checkout language is premature in hero

Current copy implies checkout and paid plans are immediately relevant:

- `Use free previews, or sign in for checkout`
- `Login keeps credits, receipts, and Pro checkout attached to your account`
- `Pro monthly`, `Pro yearly`, `Credit pack`
- `Live billing` can appear in pricing context

Required product behavior:

- Hero may show only neutral account affordance in top nav: `Sign in`.
- Hero quota line must be source-backed or generic. Do not hard-code `2 free generations left today` unless `/api/credits` confirms that exact number client-side.
- No Pro/checkout plan links inside home hero before production provider + auth + Stripe + tax + credit accounting are fully verified by backend/compliance.
- Pricing remains available via `/pricing` and top nav; checkout prompts should appear only after quota exhaustion or on pricing page.

### P0-4: Visual hierarchy pushes copy down and overweights right console

Design pre-audit matches product findings: `.studio-hero--tool` combines `align-items:center`, `min-height:calc(100vh - 64px)`, and an over-tall right rail. Result: left copy is vertically dragged down while right console dominates the screen.

Required product behavior:

- Align left copy top with console top optically.
- Right console must have a product-defined first-screen max height, not a content-defined height.
- Use one compact editor card in hero; send full workbench/result/account modules below hero or to `/ai-photo-prompt-editor`.

## Product contract for frontend implementation

### Scope

Implement hero-only product simplification. Do not rewrite IA, SEO page matrix, pricing strategy, or backend flows unless required to remove misleading hero copy.

### Required hero structure

1. Left column:
   - Badge may stay.
   - H1 must keep `AI Image Editor` + `Prompt Templates` semantics.
   - First paragraph must keep: upload/source photo, reusable style prompt/templates, portraits/products/social assets, prompt control.
   - Primary CTA: `Start editing` → `#editor`.
   - Secondary CTA: `View templates` → `/prompt-library`.

2. Right hero editor:
   - Topline: keep lightweight system/status styling.
   - Upload source image control.
   - Prompt textarea.
   - Style prompt selector as compact chips/cards. Desktop can show 4 items only if Generate remains visible; mobile should collapse descriptions.
   - One primary Generate button.
   - One small neutral status line only, e.g. `Preview uses your available free credits.` / `Sign in from the header to save credits.`

3. Remove from home hero:
   - Full `statePanel` in idle state.
   - `CreditAccountPanel compact`.
   - `Login with Google` button inside hero.
   - `Pro monthly`, `Pro yearly`, `Credit pack` inside hero.
   - Hard-coded `2 free generations left today`.
   - Technical noise that does not help the first action: `HD_MODE`, `TOKENS`, excessive provider/internal wording. If kept, make it visually subordinate.

4. Result behavior:
   - Before user action: no large result card.
   - After upload/template/generate: show compact inline status or reveal result module below the fold.
   - Error states can remain accessible but should not reserve large first-screen space.

5. Account / credits / pricing placement:
   - Header: keep `Sign in` and `Get started`.
   - Pricing page: keep plan/checkout language there.
   - Editor page or post-quota state: show account/credits panel when relevant.
   - Hero: no paid checkout links.

### Layout acceptance criteria

- 1366x768: H1 top and console top optically aligned; Generate visible without scroll; no account/pricing panel visible in hero.
- 1440x900: whole hero task card should fit comfortably; no clipped console.
- 1280x800: Generate visible without scroll; template descriptions may be reduced/collapsed.
- 390/430 mobile: single column; no horizontal scroll; Generate appears before any result/account/pricing module; account/pricing must not回流首屏.
- Right hero card target max-height: fit under header with safe margin; practical target <= 620px desktop. If content exceeds, remove/collapse content rather than making card scroll internally.

### SEO guardrails

Must preserve:

- `makeSeoMetadata("/")`
- `<SeoJsonLd route="/" />`
- `<SeoExpansion route="/" />`
- H1 semantic coverage: `AI Image Editor` + `Prompt Templates`
- Intro semantic coverage: upload/source photo, reusable style prompt/templates, portraits/product/social assets, prompt control
- Existing canonical/OG/Twitter/sitemap behavior

SEO audit currently passes. Frontend changes must rerun `npm run seo:audit` and keep it green.

### Compliance guardrails

- Do not claim live checkout or live billing in hero.
- Do not imply unlimited generations.
- Do not hard-code a quota number unless read from `/api/credits`.
- Do not promise high-resolution export unless backend/provider supports it and compliance approves.
- Keep privacy/terms/refund/pricing language consistent.

## Acceptance JSON

```json
{
  "pm_verdict": "PM_NO_GO",
  "competitive_minimum_verdict": "partial",
  "verified_user_tasks": [
    "Understand product category from H1 and intro within 5 seconds",
    "Identify the intended edit flow: upload image, choose template/prompt, generate edit",
    "Locate Start Editing CTA",
    "Locate Generate Edit CTA in the editor flow",
    "Assess login/pricing/credits wording for first-screen suitability"
  ],
  "scope_gaps": [
    "Generate CTA is below fold at required desktop viewports",
    "Mobile editor flow pushes Generate to ~1842px",
    "Home hero includes idle result state before user action",
    "Home hero includes Account Credits and paid plan links",
    "Quota text is hard-coded as 2 free generations left today",
    "Right console height controls visual hierarchy instead of product task hierarchy"
  ],
  "blocker_count": 6,
  "next_gate": "mojie_frontend_implementation"
}
```

## Next inputs for downstream

- Frontend implementation should use this file as the product contract.
- Design refinement contract from input brief remains active and should be treated as visual acceptance input.
- SEO recheck must verify the listed SEO guardrails after implementation.
- Compliance recheck must verify quota/login/checkout wording after implementation.
- Product recheck should compare post-fix production at 1366x768, 1440x900, 1280x800, 390, and 430.

## Residual risk

- SEO audit is currently green, but exact hero copy/layout changes can accidentally remove H1/intro semantic coverage.
- Auth/Stripe/provider readiness was not independently verified in this Product Acceptance task; therefore hero must avoid live billing/checkout claims until backend/compliance gates confirm.
- This task did not change code by design; repository remains untouched by moce.