Does this skill help with responsive web design?

Yes, it includes automated calculations for responsive breakpoints and typography scales to ensure visual consistency across all device sizes.

What formats can I export design tokens in?

The toolkit supports JSON, CSS, and SCSS formats, making it compatible with most modern web frameworks and design-to-code pipelines.

Is accessibility included in the design system?

The skill includes capabilities for accessibility compliance checking to ensure your component architecture meets standard usability requirements.

Can I generate different brand styles?

Absolutely. You can specify different style presets such as 'modern', 'classic', or 'playful' when generating your design tokens.

UI Design System Toolkit

Name: UI Design System Toolkit
Author: nikhillinit

bynikhillinit

0•

디자인 도구

Generates professional design tokens and component architectures to streamline the transition from brand concept to production-ready UI code.

This skill provides a comprehensive environment for Senior UI Designers and Frontend Developers to build, document, and maintain scalable design systems. It automates the creation of modular typography scales, 8pt spacing grids, and complete color palettes from a single brand color input. By providing tools for accessibility compliance and exporting tokens in CSS, SCSS, and JSON formats, it ensures visual consistency across applications while significantly reducing the friction in developer handoff workflows.

주요 기능

010 GitHub stars

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

03Pre-configured design styles including modern, classic, and playful themes

04Accessibility compliance auditing for UI components

05Built-in 8pt spacing grid and modular typography scaling

06Multi-format exports including JSON, CSS, and SCSS variables

사용 사례

01Standardizing design tokens across a large-scale enterprise application

02Automating the generation of responsive CSS foundations based on brand guidelines

03Bootstrapping a new design system for a product launch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nikhillinit/updog_restore ui-design-system

For use in Claude.ai and ChatGPT

주요 기능

010 GitHub stars

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

03Pre-configured design styles including modern, classic, and playful themes

04Accessibility compliance auditing for UI components

05Built-in 8pt spacing grid and modular typography scaling

06Multi-format exports including JSON, CSS, and SCSS variables

사용 사례

01Standardizing design tokens across a large-scale enterprise application

02Automating the generation of responsive CSS foundations based on brand guidelines

03Bootstrapping a new design system for a product launch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nikhillinit/updog_restore ui-design-system

For use in Claude.ai and ChatGPT