Claude Design pack — shell¶
Target
This page describes intended behaviour or structure. No implementation is claimed unless a section is explicitly marked Current implementation or Evidence.
Pack id AIF-UX-SHELL · reads with the master brief.
1. Alignment¶
The shell hosts every work area pack. Its behaviour is fixed by shell; this pack asks for its visual and interaction design, not new behaviour.
2. Design prompt¶
Design the shell at 1440×900 and 390×844 in light and dark, en and he (RTL): top bar with switchers, palette, notifications and profile; the rail with seven work areas collapsing to icons; the main region with breadcrumb, scope badge, freshness strip and the screen composition. Show the scope-switch confirmation when unsaved changes exist, the permission-denied explanation, the degraded-source strip and the stale-version conflict sheet.
3. Sources¶
Shell · information architecture · design-system alignment · prototype destinations command and admin of the Factory prototype; the Config Platform prototype's RTL toggle and grant matrix.
4. Personas, routes and layout¶
All seven personas; root route /work; rail entries filtered by the permissions catalog; detail routes with stable keys.
5. Interaction¶
Switchers validate server-side and re-snapshot permissions; the palette runs commands with the same gates as buttons; notifications open the subject under current permissions; realtime updates announce politely in live regions.
6. Mock data¶
The fixtures: organization, two tenants, one project, four environments; notifications of every kind and importance.
7. State and permission matrix¶
| Element | States |
|---|---|
| Switcher | loading, available, denied (explained), unsaved-changes prompt |
| Rail entry | visible, hidden (no permission), badge count |
| Freshness strip | fresh, stale with lag, degraded source named, unknown |
| Notification | unread, read, dismissed, action-required, critical |
| Realtime | connected, reconnecting with resume, refresh required |
8. Accessibility criteria¶
Landmarks for top bar, rail and main; skip links; focus order top bar → rail → main; palette opens with a shortcut and traps focus; RTL mirrors rail side and chevrons; reduced motion disables rail and sheet transitions.
9. Expansion instructions¶
Keep the design-system spine and the seven-status palette; do not add top-level destinations beyond the seven work areas; future-phase elements (agent-assisted Studio, tenant branding) stay designed with a Proposed badge.