home / skills / vadimcomanescu / codex-skills / ui-design-system

ui-design-system skill

safe

/skills/.experimental/design/ui-design-system

This skill helps design teams generate cohesive design tokens, documentation, and handoff assets to ensure scalable, accessible UI systems.

This is most likely a fork of the ui-design-system skill from openclaw

npx playbooks add skill vadimcomanescu/codex-skills --skill ui-design-system

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

Files (3)

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 professional UI design system toolkit aimed at senior UI designers for creating and maintaining scalable, consistent interfaces. It provides automated design token generation, component documentation helpers, responsive calculations, accessibility checks, and developer handoff assets. Use it to speed up system creation and enforce visual consistency across products.

How this skill works

The toolkit generates design tokens from a brand color input and produces palettes, typography scales, spacing, shadows, animation tokens, and breakpoints. It analyzes component structure to scaffold documentation and output developer-ready formats (JSON, CSS, SCSS) for handoff. Responsive utilities compute breakpoint math and spacing for a consistent 8pt grid, while accessibility checks flag contrast and semantic issues.

When to use it

Creating a new design system or scaling an existing one
Onboarding design and dev teams to a unified token set
Preparing assets and specs for developer handoff
Auditing UI consistency and accessibility across screens
Automating exports in JSON/CSS/SCSS for multiple platforms

Best practices

Start with a clear brand color or token seed to generate a predictable palette
Use the modular typography scale and 8pt spacing grid for layout consistency
Keep component documentation updated alongside token changes
Export tokens in the format your engineering team prefers (JSON/CSS/SCSS)
Run accessibility checks during token and component changes to catch regressions

Example use cases

Generate a full token set from a primary brand color and export JSON for the design system repo
Create responsive padding and margin values using the 8pt grid for a new component library
Produce component-level documentation and code snippets for developer handoff
Run an accessibility sweep to identify color contrast issues before release
Switch visual themes (modern/classic/playful) and export SCSS variables for quick theming

FAQ

What input does the token generator need?

Provide a brand color plus a style option (modern, classic, playful) and choose an export format (json, css, scss).

Can I customize spacing and typography scales?

Yes. The toolkit uses a modular scale and an 8pt baseline by default, and you can adjust scale factors and base units before export.