Ui Design System
Generate consistent design-token JSON (colors, type, spacing, shadows) from a brand color for solo builders shipping UI without a full design team.
Overview
ui-design-system is an agent skill for the Build phase that auto-generates structured design-system tokens (color, typography, spacing, and related scales) from a brand color and style preset.
Install
npx skills add https://github.com/davila7/claude-code-templates --skill ui-design-systemWhat is this skill?
- Python DesignTokenGenerator with 8pt grid base unit and major-third type scale (1.25)
- Complete token families: colors, typography, spacing, sizing, borders, shadows, animation, breakpoints, z-index
- Brand-color-driven palette generation with style variants (e.g. modern)
- Structured meta block (version, style) for versioned design-system drops
- Outputs machine-readable JSON suitable for CSS variables or design-tool import
- 1.25 major-third type scale ratio
- 10 token categories in complete system output
Adoption & trust: 1.2k installs on skills.sh; 27.8k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are coding UI without shared color, type, or spacing rules, so every screen invents new values and the product looks inconsistent.
Who is it for?
Solo builders starting or refreshing a web or app UI who want deterministic token output instead of debating pixels in chat.
Skip if: Teams that already maintain Figma variables and a locked token pipeline, or builders who only need copy/layout critique with no token export.
When should I use this skill?
You need a consistent design token JSON (colors, typography, spacing, shadows) generated from a brand color before implementing UI.
What do I get? / Deliverables
You get a versioned JSON token bundle you can plug into CSS, Tailwind, or your component library as the baseline design system.
- Complete design token JSON document
- Color palette derived from brand color
- Typography and spacing scales aligned to 8pt grid
Recommended Skills
Journey fit
How it compares
Use as a token generator alongside manual Figma work—not a substitute for UX research or component libraries like shadcn.
Common Questions / FAQ
Who is ui-design-system for?
Indie and solo developers shipping SaaS, marketing sites, or mobile shells who need a quick, consistent design token baseline for their agent-assisted frontend work.
When should I use ui-design-system?
During Build (frontend) when kicking off a new interface, rebranding, or standardizing spacing and color before you write components; less useful if tokens are already frozen in your repo.
Is ui-design-system safe to install?
Review the Security Audits panel on this Prism page and inspect the Python script in the skill repo before running it in environments with sensitive code.
SKILL.md
READMESKILL.md - Ui Design System
#!/usr/bin/env python3 """ Design Token Generator Creates consistent design system tokens for colors, typography, spacing, and more """ import json from typing import Dict, List, Tuple import colorsys class DesignTokenGenerator: """Generate comprehensive design system tokens""" def __init__(self): self.base_unit = 8 # 8pt grid system self.type_scale_ratio = 1.25 # Major third self.base_font_size = 16 def generate_complete_system(self, brand_color: str = "#0066CC", style: str = "modern") -> Dict: """Generate complete design token system""" tokens = { 'meta': { 'version': '1.0.0', 'style': style, 'generated': 'auto-generated' }, 'colors': self.generate_color_palette(brand_color), 'typography': self.generate_typography_system(style), 'spacing': self.generate_spacing_system(), 'sizing': self.generate_sizing_tokens(), 'borders': self.generate_border_tokens(style), 'shadows': self.generate_shadow_tokens(style), 'animation': self.generate_animation_tokens(), 'breakpoints': self.generate_breakpoints(), 'z-index': self.generate_z_index_scale() } return tokens def generate_color_palette(self, brand_color: str) -> Dict: """Generate comprehensive color palette from brand color""" # Convert hex to RGB brand_rgb = self._hex_to_rgb(brand_color) brand_hsv = colorsys.rgb_to_hsv(*[c/255 for c in brand_rgb]) palette = { 'primary': self._generate_color_scale(brand_color, 'primary'), 'secondary': self._generate_color_scale( self._adjust_hue(brand_color, 180), 'secondary' ), 'neutral': self._generate_neutral_scale(), 'semantic': { 'success': { 'base': '#10B981', 'light': '#34D399', 'dark': '#059669', 'contrast': '#FFFFFF' }, 'warning': { 'base': '#F59E0B', 'light': '#FBB D24', 'dark': '#D97706', 'contrast': '#FFFFFF' }, 'error': { 'base': '#EF4444', 'light': '#F87171', 'dark': '#DC2626', 'contrast': '#FFFFFF' }, 'info': { 'base': '#3B82F6', 'light': '#60A5FA', 'dark': '#2563EB', 'contrast': '#FFFFFF' } }, 'surface': { 'background': '#FFFFFF', 'foreground': '#111827', 'card': '#FFFFFF', 'overlay': 'rgba(0, 0, 0, 0.5)', 'divider': '#E5E7EB' } } return palette def _generate_color_scale(self, base_color: str, name: str) -> Dict: """Generate color scale from base color""" scale = {} rgb = self._hex_to_rgb(base_color) h, s, v = colorsys.rgb_to_hsv(*[c/255 for c in rgb]) # Generate scale from 50 to 900 steps = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900] for step in steps: # Adjust lightness based on step factor = (1000 - step) / 1000 new_v = 0.95 if step < 500 else v * (1 - (step - 500) / 500) new_s = s * (0.3 + 0.7 * (step / 900)) new_rgb = colorsys.hsv_to_rgb(h, new_s, new_v) scale[str(step)] = self._rgb_to_hex([int(c * 255) for c in new_rgb]) scale['DEFAULT'] = base_color return scale def _generate_neutral_sca