Does this skill help with web accessibility?

Yes, it includes built-in WCAG contrast checking to ensure your generated color palettes meet AA or AAA standards for text legibility.

Can I use these tokens with Tailwind CSS?

Absolutely. The skill includes specific workflows and examples for mapping your generated tokens directly into a tailwind.config.js file.

What are the available design style presets?

You can choose between 'modern', 'classic', and 'playful' styles, which automatically adjust typography choices, border radii, and shadow depths.

How does it handle responsive design?

It provides tools to calculate fluid typography using CSS clamp formulas and defines a standardized 8pt grid system for consistent spacing across breakpoints.

What file formats does the design token generator support?

The tool supports exporting design tokens in JSON, CSS custom properties, and SCSS variables to accommodate various frontend tech stacks.

UI Design System Toolkit

Name: UI Design System Toolkit
Author: JantonioFC

byJantonioFC

•

デザインツール

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

The UI Design System skill empowers developers and designers to build robust, scalable design systems directly within Claude Code. It automates the creation of design tokens—including color palettes, typography scales, and spacing systems—based on specific brand styles like modern, classic, or playful. By providing structured workflows for component hierarchy using Atomic Design principles and responsive calculations like fluid typography, it bridges the gap between design intent and production-ready code. Whether you are bootstrapping a new project's visual foundation or documenting a complex component library, this skill provides the tools and best practices needed for professional-grade UI development and seamless developer handoff.

主な機能

01Fluid typography and responsive breakpoint calculations

022 GitHub stars

03Developer handoff tools for React, Tailwind CSS, and Figma integration

04Atomic Design component mapping and documentation templates

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

06WCAG-compliant color palette generation and contrast validation

ユースケース

01Generating production-ready CSS variables and documentation for developer handoff

02Calculating fluid typography and responsive spacing scales for multi-device applications

03Bootstrapping a new design system from a single brand hex color and style preset

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank ui-design-system

For use in Claude.ai and ChatGPT

主な機能

01Fluid typography and responsive breakpoint calculations

022 GitHub stars

03Developer handoff tools for React, Tailwind CSS, and Figma integration

04Atomic Design component mapping and documentation templates

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

06WCAG-compliant color palette generation and contrast validation

ユースケース

01Generating production-ready CSS variables and documentation for developer handoff

02Calculating fluid typography and responsive spacing scales for multi-device applications

03Bootstrapping a new design system from a single brand hex color and style preset