Sistema de Design

O que Sistema de Design faz?

Arquitetura de tokens, especificações de componentes, design sistemático, geração de slides.

Quando Usar

• Criação de tokens de design
• Definição de estados de componentes
• Sistemas de variáveis CSS
• Escalas de espaçamento/tipografia
• Entrega design-código
• Configuração de tema Tailwind
• Geração de slides/apresentações

Arquitetura de Tokens

Carregar: references/token-architecture.md

Estrutura de Três Camadas

Primitivo (valores brutos)
       ↓
Semântico (apelidos de propósito)
       ↓
Componente (específico do componente)

Exemplo:

/* Primitivo */
--color-blue-600: #2563EB;

/* Semântico */
--color-primary: var(--color-blue-600);

/* Componente */
--button-bg: var(--color-primary);

Início Rápido

Gerar tokens:

node scripts/generate-tokens.cjs --config tokens.json -o tokens.css

Validar uso:

node scripts/validate-tokens.cjs --dir src/

Referências

Tópico	Arquivo
Arquitetura de Tokens	references/token-architecture.md
Tokens Primitivos	references/primitive-tokens.md
Tokens Semânticos	references/semantic-tokens.md
Tokens de Componente	references/component-tokens.md
Especificações de Componentes	references/component-specs.md
Estados e Variantes	references/states-and-variants.md
Integração com Tailwind	references/tailwind-integration.md

Padrão de Especificação de Componentes

Propriedade	Padrão	Hover	Ativo	Desabilitado
Fundo	primary	primary-dark	primary-darker	muted
Texto	white	white	white	muted-fg
Borda	none	none	none	muted-border
Sombra	sm	md	none	none

Scripts

Script	Propósito
generate-tokens.cjs	Gerar CSS a partir de configuração JSON de tokens
validate-tokens.cjs	Verificar valores hardcoded no código
search-slides.py	Busca BM25 + recomendações contextuais
slide-token-validator.py	Validar HTML de slides quanto à conformidade de tokens
fetch-background.py	Buscar imagens do Pexels/Unsplash

Modelos

Modelo	Propósito
design-tokens-starter.json	JSON inicial com estrutura de três camadas

Integração

Com a marca: Extrair primitivos das cores/tipografia da marca Com ui-styling: Tokens de componente → Configuração Tailwind

Dependências da Skill: brand, ui-styling Agentes Primários: ui-ux-designer, frontend-developer

Sistema de Slides

Apresentações compatíveis com a marca usando tokens de design + Chart.js + sistema de decisão contextual.

Fonte da Verdade

Arquivo	Propósito
docs/brand-guidelines.md	Identidade da marca, tom, cores
assets/design-tokens.json	Definições de tokens (primitivo→semântico→componente)
assets/design-tokens.css	Variáveis CSS (importar nos slides)
assets/css/slide-animations.css	Biblioteca de animações CSS

Busca de Slides (BM25)

# Busca básica (detecção automática de domínio)
python scripts/search-slides.py "pitch de investidor"

# Busca por domínio específico
python scripts/search-slides.py "agitação do problema" -d copy
python scripts/search-slides.py "crescimento de receita" -d chart

# Busca contextual (Sistema Premium)
python scripts/search-slides.py "slide do problema" --context --position 2 --total 9
python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustração

CSVs do Sistema de Decisão

Arquivo	Propósito
data/slide-strategies.csv	15 estruturas de deck + arcos emocionais + batidas sparkline
data/slide-layouts.csv	25 layouts + variantes de componente + animações
data/slide-layout-logic.csv	Objetivo → Layout + flag break_pattern
data/slide-typography.csv	Tipo de conteúdo → Escala tipográfica
data/slide-color-logic.csv	Emoção → Tratamento de cor
data/slide-backgrounds.csv	Tipo de slide → Categoria de imagem (Pexels/Unsplash)
data/slide-copy.csv	25 fórmulas de copywriting (PAS, AIDA, FAB)
data/slide-charts.csv	25 tipos de gráfico com configuração Chart.js

Fluxo de Decisão Contextual

1. Analisar objetivo/contexto
        ↓
2. Pesquisar slide-strategies.csv → Obter estratégia + batidas emocionais
        ↓
3. Para cada slide:
   a. Consultar slide-layout-logic.csv → layout + break_pattern
   b. Consultar slide-typography.csv → escala tipográfica
   c. Consultar slide-color-logic.csv → tratamento de cor
   d. Consultar slide-backgrounds.csv → imagem se necessário
   e. Aplicar classe de animação de slide-animations.css
        ↓
4. Gerar HTML com tokens de design
        ↓
5. Validar com slide-token-validator.py

Quebra de Padrão (Duarte Sparkline)

Decks premium alternam emoções para engajamento:

"O Que É" (frustração) ↔ "O Que Poderia Ser" (esperança)

O sistema calcula quebras de padrão nas posições 1/3 e 2/3.

Requisitos dos Slides

TODOS os slides DEVEM:

1. Importar assets/design-tokens.css - única fonte da verdade
2. Usar variáveis CSS: var(--color-primary), var(--slide-bg), etc.
3. Usar Chart.js para gráficos (NÃO barras CSS-only)
4. Incluir navegação (setas do teclado, clique, barra de progresso)
5. Alinhar conteúdo ao centro
6. Focar em persuasão/conversão

Integração com Chart.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

<canvas id="revenueChart"></canvas>
<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: ['Set', 'Out', 'Nov', 'Dez'],
        datasets: [{
            data: [5, 12, 28, 45],
            borderColor: '#FF6B6B',  // Usar coral da marca
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            fill: true,
            tension: 0.4
        }]
    }
});
</script>

Conformidade de Tokens

/* CORRETO - usa token */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);

/* ERRADO - valor hardcoded */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';

Implementação de Referência

Exemplo funcional com todos os recursos:

assets/designs/slides/claudekit-pitch-251223.html

Comando

/slides:create "pitch de investidor de 10 slides para ClaudeKit Marketing"

Melhores Práticas

1. Nunca use hex bruto em componentes - sempre referencie tokens
2. A camada semântica permite troca de temas (claro/escuro)
3. Tokens de componente permitem personalização por componente
4. Use formato HSL para controle de opacidade
5. Documente o propósito de cada token
6. Slides devem importar design-tokens.css e usar var() exclusivamente