Lab · UX Designer
UX Designer Lab
Claude Design persona — Observatory 2.0 guardian, mobile-first auditor, and iPhone app architect.
All systems
⬡
The UX Designer
Claude Design persona — SYD design system guardian
"A system this powerful deserves an interface worth living in. Observatory 2.0 is the target. Every pixel that drifts toward 1.0 is cognitive debt. And Nick's iPhone is a first-class citizen, not an afterthought."
Use + Backlog to queue an experiment for the backlog, or ✕ Reject to pass on it. Optional feedback helps SYD tune future proposals. Decisions are scored on: usefulness · day simplification · backlog alignment.
The UX Designer's Experiments · 3 proposals
Mobile-First Refactor: Claude + Hermes
LargeObservatory 2.0 Token Audit & Migration
LargeiPhone App Blueprint
MediumUX Audit — SYD Mission Control Design Drift
34
Pages Audited
22
SYD 2.0 Aligned
4
Mixed / Drift
8
SYD 1.0 Legacy
3
High Priority
9
iPhone App-Ready
Design System Legend:
2.0 ✓Observatory 2.0 — obs-* CSS tokens, inline styles, Square Glyph engine
MixedSome 2.0 structure but Track 1 CSS variables still present
1.0 ⚠Track 1 legacy — var(--cream), var(--fg), Tailwind panel classes only
iPhone App Blueprint — 5 Core Use Cases
Morning Brief
Tab 1 · Home
Brief card + Verse + Top 3 priorities
App-ReadyVoice to Hermes
Tab 2 · Talk
Full-screen mic button, waveform, transcript
Needs WorkKanban Glance
Tab 3 · Board
3-column swipe, drag between cols
Needs WorkJournal Quick-Entry
Tab 4 · Journal
Full-width textarea, auto-date header
App-ReadyAction Queue Triage
Tab 5 · Actions
🔴/🟡/🟢 list, swipe to dismiss
Needs WorkCross-Device Support Matrix
| Page | Desktop Chrome | iPad Safari | iPhone Safari | iPad App | iPhone App |
|---|---|---|---|---|---|
| Mission Control | ✅ | ✅ | ⚠ grid | ✅ | ⚠ |
| Claude | ✅ | ⚠ tabs | ⚠ tabs | ⚠ | ⚠ |
| Hermes | ✅ | ✗ tabs | ✗ tabs | ✗ | ✗ |
| Knowledge Graph | ✅ | ⚠ | ✗ 3D | ⚠ | ✗ |
| AI Learnings | ✅ | ✅ | ✅ | ✅ | ✅ |
| Journal | ✅ | ✅ | ✅ | ✅ | ✅ |
| Kanban | ✅ | ⚠ | ⚠ | ⚠ | ⚠ |
| OpenClaw (1.0) | ✅ | ⚠ | ✗ | ⚠ | ✗ |
| Experiments | ✅ | ✅ | ✅ | ✅ | ✅ |
Recommended Migration Order — 1.0 → 2.0
1.Hermes11-tab bar is the worst mobile UX in the codebase; most-used agentLarge
2.Claude6 tabs overflow on iPhone; daily driverMedium
3.Knowledge GraphFixed height + 3D graph breaks on iPhone; high daily useLarge
4.OpenClawTrack 1 CSS; one obs-* pass would complete the Agents section in 2.0Medium
5.KanbanCore iPhone glance use case; 3-col swipe pattern neededMedium
6.Agent RoomTrack 1 CSS + multi-pane; medium iPhone valueLarge
7.NotebookAudio overview is a phone-native feature; obs-* migration unlocks itMedium
8.StudioImage gen on iPhone is a stretch goal; migrate for consistencyMedium