UI Design System

Sistema de UI Design

Gerar design tokens, criar paletas de cores, calcular escalas tipográficas, construir sistemas de componentes e preparar documentação de handoff para desenvolvedores.

Sumário

• Termos de Gatilho
• Fluxos de Trabalho
  • Fluxo de Trabalho 1: Gerar Design Tokens
  • Fluxo de Trabalho 2: Criar Sistema de Componentes
  • Fluxo de Trabalho 3: Design Responsivo
  • Fluxo de Trabalho 4: Handoff para Desenvolvedores
• Referência de Ferramentas
• Tabelas de Referência Rápida
• Base de Conhecimento

Termos de Gatilho

Use esta skill quando precisar:

• "gerar design tokens"
• "criar paleta de cores"
• "construir escala tipográfica"
• "calcular sistema de espaçamento"
• "criar sistema de design"
• "gerar variáveis CSS"
• "exportar tokens SCSS"
• "configurar arquitetura de componentes"
• "documentar biblioteca de componentes"
• "calcular breakpoints responsivos"
• "preparar handoff para desenvolvedores"
• "converter cor da marca em paleta"
• "verificar contraste WCAG"
• "construir sistema de grid 8pt"

Fluxos de Trabalho

Fluxo de Trabalho 1: Gerar Design Tokens

Situação: Você tem uma cor de marca e precisa de um sistema completo de design tokens.

Etapas:

1. Identificar cor da marca e estilo

   • Cor primária da marca (formato hex)
   • Preferência de estilo: modern | classic | playful

2. Gerar tokens usando o script

   python scripts/design_token_generator.py "#0066CC" modern json
   

3. Revisar categorias geradas

   • Cores: primária, secundária, neutra, semântica, superfície
   • Tipografia: fontFamily, fontSize, fontWeight, lineHeight
   • Espaçamento: escala baseada em grid 8pt (0-64)
   • Bordas: radius, width
   • Sombras: none até 2xl
   • Animação: duration, easing
   • Breakpoints: xs até 2xl

4. Exportar no formato alvo

   # Propriedades customizadas CSS
   python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css
   
   # Variáveis SCSS
   python scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss
   
   # JSON para Figma/ferramentas
   python scripts/design_token_generator.py "#0066CC" modern json > design-tokens.json
   

5. Validar acessibilidade

   • Verificar se o contraste de cores atende WCAG AA (4.5:1 texto normal, 3:1 texto grande)
   • Verificar se cores semânticas têm cores de contraste definidas

Fluxo de Trabalho 2: Criar Sistema de Componentes

Situação: Você precisa estruturar uma biblioteca de componentes usando design tokens.

Etapas:

1. Definir hierarquia de componentes

   • Átomos: Button, Input, Icon, Label, Badge
   • Moléculas: FormField, SearchBar, Card, ListItem
   • Organismos: Header, Footer, DataTable, Modal
   • Templates: DashboardLayout, AuthLayout

2. Mapear tokens para componentes

   Componente	Tokens Usados
   Button	colors, sizing, borders, shadows, typography
   Input	colors, sizing, borders, spacing
   Card	colors, borders, shadows, spacing
   Modal	colors, shadows, spacing, z-index, animation

3. Definir padrões de variante

   Variantes de tamanho:

   sm: height 32px, paddingX 12px, fontSize 14px
   md: height 40px, paddingX 16px, fontSize 16px
   lg: height 48px, paddingX 20px, fontSize 18px
   

   Variantes de cor:

   primary: background primary-500, text white
   secondary: background neutral-100, text neutral-900
   ghost: background transparent, text neutral-700
   

4. Documentar API de componente

   • Interface de props com tipos
   • Opções de variante
   • Tratamento de estado (hover, active, focus, disabled)
   • Requisitos de acessibilidade

5. Referência: Veja references/component-architecture.md

Fluxo de Trabalho 3: Design Responsivo

Situação: Você precisa de breakpoints, tipografia fluida ou espaçamento responsivo.

Etapas:

1. Definir breakpoints

   Nome	Largura	Meta
   xs	0	Celulares pequenos
   sm	480px	Celulares grandes
   md	640px	Tablets
   lg	768px	Laptops pequenos
   xl	1024px	Desktops
   2xl	1280px	Telas grandes

2. Calcular tipografia fluida

   Fórmula: clamp(min, preferred, max)

   /* 16px a 24px entre viewport de 320px e 1200px */
   font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);
   

   Escalas pré-calculadas:

   --fluid-h1: clamp(2rem, 1rem + 3.6vw, 4rem);
   --fluid-h2: clamp(1.75rem, 1rem + 2.3vw, 3rem);
   --fluid-h3: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
   --fluid-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
   

3. Configurar espaçamento responsivo

   Token	Mobile	Tablet	Desktop
   --space-md	12px	16px	16px
   --space-lg	16px	24px	32px
   --space-xl	24px	32px	48px
   --space-section	48px	80px	120px

4. Referência: Veja references/responsive-calculations.md

Fluxo de Trabalho 4: Handoff para Desenvolvedores

Situação: Você precisa transferir design tokens para a equipe de desenvolvimento.

Etapas:

1. Exportar tokens nos formatos necessários

   # Para projetos CSS
   python scripts/design_token_generator.py "#0066CC" modern css
   
   # Para projetos SCSS
   python scripts/design_token_generator.py "#0066CC" modern scss
   
   # Para JavaScript/TypeScript
   python scripts/design_token_generator.py "#0066CC" modern json
   

2. Preparar integração com framework

   React + Variáveis CSS:

   import './design-tokens.css';
   
   <button className="btn btn-primary">Click</button>
   

   Config Tailwind:

   const tokens = require('./design-tokens.json');
   
   module.exports = {
     theme: {
       colors: tokens.colors,
       fontFamily: tokens.typography.fontFamily
     }
   };
   

   styled-components:

   import tokens from './design-tokens.json';
   
   const Button = styled.button`
     background: ${tokens.colors.primary['500']};
     padding: ${tokens.spacing['2']} ${tokens.spacing['4']};
   `;
   

3. Sincronizar com Figma

   • Instalar plugin Tokens Studio
   • Importar design-tokens.json
   • Tokens sincronizam automaticamente com estilos do Figma

4. Lista de verificação de handoff

   • Arquivos de token adicionados ao projeto
   • Pipeline de build configurado
   • Tema/variáveis CSS importadas
   • Biblioteca de componentes alinhada
   • Documentação gerada

5. Referência: Veja references/developer-handoff.md

Referência de Ferramentas

design_token_generator.py

Gera sistema completo de design tokens a partir da cor da marca.

Exemplos:

# Gerar tokens JSON (padrão)
python scripts/design_token_generator.py "#0066CC"

# Estilo classic com saída CSS
python scripts/design_token_generator.py "#8B4513" classic css

# Resumo de estilo playful
python scripts/design_token_generator.py "#FF6B6B" playful summary

Categorias de Saída:

Tabelas de Referência Rápida

Geração de Escala de Cores

Escala Tipográfica (Razão 1.25x)

Requisitos de Contraste WCAG

Texto grande: ≥18pt regular ou ≥14pt negrito

Presets de Estilo

Base de Conhecimento

Guias de referência detalhados em references/:

Lista de Verificação de Validação

Geração de Tokens

• Cor da marca fornecida em formato hex
• Estilo corresponde aos requisitos do projeto
• Todas as categorias de token geradas
• Cores semânticas incluem valores de contraste

Sistema de Componentes

• Todos os tamanhos implementados (sm, md, lg)
• Todas as variantes implementadas (primary, secondary, ghost)
• Todos os estados funcionando (hover, active, focus, disabled)
• Usa apenas design tokens (sem valores hardcoded)

Acessibilidade

• Contraste de cores atende WCAG AA
• Indicadores de foco visíveis
• Alvos de toque ≥ 44×44px
• Elementos HTML semânticos usados

Handoff para Desenvolvedores

• Tokens exportados no formato necessário
• Integração com framework documentada
• Ferramenta de design sincronizada
• Documentação de componentes completa