What design styles are supported?

The tool includes presets for 'modern', 'classic', and 'playful' styles, which automatically adjust border radii, typography pairings, and shadow depths.

Does this skill support accessibility standards?

Yes, it includes built-in WCAG AA and AAA contrast checks to ensure that generated color palettes meet international accessibility requirements.

Can I use these tokens with Figma?

Absolutely. By exporting tokens to JSON, you can use plugins like Tokens Studio for Figma to keep your design mockups and code perfectly in sync.

What formats can this skill export tokens in?

The skill supports exporting design tokens in JSON, CSS custom properties, and SCSS variables, making it compatible with React, Tailwind, and traditional stylesheets.

UI Design System Toolkit

Name: UI Design System Toolkit
Author: oabdelmaksoud

byoabdelmaksoud

0•

Design Tools

Generates comprehensive design tokens, component architectures, and responsive systems to streamline the bridge between UI design and frontend development.

The UI Design System skill transforms brand guidelines into production-ready assets by automating the creation of design tokens, color palettes, and typography scales. It provides structured workflows for building atomic component libraries, calculating fluid responsive layouts, and generating developer handoff documentation in CSS, SCSS, and JSON formats. This skill is essential for maintaining visual consistency across large-scale projects and ensuring accessibility compliance through built-in WCAG contrast checks and 8pt grid system validation.

Key Features

01Atomic component system architecture planning from Atoms to Templates

020 GitHub stars

03Fluid typography and responsive breakpoint calculations using CSS clamp

04Automated design token generation for colors, typography, and spacing

05Multi-format exports (CSS, SCSS, JSON) for seamless developer handoff

06Integrated WCAG accessibility validation and color contrast checking

Use Cases

01Building a scalable design system starting from a single brand hex code

02Standardizing component libraries and CSS variables for enterprise frontend projects

03Automating the synchronization between Figma design tokens and code repositories

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

Key Features

01Atomic component system architecture planning from Atoms to Templates

020 GitHub stars

03Fluid typography and responsive breakpoint calculations using CSS clamp

04Automated design token generation for colors, typography, and spacing

05Multi-format exports (CSS, SCSS, JSON) for seamless developer handoff

06Integrated WCAG accessibility validation and color contrast checking

Use Cases

01Building a scalable design system starting from a single brand hex code

02Standardizing component libraries and CSS variables for enterprise frontend projects

03Automating the synchronization between Figma design tokens and code repositories

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