What are the style presets available?

The skill includes 'modern', 'classic', and 'playful' presets which automatically adjust border radii, font stacks, and shadow depths.

What export formats does the UI Design System skill support?

The skill can export design tokens in JSON, CSS custom properties, and SCSS variables, making it compatible with almost any frontend framework.

Does it work with Tailwind CSS?

Absolutely. It can generate JSON token files that are easily imported into a tailwind.config.js file to customize your theme.

Can this skill help with web accessibility?

Yes, it includes automated contrast checking to ensure your generated color palettes meet WCAG AA and AAA standards.

UI Design System Toolkit

Name: UI Design System Toolkit
Author: micsapp

bymicsapp

0•

Design Tools

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

This skill empowers designers and developers to maintain visual consistency by generating robust design token systems from a single brand color. It automates technical tasks like calculating WCAG-compliant color scales, fluid typography, and 8pt grid spacing while providing structured component architecture and multi-format exports for CSS, SCSS, and Tailwind. It serves as a bridge between high-level design concepts and production-ready code, ensuring that accessibility and responsive principles are baked into the foundation of every project.

Key Features

01Fluid typography and responsive breakpoint configuration using CSS clamp

02Multi-format exports for CSS Variables, SCSS, and Tailwind CSS configurations

03WCAG-compliant color palette calculation with built-in accessibility validation

040 GitHub stars

05Automated design token generation for colors, typography, spacing, and shadows

06Atomic design component architecture and documentation templates

Use Cases

01Generating a production-ready design system starting from a single brand hex code

02Standardizing spacing and typography across a large-scale frontend project

03Bridging the gap between Figma designs and developer implementation with synced JSON tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills ui-design-system

For use in Claude.ai and ChatGPT

Key Features

01Fluid typography and responsive breakpoint configuration using CSS clamp

02Multi-format exports for CSS Variables, SCSS, and Tailwind CSS configurations

03WCAG-compliant color palette calculation with built-in accessibility validation

040 GitHub stars

05Automated design token generation for colors, typography, spacing, and shadows

06Atomic design component architecture and documentation templates

Use Cases

01Generating a production-ready design system starting from a single brand hex code

02Standardizing spacing and typography across a large-scale frontend project

03Bridging the gap between Figma designs and developer implementation with synced JSON tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills ui-design-system

For use in Claude.ai and ChatGPT