初始化项目并上传代码

docs/superpowers/specs/2026-03-17-conway-life-demo-design.md

@@ -0,0 +1,105 @@
+# Conway Life Demo Design
+
+Date: 2026-03-17
+Status: Approved
+
+## Goal
+
+Build a pure HTML/CSS/JS demo page for Conway's Game of Life that opens directly from `index.html`, balances teaching and interaction, and presents the simulation with a modern visualization aesthetic.
+
+## Audience and Use Case
+
+- Learners seeing cellular automata for the first time
+- Users who want to experiment by drawing patterns and watching them evolve
+- Anyone who wants a polished, shareable standalone demo page
+
+## Product Direction
+
+- Topic: Conway's Game of Life
+- Page type: balanced demo page
+- Delivery: direct-open HTML/CSS/JS page
+- Feature scope: enhanced version with preset patterns
+- Visual style: modern visualization
+- Default state: load a preset pattern and remain paused
+
+## Layout
+
+### 1. Hero
+
+- Full-width first screen with an atmospheric simulation-inspired background
+- Title, short explanatory subtitle, and a clear entry action that scrolls to the lab
+- Visual treatment based on luminous grid lines, soft glow, and scientific/data-art styling
+
+### 2. Main Lab
+
+- Large simulation canvas as the primary focus
+- Side control panel on desktop; stacked layout on mobile
+- Status area showing running/paused state and current speed
+
+### 3. Rules Section
+
+- Three compact rule cards explaining survival, birth, and death
+- Short copy only; no heavy educational text blocks
+- Small visual motifs to keep the explanation approachable
+
+### 4. Preset Pattern Section
+
+- Presets: glider, pulsar, and Gosper glider gun
+- Clicking a preset loads it into the simulation and pauses playback
+- Section doubles as both a teaching aid and a quick demo launcher
+
+## Interaction Design
+
+### Controls
+
+- Start/Pause
+- Step one generation
+- Clear
+- Randomize
+- Reset to selected preset
+- Speed adjustment
+
+### Canvas Interaction
+
+- Click a cell to toggle it
+- Drag to paint cells continuously
+- Keep the simulation paused when loading or editing presets so the user stays in control
+
+### Simulation Rules
+
+- Classic Conway rules
+- Finite grid with non-wrapping edges
+- Default opening preset: pulsar
+
+## Visual System
+
+- Deep dark background with cool white text
+- Cyan and acid-green highlights for live-state emphasis
+- Semi-transparent panels, subtle borders, soft bloom, and layered gradients
+- Refined motion: gentle glow, state transitions, and staggered reveal rather than flashy arcade effects
+
+## Technical Approach
+
+- Use `canvas` for the simulation surface to keep updates smooth and visually polished
+- Keep simulation rules in pure functions so they can be tested outside the browser
+- Keep page assets local so `index.html` can open directly without a build step
+
+## Responsiveness
+
+- Desktop: wide lab layout with canvas first and controls beside it
+- Mobile: stacked layout with the canvas above controls
+- Preset cards become horizontally scrollable on narrower screens
+
+## Usability Details
+
+- Disable actions when they should not apply, such as disabling step while running
+- Show the active preset and speed tier clearly
+- Short helper copy explaining that each cell looks at its eight neighbors
+
+## Verification Targets
+
+- Conway rule updates are correct
+- Start/pause and single-step work as expected
+- Presets load correctly
+- Editing cells updates the simulation state correctly
+- Layout remains usable after resizing