What design styles are supported?

The generator includes presets for 'Modern', 'Classic', and 'Playful' styles, adjusting border radii, fonts, and shadow depths accordingly.

Can I export design tokens to my existing project?

Yes, the skill supports exporting tokens in JSON, CSS custom properties, and SCSS variables for easy integration into any web project.

Does this skill handle accessibility?

Absolutely. It includes automated WCAG contrast checking to ensure your color palettes meet AA or AAA standards for web accessibility.

Can I use this with Figma?

Yes, the JSON export is compatible with the Tokens Studio plugin for Figma, allowing you to sync your code-based tokens with your design files.

UI Design System Generator

Name: UI Design System Generator
Author: borghei

byborghei

•

Design Tools

Generates comprehensive design tokens, component architectures, and developer handoff documentation to ensure visual consistency across web projects.

The UI Design System skill is a specialized toolkit for Senior UI Designers and Frontend Engineers designed to bridge the gap between design and code. It automates the creation of professional design token systems—including color palettes, typography scales, and 8pt grid spacing—while providing structured workflows for component library architecture and responsive design. Whether you are starting a new project or maintaining an existing one, this skill facilitates seamless developer handoff by exporting tokens to CSS, SCSS, or JSON and ensuring all styles meet WCAG accessibility standards.

Key Features

01Structured component architecture templates based on Atomic Design principles

02Accessibility validation with WCAG AA/AAA contrast checking

03Automated design token generation for colors, typography, and spacing

04Fluid typography and responsive breakpoint calculations

05Multi-format export supporting CSS, SCSS, and JSON for Figma integration

0650 GitHub stars

Use Cases

01Converting a single brand color into a full, accessible UI color palette

02Building a scalable design system for a new enterprise web application

03Standardizing component styles and documentation for a multi-developer team

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add borghei/claude-skills ui-design-system

For use in Claude.ai and ChatGPT

Download Skill