🧩 O que é o theme-factory
Um toolkit para estilizar artifacts com um tema. Funciona com slides, docs, relatórios e landing pages HTML — aplicando uma identidade visual consistente: paleta de cores + pares de fontes selecionados.
O theme-factory entende que estética importa tanto quanto conteúdo. Ele oferece 10 temas pré-definidos com combinações de cores e fontes cuidadosamente escolhidas — cada um com identidade visual distinta — e permite que você gere um tema completamente novo descrevendo o que quer.
Cada tema vive em um arquivo de especificação no diretório themes/, com palette hex completa e pares de fontes complementares.
- ✓ Skill de aplicação de tema: cores + fontes + identidade
- ✓ 10 temas pré-definidos com showcase em PDF
- ✓ Geração de tema customizado on-the-fly por descrição
- ✓ Funciona com qualquer artifact: slides, docs, HTML, relatórios
- ✗ Não cria o artifact em si — só o estiliza
- ✗ Não é um sistema de design completo com componentes
- ✗ Não substitui brand-guidelines de uma marca específica
- ✗ Não automatiza geração de imagens ou ícones
🎣 Quando o Claude aciona o theme-factory
O skill é acionado quando o pedido envolve estilizar ou tematizar um artifact existente ou novo com cores e fontes coesas.
A description do skill é: "Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly." O Claude interpreta pedidos de "aplicar tema", "deixar mais bonito", "usar uma paleta" ou "estilizar" como gatilhos diretos.
"Aplica o tema Ocean Depths nesse slide", "quero um visual dark elegante", "usa o tema Tech Innovation"
"Deixa esse relatório com cara mais profissional", "melhora o visual dessa landing page", "precisa de uma identidade visual"
"Cria um tema com tons de vinho e tipografia elegante", "quero um tema florestal moderno para minha startup"
Slides ou docs já existentes que o usuário quer uniformizar visualmente antes de apresentar
Se o pedido menciona uma marca específica com identidade visual definida (logo, cores institucionais, fonte proprietária), o skill brand-guidelines é mais adequado. theme-factory é para quando qualquer tema belo serve — sem restrições de marca.
🚀 Como melhora seus artifacts
Coerência visual transforma conteúdo bom em apresentação memorável. O theme-factory entrega isso sem que você precise ser designer.
- • Cores padrão do browser (azul de link, preto de texto)
- • Fonte genérica (Arial, sans-serif)
- • Inconsistência entre seções
- • Parece rascunho, não produto
- • Paleta marítima coesa do título ao rodapé
- • Par tipográfico harmonioso selecionado
- • Cada elemento tem cor intencional
- • Parece produto acabado, apresentável
O skill referencia um theme-showcase.pdf com todos os 10 temas visualizados. Peça ao Claude para mostrar o showcase antes de escolher — assim você decide com base em referência visual real, não só no nome.
⚙️ Como funciona por dentro
O processo de aplicação de tema segue etapas definidas: escolha → leitura do arquivo de especificação → aplicação consistente em todo o artifact.
O Claude apresenta as opções ou o usuário nomeia diretamente. Se nenhum dos 10 serve, parte para criação customizada.
themes/<nome>Cada tema tem um arquivo de spec no diretório themes/ com palette hex completa e par de fontes. O Claude lê esse arquivo antes de aplicar.
Cores e fontes são aplicadas uniformemente — fundo, textos, bordas, botões, destaques. Contraste e legibilidade são mantidos.
O tema se propaga por todos os elementos para criar uma experiência visual unificada do início ao fim.
Quando nenhum dos 10 temas serve, o Claude gera um tema novo baseado nos inputs do usuário. O tema recebe um nome descritivo, é mostrado para revisão/aprovação e depois aplicado. O processo espelha os temas existentes em estrutura.
💬 Exemplo prático + prompts prontos
Cenários reais de uso do theme-factory, com prompts que você pode copiar e colar direto no Claude Code.
Sempre que pedir um tema customizado, o Claude vai mostrar o tema para aprovação antes de aplicar. Isso evita retrabalho — você valida cores e fontes em modo de rascunho e só então parte para o artifact completo.
- ✓ Nomear o tema diretamente ("Ocean Depths")
- ✓ Descrever o mood ("dark elegante", "natural orgânico")
- ✓ Citar o contexto do artifact ("slides de vendas")
- ✓ Pedir revisão antes da aplicação final
- ✗ Pedir tema sem ter um artifact para aplicar
- ✗ Misturar dois temas ao mesmo tempo no mesmo artifact
- ✗ Usar theme-factory para logos ou ícones (não é seu escopo)
- ✗ Ignorar a revisão do tema customizado antes de aplicar
🧬 Combina com / limites
O theme-factory brilha quando combinado com outros skills — especialmente brand-guidelines e frontend-design — e tem limites claros quando a identidade visual já é prescrita.
O theme-factory é ótimo quando qualquer tema bonito serve. O brand-guidelines entra quando você tem uma marca específica com cores e fontes institucionais definidas — logo proprietário, manual de identidade visual, regras de uso. Use theme-factory para protótipos e materiais internos; brand-guidelines quando o output vai para clientes ou representa a marca oficialmente.
O theme-factory define a paleta e as fontes. O frontend-design implementa esse sistema em componentes React/Tailwind/shadcn — botões, cards, headers, formulários. Juntos cobrem do visual ao código: tema → design system → componentes de produção.
Após definir um tema, o canvas-design usa as mesmas cores e fontes para criar composições artísticas — banners, thumbnails, covers. Consistência visual se estende além dos docs.
-
✗
Marca com identidade prescrita: se a empresa já tem manual de marca com hex codes definidos, use brand-guidelines diretamente — não faz sentido escolher um dos 10 temas.
-
✗
Artifact com tema correto já aplicado: se o documento já está estilizado e consistente, aplicar outro tema vai sobrescrever escolhas intencionais.
-
✗
Necessidade de animação ou motion design: para isso, animation-designer ou remotion são os skills certos.
📋 Resumo do Módulo 2.1
- ✓ theme-factory é um toolkit para estilizar slides, docs, relatórios e landing pages HTML
- ✓ 10 temas pré-definidos: Ocean Depths, Midnight Galaxy, Tech Innovation e mais 7
- ✓ Cada tema define paleta hex + par de fontes em arquivo no diretório
themes/ - ✓ Temas customizados gerados on-the-fly por descrição + revisão antes da aplicação
- ✓ Use brand-guidelines quando tiver marca específica com identidade prescrita
- ✓ Combina com frontend-design (implementação) e canvas-design (composições)