ui-design-system

Original：🇺🇸 English

Translated

1 scriptsChecked / no sensitive code detected

UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.

3installs

Sourcedavila7/claude-code-templates

Added on2026-02-04

NPX Install

npx skill4agent add davila7/claude-code-templates ui-design-system

SKILL.md Content

View Translation Comparison →

UI Design System

Professional toolkit for creating and maintaining scalable design systems.

Core Capabilities

Design token generation (colors, typography, spacing)
Component system architecture
Responsive design calculations
Accessibility compliance
Developer handoff documentation

Key Scripts

design_token_generator.py

Generates complete design system tokens from brand colors.

Usage:

python scripts/design_token_generator.py [brand_color] [style] [format]

Styles: modern, classic, playful
Formats: json, css, scss

Features:

Complete color palette generation
Modular typography scale
8pt spacing grid system
Shadow and animation tokens
Responsive breakpoints
Multiple export formats