Does this skill help with accessibility?

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

Is it compatible with Tailwind CSS?

Yes, the skill generates JSON tokens that can be easily mapped to your tailwind.config.js file for a theme-driven development workflow.

What formats can I export design tokens in?

The skill supports exporting tokens in JSON, CSS custom properties, and SCSS variables, making it compatible with most modern web frameworks and Figma plugins.

Can I customize the design style?

Absolutely. You can choose between 'modern', 'classic', or 'playful' presets to automatically adjust border radii, typography selections, and shadow styles.

UI Design System Toolkit

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

byzhangzhang-111-i

0•

Herramientas de Diseño

Automates the creation and documentation of comprehensive UI design systems, from color palettes to developer handoff.

This skill empowers developers and designers to build robust, scalable design systems directly within Claude. It provides automated workflows for generating accessible color palettes, calculating fluid typography scales, and defining 8pt grid systems. By streamlining the generation of design tokens and mapping them to component architectures, this tool bridges the gap between design vision and production code. It supports multiple export formats like CSS, SCSS, and JSON, ensuring visual consistency across platforms and facilitating seamless collaboration between design and engineering teams.

Características Principales

01Fluid typography and responsive breakpoint calculations

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

03Automated design token generation from brand hex codes

04Component architecture mapping (Atoms, Molecules, Organisms)

050 GitHub stars

06WCAG-compliant color scale and contrast validation

Casos de Uso

01Preparing design-to-code handoff for frontend engineering teams

02Building a new design system from a single brand color

03Scaling a component library with consistent spacing and typography

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

Características Principales

01Fluid typography and responsive breakpoint calculations

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

03Automated design token generation from brand hex codes

04Component architecture mapping (Atoms, Molecules, Organisms)

050 GitHub stars

06WCAG-compliant color scale and contrast validation

Casos de Uso

01Preparing design-to-code handoff for frontend engineering teams

02Building a new design system from a single brand color

03Scaling a component library with consistent spacing and typography

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