Does this skill help with web accessibility?

Yes, it includes built-in capabilities for accessibility compliance to ensure your design system meets standard usability requirements.

What file formats does the token generator support?

The toolkit supports JSON, CSS, and SCSS formats, making it compatible with most modern frontend frameworks and build tools.

Can I customize the visual style of the generated design tokens?

Yes, you can choose between different preset styles such as modern, classic, or playful when generating your brand palettes.

How does this skill facilitate developer handoff?

It generates technical documentation and production-ready tokens that developers can immediately integrate into their codebases, reducing manual translation errors.

Is it suitable for responsive web design?

Absolutely. It handles responsive design calculations and provides standardized breakpoints to ensure consistency across different screen sizes.

UI Design System Toolkit

Name: UI Design System Toolkit
Author: alirezarezvani

byalirezarezvani

•

1,039

•

Design Tools

Automates the creation of scalable design systems, including design token generation and comprehensive developer handoff documentation.

This Claude Code skill empowers designers and developers to build robust UI design systems from scratch or maintain existing ones with precision. It automates the generation of design tokens for colors, typography, and spacing while ensuring accessibility compliance and creating clear component documentation. By bridging the gap between design vision and implementation, it streamlines the handoff process and maintains visual consistency across complex, cross-platform projects.

Key Features

01Comprehensive accessibility compliance auditing for UI components

02Modular typography scaling and 8pt spacing grid system setup

03Streamlined developer handoff documentation and component architecture

041,039 GitHub stars

05Automated design token generation for JSON, CSS, and SCSS formats

06Responsive design calculations and breakpoint definition

Use Cases

01Refactoring legacy CSS into a modern, tokenized design architecture

02Ensuring WCAG accessibility standards across a complex component library

03Building a multi-format design system for a new cross-platform product

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

Download Skill