every.channel/docs/CLAUDE_CODE_DESIGN_PROMPT.md

Claude Code prompt (opus-4.6): design + IA pass

Goal: Do a design pass on the every.channel web site and apply the same information architecture and language to the desktop app UI.

Constraints:

• Keep it clean and minimal, but warmer (a subtle nod to old TV).
• Do not use protocol jargon in user-facing labels. Avoid words like "MoQ", "mDNS", "DHT", "endpoint", "broadcast", "track", "gossip", "pkarr".
• Prefer plain language:
  • "Watch a link"
  • "Nearby (same Wi-Fi)"
  • "Public (internet)"
  • "Directory"
  • "Sharing key"
• Keep layout readable on mobile and desktop.
• Reuse the existing visual direction (soft gradient background, rounded cards) but tighten typography and spacing.
• Preserve existing functionality. This is a design and IA pass, not a behavior rewrite.

Scope:

1. Web site IA and design

• Implemented site lives at apps/web/:
  • apps/web/src/main.rs
  • apps/web/style.css
  • apps/web/index.html
• Improve the IA and copy, but keep the same sections: Watch, Directory, Participate, About.
• Make the top nav and sections feel cohesive and calm.
• Add small touches that feel "old TV" without being kitsch. Very subtle scanlines/noise is OK.

2. App UI IA and design alignment

• Desktop UI lives at:
  • apps/tauri/ui/src/main.rs
  • apps/tauri/ui/style.css
• Ensure the same language and IA as the web site.
• Hide advanced fields. Default flows should be link-first.
• Make the Directory controls read like product features, not network plumbing.

3. Deliverables

• Update CSS and UI copy.
• If you add new components, keep them in the same files for now.
• Keep changes reversible and minimal in surface area.
• Provide a short summary of what changed and why.

Please edit the repo directly.