| name | ui-ux-design-system |
| description | Premium neutral-first UI/UX design system and frontend workflow for product interfaces. Use when designing or reviewing pages, components, dashboards, settings screens, editors, forms, tables, modals, drawers, or interaction patterns that should feel calm, premium, responsive, system-driven, and production-ready. Also use when making design decisions about hierarchy, tokens, spacing, dark/light parity, component states, and cross-page consistency. |
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
- 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.
