SaaS Workspace Design
Use this skill for productized web applications where users spend time doing work, not just reading marketing content.
Goal: reduce chrome, clarify workflow, and make high-frequency actions feel fast. Optimize for repeat use, navigation memory, and state predictability.
Workspace model
Design around these layers:
- Navigation: workspace switcher, section nav, contextual tabs
- Primary surface: the object, canvas, table, timeline, or editor
- Secondary context: inspector, activity, comments, details, or docs
- Action layer: create, save, publish, assign, or share
Core rules
- Start from the main job to be done, not from a dashboard card grid.
- Use persistent navigation for repeated workflows.
- Distinguish global navigation from page-level tabs and from inline controls.
- Prefer layout-based grouping over nested cards.
- Use one accent color for key actions and states; let typography and spacing do the rest.
- Dense is acceptable when scan order stays obvious.
State design
- Show draft, saved, syncing, error, and published states clearly.
- If collaboration exists, expose presence, ownership, and recent change context.
- Empty states should suggest the first meaningful action, not generic welcome copy.
- Long-running actions need progress, cancel, or background execution cues.
Settings and forms
- Group settings by mental model, not backend schema.
- Keep destructive or billing-sensitive controls separated from routine toggles.
- Use inline helper text when the consequence is not obvious.
- For advanced settings, default to progressive disclosure.
Interaction
- Keyboard shortcuts, quick search, and command surfaces matter for expert workflows.
- Drawers and panels should preserve context rather than force hard page switches.
- Use motion to reinforce structure: panel reveal, tab transition, save feedback.
Reject these failures
- Marketing copy pasted into product headers
- Equal visual weight for every module
- Sidebars full of unclear icons
- Multiple sticky bars fighting for attention
- Settings pages that mirror raw JSON or API names
Final checks
- Can a repeat user build navigation memory after one session?
- Is the main work surface obviously more important than chrome?
- Are key system states visible without requiring refresh or guesswork?
1---2name: saas-workspace-design3description: Use when the task is to design a SaaS product UI, B2B web app, 工作台, product workspace, settings-heavy application, or multi-pane web tool. Focus on workflow clarity, navigation depth, density balance, state design, and operational efficiency.4---56# SaaS Workspace Design78Use this skill for productized web applications where users spend time doing work, not just reading marketing content.910Goal: reduce chrome, clarify workflow, and make high-frequency actions feel fast. Optimize for repeat use, navigation memory, and state predictability.1112## Workspace model1314Design around these layers:15161. Navigation: workspace switcher, section nav, contextual tabs172. Primary surface: the object, canvas, table, timeline, or editor183. Secondary context: inspector, activity, comments, details, or docs194. Action layer: create, save, publish, assign, or share2021## Core rules2223- Start from the main job to be done, not from a dashboard card grid.24- Use persistent navigation for repeated workflows.25- Distinguish global navigation from page-level tabs and from inline controls.26- Prefer layout-based grouping over nested cards.27- Use one accent color for key actions and states; let typography and spacing do the rest.28- Dense is acceptable when scan order stays obvious.2930## State design3132- Show draft, saved, syncing, error, and published states clearly.33- If collaboration exists, expose presence, ownership, and recent change context.34- Empty states should suggest the first meaningful action, not generic welcome copy.35- Long-running actions need progress, cancel, or background execution cues.3637## Settings and forms3839- Group settings by mental model, not backend schema.40- Keep destructive or billing-sensitive controls separated from routine toggles.41- Use inline helper text when the consequence is not obvious.42- For advanced settings, default to progressive disclosure.4344## Interaction4546- Keyboard shortcuts, quick search, and command surfaces matter for expert workflows.47- Drawers and panels should preserve context rather than force hard page switches.48- Use motion to reinforce structure: panel reveal, tab transition, save feedback.4950## Reject these failures5152- Marketing copy pasted into product headers53- Equal visual weight for every module54- Sidebars full of unclear icons55- Multiple sticky bars fighting for attention56- Settings pages that mirror raw JSON or API names5758## Final checks5960- Can a repeat user build navigation memory after one session?61- Is the main work surface obviously more important than chrome?62- Are key system states visible without requiring refresh or guesswork?
mr-q526