Overview
Use this skill to design or review product UI with a calm, premium, system-first approach. It is intended for application UI and real workflow surfaces, not decorative concept art.
Workflow
- Define the screen purpose, user goal, and single primary action.
- Choose the page structure before styling:
- top bar or context row
- intro or summary
- main working area
- supporting panels
- secondary details
- Apply the design rules from references/design-system-skills.md.
- Implement with reusable components, semantic tokens, responsive layout, and real states.
- Final-check the screen:
- hierarchy is obvious
- accents are restrained
- cards feel like one family
- empty, loading, and error states exist
- mobile layout still works
Defaults
- Neutral-first surfaces
- Premium SaaS product tone
- Dark-first with light-mode parity
- One clear primary action
- Reusable components over one-off div soup
- Semantic colors only for status
Use This Skill To
- design internal product pages, dashboards, builders, settings, editors, tables, modals, and drawers
- review UI hierarchy, spacing, tokens, states, and responsiveness
- refactor noisy or inconsistent UI toward one coherent system
- decide when to use cards, tabs, chips, alerts, tables, and side panels
References
Read references/design-system-skills.md when you need the full system:
- design philosophy
- tokens
- spacing, radius, shadows, typography
- desktop, tablet, and mobile layout rules
- component rules
- AI product patterns
- accessibility and responsiveness
Constraints
- Prefer existing product patterns when working in an established codebase.
- Do not introduce decorative styles that break the system just to make one screen “special.”
- Avoid colorful or noisy dashboards unless explicitly requested.
- Keep output production-ready, not concept art.