playbooks

home / skills / questnova502 / claude-skills-sync / ui-design-system

ui-design-system skill

/skills/ui-design-system

This skill helps you generate design tokens, responsive grids, and developer handoff docs to maintain a consistent UI design system.

This is most likely a fork of the ui-design-system skill from openclaw
npx playbooks add skill questnova502/claude-skills-sync --skill ui-design-system

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
1.0 KB
---
name: ui-design-system
description: 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.
---

# 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

Overview

This skill is a UI design system toolkit built for senior UI designers to create, document, and hand off scalable design systems. It centralizes design tokens, component architecture, responsive calculations, and developer-ready exports to maintain visual consistency across products. The toolkit supports multiple styles and export formats to fit design and engineering workflows.

How this skill works

The toolkit generates design tokens from a brand color input and a chosen style, producing color palettes, typography scales, spacing, shadows, animations, and breakpoint tokens. It documents component architecture and produces responsive calculations based on an 8pt grid, then exports tokens and docs in formats suitable for design and code (JSON, CSS, SCSS). Accessibility checks and developer handoff artifacts are produced to streamline collaboration and reduce implementation drift.

When to use it

  • Starting a new product or rebranding where a consistent visual language is required
  • Scaling UI across teams and platforms to ensure consistent implementation
  • Creating developer handoff packages with tokens and component docs
  • Automating responsive breakpoint decisions and spacing systems
  • Validating color and typography choices against accessibility targets

Best practices

  • Provide a clear brand color and intended style (modern, classic, playful) to seed token generation
  • Use the 8pt spacing grid consistently for layout and spacing to simplify responsive scaling
  • Version and export tokens with semantic names to avoid breaking changes in product releases
  • Run accessibility checks on color contrast and typography sizes before finalizing tokens
  • Keep component documentation linked to token definitions so developers can trace styles to sources

Example use cases

  • Generate a full token set from a primary brand color and export JSON tokens for the design system repository
  • Create responsive spacing and breakpoint rules for a multi-platform product using the 8pt grid
  • Produce CSS/SCSS token files for engineering to consume directly in the build system
  • Document component anatomy and states to reduce implementation questions during handoff
  • Run automated accessibility checks on palettes and iterate until contrast goals are met

FAQ

Which export formats are supported?

The toolkit exports tokens in JSON, CSS, and SCSS formats for design and engineering consumption.

What input does the token generator require?

It needs a primary brand color, a style choice (modern, classic, playful), and a target export format.