docs: Add NIGHTWATCH v0.1 frontend design prompt pack for Claude Design

[THOClabs]

Summary

Add complete design specification and prompt pack for generating the NIGHTWATCH v0.1 demo frontend using Claude Design. This includes the master generation prompt, iteration prompts for follow-up modules, and usage documentation.

Related Issues

Implements the frontend design phase documented in the project roadmap.

Type of Change

• Documentation update
• New feature (design specification for frontend generation)

Changes Made

• CLAUDE_DESIGN_PROMPT.md — Master generation-1 prompt (464 lines) containing:

  • Project context: mission, site, hardware, and design character (High Desert Brass theme)
  • Complete design system: color tokens, typography, spacing, motion, and component patterns
  • Data model: TypeScript interfaces for all observatory state (mount, roof, weather, safety, guiding, capture, power, voice, events)
  • Physics constants: drive resolution, slew rates, safety thresholds, wind/humidity/temperature/battery tiers
  • Mock data and simulation architecture: 1 Hz tick reducer, continuous physics, scripted event timeline, demo director controls
  • Information architecture: 10-module left rail, top status strip, route map
  • Digital twin specification: SVG-based 2D elevation with live animation bindings
  • Voice agent console: conversation stream, tool-call cards, latency waterfall, context rail
  • Seven flagship screens: Mission Control, Sky & Targets, Capture, Guiding, Weather & Safety, Alerts, Night Schedule, Meteor Watch
  • Complete demo script: 13 chapters from dusk to dawn with synchronized state changes

• ITERATION_PROMPTS.md — Six staged follow-up prompts (104 lines) for building remaining modules:

  • Iteration 1: Facility module (roof, power, drives)
  • Iteration 2: Operations module (queue, session timeline, log, report)
  • Iteration 3: System module (health, settings, simulator)
  • Iteration 4: Sky & Targets + Imaging depth
  • Iteration 5: Voice & Meteor depth
  • Iteration 6: Polish and refinement pass
  • Each prompt follows a consistent structure: what exists → scope → outcome → constraints

• README.md — Usage guide (55 lines) covering:

  • How to run the master prompt in Claude Design
  • Iteration discipline: chat vs. inline comments vs. canvas edits
  • Budget notes for Claude Design metered usage
  • Provenance table mapping prompt sections to source-of-truth files in the repository

Design System Highlights

• High Desert Brass theme: Dark indigo canvas (#0A0E1A), moonlight text, hand-rubbed brass accents (#C9A227), safety semantics (green/amber/red/emergency-red)
• Rubylith night-vision mode: Global toggle swaps all tokens to red ramp for dark adaptation at the telescope
• Typography: Space Grotesk (UI), JetBrains Mono (telemetry), Fraunces (headings)
• Motion: Physical elements move at simulation-truth speeds; UI chrome uses 150–200 ms ease-out; only emergency elements pulse
• Density: Instrument panel aesthetic, not marketing site; every numeric readout includes units

Data Model Alignment

The prompt transcribes the exact data model from the Python backend:

• SafetyLevel, SafetyAction, MountState, RoofState, PowerState, PipelineState enums
• Live state interfaces: MountStatus, RoofStatus, Conditions, SafetyStatus, GuideStats, CaptureSession, UPSStatus
• Event types and voice turn results matching the orchestrator's contract
• Physics constants (24,000 steps/° RA, 19,200 steps/° DEC, 4°/s slew, sidereal tracking, meridian limits ±15° HA, safety thresholds)

Simulation Engine

• Self-contained 1 Hz tick reducer with deterministic state mutations
• Continuous physics: slew integrator, side

https://claude.ai/code/session_012nb7FjZTrrwExMx5xmYBJG