# AI Editor RSP — SEO-led Design Handoff

状态：DESIGN_GO
日期：2026-06-05
Task：t_b64611d5
Tenant：aieditorrsp-seo-led-product-reposition-20260605

## 0. 结论

本轮设计合同可以交给前端落地。

核心定位：AI Editor RSP 不是通用 AI 图片编辑 SaaS，而是 India-first 的 RSP-style AI photo editing prompt library + upload-to-edit entry point。

第一屏硬改已落实：H1 → short answer → editor/generator module 上下堆叠；没有左/右标题描述拆分；没有泛 CTA 按钮组；首屏显著动作只保留在 editor/generator 模块内。

## 1. 开发应看的文件

### Stitch 元信息
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/stitch/screen-index.json`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/stitch/run.log`

### 内容适配矩阵
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/content-fit-matrix.md`

### HTML 视觉真源
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/html/home-desktop.html`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/html/home-mobile.html`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/html/prompt-library-desktop.html`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/html/prompt-library-mobile.html`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/html/effect-detail-desktop.html`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/html/effect-detail-mobile.html`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/html/editor-states-desktop.html`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/html/editor-states-mobile.html`

### 截图
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/screens/home-desktop.png`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/screens/home-mobile.png`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/screens/prompt-library-desktop.png`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/screens/prompt-library-mobile.png`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/screens/effect-detail-desktop.png`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/screens/effect-detail-mobile.png`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/screens/editor-states-desktop.png`
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/screens/editor-states-mobile.png`

### Prompt 源文件
- `/root/.hermes/reports/aieditorrsp-seo-led-product-reposition-20260605/design/prompts/*.txt`

## 2. Stitch Project / Screen ID

Project ID：`10932082186856590947`

| Screen | Route | Device | Screen ID |
|---|---|---|---|
| home-desktop | `/` | DESKTOP | `8087335e045e4690b3d9d86e01bfd45b` |
| home-mobile | `/` | MOBILE | `585a0d42bc8842aaa924c21f407113e3` |
| prompt-library-desktop | `/prompt-library` | DESKTOP | `1d8835a6f83f43b3a3b6f4aa2230a67f` |
| prompt-library-mobile | `/prompt-library` | MOBILE | `59cc78e1e4614ee9a4ac88bba2c43c0d` |
| effect-detail-desktop | `/prompts/rsp-editing-ai-boy-cinematic` | DESKTOP | `9764062dc64e4db88ba5d72176f49dd4` |
| effect-detail-mobile | `/prompts/rsp-editing-ai-boy-cinematic` | MOBILE | `d81013caf0664ef6897a7eca3f0a79da` |
| editor-states-desktop | `/ai-photo-prompt-editor?effect=rsp-editing-ai-boy-cinematic` | DESKTOP | `7f38249eb79e4190a24cd9276b6759b2` |
| editor-states-mobile | `/ai-photo-prompt-editor?effect=rsp-editing-ai-boy-cinematic` | MOBILE | `38ad9aaae9954944bcae7b32c4bfea6b` |

Provenance：official `@google/stitch-sdk`，`fallback_status: none`。第一次 editor desktop 生成返回空 htmlUrl，已按官方 SDK 路径改写 prompt 重跑，最终 8 个 screen 均有 HTML + PNG。

## 3. 竞品视觉判断

| 竞品 | 观察 | 本站反向选择 |
|---|---|---|
| rspediting.com | 内容博客/帖子流，偏 WordPress 资源站，价值是趋势标题和 prompt retrieval，不是高级编辑器 | 不做博客墙；首页先给 editor/task entry + cards |
| PromptPlum | prompt library 更成熟，类别多，强 copy/paste，卡片以 prompt 内容和图片为核心 | 保留 library 强检索，但加 India/RSP/social-search 语言和 provider honesty |
| 通用 AI image editor | 常见做法是工业 console、pricing/auth/credits 过早、抽象工具话术 | 降低商业层，Copy Prompt 独立可用，provider 状态先于 Generate |

## 4. 设计方向

方向：Industrial social prompt marketplace。

关键词：dark cinematic、India social-search、prompt cards、before/after proof、honest provider state、mobile-first。

不是：紫蓝 SaaS、工业后台 console、AI 3D 球、抽象 protocol 解释页、定价驱动页。

## 5. Design Tokens

| Token | Value |
|---|---|
| Background | `#08090D` |
| Surface | `#11131A` |
| Panel | `#171B24` |
| Text Primary | `#F7F2E8` |
| Text Secondary | `#A99F90` |
| Accent Primary | `#FFB000` |
| Accent Secondary | `#20D0B5` |
| Warning/Error | `#FF5C7A` |
| Font Display | Space Grotesk |
| Font Body | DM Sans |
| Border | thin warm dark / low-contrast saffron focus |
| Radius | mixed: sharp outer frames + small rounded chips/buttons |

## 6. Homepage IA

1. Navigation：logo + Library / RSP Prompts / Editor / Pricing；header primary 只保留 `Open editor`。
2. Hero task entry：
   - H1：`AI Editor RSP Editing Prompts`
   - Short answer：PRD freeze 原文
   - Editor/generator module：effect selector、prompt textarea、upload dropzone、provider status、before/after mini strip、module 内主动作。
3. Featured effects：9 个 home_featured cards，展示 before/after、provider tags、prompt excerpt、Copy Prompt、Open in Editor。
4. RSP trend hub：boy / girl / couple / bike / cinematic / double exposure / festival。
5. Provider examples：Gemini / ChatGPT / Nano Banana / Bing，仅做 compatible/caveat，不做官方 badge。
6. How it works：find effect → copy prompt → apply/open editor → provider state clear。
7. Trust/safety：own photos、identity preservation、no official affiliation。
8. Pricing/credits：低优先级，位于价值之后。
9. FAQ。

## 7. Component contract

### 7.1 Effect card

Required fields:
- before image/sample preview
- after image/sample preview
- title in user search language
- category/subcategory
- provider tags
- prompt excerpt
- best_for
- avoid_if
- variables summary
- safety note
- `Copy Prompt`
- `Open in Editor`

Interaction:
- Copy Prompt works without login/upload/credits/payment/provider。
- Open in Editor deeplink uses `editor_deeplink_params.url`。
- Card actions remain visible on mobile; 44px tap targets。

### 7.2 Library controls

Desktop:
- search field
- sticky left filter rail
- category chips：Boy, Girl, Couple, Festival, Bike, Cinematic, Double Exposure, IPL, Holi, Personal, Ecommerce, Utility
- provider chips：Gemini, ChatGPT, Nano Banana, Bing, Generic AI editor
- sort：Trending / New / Festival / Most copied / Provider / Easy copy

Mobile:
- sticky search
- horizontal filter chips
- collapsed bottom-sheet filters
- card action row fixed within each card, not hidden behind hover

### 7.3 Effect detail template

Required order:
1. H1 + 40-70 word short answer
2. before/after dominant visual pair
3. prompt panel with Copy Prompt + Open in Editor + provider tags
4. editable variables
5. negative constraints
6. Best for / Avoid if
7. provider compatibility notes
8. step block
9. related prompts
10. FAQ
11. updated date + unofficial disclaimer

### 7.4 Editor state contract

States covered by Stitch screens:
- empty
- uploaded
- provider unavailable / disabled
- preview mode
- live generation
- loading
- result
- quota exhausted
- error

Rules:
- Provider state appears before generation expectation。
- `generation_mode=disabled` button label must be `Preview upload flow` or `Join waitlist`，not `Generate now`。
- `Copy Prompt` remains available in all states。
- Failed provider calls show `Provider unavailable. No credits were charged.`
- Desktop should use large workspace / 2-row structure, not cramped 3-column console。
- Mobile must stack upload → prompt → provider → result → sticky action; bottom buttons must not be clipped。

## 8. Copy / legal boundaries

Allowed:
- `Copy this prompt and use it in Gemini, ChatGPT, Nano Banana, or your preferred AI image editor.`
- `Upload-to-edit generation is in preview. Copy Prompt remains available.`
- `Provider unavailable. No credits were charged.`
- `Unofficial RSP-style prompt library.`

Forbidden:
- `Official RSP editor`
- `Official Gemini/ChatGPT integration`
- `Guaranteed same result`
- `Unlimited edits`
- `Generate now` when provider is disabled/preview-only
- official/endorsed wording for Google/OpenAI/Gemini/ChatGPT/Instagram/Nano Banana/Bing/CapCut/Lightroom/RSP Editing

## 9. Frontend implementation notes

- Treat Stitch HTML as visual truth for spacing, color, hierarchy, material treatment, and component density。
- Do not reintroduce left/right hero title-description split。
- Do not add separate `Browse library` / `Start free` generic hero CTA group above the editor module。
- Use the effect catalog JSON as data source; do not hardcode only 6 cards。
- Provider state should come from config/endpoint matching PRD runtime contract。
- If provider is disabled, editor still offers upload preview + Copy Prompt + waitlist/external use; it must not sell or promise live generation。
- Pricing/checkout links must obey `paid_enabled` and `checkout_enabled`。
- SEO matrix routes may reuse library/detail templates, but noindex pages with fewer than 3 real cards or missing unique visuals。

## 10. Design Acceptance

Verdict：DESIGN_GO

Checked:
- Stitch provenance present：official SDK + projectId/screenId/htmlUrl/imageUrl。
- 8 HTML files exist and are non-empty。
- 8 PNG screenshots exist and are valid PNG。
- Homepage desktop screenshot visually confirms stacked H1/description above editor module and no separate generic hero CTA group。
- Mobile editor screenshot visually confirms provider state honesty, Copy Prompt availability, stacked flow, and no clipped bottom buttons。
- Purple SaaS / emoji / official affiliation framing avoided in prompts and handoff。

Known limitation:
- This handoff generated core product paths and reusable templates, not a unique Stitch screen for every long-tail SEO route in the 30+ route matrix. Frontend should instantiate long-tail/category/provider pages from the same design system and effect catalog, then SEO/QA should verify unique copy/assets/index policy route by route.

## 11. Downstream acceptance checklist

Frontend cannot mark GO unless:
- `/` first screen keeps vertical H1 → short answer → editor/generator module。
- Home cards, library cards, and detail pages all expose Copy Prompt and Open in Editor。
- `/prompt-library` search/filter/sort works on desktop and mobile。
- `/prompts/[slug]` detail template includes before/after, prompt, variables, best_for, avoid_if, provider notes, FAQ, related links。
- `/ai-photo-prompt-editor` preserves selected effect slug/prompt after open/upload。
- Provider disabled/preview/live states are visually distinct and honest。
- Copy Prompt works without auth, payment, upload, credits, or provider availability。
- Mobile 390px path can complete: find effect → view before/after → copy prompt → open editor → see provider state。