Does it support different design styles?

Yes, it includes presets for 'Modern', 'Classic', and 'Playful' styles, which automatically adjust border radii, fonts, and shadow depths.

What formats does it export for developers?

It supports JSON, CSS custom properties, SCSS variables, and provides integration examples for Tailwind CSS and styled-components.

How does it handle responsive design?

The skill calculates fluid typography using CSS clamp functions and provides standardized breakpoint scales and responsive spacing tokens.

Can 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.

UI Design System Toolkit

Name: UI Design System Toolkit
Author: oabdelmaksoud

byoabdelmaksoud

0•

デザインツール

Generates professional design tokens, component architectures, and developer handoff documentation to ensure visual consistency across frontend projects.

This skill empowers developers and UI designers to build robust, accessible, and scalable design systems directly within Claude. It provides automated tools for generating design tokens—including color palettes, typography scales, and spacing systems—based on a single brand color and preferred style preset. By following Atomic Design principles and calculating fluid responsive scales, the skill bridges the gap between design and development, facilitating seamless handoffs through multiple export formats like CSS, SCSS, and JSON while ensuring WCAG accessibility compliance.

主な機能

01Automated design token generation from brand hex codes

02WCAG-compliant color palette and contrast validation

03Atomic design component architecture and documentation

04Multi-format exports for Tailwind, CSS, SCSS, and JSON

05Fluid typography and responsive breakpoint calculations

060 GitHub stars

ユースケース

01Standardizing developer-designer collaboration through automated token documentation

02Creating a complete design system from a single brand color

03Establishing consistent typography and spacing scales for a web application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add oabdelmaksoud/superclaw ui-design-system

For use in Claude.ai and ChatGPT

主な機能

01Automated design token generation from brand hex codes

02WCAG-compliant color palette and contrast validation

03Atomic design component architecture and documentation

04Multi-format exports for Tailwind, CSS, SCSS, and JSON

05Fluid typography and responsive breakpoint calculations

060 GitHub stars

ユースケース

01Standardizing developer-designer collaboration through automated token documentation

02Creating a complete design system from a single brand color

03Establishing consistent typography and spacing scales for a web application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add oabdelmaksoud/superclaw ui-design-system

For use in Claude.ai and ChatGPT