# Google Stitch Frontend Optimization Brief

## Current Local Page Paths

- Main page: `/Users/adonisdc/Documents/New project/holy-chicken-ai-debate-hall/index.html`
- Offline preview: `/Users/adonisdc/Documents/New project/holy-chicken-ai-debate-hall/offline-preview.html`

Note:
- These are local filesystem paths for reference.
- Stitch works best from prompts, screenshots, wireframes, or pasted code context.
- If Stitch cannot directly read a local path, open the page locally and upload 1 to 3 screenshots of the current UI.

## What To Give Stitch

Use the current page as the base and optimize only the frontend presentation.

Primary direction:
- More sacred
- More mysterious
- More monumental
- More restrained

Hard constraints:
- Keep a single-file deployment mindset: output plain HTML/CSS/JS that can live in one page
- Keep the cosmic background / holy scene as the main stage
- Keep only one lower-centered conversation window
- No settings panels, sidebars, debug areas, chips, status bars, raw response panels, or control rails
- Title must be concise, centered, and visually aligned to the vertical axis
- Chat window must be smaller than the current version
- Border must be thinner and quieter
- Responsive for desktop and mobile
- Avoid generic dashboard styling

## Optimization Ideas

1. Strengthen the center axis
- The title and the dialog window should share one clear vertical centerline.
- The title should feel like a floating inscription, not a section block.

2. Reduce interface chrome
- Remove all non-essential labels and utility furniture.
- The chat window should feel like a sacred opening, not an app panel.

3. Make the dialog window more refined
- Narrower width
- Lower visual weight
- Thinner border
- Softer inner glow
- Better empty space around content

4. Improve sacred visual hierarchy
- Background remains dominant
- Title is secondary but iconic
- Chat panel is tertiary and intentionally humble

5. Preserve immersion on mobile
- Maintain exact centered alignment
- Keep lower docking consistent
- Avoid oversized window height on small screens

## Stitch Prompt

```text
Redesign this web interface into a more sacred, mysterious, monumental AI debate hall.

Context:
- The page is a cosmic religious parody experience called "圣鸡教廷".
- The background should remain cinematic and dominant: a vast celestial stage with holy light, mystery, depth, and a sense of scale.
- The UI should contrast with the absurd content by looking extremely serious, solemn, and refined.

Current UX problems to fix:
- The title is not visually centered enough.
- The conversation window is still too large.
- The border is too heavy.
- The interface still feels slightly like a product panel instead of a sacred portal.

Design goals:
- Build a strict vertical center axis.
- Place a concise centered title near the upper center.
- Place one smaller conversation window centered in the lower portion of the screen.
- Remove all settings, side panels, status chips, helper ribbons, debug views, and extra control surfaces.
- Keep only message content, input area, and a single submit action.

Visual direction:
- Monumental minimalism
- Liturgical glass
- Cinematic celestial atmosphere
- Serious, restrained, premium
- Not playful, not dashboard-like, not startup-like

Typography:
- Title should be short and iconic.
- Title can be just:
  圣鸡教廷
  AI 辩经馆
- Make the title more compact, centered, and elegant.
- High-end serif or solemn display feeling for the title.
- Body text remains readable and modern.

Composition:
- Use a narrow title block centered horizontally.
- Use one smaller lower-centered chat shell.
- Increase negative space.
- Make the page feel taller and grander.

Chat window requirements:
- Smaller overall footprint than before
- Thin subtle border
- Softer highlight line
- Less corner radius than a playful app card, but still refined
- Message area should be calm and breathable
- Input area should be minimal and integrated

Mobile requirements:
- Maintain the same centered title and lower-centered window logic
- Keep proportions elegant, not oversized
- Preserve the monumental atmosphere without clutter

Output requirements:
- Return production-oriented frontend code
- Plain HTML and CSS friendly output
- No framework-specific dependency assumptions
- Keep the structure simple enough to merge into a single-file HTML project

Please generate:
1. An improved visual layout
2. Updated HTML structure for the title and chat shell
3. Updated CSS for alignment, spacing, border treatment, and responsive behavior
4. A concise explanation of why the composition now feels more sacred and centered
```

## Recommended Stitch Workflow

1. Open `/Users/adonisdc/Documents/New project/holy-chicken-ai-debate-hall/offline-preview.html`.
2. Capture one desktop screenshot and one mobile-width screenshot.
3. Upload the screenshots into Stitch.
4. Paste the prompt above.
5. Ask Stitch for HTML/CSS export, then merge only the title and chat-shell improvements back into `index.html`.

## Merge Scope

If Stitch returns a large redesign, only keep these parts:
- title block structure
- lower-centered chat shell structure
- spacing system
- border / radius / glow treatment
- responsive alignment rules

Do not overwrite:
- backend API wiring
- local proxy setup
- message rendering logic
- Three.js scene logic unless the generated change is purely presentational
