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

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

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.

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.