skills.rest
kitfunso
kitfunsoCOMMUNITY
Explore all skills by this author →
Website𝕏@keithso27GitHub

ui-design-system

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

Updated May 22, 2026
Search Tags:#design system#color palette#design tokens#ui design#generate#CSS variables#typography scale
One-click install
npx skills add https://github.com/kitfunso/claude-config --skill ui-design-system-kitfunso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/kitfunso/claude-config/tree/main/skills/product-team/ui-design-system
Command: npx skills add https://github.com/kitfunso/claude-config --skill ui-design-system-kitfunso

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Creating a consistent design system from scratch requires manually deriving color scales, type scales, spacing values, and shadow styles, which is time-consuming and error-prone. This Skill automates token generation so designers and developers share a single source of truth. ## Core Features & Use Cases - Design Token Generation: Produce complete color palettes (primary, secondary, neutral, semantic), modular typography scales, 8pt spacing grids, borders, shadows, animations, breakpoints, and z-index scales from a single brand color. - Multiple Export Formats: Export tokens as JSON, CSS custom properties, or SCSS for direct integration into codebases. - Style Variants: Choose modern, classic, or playful styles that adjust font families, border radii, and shadow treatments. - Use Case: A UI designer starting a new product runs the generator with the brand color #0066CC in modern style, exports CSS variables, and hands the token file to developers for immediate implementation. ## Quick Start Generate a complete design token system in CSS format using brand color #0066CC with the modern style.

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 primary and secondary color scales, neutral grays, and semantic colors using HSV color space adjustments, then outputs the full token set.

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; JSON is the default. CSS output flattens tokens into :root variables.

How to create a typography scale for a design system?▼

The script builds a modular type scale using a 1.25 major third ratio on a 16px base font size, producing sizes from xs to 5xl. It also includes pre-composed text styles for headings, body, small, and caption text.

Does the token generator require external Python packages?▼

No external packages are required. The script uses only Python standard library modules: json, colorsys, typing, and sys, so it runs in any standard Python 3 environment without installation.

What are the limitations of automated color palette generation?▼

Algorithmically generated scales may not meet WCAG contrast requirements for all steps, so manual contrast verification is still needed. The secondary palette uses a fixed 180-degree hue shift, which may not suit every brand identity.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
hongmaple0820hongmaple0820
9

ui-design-system

Generate design-system tokens and handoff documentation for React, Tailwind, and CSS.

Community
Advanced
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate