creative-design

ui-design-system

Набор инструментов системы дизайна UI для старшего UI-дизайнера, включающий генерацию дизайн-токенов, документацию компонентов, расчёты адаптивного дизайна и инструменты передачи разработчикам. Используется для создания систем дизайна, поддержания визуальной консистентности и облегчения сотрудничества между дизайнерами и разработчиками.

7 954

Обзор Как использовать / Установка

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

Установка

npx claude-code-templates@latest --skill creative-design/ui-design-system

Quick start

Install Claude Code if you have not already.
Copy the Install command from this page and run it in your project directory.
In Claude Code, load or mention the skill when your task matches what the skill is for.

Documentation

Use the links below for agent skills, troubleshooting, and official examples.