Generates comprehensive design system documentation and UI/UX guidelines for consistent frontend development.
The Design System Generator is a specialized skill designed to bridge the gap between design and code by automating the creation of professional UI/UX documentation. It guides developers through a structured brand interview to establish identity, then generates harmonious color palettes, typography scales, spacing systems, and component style guides. With built-in scripts for exporting palettes to Tailwind CSS or CSS variables, this skill ensures that your frontend projects remain visually consistent, accessible, and easy to maintain from the very first line of code.
Key Features
01Automated color palette generation including primary, secondary, and semantic shades.
02Interactive brand discovery workflow to define tone, manner, and visual identity.
03Standardized typography scales for both Korean and English fonts (Pretendard, Inter).
04Pre-configured spacing, breakpoint, and layout systems for responsive design.
05Exportable formats for Tailwind CSS configuration and native CSS variables.
060 GitHub stars
Use Cases
01Bootstrapping a new product with a professional-grade UI foundation and documentation.
02Converting fragmented styles in an existing project into a unified design system.
03Generating WCAG-compliant color schemes and accessibility-focused UI guidelines.
