Does it support accessibility standards?

Absolutely. It includes built-in WCAG contrast validation to ensure your primary, secondary, and semantic color combinations meet AA or AAA standards.

What typography system does it use?

It defaults to a 1.25x (Major Third) scale for harmonic hierarchy and supports CSS clamp-based fluid typography for smooth responsive transitions.

Can I export tokens for specific frameworks?

Yes, the skill supports exports in JSON for Figma Tokens Studio, CSS custom properties, and SCSS variables, making it compatible with Tailwind, React, and styled-components.

How does the skill generate color palettes?

It takes a base hex color and applies mathematical scaling for brightness and saturation to create functional shades for backgrounds, borders, text, and interactive states.

UI Design System Toolkit

Name: UI Design System Toolkit
Author: oabdelmaksoud

byoabdelmaksoud

0•

デザインツール

Generates production-ready design tokens, component architectures, and responsive systems to streamline designer-developer collaboration.

The UI Design System skill transforms Claude into a Senior UI Designer capable of building cohesive visual languages from scratch. It automates the creation of accessibility-compliant color palettes, fluid typography scales, and 8pt grid systems while providing structured component documentation and multi-format developer handoff files. Whether you are establishing a new design system or maintaining visual consistency across a complex application, this skill ensures technical precision through automated calculations and framework-agnostic exports for CSS, SCSS, and JSON for tools like Figma.

主な機能

01Fluid typography and responsive breakpoint calculations

02Accessible color palette creation with WCAG contrast validation

03Automated design token generation (JSON, CSS, SCSS)

04Atomic design component architecture and documentation

05Seamless developer handoff with Figma sync support

060 GitHub stars

ユースケース

01Scaling a brand identity into a comprehensive web-ready design system

02Building an accessible and responsive component library from a single primary color

03Standardizing design-to-code workflows using cross-platform design tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add oabdelmaksoud/agention ui-design-system

For use in Claude.ai and ChatGPT

主な機能

01Fluid typography and responsive breakpoint calculations

02Accessible color palette creation with WCAG contrast validation

03Automated design token generation (JSON, CSS, SCSS)

04Atomic design component architecture and documentation

05Seamless developer handoff with Figma sync support

060 GitHub stars

ユースケース

01Scaling a brand identity into a comprehensive web-ready design system

02Building an accessible and responsive component library from a single primary color

03Standardizing design-to-code workflows using cross-platform design tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add oabdelmaksoud/agention ui-design-system

For use in Claude.ai and ChatGPT