Does this skill help with accessibility compliance?

Yes, it includes built-in WCAG contrast checks to ensure your color palettes meet AA or AAA standards for normal and large text.

Does the skill support different visual styles?

Yes, it includes presets for Modern, Classic, and Playful styles which automatically adjust border radii, font choices, and shadow depths.

What formats can I export design tokens in?

The skill supports exporting tokens in JSON, CSS custom properties, and SCSS variables, making it compatible with most modern web workflows.

Can I integrate these tokens with Tailwind CSS?

Absolutely. You can export tokens as JSON and easily import them into your tailwind.config.js to maintain a single source of truth.

UI Design System Toolkit

Name: UI Design System Toolkit
Author: alirezarezvani

byalirezarezvani

•

9,958

•

Design Tools

Generates professional design tokens, typography scales, and component documentation to bridge the gap between UI design and frontend development.

This skill empowers developers and designers to build cohesive visual identities by automating the creation of design tokens, responsive typography, and component architectures. It handles complex calculations for fluid scales, ensures WCAG accessibility compliance, and provides ready-to-use exports for CSS, SCSS, and Tailwind, making it an essential tool for maintaining consistency across large-scale web projects and facilitating seamless developer handoff from tools like Figma.

Key Features

01WCAG accessibility checking for color contrast compliance

02Standardized component architecture based on Atomic Design principles

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

04Multi-format exports (JSON, CSS, SCSS) for various frontend frameworks

059,958 GitHub stars

06Responsive design calculations for fluid typography and breakpoints

Use Cases

01Starting a new web project with a consistent, brand-aligned design system

02Streamlining the handoff process between UI designers and frontend engineering teams

03Refactoring an existing component library with standardized tokens and responsive scales

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Key Features

01WCAG accessibility checking for color contrast compliance

02Standardized component architecture based on Atomic Design principles

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

04Multi-format exports (JSON, CSS, SCSS) for various frontend frameworks

059,958 GitHub stars

06Responsive design calculations for fluid typography and breakpoints

Use Cases

01Starting a new web project with a consistent, brand-aligned design system

02Streamlining the handoff process between UI designers and frontend engineering teams

03Refactoring an existing component library with standardized tokens and responsive scales

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT