Power Design inema.club
Uma skill do Claude Code · v1.0

Slides que não parecem feitos por IA.

Brand DNA × 20 princípios de design codificados → decks HTML bonitos, sob demanda. Sem gradientes roxos. Sem slides herói com seis bullets. Sem sombras em barras.

Ver os 20 princípios ↓ Instalar pelo GitHub →
Princípios
20
Sistemas de marca
72+
Fontes citadas
10+
Licença
MIT

As 20 regras, ilustradas.

Cada slide passa pelos mesmos 20 critérios — tirados de Tufte, Reynolds, Duarte, Williams, Refactoring UI, Müller-Brockmann, Mayer e WCAG 2.2.

Aprofunde-se nas 7 seções
01 · Carga Cognitiva 02 · Hierarquia Visual 03 · Gestalt 04 · Tipografia 05 · Cor e Contraste 06 · Sistemas Espaciais 07 · Alinhamento e Ritmo
SEÇÃO 01

Carga Cognitiva e Atenção

Regras 01–03 · Como o cérebro processa um slide em ≤3 segundos.

Lei de Miller
George Miller (1956); refinado por Cowan (2001) para ~4 blocos.
  • Máximo 7 elementos visuais distintos por slide antes de agrupar.
  • Alvo de 3–5 blocos após agrupamento (cards, colunas, ícones com rótulos).
  • Se itens > 5, agrupe por proximidade/bordas/cards em ≤5 super-blocos.
Nota: Slides são escaneados, não estudados — aplique o limite mais restrito de Cowan (4 ± 1). Uma lista com 6 bullets viola isso; reduza para 4 ou divida.
Exemplo: 9 logos em fileira → agrupe em 3 cards de 3 ("Frontend / Backend / Infra"). Um bloco por card.
Lei de Hick
Hick & Hyman (1952). Tempo de decisão ∝ log₂(n+1) onde n = número de escolhas.
  • Por slide: ≤1 chamada para ação e ≤1 decisão.
  • Se o slide convida uma escolha (ex.: "qual plano?"), limite as opções visíveis a 3.
Nota: Slides de precificação violam isso rotineiramente com 4–5 níveis. Recomendação: 3 níveis, um destacado visualmente como padrão.
Exemplo: 3 cards de preço com o do meio escalado 1.05× e com a cor de destaque. O tempo de decisão cai porque o sistema já escolheu pelo espectador.
Lei de Fitts
Paul Fitts (1954). Tempo para atingir um alvo ∝ distância / tamanho.
  • O elemento focal dominante deve ocupar ≥25% da área do slide ou ser ≥3× maior que os secundários.
  • Elementos interativos (raros em slides) ≥44 × 44 px.
Nota: Em slides, Fitts é sobre aquisição visual, não clique. Tradução: o título precisa ser encontrado em um único movimento ocular.
Exemplo: Título em 72px vs. corpo em 24px = proporção 3:1 — o olho pousa no título primeiro, sempre.
Uma Ideia por Slide
Garr Reynolds, Presentation Zen (2008); Nancy Duarte, Slide:ology (2008).
  • 1 título por slide (≤10 palavras, ideal 5–7).
  • 1 bloco de suporte (gráfico, imagem, lista ou citação) — não dois.
  • Se o slide tenta fazer 2 argumentos, divida em 2 slides.
Nota: Use a contagem de slides como recurso livre — nunca comprima duas ideias para economizar um slide.
Violação: "A receita do T3 cresceu 22% E a retenção de usuários atingiu 91%" com dois gráficos. Correção: dois slides separados, um por métrica.
Relação Sinal-Ruído
Edward Tufte, The Visual Display of Quantitative Information (1983).
  • Todo pixel sem dados é candidato à exclusão. Teste: remova o elemento — a compreensão cai? Se não, delete permanentemente.
  • Sem sombras >4px, sem gradientes em superfícies não-significativas, sem bordas decorativas, sem padrões de fundo atrás de texto.
  • Logos apenas no slide de título e encerramento — nunca repetidos no rodapé de slides internos.
Nota: Essa é a regra mais violada por decks "desenhados". Bonito ≠ decorado.
Não Me Faça Pensar
Steve Krug (2000, rev. 2014).
  • Um slide deve exigir zero esforço cognitivo para entender a estrutura — apenas o conteúdo.
  • Se o espectador pergunta "o que estou vendo?" antes de "o que isso significa?", o layout falhou.
Codificável: Título sempre no topo, corpo sempre abaixo, visual de suporte sempre pareado com a afirmação que suporta, citação de fonte sempre no canto inferior direito em 14–16px com 50% de opacidade.
SEÇÃO 02

Hierarquia Visual

Regra 19 + complementares · O que o olho vê primeiro e por quê.

Ênfase por Escala
Müller-Brockmann; Refactoring UI (Wathan & Schoger 2018).
  • Elemento primário ≥2× o tamanho do secundário; secundário ≥1.5× o terciário.
  • Evite tamanhos com diferença de apenas 10–20% — o olho os lê como iguais.
Codificável: Proporção título:corpo ∈ [2.0, 4.0]. Proporção subtítulo:corpo ∈ [1.25, 1.5].
Ênfase por Peso
Refactoring UI; Bringhurst, Elements of Typographic Style.
  • Use peso antes de tamanho para ênfase inline. Negrito (600–700) para ênfase, regular (400) para corpo.
  • Evite pesos abaixo de 300 na tela — desaparecem sob projeção.
Codificável: Pesos permitidos = {400, 500, 600, 700, opcionalmente 800/900 para destaque}. Proibidos para corpo: 100, 200, 300.
Ênfase por Cor (destaque único)
Tufte, "menor diferença eficaz"; Schoger.
  • Use escala de cinza neutra para 90% da interface/texto.
  • Reserve o destaque em saturação total para a única coisa que o espectador precisa ver.
  • Por slide: ≤1 elemento com cor de destaque.
Exemplo: Texto preto em todo lugar; apenas o número KPI está em laranja da marca.
Padrão F / Z de Leitura
Nielsen Norman Group — estudos de rastreamento ocular (2006, 2017, 2023).
  • Slides com muito texto: padrão F. Título no canto superior esquerdo, visual principal ao longo do topo horizontal, conteúdo secundário na borda esquerda vertical.
  • Slides guiados por imagem: padrão Z. Superior esquerdo → superior direito → diagonal → inferior direito (CTA).
  • Coloque o elemento mais importante no quadrante superior esquerdo ou nos primeiros 30% da altura do slide.
Ponto Focal Único
Reynolds; Duarte; teoria clássica da composição.
  • Cada slide tem exatamente 1 ponto focal.
  • Tamanho, cor, contraste, posição ou isolamento devem tornar um elemento claramente dominante.
  • Teste: pisque — o que você vê primeiro?
Codificável: O maior elemento é ≥1.5× a área do próximo maior, OU é o único elemento saturado em cor, OU está isolado por ≥48px a mais de espaço em branco que qualquer outro.
SEÇÃO 03

Princípios Gestalt

Regras 03 e 17 · Como a percepção visual organiza elementos em grupos.

Proximidade
Wertheimer (1923); Williams, Non-Designer's Design Book (CRAP).
  • Itens relacionados: ≤16px de distância (grade 8pt: 8 ou 16).
  • Itens não relacionados: ≥48px de distância (48, 64, 96).
  • O espaço entre grupos deve ser ≥2× o espaço dentro dos grupos.
Nota: Proximidade é a ferramenta de hierarquia mais barata — use-a antes de bordas ou cor.
Similaridade
Wertheimer; escola Gestalt.
  • Mesmo tratamento visual ⇒ mesmo papel. Se dois itens parecem iguais, o espectador assume que são do mesmo tipo.
  • Não estilize títulos e corpo da mesma forma; não estilize links e negrito da mesma forma.
Codificável: Cada papel (título, corpo, legenda, link, número destaque) tem exatamente uma especificação de estilo.
Região Comum (containers)
Stephen Palmer (1992).
  • Itens dentro do mesmo container (card, painel, caixa) são percebidos como um grupo, mesmo que a proximidade seja fraca.
  • Use cards para agrupar ≥3 itens relacionados quando a proximidade sozinha é ambígua.
Codificável: Padding do card ≥24px em todos os lados; espaço entre cards ≥24px.
Figura / Fundo
Edgar Rubin (1915).
  • Primeiro plano e fundo devem ser inequivocamente separáveis.
  • Texto sobre imagem requer: (a) overlay com opacidade ≥40%, (b) sombra de texto ≥2px / 30% de opacidade, ou (c) texto deslocado para zona de cor sólida.
Codificável: Quando texto sobrepõe imagem, meça o contraste em 9 pontos ao longo do bounding box do texto; proporção mínima 4.5:1 em todo ponto.
Fechamento e Continuidade
Wertheimer.
  • Evite bordas pesadas quando o alinhamento implícito alcança o mesmo agrupamento.
  • Use linhas/bordas contínuas para guiar o olhar entre elementos relacionados (ex.: uma linha conectando uma citação à foto do orador).
Simetria
Gestalt; Tschichold (Die neue Typographie).
  • Totalmente simétrico (slides de título centrados, divisores de seção) ou deliberadamente assimétrico em uma grade.
  • Nunca acidentalmente quase-simétrico — um deslocamento de 10px parece erro.
Codificável: Se a distância horizontal do centro difere em ≤5% da largura do slide, encaixe no centro verdadeiro; caso contrário, imponha ≥15% de assimetria para que o deslocamento pareça intencional.
SEÇÃO 04

Tipografia

Regras 06–10 · Escala, peso, entrelinha, comprimento de linha e tamanhos mínimos.

Escala Modular de Tipos
Tim Brown, Modular Scale; Bringhurst.
  • 1.200 (terça menor) — decks compactos.
  • 1.250 (terça maior) — equilibrado, padrão para slides.
  • 1.333 (quarta perfeita) — confiante, ideal para apresentações.
  • 1.414 (quarta aumentada, √2) — contraste forte.
  • 1.500 (quinta perfeita) — slides herói de alto impacto.
  • 1.618 (áureo) — editorial.
Padrão para slides: 1.333 com base 20px → 20, 27, 36, 48, 64, 85, 113. Arredonde para valores compatíveis com grade de 8pt: 20, 28, 36, 48, 64, 84, 112.
Combinação de Fontes
Butterick, Practical Typography; Bringhurst.
  • Máximo 2 tipos por deck (destaque + corpo). Devem contrastar em pelo menos um de: classificação (serifa vs. sem serifa), largura, personalidade de peso.
  • Evite duas fontes sem serifa que pareçam similares.
Codificável: Se 2 fontes, uma deve ser serifada e a outra sem serifa, OU devem ser de superfamílias diferentes. Decks com uma única família também são válidos e frequentemente mais seguros.
Entrelinha (leading)
Bringhurst; Butterick.
  • Corpo (16–24px): entrelinha 1.4–1.6.
  • Subtítulos (24–40px): 1.25–1.4.
  • Destaque (≥48px): 1.0–1.2.
  • Títulos compactos: 0.95 aceitável para destaque muito grande.
Codificável: line-height = 1.5 - (font-size-px - 16) × 0.005, limitado a [1.0, 1.6].
Espaçamento entre Letras
Bringhurst; Refactoring UI.
  • Destaque ≥48px: aperte –0.5% a –2% (CSS letter-spacing: -0.01em a -0.02em).
  • Corpo 16–24px: 0 (padrão).
  • CAIXA ALTA ou versalete: abra +5% a +10% (+0.05em a +0.1em).
Nota: Títulos grandes sem tracking negativo parecem arejados e amadores.
Comprimento de Linha
Bringhurst (45–75 caracteres); Butterick (45–90).
  • Linhas de corpo ≤60 caracteres.
  • Destaque ≤30 caracteres por linha.
  • Slides não deveriam ter parágrafos — mas quando tiverem, limite a largura.
Codificável: max-width: 60ch para corpo, 30ch para destaque.
Tamanho Mínimo Legível
Reynolds; Duarte; diretrizes de projeção.
  • 1920×1080 em tela: corpo ≥24px, título ≥48px, legenda mínima 18px.
  • Projetado em escala de conferência: corpo ≥28pt equivalente (~37px em 1920×1080).
  • Rodapé/citações de fonte: 14–16px, 50–60% de opacidade.
SEÇÃO 05

Cor e Contraste

Regras 11–14 · Distribuição, harmonia, acessibilidade e o sistema de destaque único.

Distribuição de Cor 60-30-10
Tradição Itten/Albers; codificado para UI pelo Refactoring UI.
  • 60% dominante (tipicamente fundo neutro), 30% secundária (texto + superfícies de UI), 10% destaque (o que se destaca).
Codificável: Amostre os pixels do slide — a cor de destaque deve ocupar 5–15% da área de pixels; se >15%, reduza; se <2%, o slide não tem focal de destaque.
Mínimos de Contraste WCAG
WCAG 2.1 / 2.2 (W3C).
ElementoAAAAA
Texto corpo (<24px regular)4.5:17:1
Texto grande (≥24px regular)3:14.5:1
Componentes UI / objetos gráficos3:1—
Nota para slides: Mire em AAA (7:1) porque projetores reduzem o contraste em 30–50%. Uma proporção de 4.5:1 no design = 2–3:1 em um projetor real.
Esquemas de Harmonia de Cores
Roda de cores Itten; Albers, Interaction of Color.
  • Monocromático: um matiz, varie L e S apenas. Mais seguro.
  • Análogo: 3 matizes dentro de 30°. Calmo, harmonioso.
  • Complementar: 2 matizes a 180°. Alta tensão; use um apenas como destaque.
  • Split-complementar: base + 2 matizes flanqueando seu complemento. Mais seguro que complementar.
  • Triádico: 3 matizes a 120°. Vibrante, mas difícil de equilibrar.
Codificável: Todas as cores de destaque devem derivar de um esquema; nunca misture complementar + análogo no mesmo deck.
Raciocínio HSL vs Hex
Refactoring UI.
  • Construa paletas mantendo o matiz constante e variando L (luminosidade) e S (saturação).
  • Gere 9 tons por matiz (50, 100, 200…900).
  • Para texto sobre fundo, pareie tons com diferença numérica ≥400.
Nunca Codificar Significado Apenas por Cor
WCAG 1.4.1; Brewer, ColorBrewer.
  • Qualquer distinção codificada por cor deve também carregar uma pista sem cor: forma, rótulo, ícone, peso ou posição.
  • ~8% dos homens têm daltonismo vermelho-verde.
Codificável: Para qualquer gráfico com ≥2 séries de dados, pareie cor com padrão/forma/rótulo.
Sistema de Destaque Único
Tufte's "menor diferença eficaz"; Schoger.
  • Por deck, uma cor de destaque; por slide, um momento de destaque.
SEÇÃO 06

Sistemas Espaciais

Regras 04–05 e 15–16 · Grade de 8pt, proporção áurea, espaço em branco e margens.

Grade de 8 Pontos
Bryn Jackson, "The 8-Point Grid" (Spec FM, 2015); Material Design (Google).
  • Toda margem, espaçamento interno, intervalo e dimensão de componente é múltipla de 8px.
  • Incrementos de 4px permitidos apenas para espaçamento interno de ícones.
Escala de espaçamento: 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160, 192, 256. Em 1920×1080, a margem lateral natural do slide é 96px (5%), o espaço entre cards é 32–48px, o padding interno do card é 32–48px.
Grade Modular / Colunar
Müller-Brockmann, Grid Systems in Graphic Design (1981).
  • Use uma grade de 12 colunas com calhas de 24–32px e margem externa de 96px em 1920×1080.
  • Todo elemento encaixa nas bordas das colunas.
Codificável: Largura da coluna = (1920 – 2×96 – 11×32) / 12 ≈ 117px. Expansões comuns: 4-col (terço), 6-col (metade), 8-col (dois terços), 12-col (total).
Proporção Áurea (1.618)
Vitrúvio; Le Corbusier (Modulor); Tschichold.
  • Onde um slide se divide em duas zonas, prefira uma divisão 1:1.618 (≈38% / 62%).
  • Para largura de 1920: 733px / 1187px.
Nota: Use com moderação — a proporção áurea é uma ferramenta, não uma religião. A grade de 8pt é o driver diário; a proporção áurea é reservada para slides herói/título.
Regra dos Terços
John Thomas Smith (1797); composição fotográfica padrão.
  • Divida o slide em uma grade 3×3. Coloque pontos focais nas interseções.
  • Para 1920×1080, interseções em (640,360), (1280,360), (640,720), (1280,720).
Aplicação: Slides herói — coloque os olhos/elemento focal do sujeito em uma interseção dos terços, título ao longo da linha do terço inferior.
Proporção de Espaço em Branco
Reynolds (Presentation Zen); Refactoring UI.
  • Slides de informação: ≥40% de pixels vazios.
  • Slides herói/título/seção: ≥60% de pixels vazios.
  • Slides de citação: ≥70% de pixels vazios.
Codificável: Renderize o slide; conte pixels correspondentes à cor de fundo. Se abaixo do limite, aumente o espaçamento/reduza o conteúdo.
Espaço em Branco Ativo vs Passivo
Mark Boulton, A Practical Guide to Designing for the Web.
  • Espaço em branco dentro de componentes compactos (entrelinha, padding) é passivo.
  • Espaço em branco separando seções é ativo.
  • Aumente o espaço ativo antes de reduzir o passivo — nunca comprima a entrelinha para criar espaço.
SEÇÃO 07

Alinhamento e Ritmo

Regra 16 + complementares · Grade estrita, ritmo vertical e zona de segurança.

Alinhamento Estrito à Grade
Tschichold; Müller-Brockmann; Williams (CRAP).
  • Todo elemento alinha a ≥1 linha de grade (esquerda, direita, centro, topo, linha de base).
  • Nenhum elemento flutua fora da grade.
  • Desalinhamentos ≤4px são encaixados automaticamente.
Codificável: Mantenha uma lista de posições X válidas (bordas de colunas) e posições Y (grade de 8pt); encaixe todo elemento na renderização.
Ritmo Vertical / Grade de Baseline
Bringhurst; tradição de grade de baseline.
  • Incrementos de espaçamento vertical são múltiplos da entrelinha do corpo.
  • Com corpo 24px × 1.5 = linha 36px, espaços verticais = 36, 72, 108, 144px.
Nota: Uma grade de baseline pura é difícil de manter em slides; uma grade vertical de 8pt é o compromisso prático.
Alinhamento Óptico vs Matemático
Bringhurst; Butterick.
  • Para formas circulares/triangulares, ícones e pontuação grande, substitua o centro matemático por 1–4px para que a forma pareça centralizada.
  • Aspas, bullets e asteriscos devem "pendurar" fora do bloco de texto (hanging punctuation).
Codificável: Tabela de offset óptico — círculos +0%; triângulos –4% horizontal; ícones tipicamente –1 a –2px para cima.
Zona de Segurança nas Bordas
Convenção broadcast title-safe; Apple HIG margins.
  • Nenhum texto, logo ou elemento focal dentro de 5% de qualquer borda do slide.
  • Em 1920×1080, isso é ≥96px em todos os lados.
Nota: Se o slide será projetado e as primeiras fileiras verão corte nas bordas, aumente para 8% (154px).

Como instalar e usar.

Power Design é uma skill do Claude Code. Em três passos você gera uma apresentação profissional — um arquivo HTML pronto para abrir no navegador, imprimir ou exportar como PDF.

1 Instale a skill

Copie o repositório para a pasta de skills do Claude Code. Faça isso uma única vez.

# Execute no terminal git clone https://github.com/inematds/power-design \ ~/.claude/skills/power-design
2 Escolha uma marca

Há 72+ marcas prontas (Stripe, Apple, Notion, Tesla…). Você também pode colar qualquer URL e a skill extrai as cores, fontes e estilo automaticamente.

Exemplos de marca
stripe.comapple.comnotion.so linear.apptesla.comou qualquer URL
3 Peça a apresentação

No Claude Code, diga o tema e a marca. A skill monta os slides aplicando os 20 princípios de design automaticamente. Refine conversando.

# No Claude Code, digite: > use power-design — crie uma apresentação para stripe.com sobre o nosso novo produto. 8 slides, modo apresentação.
✓ O que você recebe
slides.html
Arquivo único. Abra no navegador, navegue com as setas do teclado.
Marca aplicada
Cores, tipografia e voz da marca escolhida, extraídas ao vivo ou da biblioteca.
20 regras garantidas
Contraste, espaço em branco, hierarquia e grade verificados automaticamente.
Refinamento fácil
"Mude o tom para mais formal", "adicione um slide de dados", "use menos texto" — só falar.

72+ sistemas de marca pré-prontos.

Cada entrada é um único arquivo brand-style.md: cores, tipografia, voz, componentes, URL de origem.

Tech / IA
  • Anthropic
  • Claude
  • OpenAI
  • Linear
  • Vercel
  • Stripe
  • Cursor
  • GitHub
  • Figma
  • Notion
  • Raycast
  • Supabase
  • Resend
  • Cohere
  • Mistral
Finanças
  • Stripe
  • Mastercard
  • Coinbase
  • Binance
  • Kraken
  • Revolut
  • Wise
  • Shopify
Auto / Estilo de vida
  • Tesla
  • BMW
  • BMW M
  • Bugatti
  • Ferrari
  • Lamborghini
  • Nike
  • Airbnb
  • Apple
  • Starbucks
Mídia
  • The Verge
  • Wired
  • Spotify
  • YouTube
  • Sony
  • PlayStation
  • IBM
Produtividade
  • Notion
  • Slack
  • Miro
  • Intercom
  • Zapier
  • Uber
  • NVIDIA
  • SpaceX