Automation Design System

Workflow

1. Detectar stack

• Ler package.json e a entrada do app (main.tsx, _app.tsx, etc).
• Identificar se existe Tailwind, CSS Modules, Styled Components ou outro.

2. Consolidar tokens

• Extrair tokens de UI.md e registrar em src/styles/tokens.css.
• Evitar duplicacao de paletas (especialmente Tailwind).
• Mapear quaisquer utilitarios para usar var(--token) ao inves de hex direto.
• Se houver hex em estados nos snippets, criar tokens derivados ou manter local sem expandir a paleta.

3. Aplicar tema base

• Criar src/styles/theme.css com estilos globais usando tokens.
• Garantir importacao global no ponto correto do app.

4. Construir componentes base

• Implementar Button, Card, Badge, Input, Select, Table, Modal, Topbar, Sidebar.
• Usar variaveis CSS para cor, fonte, radius, sombra e espacamento.
• Incluir estados hover, focus, disabled e active.
• Manter acessibilidade minima (aria, focus visivel).

5. Implementar AppShell

• Criar layout com Sidebar + Topbar + conteudo.
• Sidebar fixa no desktop e drawer no mobile.

6. Criar paginas demo

• Automacoes, Fila de Execucao, Historico e Logs.
• Sem charts, sem marketing, sem Kanban.

7. Validar consistencia

• Nenhum HEX hardcoded (exceto status previstos).
• Tipografia, radius e sombras vindos de tokens.
• Labels em PT-BR.

Contratos minimos de componentes

• Button
  • variantes: primary | secondary | ghost
  • tamanhos: sm | md
  • disabled e icone opcional
  • icones devem vir de lucide-react
• Card
  • borda + shadow-subtle + radius-md
• Badge
  • variantes success | error | warning
• Modal
  • overlay semitransparente + shadow-modal + scroll interno

Regras obrigatorias

• Fidelidade visual total ao UI.md.
• Sem novas cores dominantes e sem trocar fonte base.
• Sem Kanban, sem hero banners, sem secoes promocionais, sem charts.
• Foco em listas, tabelas, cards, filtros, modais e drawers.
• Para icones, use apenas lucide-react (sem SVG inline avulso).

Referencias

• Ler references/ui-artifact.md antes de tocar nos tokens e componentes.

Checklist final

• tokens.css aplicado globalmente.
• Biblioteca em src/design-system com index exportando componentes.
• AppShell integrado nas paginas demo.
• Pelo menos 3 paginas demo usando os componentes.