# UI Design System

> Generates complete design system tokens from brand colors.

- Skill: `tomevault-io/ui-design-system-8` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/ui-design-system-8`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/ui-design-system-8/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/ui-design-system-8

---


# UI Design System

Professional toolkit for creating and maintaining scalable design systems.

## When to Use

- UI design system toolkit for Senior UI Designer including design token
- User explicitly invokes `/ui-design-system`

## When NOT to Use

- When the task doesn't match this skill's scope -- check related skills
- When a more specialized skill exists for the specific task

## 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

---

## Version History

| Version | Date       | Description            |
| ------- | ---------- | ---------------------- |
| 1.0     | 2026-02-25 | Initial implementation |

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/jasonmichaelbell78-creator) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->