Overview
Use this skill to design calm, premium SaaS UI where typography and flex/grid layout carry the hierarchy. Favor readable product structure over decorative styling.
Workflow
- Define the screen purpose, main action, and primary vs secondary zones.
- Start with layout first:
- flex vs grid
- sticky vs flowing regions
- main vs supporting panels
- desktop vs mobile stacking
- Establish typography hierarchy before decoration.
- Apply neutral surfaces, restrained accent use, and consistent card rhythm.
- Check states, spacing, and responsiveness.
- Read references/typography-flex.md for the detailed rules when needed.
Defaults
- Typography drives hierarchy
- Flex/grid drives structure
- Neutral surfaces with restrained accent
- One clear primary action per zone
- Reusable patterns over one-off layouts
- Settings and builder pages should feel product-grade, not admin-raw
Use This Skill To
- redesign SaaS settings pages
- improve dashboard or editor layout rhythm
- fix misalignment, cramped cards, or noisy spacing
- choose between stacked, split, and sticky panel layouts
- make internal product UI feel premium and production-ready
References
Read references/typography-flex.md for:
- typography hierarchy rules
- flex and grid layout recipes
- section and card composition
- settings page structure
- common UI anti-patterns
Constraints
- Prefer existing product tokens and components when present.
- Keep output responsive and production-ready.
- Avoid decorative clutter, loud color, and concept-art styling.