# UI Design System

> Kit de ferramentas de sistema de design de UI para Designer de UI Sênior, incluindo geração de design tokens, documentação de componentes, cálculos de design responsivo e ferramentas de handoff para desenvolvimento. Use para criar sistemas de design, manter consistência visual e facilitar colaboração entre design e desenvolvimento.

- Skill: `artubss/ui-design-system` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add artubss/ui-design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/artubss/ui-design-system/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: artubss (https://skillmd.com/u/artubss)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/artubss/ui-design-system

---


# Sistema de Design de UI

Kit de ferramentas profissional para criar e manter sistemas de design escaláveis.

## Capacidades Principais
- Geração de design tokens (cores, tipografia, espaçamento)
- Arquitetura de sistema de componentes
- Cálculos de design responsivo
- Conformidade com acessibilidade
- Documentação de handoff para desenvolvimento

## Scripts Principais

### design_token_generator.py
Gera tokens de sistema de design completos a partir de cores da marca.

**Uso**: `python scripts/design_token_generator.py [brand_color] [style] [format]`
- Estilos: modern, classic, playful
- Formatos: json, css, scss

**Recursos**:
- Geração de paleta de cores completa
- Escala tipográfica modular
- Sistema de grid de espaçamento 8pt
- Tokens de sombra e animação
- Breakpoints responsivos
- Múltiplos formatos de exportação