design-system

This is a skill for production-grade UI design. It supports consistent and scalable frontend development through clear design tokens, layout rules, motion guidelines, and accessibility checks. Section-by-section component structure : Motion/Interaction notes : Prompt : Expected output : Prompt : Expected output : Prompt : Expected output : Cause : No visual direction or tokens Solution : Provide style references and palette Cause : No responsive grid rules Solution : Define breakpoints and stacking behavior Cause : Tokens not in use Solution : Reference all values from tokens #frontend #design #ui #ux #typography #animation #design-tokens #accessibility - Production-quality UI needed : Generate high-quality UI from prompts - Consistent design language : Consistent visual language across screens - Typography/layout/motion guide : Systematic design system - Section layout with visual direction - Typography scale (H1: 48px → Body: 16px) - Color palette with gradient definitions - Motion/interaction specifications - Component list with props - Grid layout (12-column) - Component breakdown (cards, tables, filters) - Visual hierarchy documentation - Responsive behavior specification - Step-by-step flow diagram - Form field specifications - Error/success state designs - Touch-friendly sizing (min 44px targets) - Start with content hierarchy : UI follows content priority - Consistent...