# AI Editor RSP — Hero Optimization Design Acceptance Contract

Status: DESIGN_NO_GO for current production hero
Date: 2026-06-03
Scope: homepage first screen only, design contract only, no code changes.

## 1. Verdict

Current production verdict: DESIGN_NO_GO.

Reason: the right studio/editor panel has no effective first-screen height cap and pushes the desktop hero to 1291px tall. The hero copy is optically pulled down while the right panel dominates the viewport. The primary generation CTA is below the tested first screen on 1366x768, 1440x900, 1280x800, 390x844, and 430x932.

Implementation target verdict: DESIGN_CONDITIONAL_GO if every acceptance rule below passes on production screenshots after implementation.

## 2. Evidence reviewed

Inputs:
- Brief: /root/.hermes/reports/aieditorrsp-hero-optimization-20260603/input-brief.md
- User screenshot: /root/.hermes/image_cache/img_f1c401f16193.jpg
- Production URL: https://aieditorrsp.net/
- Source: /root/projects/aieditorrsp/src/app/page.tsx
- Source: /root/projects/aieditorrsp/src/components/ProductPreviewEditor.tsx
- Source: /root/projects/aieditorrsp/src/app/globals.css

Production measurement with Chromium + Playwright using /usr/bin/google-chrome:

| Viewport | Hero height | Console top/bottom | Generate bottom | Generate visible in first screen | State panel starts | Account panel starts |
|---|---:|---:|---:|---|---:|---:|
| 1366x768 | 1291 | 140 / 1291 | 949 | FAIL | 965 | 1128 |
| 1440x900 | 1291 | 140 / 1291 | 949 | FAIL | 965 | 1128 |
| 1280x800 | 1291 | 140 / 1291 | 949 | FAIL | 965 | 1128 |
| 390x844 | 2486 | 386 / 2510 | 1894 | FAIL | 1906 | 2183 |
| 430x932 | 2458 | 386 / 2482 | 1918 | FAIL | 1930 | 2189 |

Source findings:
- `src/app/globals.css:30` sets `.studio-hero--tool` to `align-items:center` with `min-height:calc(100vh - 64px)`, which centers the left copy against an over-tall right rail.
- `src/app/globals.css:32-34` gives `.editor-console--hero` no max-height; its state and account panels are inside the hero console.
- `src/components/ProductPreviewEditor.tsx:136-149` defines `statePanel` and always includes `<CreditAccountPanel compact />`.
- `src/components/ProductPreviewEditor.tsx:152-171` renders upload, prompt, templates, quota chip, Generate button, and full `statePanel` all inside the home hero.
- `src/app/page.tsx:6,10,48` preserves required SEO primitives: `makeSeoMetadata("/")`, `SeoJsonLd route="/"`, `SeoExpansion route="/"`.

## 3. First-screen product task

The first screen must express one job only:

Upload a source image → choose or edit a reusable prompt → generate a preview edit.

Do not surface account, billing, pricing, result-detail, provider implementation, or credit ledger UI in the first-screen editor mockup unless the user has already exhausted a limit or clicked a billing/account path.

## 4. Desktop layout contract

Applicable: viewport width >= 1120px.

Hero shell:
- Header remains 64px sticky.
- `.studio-hero--tool` max-width remains 1180px.
- Hero padding target: top 56-64px, bottom 48-56px.
- Layout ratio target: left 44-46%, right 54-56%.
- Grid columns target: `minmax(390px, .9fr) minmax(520px, 1.1fr)` or equivalent.
- Gap target: 40-48px.
- Alignment: `align-items:start`, not center.
- Console top should align with H1 top within 0-24px optical tolerance.
- Left copy top must not be lower than console top by more than 24px.

Hero copy:
- H1 remains `AI Image Editor With Prompt Templates`.
- H1 desktop target: 52-60px at 1366-1440 width, line-height 1.04-1.10.
- Paragraph remains semantically close to current copy and preserves: upload/source photo, reusable style prompt/templates, portraits/products/social assets, prompt control.
- Left CTA set remains two actions max: `Start Editing`, `View Templates`.

Right studio/editor panel:
- Required max-height desktop: `min(620px, calc(100vh - 128px))`.
- At 1366x768: console top <= 128px, console bottom <= 736px.
- At 1440x900: console bottom <= 812px.
- At 1280x800: console bottom <= 768px.
- Console must not create a hero section taller than the viewport. Target hero height <= viewport height - header + 80px; hard cap <= 820px desktop.
- Internal panel may use compact rows or internal scroll only for non-primary secondary content. The first-screen primary task must not require scrolling.

## 5. Modules allowed in the first-screen right panel

Keep in first screen:
1. Console top line: `STUDIO_CONSOLE_V01` + subtle status pill.
2. Upload source image control.
3. Prompt textarea / prompt preview.
4. Style prompt selector, reduced to one of these patterns:
   - 3 compact chips/cards visible + `More templates` link; or
   - horizontal scroll chips with clear active state; or
   - 2x2 compact cards with title only + one-line hint.
5. Generate button.
6. A small neutral quota/help line only if truthful and dynamic, e.g. `Preview generation checks your available credits before running`.

Move out of first screen:
- Full idle/result `statePanel` block.
- `Account Credits` region.
- `Login with Google` inside the hero editor.
- `Pro monthly`, `Pro yearly`, `Credit pack` buttons.
- Hard-coded `2 free generations left today`.
- Provider implementation phrases such as `server-side provider flow`, `/api/credits`, `/api/generate-image`, `fal processing`.

Allowed replacement:
- A collapsed output placeholder below the Generate button, max 56-72px high, with one line: `Result preview appears here after generation`.
- If no image is uploaded, show `Upload required` inline near the upload control only after click, not as a persistent full panel.

## 6. Desktop right-panel density contract

Target dimensions at 1366x768:
- Upload block: 180-200px high.
- Prompt block: 180-200px high.
- Upload + prompt grid: 2 columns, 12-14px gap.
- Template selector: 88-112px high total.
- Footer/generate row: 52-64px high.
- Optional collapsed result hint: 56-72px high.
- Total console including chrome: 560-620px.

Typography:
- Keep Sora + JetBrains Mono visual system.
- Template card descriptions: max one line or remove from first screen; full descriptions move to library section.
- Technical labels may exist as small flavor, but not as dominant user instructions.

## 7. Mobile breakpoint contract

Breakpoints:
- >=1120px: split hero.
- 721-1119px: single-column hero with copy first, compact editor below; console max-width 760-820px; no account/payment panel in hero.
- <=720px: mobile header menu, single-column hero, editor compact.
- <=430px: brand text may hide; no horizontal overflow.

Mobile first-screen rules for 390px and 430px:
- No horizontal overflow: `document.documentElement.scrollWidth <= innerWidth`.
- Hero copy appears first and CTA row remains visible above the editor.
- Editor first-screen segment should show upload + prompt entry + Generate within roughly one viewport after the copy. Target Generate bottom <= 900px on 390x844 and <= 980px on 430x932.
- Templates collapse to chips or a select-like compact list; do not render four tall cards before Generate.
- Account/credits/pricing must not appear before the first product sections; target account panel not present on homepage hero DOM, or only mounted after explicit account/pricing interaction.
- Touch targets >=44px.
- Textarea min-height mobile target: 96-120px.
- Upload block mobile target: 150-170px.

## 8. Compliance and pricing copy contract

Until auth, Stripe, credits ledger, billing address/tax ID, refund/account flows, and provider limits are production-verified together:
- Do not claim live billing or live checkout in the hero.
- Do not hard-code remaining free generations.
- Do not imply unlimited or high-resolution exports.
- Top nav may keep `Sign In` only if the auth path is real and tested; otherwise downgrade to `Join Waitlist` or remove.
- Pricing CTAs belong on `/pricing` or post-limit states, not the hero editor first screen.

## 9. SEO preservation contract

Implementation must preserve:
- `export const metadata: Metadata = makeSeoMetadata("/")`.
- `<SeoJsonLd route="/" />`.
- `<SeoExpansion route="/" />` after primary product sections and before footer.
- H1 semantic coverage: `AI Image Editor` + `Prompt Templates`.
- Intro paragraph coverage: upload photo/source image, reusable style prompts/templates, portraits/products/social assets, prompt control.
- Canonical/OG/Twitter/sitemap behavior from existing SEO helpers.

SEO copy must not be moved into the hero editor panel. Long SEO guidance remains below the product/safety sections.

## 10. Final screenshot acceptance

Required production screenshots after implementation:
- 1366x768 desktop top of page.
- 1440x900 desktop top of page.
- 1280x800 desktop top of page.
- 390x844 mobile top of page.
- 430x932 mobile top of page.

Automated DOM checks to run on production:
- `.editor-console--hero` exists.
- Desktop `.editor-console--hero` height <= 620px and bottom <= viewport height - 32px.
- Desktop `.studio-hero--tool` computed `align-items` is `start` or equivalent.
- `.editor-generate` bottom <= viewport height - 32px on 1366x768, 1440x900, 1280x800.
- `Account credits`, `Pro monthly`, `Pro yearly`, `Credit pack`, and hard-coded `2 free generations left today` are absent from the home hero at initial load.
- No `server-side provider flow`, `/api/credits`, `/api/generate-image`, or `fal processing` visible in marketing copy.
- 390/430 mobile: no horizontal overflow.
- 390/430 mobile: Generate button reachable without passing account/pricing panels.

Visual checks:
- Console top and H1 top feel aligned; left copy is not visually lower than the panel.
- Right panel reads as a focused studio control surface, not a full account dashboard.
- First-screen weight is balanced: left headline still owns the page, right panel supports the task.
- Template controls do not look cramped at 1280 width.
- Mobile is a deliberate compact editor, not desktop controls stacked into a 2400px wall.

## 11. Suggested implementation notes for frontend

This is a contract, not a code patch. Recommended direction for the frontend worker:
- Split `ProductPreviewEditor` into `HomeHeroEditor` and full editor/account surfaces, or add an explicit `surface === "home"` compact branch that does not render `statePanel`/`CreditAccountPanel` initially.
- Move account/credits controls to `/pricing`, full editor surface, or a post-generation/post-limit state.
- Replace hard-coded quota chip with dynamic, truthful copy or remove it.
- Add CSS max-height and density rules to `.editor-console--hero`; use `align-items:start` on `.studio-hero--tool`.
- Keep SEO helpers in `src/app/page.tsx` untouched.

## 12. Residual risk

- The contract can reach DESIGN_CONDITIONAL_GO without a fresh Stitch screen because this is a refinement over an existing Stitch-derived design; however final DESIGN_GO still requires production screenshots after frontend implementation.
- Auth/credits/payment truthfulness requires compliance/product recheck. Design should avoid exposing these in the hero until those systems are verified.
- If the provider result state must stay near the editor for product reasons, it should be below the fold or behind a generated-state transition, not visible on initial hero load.

## 13. Next inputs

Next Kanban stage should review this contract from product-scope perspective before implementation:
- Does the first-screen task reduce to upload → prompt/template → generate?
- Which account/credit/billing surfaces are allowed before auth/payment verification?
- Is a collapsed result hint enough for the initial hero, or must a post-generate preview state be specified separately?