Does it support fluid typography for responsive design?

Absolutely. The skill calculates fluid scales using the CSS clamp function, allowing your typography to scale smoothly between mobile and desktop viewports.

What file formats are supported for developer handoff?

You can export design tokens in several formats, including CSS custom properties, SCSS variables, and JSON for integration with tools like Figma, Tailwind, or styled-components.

How does this skill help with web accessibility?

The skill includes built-in WCAG contrast checking to ensure your generated color palettes meet AA or AAA standards for text readability and UI accessibility.

Can I choose different visual styles for my system?

Yes, the toolkit supports style presets such as 'modern', 'classic', and 'playful', which automatically adjust border radii, font choices, and shadow depths.

UI Design System Toolkit

Name: UI Design System Toolkit
Author: zhangzhang-111-i

byzhangzhang-111-i

0•

Design Tools

Generates production-ready design tokens, typography scales, and component architectures to streamline UI/UX development and design-to-code handoff.

The UI Design System skill is a comprehensive toolkit for developers and designers looking to build scalable, consistent visual languages. It automates the creation of design tokens from brand colors, calculates fluid typography and responsive spacing systems, and ensures accessibility through built-in WCAG contrast validation. By providing structured workflows for component architecture and multi-format exports (CSS, SCSS, JSON), it bridges the gap between design concepts and implementation, making it an essential tool for maintaining design integrity across large-scale frontend projects.

Key Features

01Fluid typography and responsive breakpoint calculations

02Atomic design-based component architecture and documentation

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

04Multi-format export (CSS, SCSS, JSON) for developer handoff

050 GitHub stars

06WCAG AA/AAA contrast validation for accessible color palettes

Use Cases

01Converting static design requirements into organized CSS/SCSS variables

02Bootstrapping a new design system from a single primary brand color

03Standardizing component APIs and variants for a shared library

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add zhangzhang-111-i/claude-skills111 ui-design-system

For use in Claude.ai and ChatGPT

Key Features

01Fluid typography and responsive breakpoint calculations

02Atomic design-based component architecture and documentation

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

04Multi-format export (CSS, SCSS, JSON) for developer handoff

050 GitHub stars

06WCAG AA/AAA contrast validation for accessible color palettes

Use Cases

01Converting static design requirements into organized CSS/SCSS variables

02Bootstrapping a new design system from a single primary brand color

03Standardizing component APIs and variants for a shared library

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add zhangzhang-111-i/claude-skills111 ui-design-system

For use in Claude.ai and ChatGPT