What are the available design style presets?

It includes three presets: Modern (Inter/8px radius), Classic (Helvetica/4px radius), and Playful (Poppins/16px radius), each with customized shadow and typography settings.

How does it handle responsive typography?

It calculates fluid typography scales using the CSS clamp() function, allowing your text to scale smoothly between defined minimum and maximum viewport widths.

What export formats does the UI Design System skill support?

The skill supports JSON (for Figma and JavaScript), CSS custom properties, and SCSS variables, ensuring compatibility with virtually any modern frontend framework.

Can I use this with Tailwind CSS?

Absolutely. The skill generates JSON token files that can be directly imported into a tailwind.config.js file to customize your theme's colors, fonts, and spacing.

Does this skill check for web accessibility compliance?

Yes, it automatically validates color contrast against WCAG AA standards (4.5:1 for normal text) and ensures semantic colors have defined contrast values.

UI Design System Toolkit

Name: UI Design System Toolkit
Author: oabdelmaksoud

byoabdelmaksoud

0•

Design Tools

Generates comprehensive UI design tokens, component architectures, and developer handoff documentation to ensure visual consistency across web projects.

The UI Design System skill empowers designers and frontend developers to rapidly build and maintain robust design systems. By automating the generation of design tokens—including color palettes, fluid typography, and spacing scales—it bridges the gap between design vision and technical implementation. It supports multiple design styles like modern, classic, and playful, calculates responsive breakpoints, ensures WCAG accessibility compliance, and exports production-ready tokens in CSS, SCSS, and JSON formats for seamless integration with frameworks like React, Tailwind CSS, and Figma.

Key Features

01Production-ready exports for CSS, SCSS, JSON, and Figma Tokens Studio

02Fluid typography and responsive breakpoint calculations using CSS clamp

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

040 GitHub stars

05Atomic design-based component documentation and variant mapping

06Built-in WCAG 2.1 accessibility and color contrast validation

Use Cases

01Converting static brand assets into accessible color palettes with semantic naming conventions

02Initializing a new web project with a standardized, brand-aligned design system from a single hex code

03Streamlining the developer handoff process by automating style-to-code synchronization

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

Key Features

01Production-ready exports for CSS, SCSS, JSON, and Figma Tokens Studio

02Fluid typography and responsive breakpoint calculations using CSS clamp

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

040 GitHub stars

05Atomic design-based component documentation and variant mapping

06Built-in WCAG 2.1 accessibility and color contrast validation

Use Cases

01Converting static brand assets into accessible color palettes with semantic naming conventions

02Initializing a new web project with a standardized, brand-aligned design system from a single hex code

03Streamlining the developer handoff process by automating style-to-code synchronization