What formats does the design token generator support?

The tool supports JSON, CSS, and SCSS formats, making it easy to integrate your design tokens into any modern web framework.

Is the spacing system customizable?

The skill defaults to an industry-standard 8pt spacing grid but provides the tools to calculate and document custom responsive breakpoints and spacing scales.

Does this skill help with accessibility compliance?

Absolutely. It includes capabilities for checking accessibility compliance within your component system architecture and documentation.

Can I generate a full color palette from just one color?

Yes, the design token generator script takes a single brand color and creates a complete, harmonized palette based on modern, classic, or playful styles.

UI Design System Pro

Name: UI Design System Pro
Author: pur3v4d3r

bypur3v4d3r

•

Herramientas de Diseño

Architects scalable UI design systems with automated token generation, component documentation, and cross-platform styling.

This skill empowers developers and designers to build robust, professional-grade design systems directly within Claude. It automates the complex task of creating design tokens—including color palettes, typography scales, and spacing grids—while ensuring accessibility compliance and facilitating smooth developer handoffs. Whether you are bootstrapping a new product or maintaining a mature codebase, this skill provides the structural patterns and generation scripts necessary to maintain visual consistency and responsive layouts across any web application.

Características Principales

011 GitHub stars

02Modular architecture patterns for scalable component systems

03Precise responsive design and 8pt grid calculations

04Built-in accessibility compliance and documentation tools

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

06Multi-format exports including CSS, SCSS, and JSON for handoff

Casos de Uso

01Building a comprehensive design system from a single brand color

02Generating production-ready theme variables and documentation for design-dev handoff

03Standardizing visual styles across a growing multi-developer codebase

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pur3v4d3r/pur3-pkb-codebase ui-design-system

For use in Claude.ai and ChatGPT

Download Skill