jpmschweitzerandClaude Opus 4.6
996a000146
First wireframe set covering all major UI surfaces: - HUD: basic insert (v0.1), full insert with perception modes (v1.0) - Dialogue: speaking, choosing, overheard states (v0.1), full with relationship indicators (v1.0) - Monologue: idle, reaction (v0.1), thought threading (v1.0) - Popups: modal, tooltip, interaction list (v0.1), context menu, notification stack (v1.0) - Menus: main, pause, save/load (v0.1), main menu, options (v1.0) README.md cross-references each wireframe to governing D-records. JSON source + PNG exports tracked in git. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
UI Wireframes
Wireframes for The Settled Reach UI, authored as JSON source files and rendered to PNG via Frame0.
JSON files are the source of truth. PNGs are exports. .idmap.json files are ephemeral (gitignored).
Wireframes are organized in two sets:
- v01- prefix: v0.1 critical path (minimal viable UI for first playable)
- v10- prefix: v1.0 evolution (discussion pieces for aspirational full design)
HUD / Neural Insert
The player's primary gameplay interface — top-down view with perception overlays.
| Wireframe | Version | Decision References |
|---|---|---|
| v01-insert-basic | v0.1 | D-013 (diegetic insert), D-048 (insert overlay design), D-049 (z-stack layers 6-7), D-015 (locked camera), D-014 (v0.1 map spec) |
| v10-insert-full | v1.0 | D-017 (perception modes), D-048 (insert overlay), D-059 (fog layers), D-033 (entity color) |
Dialogue
Conversation system — NPC speaking, player choosing, overheard conversations.
| Wireframe | Version | Decision References |
|---|---|---|
| v01-dialogue-speaking | v0.1 | D-061 (dialogue box spec), D-076 (max-width 1200px), D-028 (dialogue architecture) |
| v01-dialogue-choosing | v0.1 | D-061 (dialogue box), D-062 (invisible locked options), D-063 (confrontation weight) |
| v01-dialogue-overheard | v0.1 | D-078 (overheard conversation), D-071 (eavesdropping), D-072 (conversation murmur) |
| v10-dialogue-full | v1.0 | D-061 (dialogue box), D-028 (four relational layers), D-075 (confidence gating), D-033 (entity color as relationship) |
Internal Monologue
Player character's thoughts — perception bridge, atmosphere, diegetic hints, unreliable narrator.
| Wireframe | Version | Decision References |
|---|---|---|
| v01-monologue-idle | v0.1 | D-016 (monologue system), D-032 (separate pools per character), D-049 (z-layer 7) |
| v01-monologue-reaction | v0.1 | D-016 (monologue), D-060 (cognitive delay), D-067 (recognition chime timing) |
| v10-monologue-threading | v1.0 | D-016 (monologue), D-035 (monologue tags/triggers), D-041 (knowledge graph) |
Popups and Dialogs
Confirmations, tooltips, interaction lists, notifications, context menus.
| Wireframe | Version | Decision References |
|---|---|---|
| v01-modal-confirm | v0.1 | D-048 (insert visual language), D-049 (z-layer 7 UI) |
| v01-tooltip | v0.1 | D-056 (cursor states), D-057 (entity interaction list) |
| v01-interaction-list | v0.1 | D-057 (vertical list, insert-styled), D-058 (world menu radial), D-056 (cursor hover states) |
| v10-context-menu | v1.0 | D-057 (entity interaction), D-058 (world menu radial, 5-6 spokes) |
| v10-notification-stack | v1.0 | D-013 (diegetic insert), D-048 (insert overlay), D-018 (three-range sound — long-range alerts) |
Menus
Main menu, pause, save/load, options.
| Wireframe | Version | Decision References |
|---|---|---|
| v01-main-menu | v0.1 | D-043 (functional warmth style), D-027 (two-character proof — character select) |
| v01-pause-menu | v0.1 | D-043 (visual style) |
| v01-save-load | v0.1 | D-027 (vertical slice), D-043 (visual style) |
| v10-main-menu | v1.0 | D-043 (visual style), D-036 (setting — Sova Transit District), D-013 (diegetic insert — in-fiction menu) |
| v10-options-full | v1.0 | D-043 (visual style), D-068 (5-bus audio — per-bus volume controls), D-069 (audio dip profiles) |
Workflow
Wireframes are authored as JSON, rendered via Frame0, exported as PNG. See .claude/skills/frame0-wireframe/SKILL.md for the full workflow.
Frame0 is treated as a renderer — push, export, clean up. Pull only when the user explicitly requests import of Frame0 edits.