🎨 Identidade & Temas

A theme-factory é uma skill que mantém 10 temas visuais pré-definidos (cada um com paleta de cores e par de fontes) prontos para aplicar a qualquer artifact de apresentação ou interface HTML.

Em vez de escolher cores e fontes do zero a cada novo slide ou página, você escolhe um tema e o Claude aplica tudo de forma coerente e profissional.

Presets, paleta de cores, par tipográfico, consistência visual.

A skill é acionada quando o usuário pede para aplicar um tema, trocar o visual de um deck, ou menciona "theme-factory", "tema", "palette", "cores e fontes" no contexto de um artifact.

Conhecer os gatilhos ajuda a formular pedidos que disparam a skill certa na hora certa, sem precisar invocá-la manualmente.

Description como gatilho, frases-chave, invocação automática.

Cada um dos 10 presets vive num arquivo dedicado na pasta themes/ e define cores com hex exatos, fontes para títulos e corpo, e uma identidade visual distinta para contextos diferentes (corporativo, criativo, minimalista, etc.).

Escolher o tema certo antes de gerar o artifact economiza retrabalho — cada preset já foi pensado para um tipo de audiência ou contexto.

Presets nomeados, pasta themes/, identidade por contexto.

Além dos presets, é possível descrever a identidade desejada em linguagem natural ("quero algo sombrio com tons de roxo e tipografia serifada") e a skill gera um tema coerente do zero.

Libera a criação de identidades visuais únicas sem precisar saber escolher fontes ou construir paletas a mão.

Geração de tema, linguagem natural, paleta on-demand.

O Claude lê o arquivo do tema escolhido, extrai as cores e fontes especificadas, e substitui de forma consistente todos os pontos de cor e tipografia do artifact — mantendo contraste e legibilidade.

Entender o processo ajuda a criar artifacts que se beneficiam do tema (usar variáveis CSS ou classes nomeadas, não valores hardcoded espalhados).

Substituição consistente, contraste, legibilidade.

theme-factory é a camada de estilo que se aplica em cima de qualquer artifact gerado por outra skill — frontend-design, web-artifacts-builder, canvas-design — deixando o resultado final visualmente unificado.

Saber que ela é um "passo final de estilo" ajuda a planejar o fluxo: gera o conteúdo primeiro, aplica o tema depois.

Camada de estilo, composição, passo final.

Uma skill que encapsula o manual de identidade visual Anthropic: paleta de cores oficial, tipografia corporativa (Poppins para UI, Lora para leitura longa), e regras de aplicação de acento e formas.

Permite gerar qualquer artifact no padrão visual da marca sem consultar o manual a cada vez ou errar nas cores exatas.

Manual de marca, paleta oficial, tipografia corporativa.

A skill é acionada quando se pede aplicação de "brand guidelines", "identidade Anthropic", "look-and-feel da marca", ou quando o contexto envolve documentos oficiais, apresentações corporativas ou artefatos institucionais.

Distinguir quando usar brand-guidelines (marca específica) de theme-factory (tema genérico) evita aplicar o visual errado ao contexto errado.

Contexto institucional, gatilhos de marca, especificidade.

A paleta inclui tons neutros escuros para fundos, coral/terracota como acento primário, e brancos para textos. Tipografia: Poppins (títulos e UI) e Lora (corpo de texto longo) — carregadas via Google Fonts quando necessário.

Conhecer o sistema permite criar artifacts que parecem genuinamente Anthropic — não apenas "parecidos".

Poppins, Lora, paleta Anthropic, acento de cor.

A skill aplica automaticamente a fonte correta por tipo de elemento: Poppins em headings, botões e labels de UI; Lora em parágrafos de leitura longa. Não é uma substituição cega — é inteligente ao contexto de cada tag.

Misturar fontes manualmente é onde a maioria dos designs de amador falha. A skill faz isso certo por padrão.

Hierarquia tipográfica, UI font vs reading font, aplicação contextual.

Além de cores e fontes, a skill orienta o uso de formas geométricas e acentos visuais que compõem o estilo Anthropic — bordas sutis, fundos com gradiente suave, ícones alinhados ao sistema.

São os detalhes que elevam um artifact de "bem-formatado" para "genuinamente on-brand".

Shapes, acentos, gradientes sutis, completude visual.

brand-guidelines aplica uma identidade específica e fixa (a da Anthropic). theme-factory aplica qualquer um de 10 temas neutros ou um gerado sob demanda. Use brand-guidelines para contexto institucional; theme-factory para liberdade criativa.

Confundir as duas resulta em artifact "genérico" quando se queria "corporativo" — ou o contrário.

Identidade específica vs genérica, contexto de uso, escolha consciente.

Uma skill que cria peças de arte visual original — pôsteres, thumbnails, banners, peças de campanha — usando uma metodologia de "design philosophy" que vai do conceito à execução HTML/CSS renderizável.

Diferente de gerar uma imagem por prompt de texto, canvas-design produz HTML/CSS que pode ser ajustado, exportado e reproduzido com qualidade consistente.

Arte estática, filosofia visual, HTML/CSS exportável.

A skill é acionada quando o usuário pede "crie um pôster", "faça uma peça gráfica", "design para um banner", ou menciona canvas-design. Também dispara em pedidos de "arte visual" com dimensões fixas.

Saber os gatilhos evita acionar a skill para casos onde bastaria editar um template existente — ela é melhor para criação original.

Criação original, pedidos de arte, dimensões fixas.

Antes de escrever uma linha de CSS, a skill gera uma "design philosophy": a essência visual do que será criado, a referência implícita deduzida do pedido, o sistema de cores e tipografia escolhido. É o cérebro antes das mãos.

Essa etapa de conceituação é o que diferencia arte com intenção de layout aleatório — e pode ser refinada antes de executar.

Filosofia visual, referência implícita, conceito antes do código.

O canvas é gerado como HTML/CSS com dimensões exatas em pixels. A skill usa elementos absolutos posicionados, camadas de cor e tipografia precisa para compor a peça. Para exportar para .png ou .pdf, o artifact HTML é convertido via browser.

Entender o formato HTML/CSS permite editar manualmente qualquer elemento antes de exportar — controle total.

Posicionamento absoluto, camadas, exportação via browser.

A skill suporta criação de múltiplas peças conectadas pela mesma filosofia visual — por exemplo, um pôster principal + versão stories + banner horizontal — mantendo identidade coesa em todos os formatos.

Campanhas visuais precisam de múltiplos formatos. A skill faz isso sem recriar o conceito do zero a cada peça.

Multi-formato, identidade coesa, reutilização de filosofia.

canvas-design cria peças estáticas e únicas com intenção compositiva consciente. algorithmic-art cria arte generativa em loop, ótima para fundos e animações, mas sem o mesmo controle de composição estática.

As duas skills se complementam: canvas-design para o pôster, algorithmic-art para o fundo animado atrás dele.

Estático vs generativo, composição vs sistema, complementaridade.

Uma skill que cria arte visual usando algoritmos e p5.js — a saída não é uma imagem fixa, mas um sistema que gera visuais diferentes a cada execução (ou de forma reproduzível com o mesmo seed). Inclui flow fields, partículas, noise, geometria generativa.

Arte generativa produz variações infinitas de uma mesma ideia visual — perfeita para backgrounds, heros e peças onde a estática pareceria rígida.

p5.js, sistema generativo, variações infinitas.

A skill dispara quando o usuário menciona "arte generativa", "p5.js", "flow field", "background animado", "fundo de página", "partículas", "noise field", ou quando pede algo "que gere variações". Também responde a "algorithmic art" explícito.

Pedidos vagos como "fundo legal" não disparam a skill — ser específico sobre o tipo de visual garante que a ferramenta certa entre em ação.

Gatilhos precisos, arte generativa, p5.js nomeado.

Todo algoritmo usa randomSeed(seed) e noiseSeed(seed) para tornar o resultado reproduzível: dado o mesmo número de seed, o visual gerado é idêntico. Inspirado no padrão Art Blocks de NFT generativo.

Reprodutibilidade permite iterar: encontrou uma variação bonita, anote o seed e ela sempre volta. Sem seed, a arte seria impossível de recuperar.

randomSeed, noiseSeed, padrão Art Blocks, reprodutibilidade.

O artifact gerado inclui uma sidebar com controles interativos: sliders para parâmetros numéricos (quantidade, escala, velocidade), color pickers opcionais, navegação Prev/Next/Random para seeds, e botões Regenerate, Reset, Download PNG.

Os controles transformam a arte de "gerada uma vez" para "explorada interativamente" — o usuário pode encontrar a variação perfeita sem reabrir o Claude.

Sliders, seed navigation, Download PNG, artifact auto-suficiente.

Assim como canvas-design usa uma "design philosophy", algorithmic-art define uma "algorithmic philosophy" antes de codificar: qual é a essência do sistema? Orgânico? Matemático? Caos controlado? O algoritmo flui da filosofia, não de um menu de padrões.

Sem uma filosofia clara, o resultado é ruído aleatório sem personalidade. A filosofia é o que faz a arte ter caráter.

Filosofia algorítmica, caráter visual, sistema com intenção.

algorithmic-art é ideal como background de hero section de landing page, fundo de slide animado, ou arte de destaque em portfólio. O canvas em p5.js pode ser embutido como elemento HTML e controlado por CSS para ficar atrás do conteúdo.

Saber onde encaixar a arte generativa numa página real é o passo da criação à aplicação — e é onde o valor visual é percebido pelo usuário final.

Hero background, canvas embutido, z-index, aplicação em página real.