# AI Editor RSP — Owner Feedback Design Repair Contract

- task_id: t_c3548a9f
- role: 墨影 / Visual system repair contract
- production_url: https://aieditorrsp.net
- repo: /root/projects/aieditorrsp
- generated_at_utc: 2026-06-03T10:43:02Z
- commit_sha: 59d12935f4bd5b3236a3b8cacab8c87275066ea5
- deployment_source_commit: 59d12935f4bd5b3236a3b8cacab8c87275066ea5
- cloudflare_worker_version: 13c14815-48f1-42df-87dc-ae04f88a7d37
- verdict: DESIGN_REPAIR_CONTRACT_GO
- launch_status: LAUNCH_BLOCKED_UNTIL_FRESH_GATES

## 1. Design verdict

Old `QA_GO` is stale. Owner rejection is valid.

Current public design is not launch-ready because it violates basic page architecture:

1. `/ai-photo-prompt-editor` and `/ai-photo-editing-prompts` still embed app/dashboard sidebars inside public routes.
2. `/ai-photo-prompt-editor` uses a heavy image/overlay hero treatment that reduces readability and makes the editor feel like a stitched prototype, not a product page.
3. `/prompt-library` places SEO content after the footer; footer is not terminal.
4. `/ai-photo-editing-prompts` has mobile horizontal clipping and a separate app-tool visual language.
5. Header/nav/CTA systems differ between home/library/editor/templates; this creates visible fragmentation.
6. Short owner-facing routes `/editor`, `/library`, `/templates` still need to exist as redirects or first-class pages; do not leave them 404.

Design target: one public product system, not stitched app shells pasted into public pages.

## 2. Production evidence read

Inputs checked:

- Owner repair brief: `/root/.hermes/reports/aieditorrsp-hero-optimization-20260603/owner-repair-brief-20260603.md`
- Owner review gate: `/root/.hermes/reports/aieditorrsp-hero-optimization-20260603/owner-review-gate-after-reqa.md`
- Current production via Playwright: `/`, `/ai-photo-prompt-editor`, `/prompt-library`, `/ai-photo-editing-prompts`, `/pricing`, `/privacy`, `/terms`
- Viewports: 1366x768, 1440x900, 1280x800, 390x844, 430x932
- Audit JSON: `/root/.hermes/reports/aieditorrsp-hero-optimization-20260603/design-owner-repair-audit-results.json`
- Screenshot dir: `/root/.hermes/reports/aieditorrsp-hero-optimization-20260603/design-owner-repair-screenshots/`

## 3. P0 repair contract

### P0-A — Public pages must not use app/dashboard sidebar

Affected:

- `/ai-photo-prompt-editor`
- `/ai-photo-editing-prompts`
- any alias/redirect target for `/editor`, `/templates`

Current evidence:

- `/ai-photo-prompt-editor` desktop has fixed left app sidebar: `w=256`, `h=704`, labels `Dashboard / Prompt Lab / Assets / Safety / Settings`.
- `/ai-photo-editing-prompts` desktop has fixed left sidebar: `w=280`, `h=704`, labels `TECHNICAL TOOLS / Filters / Layers / History / Assets`.
- These sidebars steal public-page space and make the page look like an internal app shell.

Required repair:

- Remove desktop fixed app sidebars from public routes.
- Replace with main-site public header + local content navigation inside the page body only if useful.
- On desktop, use a full-width public container: `max-width: 1120–1200px`, centered, no `margin-left` reserved for sidebar.
- On mobile, no hidden zero-size sidebar remnants that still define layout assumptions.

Acceptance:

- `document.querySelectorAll('aside,[class*=sidebar],[class*=rail]')` may return content filters/cards only, not fixed app navigation.
- No sidebar containing `Dashboard`, `Settings`, `TECHNICAL TOOLS`, `Layers`, `History`, or `Assets` on public routes.
- First visible nav must be the unified site header.

### P0-B — Remove readability-killing overlays

Affected:

- `/ai-photo-prompt-editor`
- `/ai-photo-editing-prompts`

Current evidence:

- Editor screenshot shows a dark person/background image behind form controls; form labels, selects, and boundaries sit on top of visual noise.
- The overlay makes the first task visually heavy and hard to scan.

Required repair:

- Do not place interactive editor controls directly over photographic/video background.
- If background art remains, keep it behind non-interactive hero copy only, with a separate solid tool panel.
- Tool panels must use opaque or near-opaque surfaces: `background: #0B1114 / #10171B / #121820` with contrast-safe borders.
- Minimum text contrast target: WCAG AA for body/form text.

Acceptance:

- At 1366x768 and 390x844, field labels, selected values, prompt body, upload labels, and CTA text are readable without squinting.
- No full-screen overlay that covers the primary editor panel.
- Decorative image opacity must not be the reason text remains readable; the panel itself must carry contrast.

### P0-C — Footer must be terminal

Affected:

- `/prompt-library`
- `/ai-photo-prompt-editor`
- `/ai-photo-editing-prompts`
- any other route using `SeoExpansion`

Current evidence:

- `/prompt-library` has `<footer>` followed by `section.seo-expansion`; screenshot shows SEO guide below footer.
- `/ai-photo-prompt-editor` has Stitch footer, then live editor bridge, then SEO expansion.
- `/ai-photo-editing-prompts` has Stitch footer, then SEO expansion.

Required repair:

- Structural order must be: `Header -> main/product content -> SEO expansion if needed -> Footer -> scripts only`.
- Move `SeoExpansion` before `StudioFooter` / `SiteFooter`.
- If raw Stitch HTML includes its own footer, either:
  - remove that raw footer and use the shared React footer once, or
  - split raw HTML into `beforeFooter` + `footer`, then insert all live/SEO sections before the raw footer.
- Never render product/body/SEO sections after any footer.

Acceptance:

- Visual footer is the last page section on desktop and mobile.
- DOM/y-order check: no visible element with height > 5px after footer except scripts/Next route announcer.
- Footer links remain visible and not followed by content blocks.

### P0-D — Unified header/nav/CTA system

Affected:

- Home
- `/ai-photo-prompt-editor`
- `/prompt-library`
- `/ai-photo-editing-prompts`
- `/pricing`
- legal/contact pages
- aliases `/editor`, `/library`, `/templates`

Current evidence:

- Library uses `AI Editor RSP` header with RSP mark and nav `EDITOR / LIBRARY / TEMPLATES / PRICING`.
- Editor/templates raw Stitch sections use `RSP Editor`, `Preview access`, `Get Started`, and embedded mobile menu variants.
- Templates mobile shows a top overlap: brand + yellow CTA + separate `MENU` pill; it reads like two nav systems colliding.

Required repair:

- One shared `SiteHeader` component for all public pages.
- One shared mobile menu behavior.
- One CTA label policy:
  - primary: `Start Editing` or `Open Editor`
  - secondary/status: `Preview access`
  - do not mix `Get Started`, `Apply to Editor`, `Open Preview Editor` as primary nav labels without hierarchy.
- Active nav labels: Editor / Library / Templates / Pricing.
- Short route aliases must map cleanly:
  - `/editor` -> `/ai-photo-prompt-editor` or dedicated editor page
  - `/library` -> `/prompt-library`
  - `/templates` -> `/ai-photo-editing-prompts`

Acceptance:

- Header height, logo, nav order, CTA style, mobile hamburger, and active state match across all public routes.
- No raw Stitch duplicate header visible below or above the shared header.
- Mobile header has one menu control only and no CTA/menu overlap.

### P0-E — Tool/editor panels must not be clipped or visually cut off

Affected:

- `/ai-photo-prompt-editor`
- `/ai-photo-editing-prompts`
- home hero tool area

Current evidence:

- Owner reports `/editor` tool area clipped/truncated.
- Current editor page puts the actual live editor bridge after a full stitched page and footer, so the real tool is effectively buried and disconnected.
- Templates mobile has horizontal overflow from pill controls; Playwright found buttons extending beyond viewport.

Required repair:

- Put the real editor/tool task near the top: after hero copy, before SEO content, before footer.
- At 1366x768: primary upload/prompt/generate path must fit as a coherent panel; if full tool cannot fit above fold, CTA to the tool must be visible and panel top must be visible without cutoff.
- At 390x844 / 430x932: single-column stack; no horizontal pill strip unless it scrolls intentionally with visible affordance and no body overflow.
- Result/idle/error/loading states must reserve stable height; no clipped bottom buttons.

Acceptance:

- `body.scrollWidth <= viewportWidth + 1` for all target viewports.
- Generate/Open Editor CTA visible above fold or immediately after one primary form panel, not below footer.
- Upload area, prompt textarea, preset cards, and result/idle panel are not cut by fixed viewport containers.

## 4. Route-specific repair directives

### `/ai-photo-prompt-editor` / `/editor`

Decision: rebuild as public editor page, not dashboard shell.

Required structure:

1. Shared site header.
2. Compact hero: H1 `AI Photo Prompt Editor`, 1 short explanatory paragraph, primary CTA `Start Editing`.
3. Real editor panel directly below or alongside hero:
   - upload card
   - prompt textarea
   - style preset stack
   - negative constraints
   - Generate Preview Edit CTA
   - inline states: upload required / unsafe prompt / loading / result / retry
4. Reusable prompt explanation cards.
5. SEO guide / FAQ.
6. Shared footer last.

Delete or demote:

- Left app sidebar.
- `LIVE_UPLOAD_STATE_BRIDGE` label in public UI.
- Full-page background over interactive controls.
- Raw Stitch footer if shared footer is used.
- Duplicate H1.

### `/prompt-library` / `/library`

Decision: library can keep a category filter, but not footer-after-content order.

Required structure:

1. Shared site header.
2. Library hero and search.
3. Category filter as an inline/filter card, not a heavy app sidebar.
4. Template grid.
5. SEO guide / FAQ.
6. Shared footer last.

Current library is visually closest to acceptable. Primary fix is footer ordering plus header consistency.

### `/ai-photo-editing-prompts` / `/templates`

Decision: templates page should match library/editor product language, not `TECHNICAL TOOLS` internal shell.

Required structure:

1. Shared site header.
2. Templates hero.
3. Template/use-case cards.
4. Safety note card.
5. How-to-adapt section.
6. FAQ.
7. SEO guide if needed.
8. Shared footer last.

Delete:

- Fixed `TECHNICAL TOOLS` sidebar.
- Desktop raw app nav duplicates.
- Mobile horizontal overflow pills unless converted to wrapped chips.
- Blank/empty button boxes next to `Copy Prompt` on mobile.

## 5. CSS / layout prohibitions

Do not use these on public routes:

- `position: fixed; left: 0; top: 64px; bottom: 0` sidebars.
- `w-64`, `w-[280px]`, `ml-64`, `pl-[280px]` layout compensation for public pages.
- Full-screen or large photographic backgrounds behind form controls.
- `overflow: hidden` on primary tool containers when content can exceed panel height.
- `height: 100vh` / `h-screen` wrappers around full public pages.
- `dangerouslySetInnerHTML` raw Stitch body that includes header/footer without splitting or sanitizing public chrome.
- Rendering `SeoExpansion` after any footer.
- Multiple visible headers/navs/mobile menus on the same route.
- Horizontal pill rows that create body overflow on 390/430px mobile.
- Hidden desktop sidebars that still influence mobile layout or accessibility tree.
- Internal implementation labels in public UI: `LIVE_UPLOAD_STATE_BRIDGE`, `TECHNICAL TOOLS`, `V2.0.4-STABLE`, `dashboard`, `settings`.

Allowed patterns:

- Shared public `SiteHeader` + shared `SiteFooter`.
- Content-local filter rail only if it is non-fixed and becomes a wrapped chip group on mobile.
- Opaque tool cards with subtle decorative background outside the card.
- `main` wrapper with ordered children: product content, SEO expansion, footer.

## 6. Desktop/mobile acceptance screenshot checklist

Frontend repair must produce and attach/record screenshots for these exact routes and viewports:

### Desktop

- `/` — 1366x768, 1440x900, 1280x800
- `/editor` — 1366x768, 1440x900, 1280x800
- `/library` — 1366x768, 1440x900, 1280x800
- `/templates` — 1366x768, 1440x900, 1280x800
- `/ai-photo-prompt-editor` — 1366x768
- `/prompt-library` — 1366x768
- `/ai-photo-editing-prompts` — 1366x768
- `/pricing` — 1366x768
- `/privacy` and `/terms` — 1366x768 spot check for shared chrome

### Mobile

- `/` — 390x844, 430x932
- `/editor` — 390x844, 430x932
- `/library` — 390x844, 430x932
- `/templates` — 390x844, 430x932
- `/ai-photo-prompt-editor` — 390x844
- `/prompt-library` — 390x844
- `/ai-photo-editing-prompts` — 390x844
- `/pricing` — 390x844

Required screenshot proof:

- first viewport capture for header/tool visibility
- full-page capture for footer terminal order
- at least one tool-state capture each: empty/upload-required, loading, result, unsafe/error

## 7. Automated acceptance checks to run after repair

Run after deploy, against production:

```js
// footer terminal
const footer = document.querySelector('footer');
const footerBottom = footer.getBoundingClientRect().bottom + scrollY;
const visibleAfterFooter = [...document.querySelectorAll('body *')].filter(el => {
  const r = el.getBoundingClientRect();
  const s = getComputedStyle(el);
  return r.height > 5 && r.width > 5 && r.top + scrollY > footerBottom + 2 && s.display !== 'none' && s.visibility !== 'hidden';
});

// no body overflow
document.body.scrollWidth <= innerWidth + 1;

// no public app sidebar labels
!/Dashboard|Settings|TECHNICAL TOOLS|Layers|History|Assets/.test(document.body.innerText);

// one visible header/nav system
[...document.querySelectorAll('header')].filter(h => h.getBoundingClientRect().height > 1).length === 1;
```

Pass criteria:

- All above checks pass on `/editor`, `/library`, `/templates`, `/ai-photo-prompt-editor`, `/prompt-library`, `/ai-photo-editing-prompts` at 1366x768 and 390x844.
- `npm run verify` passes.
- `npm run seo:audit` passes or produces only explicitly accepted non-launch-blocking P1s.
- Fresh design recheck returns `DESIGN_GO` or at worst `DESIGN_CONDITIONAL_GO` with owner-visible residuals.

## 8. Implementation notes for downstream frontend

Likely source files implicated:

- `src/app/ai-photo-prompt-editor/page.tsx`: raw Stitch HTML + live editor bridge + SEO expansion order currently causes footer/content disorder.
- `src/app/ai-photo-editing-prompts/page.tsx`: raw Stitch HTML likely contains app sidebar/header/footer; must split/sanitize.
- `src/app/prompt-library/page.tsx`: `SeoExpansion` currently rendered after `PromptLibraryPageBody`, whose body already includes footer.
- `src/components/StitchStudio.tsx`: `StudioShell` currently renders `{children}<StudioFooter />`; use this pattern consistently, but ensure pages do not include their own earlier raw footer.
- `src/app/layout.tsx`: global mobile nav can collide with raw Stitch mobile header; keep one system.

If keeping raw Stitch visual assets:

- Do not inject complete raw documents/sections unmodified.
- Extract only interior content modules, not raw header/footer/sidebar.
- Convert raw Stitch sections into React components using shared chrome and tokens.

## 9. Non-visual dependencies that remain outside this contract

Design cannot approve launch until these are resolved by downstream gates:

- Login must work or be blocked with concrete external action.
- Payment/Stripe/Tax/webhook entitlement must work or paid UI must be explicitly disabled and accepted by owner.
- `/api/credits`, pricing CTAs, legal/refund copy must match actual mode.
- Duplicate H1, short meta descriptions, analytics runtime, and performance/LCP require fresh recheck.

## 10. Machine-readable handoff

```json
{
  "project_slug": "aieditorrsp",
  "production_url": "https://aieditorrsp.net",
  "verdict": "DESIGN_REPAIR_CONTRACT_GO",
  "launch_status": "LAUNCH_BLOCKED_UNTIL_FRESH_GATES",
  "artifact_paths": [
    "/root/.hermes/reports/aieditorrsp-hero-optimization-20260603/design-owner-repair-contract.md",
    "/root/.hermes/reports/aieditorrsp-hero-optimization-20260603/design-owner-repair-audit-results.json",
    "/root/.hermes/reports/aieditorrsp-hero-optimization-20260603/design-owner-repair-screenshots/"
  ],
  "required_repairs": [
    "Remove fixed app/dashboard sidebars from public editor/templates routes.",
    "Remove heavy overlays behind interactive controls; use opaque contrast-safe tool panels.",
    "Move all SEO/product/body content before footer; footer must be terminal.",
    "Unify public header/nav/CTA across home/editor/library/templates/pricing/legal routes.",
    "Ensure tool/editor panels are not clipped at 1366x768, 1440x900, 1280x800, 390x844, 430x932.",
    "Add or redirect short routes /editor, /library, /templates."
  ],
  "css_layout_bans": [
    "fixed public sidebars",
    "full-page overlays behind controls",
    "body content after footer",
    "duplicate public headers",
    "mobile horizontal overflow chip rows",
    "raw Stitch header/footer/sidebar injection on public routes",
    "internal labels such as LIVE_UPLOAD_STATE_BRIDGE or TECHNICAL TOOLS"
  ],
  "acceptance_viewports": [
    "1366x768",
    "1440x900",
    "1280x800",
    "390x844",
    "430x932"
  ],
  "next_inputs": [
    "Frontend t_0110a5c7 should implement this visual route repair before downstream acceptance.",
    "Backend/auth/payment repair must provide launch-mode truth for CTAs and pricing.",
    "Fresh design recheck, SEO/compliance/product gates, final QA, and owner review are required after deploy."
  ],
  "residual_risk": [
    "This contract is read-only; current production remains DESIGN_NO_GO until frontend repair is deployed.",
    "Actual owner screenshots were represented through the owner repair brief; this audit generated fresh production screenshots for verification.",
    "Auth/payment support is outside this visual contract and may still block launch."
  ]
}
```