# AI Editor RSP — Design Handoff

状态：DESIGN_GO_WITH_STITCH
日期：2026-05-28
Project slug: aieditorrsp
Primary keyword: AI image editor with prompt
Fixed domain: aieditorrsp.net
Stitch project: 7329555727489747022

## 1. 开发应看的文件

视觉真源：
- `design/stitch/screen-index.json`
- `design/html/home-desktop.html`
- `design/html/home-mobile.html`
- `design/html/ai-photo-prompt-editor-desktop.html`
- `design/html/ai-photo-prompt-editor-mobile.html`
- `design/html/chatgpt-photo-editing-prompts-desktop.html`
- `design/html/chatgpt-photo-editing-prompts-mobile.html`
- `design/html/ai-photo-editing-prompts-desktop.html`
- `design/html/ai-photo-editing-prompts-mobile.html`
- `design/html/prompt-library-desktop.html`
- `design/html/prompt-library-mobile.html`
- `design/html/tool-states-desktop.html`
- `design/html/tool-states-mobile.html`

截图：
- `design/screens/*.png` — 12 official Stitch screenshots, matching the HTML files above.

设计-文案契约：
- `design/content-fit-matrix.md`

品牌资产：
- `design/assets/icon.svg`
- `design/assets/wordmark.svg`
- `design/assets/stacked.svg`
- `design/assets/horizontal.svg`
- `design/assets/logo-system.json`
- `design/assets/favicon.ico`
- `design/assets/favicon-16.png`
- `design/assets/favicon-32.png`
- `design/assets/apple-touch-icon.png`
- `design/assets/favicon-512.png`
- `design/assets/og-image.png`

## 2. Stitch Project / Screen ID

| Screen | Route | Device | Screen ID | HTML |
|---|---|---|---|---|
| home-desktop | `/` | DESKTOP | f4e4e8dcae834e50a18337945f19f1bb | `design/html/home-desktop.html` |
| home-mobile | `/` | MOBILE | b2d78d4bf69e493f866f6dec14e9ce72 | `design/html/home-mobile.html` |
| ai-photo-prompt-editor-desktop | `/ai-photo-prompt-editor` | DESKTOP | 2d8b74673203469bb5d5a8f23ecfb2b9 | `design/html/ai-photo-prompt-editor-desktop.html` |
| ai-photo-prompt-editor-mobile | `/ai-photo-prompt-editor` | MOBILE | 7fb9c356faad4d7780f5723aa9d17bc4 | `design/html/ai-photo-prompt-editor-mobile.html` |
| chatgpt-photo-editing-prompts-desktop | `/chatgpt-photo-editing-prompts` | DESKTOP | 16851139c839473d95b3cefbc78b84ed | `design/html/chatgpt-photo-editing-prompts-desktop.html` |
| chatgpt-photo-editing-prompts-mobile | `/chatgpt-photo-editing-prompts` | MOBILE | 65b29b4140d7470c95e504ddead579a6 | `design/html/chatgpt-photo-editing-prompts-mobile.html` |
| ai-photo-editing-prompts-desktop | `/ai-photo-editing-prompts` | DESKTOP | 1daaf29a41cf4779ac200beeb965895c | `design/html/ai-photo-editing-prompts-desktop.html` |
| ai-photo-editing-prompts-mobile | `/ai-photo-editing-prompts` | MOBILE | 5c5b548effce443ca16a6a4af7e69a23 | `design/html/ai-photo-editing-prompts-mobile.html` |
| prompt-library-desktop | `/prompt-library` | DESKTOP | 451490e27a214ce3aa8a4d680c23d7ce | `design/html/prompt-library-desktop.html` |
| prompt-library-mobile | `/prompt-library` | MOBILE | 1e6dfdc6020847228a886455499e4749 | `design/html/prompt-library-mobile.html` |
| tool-states-desktop | `/#tool-states` | DESKTOP | 239b2cd490db43d5975f32582a758381 | `design/html/tool-states-desktop.html` |
| tool-states-mobile | `/#tool-states` | MOBILE | 37cc7d0c39f64c0fa1635043599f4c5c | `design/html/tool-states-mobile.html` |

`screen-index.json` records `source: official-stitch-sdk` and `fallback_status: none`.

## 3. 设计方向

Industrial creator studio — dark graphite editor console, warm amber primary CTA, mint reusable-prompt accents, prompt cards, photo contact sheets, stateful tool panels.

This direction intentionally avoids generic SaaS patterns:
- No purple-on-white gradient hero.
- No centered hero-only landing.
- No symmetric 3-column feature wall.
- No emoji icons.
- Tool UI appears above the fold.

## 4. Design Tokens

| Token | Value |
|---|---|
| Background | `#0B0D10` |
| Surface | `#15191F` |
| Raised Surface | `#232A33` |
| Text Primary | `#F4EFE6` |
| Text Secondary | `#A9B0B8` |
| Accent Primary / CTA | `#FFB000` |
| Accent Secondary / Prompt | `#38D6B5` |
| Error / Safety | `#FF5A6A` |
| Link Accent | `#6A7CFF` |
| Font Display | Sora |
| Font Body | IBM Plex Sans |
| Font Mono / Labels | JetBrains Mono |

## 5. Page IA

### `/`
1. Navigation
2. Hero + embedded upload/prompt editor
3. Prompt template strip
4. How it works
5. Prompt builder module
6. Before/after examples
7. Use cases
8. Prompt library preview
9. Pricing / credits preview
10. Safety / rights block
11. FAQ
12. Footer legal links and no-affiliation disclaimer

### `/ai-photo-prompt-editor`
1. Builder-first hero
2. Structured controls
3. Generated prompt preview
4. Reusable prompt explanation
5. Example formulas
6. FAQ

### `/chatgpt-photo-editing-prompts`
1. Prompt field-guide hero
2. Best starter prompts
3. Portrait/headshot prompts
4. Product prompts
5. Background/lighting prompts
6. Safe adaptation guidance
7. FAQ

### `/ai-photo-editing-prompts`
1. Library/formula hero
2. Category filter
3. Prompt categories
4. Before/after prompt examples
5. Safer prompt writing rules
6. FAQ

### `/prompt-library`
1. Search/filter/sort
2. 20 prompt card grid
3. Prompt schema fields: category, best_for, prompt, negative_prompt, preserves, safety_note
4. Copy / Apply CTAs

### Tool states
Covers empty, uploading, upload error, uploaded preview, prompt selected, builder active, generating, success, provider fail, free limit reached, upgrade prompt, unsafe prompt blocked.

## 6. 开发注意事项

- First screen must be a usable editor: upload + prompt + template selector + quota + generate CTA.
- Prompt library is not just content; every useful prompt should feed back into Apply to Editor.
- Unsafe prompt blocked state is a hard product state, not an upsell path.
- Free limit reached can upsell Pro or Credit Pack; unsafe content cannot.
- Do not write “unlimited”, “guaranteed face match”, “100% identity preservation”, “copyright-free commercial use”, “official RSP”, or “RSP Editing AI”.
- Use `AI Editor RSP` as the brand; explain RSP as `Reusable Style Prompts`.
- If paid checkout ships, UI must preserve capped credits: Free 2/day, Pro $12/mo with 200/month, Annual $96/year, Credit Pack $6/100 credits.
- Legal routes and footer links are required: `/privacy`, `/terms`, `/cookie-policy`, `/refund`, `/contact`.

## 7. 需替换 / 需落地内容

Design-safe but production-dependent:
- Stitch-generated photo/mock imagery should be replaced with owned/generated examples before public launch.
- Final AI provider and provider retention/training terms are still unknown.
- Contact email is still a legal placeholder upstream.
- Analytics/cookie behavior must match final GA4/Clarity/Plausible/Bing implementation.
- Prompt library must contain at least 20 real, safe, structured templates before `/prompt-library` is indexable.

## 8. Verification

Run from workspace `/root/.hermes/kanban/boards/site-factory/workspaces/t_cbe1516a`:

- Official Stitch SDK used: `@google/stitch-sdk`, project `7329555727489747022`.
- `design/stitch/screen-index.json` contains 12 screens and `fallback_status: none`.
- All 12 HTML files are non-empty real HTML, not SVG-only exports.
- All 12 screenshots are non-empty PNG files.
- Asset conversion verified with `file`: favicon ICO, favicon PNGs, apple touch icon, OG PNG.
- Forbidden copy scan passed for: `unlimited generations`, `100% identity`, `official RSP`, `RSP Editing AI`, `celebrity prompt pack`.
- Content-fit matrix produced at `design/content-fit-matrix.md`.

## 9. Residual risk

- Stitch screenshots are compressed/downscaled by the service export; frontend should use HTML as visual truth and screenshots as layout reference.
- `Inter` appears only as substring in normal words such as “Interface” in generated HTML; visible typography in the design prompt and design labels is Sora / IBM Plex Sans / JetBrains Mono.
- Prompt/photo examples in Stitch are illustrative placeholders; production must replace with safe owned/generated examples and real seed templates.
- Legal/contact/provider placeholders remain launch blockers from upstream compliance, not design blockers.

## 10. Next inputs

For frontend/build:
- Use this design package as source: `/root/.hermes/kanban/boards/site-factory/workspaces/t_cbe1516a/design`.
- Implement Next.js/OpenNext Cloudflare with server-side image provider calls only.
- Seed at least 20 safe prompt templates as structured data.
- Implement tool state machine and error states shown in `tool-states-*`.
- Keep page matrix/index policy from PRD: `/`, `/ai-photo-prompt-editor`, `/chatgpt-photo-editing-prompts`, `/ai-photo-editing-prompts`, conditional `/prompt-library`.

For compliance/launch:
- Confirm contact email, provider terms, analytics tools, refund window, and Stripe settings before production launch.