🧩 O que é / o que faz
Definição precisa a partir do SKILL.md do canvas-design.
Arte visual original em .png e .pdf por filosofia de design.
O canvas-design cria imagens estáticas de qualidade museológica. O processo tem dois estágios: primeiro gera uma filosofia de design (manifesto de um movimento estético, em arquivo .md), depois expressa essa filosofia visualmente — 90% imagem, 10% texto essencial — produzindo o arquivo final .pdf ou .png. Nunca copia artistas existentes, evitando violação de copyright.
A distinção crítica: o skill não cria documentos com decoração. Cria objetos de arte que comunicam através de forma, espaço, cor e composição — não por parágrafos explicativos. Texto aparece como elemento visual raro e poderoso, nunca como bloco corrido.
✓ O canvas-design produz
- ✓ Pôsteres de evento / campanha visual
- ✓ OG images e meta thumbnails
- ✓ Hero images estáticas para landing pages
- ✓ Material de divulgação impresso (.pdf)
- ✓ Peças de arte conceitual e editorial
- ✓ Assets de identidade visual estáticos
✗ O canvas-design não faz
- ✗ Animações ou vídeos (→ use remotion)
- ✗ Páginas HTML interativas (→ use frontend-design)
- ✗ Arte gerada por código/algoritmo (→ use algorithmic-art)
- ✗ Sistemas de tokens ou paletas (→ use theme-factory)
- ✗ Cópia de estilo de artistas específicos
🎣 Quando dispara
Os gatilhos exatos que fazem o Claude acionar o canvas-design.
"Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations."
Palavras e contextos que disparam o skill
"Crie um pôster para o evento X", "quero um poster de divulgação", "faça um poster estilo futurista"
"Crie uma peça de arte para minha marca", "quero um design estático", "faça uma arte visual"
"Preciso de uma OG image para o site", "crie uma thumbnail estática", "quero uma hero image"
"Preciso de material visual para campanha", "crie assets de divulgação", "quero um flyer / banner estático"
O gatilho é semântico: qualquer pedido de imagem estática final (não animada, não HTML) com intenção visual/artística dispara o skill. Quando há dúvida entre canvas-design e algorithmic-art, a diferença está na execução — canvas usa filosofia estética manual; algorithmic usa código (p5.js, etc.).
🚀 Como melhora suas páginas
Valor concreto que o canvas-design traz para projetos web e de identidade.
Páginas HTML são construídas de código — mas o que aparece para o usuário na primeira impressão é frequentemente uma imagem estática: o OG image no preview do WhatsApp/Slack, a hero section, o thumbnail do curso. O canvas-design eleva exatamente essa camada.
OG Images & Meta
Quando seu link é compartilhado no WhatsApp, Twitter, Slack ou LinkedIn, o que aparece é a OG image. Um pôster gerado pelo canvas-design substitui o screenshot automático genérico por uma peça visual intencional e profissional.
Heroes Estáticos
Quando a hero section não precisa de animação, um .png gerado por filosofia de design é mais leve, mais controlado e pode ter qualidade editorial — algo que HTML/CSS raramente atinge sem muito esforço.
Material de Divulgação
Posts para Instagram, banners de lançamento, capas de curso — assets que precisam funcionar fora do contexto web. O canvas-design gera esses assets no mesmo fluxo que o desenvolvimento da página.
Num projeto de landing page, o workflow ideal é: brand-guidelines define a identidade → theme-factory gera os tokens de cor → canvas-design cria o pôster e a OG image → frontend-design constrói a página usando os assets gerados. O canvas-design é o elo entre identidade visual e presença web.
✓ Casos de alto impacto
- ✓ OG image do curso — aparece em todo compartilhamento
- ✓ Thumbnail de módulo — identidade visual consistente
- ✓ Pôster de lançamento — divulgação integrada ao desenvolvimento
- ✓ Capa de e-book / PDF — qualidade editorial direto do Claude
✗ Quando não resolve
- ✗ Precisa de interatividade → use frontend-design
- ✗ Precisa de movimento → use animation-designer ou remotion
- ✗ Precisa de variações sistemáticas → use algorithmic-art
- ✗ Precisa editar foto existente (retocar, remover bg) → ferramenta dedicada
⚙️ Como funciona por dentro
Stack, abordagem, arquivos e etapas reais do canvas-design.
O canvas-design é um processo bifásico: Fase 1 gera o manifesto filosófico; Fase 2 interpreta e expressa esse manifesto visualmente. A mesma instância do Claude recebe a filosofia e a executa — é como escrever um manifesto artístico e depois pintar seguindo ele.
Pipeline interno — passo a passo
O SKILL.md instrui o Claude a pegar a entrada do usuário não como restrição literal, mas como ponto de partida para deduzir uma referência cultural/estética implícita. Ex: "pôster para festival de jazz noturno" → referência: minimalismo gráfico dos anos 60.
Gera um manifesto de 4-6 parágrafos: nomeia o movimento estético ("Chromatic Silence", "Brutalist Joy"), articula como ele se expressa em espaço, cor, escala, composição e hierarquia. Enfatiza artesanato — o resultado deve parecer feito com incontáveis horas de trabalho por alguém no topo da área.
A segunda fase usa a filosofia como bíblia científica. Cria composição única: padrões repetidos, formas perfeitas, camadas sobrepostas. Prioridade total à qualidade — composição, espaçamento, escolha de cor, tipografia — tudo screams expert-level craftsmanship.
Entrega dois arquivos: a filosofia em .md e o arquivo visual em .pdf ou .png. A opção multi-page (.pdf com várias páginas) existe quando o contexto pede — por padrão é uma página única.
O SKILL.md é explícito: nunca copie o estilo de artistas existentes. O skill cria movimentos estéticos originais. Se o usuário pedir "no estilo de Mondrian" ou "igual a Saul Bass", o canvas-design deve interpretar a essência filosófica (grid, geometria primária; contraste tipográfico limpo) e criar algo novo — não uma reprodução.
💬 Exemplo prático + PROMPT pronto
Prompts reais para colar no Claude Code e acionar o canvas-design.
Cenário A — OG image para um curso online
Você criou uma landing page de curso de design e precisa de uma OG image que apareça quando o link for compartilhado (1200×630px).
Cenário B — Pôster de lançamento de produto
Você está lançando um SaaS de automação e quer um pôster para redes sociais (formato quadrado 1080×1080px).
Cenário C — Hero image estática para landing page
- • Especifique dimensões e formato (.png ou .pdf)
- • Dê contexto emocional/temático (não instruções de layout)
- • Limite o texto que deve aparecer — quanto menos, melhor para o skill
- • Nunca peça para "copiar o estilo de X" — peça "inspiração na filosofia de X"
- • Para multi-page, mencione explicitamente: "quero 3 páginas de layout diferente"
🧬 Combina com / limites
Composições poderosas com outros skills e quando não usar o canvas-design.
O canvas-design vive no centro da Trilha 2, entre a identidade de marca (brand-guidelines, módulo 2.2) e a arte gerada por código (algorithmic-art, módulo 2.4). Entender os três juntos revela quando usar cada um:
Define regras, paleta e voz da marca. É o conjunto de restrições dentro do qual o canvas-design vai criar. Alimenta a filosofia de design com as cores e o tom corretos.
Cria peças de arte estáticas usando filosofia. Recebe as restrições do brand-guidelines e as transforma em imagens de qualidade editorial. Saída: .png e .pdf.
Gera arte por código (p5.js, scripts). Onde canvas-design cria peças únicas manuais, algorithmic-art cria sistemas e variações infinitas. Para wallpapers generativos, padrões procedurais e arte interativa.
Composições com outros skills
Use theme-factory para gerar os tokens de cor da marca (primary, secondary, accent) → passe para canvas-design como paleta → garante que o pôster e a OG image usam exatamente as mesmas cores que o sistema de design do site.
brand-guidelines define tom de voz e restrições visuais → canvas-design recebe esse briefing e cria dentro das regras → resultado: coerência total entre identidade documental e expressão visual das peças.
canvas-design cria o pôster principal da campanha (peça única, alto impacto) → algorithmic-art gera as variações e padrões procedurais baseados na mesma estética (wallpapers, texturas, backgrounds). Juntos cobrem peças únicas e sistemas visuais.
canvas-design entrega a hero image e a OG image como .png → frontend-design usa esses assets ao construir a página HTML. Separação clara de responsabilidades: arte visual ≠ código web.
- ✗ Precisa de animação — qualquer movimento ou transição → use animation-designer, remotion ou seedance.
- ✗ Variações em massa — dezenas de versões de uma peça → use algorithmic-art (sistemas de código geram variações infinitas).
- ✗ Edição de foto existente — remover fundo, retocar, redimensionar → use ferramentas de edição dedicadas (não é o domínio do skill).
- ✗ Conteúdo interativo — formulário, botão, componente de UI → use frontend-design ou web-artifacts-builder.
- ✗ Diagramas técnicos — fluxogramas, arquitetura de sistema → use beautiful-mermaid ou excalidraw.
📋 Resumo do Módulo 2.3
O que você aprendeu
- ✓ canvas-design cria arte visual em .png e .pdf por filosofia de design
- ✓ Processo bifásico: manifesto .md → expressão visual no canvas
- ✓ Dispara em pedidos de pôster, peça de arte, design estático, OG image
- ✓ Ideal para OG images, heroes estáticos e material de divulgação
- ✓ Nunca copia artistas — cria movimentos estéticos originais
- ✓ Complementa brand-guidelines (alimentação) e algorithmic-art (variações)
- ✓ Não faz animações, variações em massa ou UI interativa
Referência rápida
Arte gerada por código — sistemas visuais procedurais com p5.js, variações infinitas e padrões algorítmicos. O complemento perfeito para o canvas-design.