Overview
Use this skill to design real SaaS product UI with a system-first approach. It is for application surfaces and workflow-heavy pages, not decorative concept work.
Workflow
- Define the user goal, the current state the page must show, and the single primary action.
- Choose the structure before styling:
- page intro
- current-state summary
- main configuration or working area
- supporting panels
- secondary details
- Build the layout with flex or grid based on content behavior:
- flex for aligned controls, toolbars, settings rows, action groups
- grid for repeated cards, summary tiles, split lanes, and multi-column forms
- Apply the full design system from references/saas-ux-design-system-skills.md.
- Keep typography, spacing, surfaces, and states consistent across the full page.
- Final-check:
- hierarchy is obvious at a glance
- accents are restrained
- cards feel like one family
- empty/loading/error states exist where needed
- mobile layout stacks cleanly
Defaults
- Neutral-first surfaces
- Premium SaaS product tone
- Dark-first with light-mode parity
- One clear primary action per section
- Reusable components over one-off markup
- Typography and spacing carry hierarchy
- Flex/grid structure chosen deliberately, not by habit
- Semantic colors only for status
Use This Skill To
- design internal product pages, dashboards, settings screens, editors, and builders
- review or refactor noisy UI into one coherent product system
- decide page hierarchy, card composition, panel structure, and control density
- improve typography rhythm, layout alignment, and visual consistency
- choose when to use cards, tabs, chips, forms, tables, drawers, and sidebars
References
Read these references as needed, in this order for broad UI work:
- references/saas-ux-design-system-skills.md Full product UI system, philosophy, tokens, component rules, responsiveness, and defaults.
- references/typography-system.md Typography hierarchy, scale, weight, spacing, and SaaS readability rules.
- references/flexibility-system.md Flexibility and responsive-layout rules for resilient SaaS UI.
- references/design-tokens.css Concrete token defaults for color, type, spacing, radius, and depth.
- references/component-spec.md Shared component rules and expectations for buttons, inputs, navigation, tables, and more.
- references/page-blueprints.md Page-level composition patterns for landing pages, pricing, features, docs, dashboards, builders, settings, and data views.
- references/video-alignment.md Notes showing how the bundle aligns with the original typography/flexibility direction.
Use assets/default-saas-tokens.css when the task needs a ready token starter file rather than only conceptual guidance.
Constraints
- Prefer existing product patterns and tokens when working inside an established app.
- Do not invent decorative styles that break the system just to make one screen feel different.
- Avoid loud color, visual noise, and concept-art styling unless explicitly requested.
- Keep output production-ready and workflow-oriented.