|
| 1 | +## Design Context |
| 2 | + |
| 3 | +### Users |
| 4 | +Developers who use Claude Code daily and have accumulated memories, skills, MCP servers, hooks, and plugins across multiple projects. They need to quickly audit, reorganize, and move these items between scopes (Global and Project). They are technical, keyboard-oriented, and value efficiency. They open this dashboard occasionally — not all day — so first-load clarity matters more than deep familiarity. |
| 5 | + |
| 6 | +### Brand Personality |
| 7 | +**Professional, Clean, Trustworthy** — like a well-built dev tool you'd trust with your configuration. Not flashy, not boring. Confident and precise, like Linear. |
| 8 | + |
| 9 | +### Emotional Goals |
| 10 | +- **Confidence**: Users should feel in control of their Claude Code setup |
| 11 | +- **Clarity**: What loads globally vs per-project should be immediately obvious |
| 12 | +- **Speed**: Everything should feel fast and responsive — no waiting, no confusion |
| 13 | + |
| 14 | +### Aesthetic Direction |
| 15 | +- **Visual tone**: Clean, structured, professional — inspired by Linear's restraint and precision |
| 16 | +- **Light/Dark**: Both, auto-detect from OS preference (prefers-color-scheme) |
| 17 | +- **Color**: Move away from the current purple-centric AI palette. Use a more distinctive, tinted-neutral base with a single strong accent color. Avoid cyan-on-dark, purple gradients, and neon glows. |
| 18 | +- **Typography**: Move away from Inter (too generic). Consider a distinctive but readable font that signals "professional tool" without being cold. |
| 19 | +- **Anti-references**: Generic AI dashboards, Tailwind templates, glassmorphism, card-heavy layouts |
| 20 | + |
| 21 | +### Design Principles |
| 22 | +1. **Scope clarity is the product** — The Global/Project distinction IS the interface. Every design decision should make what loads globally vs per-project clearer, not prettier. |
| 23 | +2. **Density over decoration** — Show more information in less space. Developers want to see everything at a glance, not scroll through padded cards. |
| 24 | +3. **One strong accent** — Use color sparingly but decisively. One accent color for interactive elements, tinted neutrals for everything else. |
| 25 | +4. **Motion with purpose** — Animate only state changes (expand/collapse, drag feedback, scope transitions). No decorative animations. |
| 26 | +5. **Memorable through craft, not gimmicks** — The thing people remember should be "this is really well-made" not "it has a cool gradient." |
0 commit comments