# AI Editor RSP — Content Fit Matrix

Status: DESIGN_GO_WITH_STITCH
Primary keyword: AI image editor with prompt
Design direction: Industrial creator studio — dark editor console, amber CTA, mint reusable-prompt accents, Sora + IBM Plex Sans + JetBrains Mono.

## Competitor visual scan

| Competitor | Visual / IA pattern | Gap we use | Design response |
|---|---|---|---|
| NoteGPT AI Image Editor | Tool-first upload/prompt editor, credit-based AI suite, broad feature SEO copy | Runnable editor exists, but prompt guidance and reusable workflow are weak | Keep editor above fold; add template strip, prompt builder, reusable prompt library, visible quota |
| AIEnhancer AI Image Editor | Simple upload → prompt → download flow, free/fast positioning, SEO-heavy copy | Fast workflow but generic page and limited reusable-prompt system | Use a stronger tool console and prompt cards; avoid generic “free AI editor” template |
| PromptPlum prompt library | Dense prompt categories/cards, copy-paste prompt content, no native editor | Strong prompt discovery, weak/no runnable generation | Link every prompt card to Apply to Editor; make library a feeder into tool flow |

## Global design constraints

| Area | Decision | Reason |
|---|---|---|
| Fonts | Sora headings, IBM Plex Sans body, JetBrains Mono prompt labels | Distinct from generic Inter/Roboto SaaS; fits editor/tool precision |
| Palette | #0B0D10 bg, #15191F surface, #FFB000 CTA, #38D6B5 prompt accent, #FF5A6A safety/error | Dark creator utility; warm CTA; mint for reusable prompts; red only for blockers |
| Layout | Asymmetric editor-first, bento/staggered cards, state-board for interactions | Avoid generic centered hero and 3-column feature grid |
| Assets | Generated/self-owned abstract photo placeholders and custom SVG logos only | No competitor screenshots, third-party logos, celebrity/IP thumbnails |
| Compliance | Safety copy visible but subordinate to editor task | Prevents legal risk without turning page into policy wall |

## Route / section matrix

| Route / screen | Source copy / PRD input | Design placement | Show on homepage? | Visual container | Risk / handling |
|---|---|---|---|---|---|
| `/` Hero | 02c §4 Hero; PRD §7.1 | Above-fold left message + embedded editor | Yes | Split hero; left copy, right editor console | Must preserve H1 and tool-first UX |
| `/` editor module | 02c labels + placeholder prompt; PRD capabilities | Above-fold upload, prompt textarea, template selector, generate CTA, quota pill | Yes | Dark raised editor panel | Real backend later; design is visual truth only |
| `/` template strip | PRD §7.1 prompt template strip | Directly under hero | Yes | Amber/mint prompt chips | Templates are safe generic styles only |
| `/` how it works | 02c §4 How it works | Mid-page 3-step module | Yes | Offset process cards | Keep concise, not SEO wall |
| `/` Prompt Builder | PRD §6.1 builder fields | Interactive-looking control panel | Yes | Bento control grid + generated prompt preview | Frontend must implement real fields |
| `/` Before/after | 02c §12 requirement; PRD §14 asset rules | Contact-sheet comparison | Yes | Generated placeholder image cards | Replace with owned/generated production examples |
| `/` Use cases | PRD §7.1 | Four staggered cards | Yes | creator/product/headshot/social cards | No celebrity/IP use cases |
| `/` Pricing teaser | 02a pricing | Lower page pricing cards | Yes | Free/Pro/Pack cards, capped credits | No unlimited language |
| `/` Safety block | 02b §7 controls; 02c safety copy | Lower page visible block + footer | Yes | Red-accent policy card | Must not dominate first screen |
| `/ai-photo-prompt-editor` | 02c §5 prompt editor outline | Dedicated builder page | Link from homepage | Full structured prompt builder | Must keep generated prompt preview copyable/applicable |
| `/chatgpt-photo-editing-prompts` | 02c §5 ChatGPT prompt outline | Content field-guide page | Link from homepage/footer | Prompt cards + article sections | Use ChatGPT descriptively only; no official/logo treatment |
| `/ai-photo-editing-prompts` | 02c §5 library outline | Category/formula page | Link from homepage/library preview | Filtered library + formula breakdown | Avoid thin programmatic SEO; each card needs useful specifics |
| `/prompt-library` | 02c §6 template card schema | Dense 20-card grid | Preview only | Search/filter/sort + prompt cards | Index only when real templates/examples exist |
| Tool states | PRD §14 states | Separate state-board screen | No; handoff artifact | State panels | Must implement empty/uploading/error/result/limit/unsafe/provider fail |
| Legal/footer | 02b route contract | Footer links and disclaimer | Yes | Compact footer | Contact/provider placeholders remain residual launch risk |

## Interaction state coverage

| State | Stitch screen | Required UI copy / behavior |
|---|---|---|
| Empty editor | `tool-states-desktop`, `tool-states-mobile`, also home hero | Prompt textarea, upload dropzone, template selector, free quota visible |
| Uploading | `tool-states-*` | Progress indication; no fake success |
| Upload validation error | `tool-states-*` | Block unsupported/too-large file with clear retry path |
| Uploaded preview | `tool-states-*` | Show image preview + rights reminder |
| Prompt selected | `tool-states-*` | Template populates prompt + preservation rules |
| Builder active | `tool-states-*`, `/ai-photo-prompt-editor` | Structured controls + live prompt preview |
| Generating/loading | `tool-states-*` | Queue/progress state; no repeated CTA |
| Success result | `tool-states-*` | Before/result preview, download, copy/save prompt, disclaimer |
| Provider fail/error | `tool-states-*` | Typed error + retry/edit prompt path |
| Free limit reached | `tool-states-*`, pricing block | Pro / Credit Pack upsell; no unlimited copy |
| Upgrade prompt | `tool-states-*` | $12/mo / $6 pack choices |
| Unsafe prompt blocked | `tool-states-*` | Direct refusal; not bypassable by payment |

## DESIGN_GO conditions for frontend

- Use `design/stitch/screen-index.json` as official Stitch source; `fallback_status` must stay `none`.
- Use `design/html/*.html` as visual truth for page implementation.
- Replace any Stitch-generated pseudo imagery with owned/generated examples before public launch.
- Legal placeholders from compliance (`[待确认 contact email]`, final provider/analytics terms) remain launch blockers, not design blockers.