ui-ux-design-system

UI UX Design System

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

1. Define the screen purpose, user goal, and single primary action.
2. Choose the page structure before styling:
   • top bar or context row
   • intro or summary
   • main working area
   • supporting panels
   • secondary details
3. Apply the design rules from references/design-system-skills.md.
4. Implement with reusable components, semantic tokens, responsive layout, and real states.
5. 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.