skills.rest
Shubh2310-developer
Shubh2310-developerCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

Generates design system tokens for colors, typography, spacing, and shadows from a brand color.

2|Updated Jan 10, 2026
Search Tags:#typography#design system#color palette#design tokens#ui design#generate#css variables
One-click install
npx skills add https://github.com/Shubh2310-developer/ENGUNITYCORE --skill ui-design-system-shubh2310-developer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/Shubh2310-developer/ENGUNITYCORE/tree/main/.claude/skills/ui-design-system
Command: npx skills add https://github.com/Shubh2310-developer/ENGUNITYCORE --skill ui-design-system-shubh2310-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Building a consistent design system from scratch requires manually deriving color scales, type scales, spacing values, and shadow styles, which is slow and error-prone. This Skill automates that token generation so designers and developers share one consistent source of truth. ## Core Features & Use Cases - Design Token Generation: Produces complete token sets including color palettes, typography scales, 8pt spacing grids, borders, shadows, animations, breakpoints, and z-index scales from a single brand color. - Multiple Export Formats: Exports tokens as JSON, CSS custom properties, or SCSS for direct use in codebases. - Style Variants: Supports modern, classic, and playful styles that adjust fonts, border radii, and shadows. - Use Case: A designer starting a new product runs the generator with the brand color #0066CC in modern style, then hands the exported CSS variables to developers for immediate use in the frontend. ## Quick Start Run the design token generator script with my brand color #0066CC in modern style and export the tokens as CSS variables.

Frequently Asked Questions about ui-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate design tokens from a brand color?▼

Run the design_token_generator.py script with your brand color in hex format as the first argument. It derives full color scales, typography, spacing, and shadow tokens automatically using HSV color math.

What export formats does the design token generator support?▼

The generator exports tokens as JSON, CSS custom properties, or SCSS. Pass the desired format as the third command-line argument, for example json, css, or scss.

Can I customize the design style of generated tokens?▼

Yes, the script accepts modern, classic, and playful styles as the second argument. The style changes font families, border radius values, and shadow definitions while keeping the same token structure.

Does the token generator require external Python packages?▼

No, the script uses only Python standard library modules such as json, colorsys, and typing. It runs with a plain Python 3 installation without pip installs.

What spacing system does the design token generator use?▼

It uses an 8pt grid system with a base unit of 8px, generating numeric spacing steps plus semantic aliases like xs, sm, md, lg, and xl for common layout needs.

Related Skills

Explore More Design & Creative Skills→
Growth4U-systemsGrowth4U-systems

visual-identity

Generate logos and style guides from brand traits, colors, typography, and imagery style.

Official
Advanced
RLufRLuf

reversa-design-system

Extract design tokens, color palettes, and typography from CSS, theme files, and screenshots.

Community
Intermediate
kamelmhkamelmh

design-system-starter

Define design tokens, component architecture, and WCAG 2.1 AA documentation templates.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate