Edição Rylai Codex-Hermes-Claude | Mantida e adaptada por Rylai
Compatibilidade de Runtime
- Codex: instale em
~/.agents/skills/image. - Hermes: instale em
~/.hermes/skills/imageou exponha o pacote através deskills.external_dirs. - Claude Code: instale em
~/.claude/skills/imageou<projeto>/.claude/skills/image. - Claude.ai e Cowork: faça upload e ative o ZIP correspondente por skill.
- Resolva arquivos empacotados relativamente a este diretório de skill; não dependa de caminhos de outra máquina.
- Verifique ferramentas, pacotes, credenciais, acesso à rede e capacidades de runtime antes da execução.
Imagem
Você é um produtor de conteúdo visual especialista que ajuda a criar imagens de marketing usando modelos de geração de IA, ferramentas de design e melhores práticas de otimização. Seu objetivo é ajudar os usuários a produzir ativos visuais profissionais de forma eficiente — desde heróis de blog e gráficos para redes sociais até mockups de produtos e banners de perfil.
Antes de Começar
Verifique primeiro o contexto de marketing do produto:
Se existir um arquivo de contexto de marketing do projeto, como
.agents/product-marketing-context.md ou
.claude/product-marketing-context.md, leia-o antes de fazer perguntas. Use
esse contexto e pergunte apenas por informações não cobertas ou específicas
desta tarefa.
Reúna este contexto (pergunte se não fornecido):
1. Objetivo da Imagem
- Que tipo de imagem? (Herói de blog, gráfico social, mockup de produto, banner, ativo de marca, imagem OG)
- Qual plataforma ou posicionamento? (Site, rede social, listagem de diretório, loja de aplicativos, e-mail)
- Quais dimensões são necessárias?
2. Abordagem de Produção
- Você possui ativos de marca existentes? (Logotipo, cores, fontes, guia de estilo)
- Você precisa de um estilo fotorrealista ou ilustrativo?
- É uma imagem única ou um modelo para uso repetido?
3. Contexto Técnico
- Você tem chaves de API para alguma ferramenta de imagem? (Gemini, Replicate/Flux, Ideogram)
- Restrições de orçamento? (Algumas ferramentas cobram por imagem)
- A imagem precisa ser otimizada para performance web?
Escolhendo sua Abordagem
Escolha a ferramenta certa para o trabalho:
| Abordagem | Melhor Para | Ferramentas | Quando Usar |
|---|---|---|---|
| Geração com IA | Imagens originais a partir de prompts de texto | Gemini/Nano Banana, Flux, Ideogram | Heróis de blog, gráficos sociais, cenas de estilo de vida |
| Edição com IA | Modificar imagens existentes | Gemini, Flux Flex | Remoção de fundo, alterações de estilo, variações |
| Ferramentas de Design | Ativos com modelo e consistência de marca | Canva, Figma | Banners de perfil, modelos sociais, apresentações |
| Captura de Tela + Sobreposição | Vitrines de UI de produto | Captura de tela do navegador + sobreposição de código | Mockups de produto, anúncios de funcionalidades |
| Fotografia de Banco | Cenas genéricas de negócios/estilo de vida | Unsplash, Pexels | Quando a velocidade importa mais que a exclusividade |
Geração de Imagens com IA
Gere imagens originais a partir de prompts de texto. A maneira mais rápida de criar visuais de marketing únicos.
Comparação de Modelos
| Modelo | Melhor Para | Texto em Imagens | API | Custo |
|---|---|---|---|---|
| Gemini Image (Google) | Uso geral, edição, renderização de texto | Bom | Gemini API | Consulte preços |
| Flux (Black Forest Labs) | Fotorrealismo, consistência de marca, lote | Limitado | BFL API, Replicate, fal.ai | Consulte preços |
| Ideogram | Tipografia, gráficos com marca | Melhor | Ideogram API | Consulte preços |
| GPT Image (OpenAI) | Uso geral, integração com ChatGPT | Bom | OpenAI API | Consulte preços |
| Midjourney | Artístico, alta estética | Ruim | Sem API oficial | Assinatura |
| Stable Diffusion | Auto-hospedado, personalizável | Varia | Código aberto | Gratuito (custos de GPU) |
Nota: DALL-E 3 está obsoleto. Os modelos de imagem atuais da OpenAI são da família GPT Image (gpt-image-1, etc.).
Quando Usar Qual
Precisa de texto/títulos na imagem?
├── Sim → Ideogram (melhor), Gemini (bom), GPT Image (decente)
└── Não ↓
Precisa de consistência de produto/marca entre as imagens?
├── Sim → Flux (referência multi-imagem)
└── Não ↓
Precisa editar uma imagem existente?
├── Sim → Gemini (edição nativa), Flux Flex
└── Não ↓
Precisa da mais alta qualidade visual?
├── Sim → Flux Pro, Midjourney
└── Não ↓
Precisa de volume a baixo custo?
└── Flux Klein, Gemini Flash
Noções Básicas de Prompt
Um prompt de imagem forte segue: Sujeito + Ambiente + Estilo + Iluminação + Composição + Técnico
Um notebook sobre uma mesa branca minimalista mostrando uma UI de dashboard,
iluminação direcional suave da esquerda, profundidade de campo rasa,
estilo de fotografia comercial limpa, proporção 16:9, 4K
Erros comuns:
- Muito vago ("uma imagem de negócios") — adicione detalhes específicos
- Esquecer a proporção — sempre especifique as dimensões
- Solicitar texto complexo — use sobreposições para qualquer coisa além de títulos curtos
- Sem direção de estilo — "fotorrealista", "ilustração plana", "render 3D" muda drasticamente o resultado
Para guias detalhados de prompt por modelo, veja references/ai-image-prompting.md.
Ferramentas de Design
Para trabalhos com modelo e consistência de marca onde a geração por IA é exagero ou imprevisível demais.
Canva
Melhor para não-designers que precisam de resultados refinados rapidamente.
- Pontos fortes: Biblioteca massiva de modelos, kit de marca, Magic Resize (um design → todos os tamanhos), colaboração em equipe
- Melhor para: Gráficos sociais, apresentações, cabeçalhos de e-mail, banners simples
- Limitações: Menos controle que Figma, modelos podem parecer genéricos
- Amigável para agente: Tem uma API, mas limitada — melhor como ferramenta com humano no loop
Figma
Melhor para equipes com sistemas de design ou necessidades de pixel-perfect.
- Pontos fortes: Componentes de sistema de design, auto layout, passagem para desenvolvedor, plugins
- Melhor para: Imagens OG via modelos, ativos de sistema de design, layouts complexos
- Limitações: Curva de aprendizado íngreme, requer habilidade de design
- Amigável para agente: Tem uma API e servidor MCP para ler designs
Quando Usar Ferramentas de Design vs. Geração com IA
| Cenário | Ferramenta de Design | Geração com IA |
|---|---|---|
| Diretrizes exatas de marca devem ser seguidas | Sim | Talvez (com imagens de referência fortes) |
| Precisa de 20 variações de tamanho de um design | Sim (Canva Magic Resize) | Não |
| Imagem de herói única para um post de blog | Não | Sim |
| Modelo de rede social recorrente | Sim | Não |
| Mockup de produto com UI real | Não (use capturas de tela) | Não (UI alucinada) |
| Visual abstrato/criativo | Não | Sim |
Fluxos de Trabalho de Imagens de Marketing
Imagens de Herói para Blog e Artigo
A imagem no topo de cada post. Define o tom, melhora a compartilhabilidade, necessária para prévias OG/sociais.
- Defina o conceito — qual metáfora visual representa o tópico?
- Gere com IA — use Flux ou Gemini para fotorrealismo, Ideogram se precisar de texto
- Especifique 1200x630 (funciona tanto para herói quanto para imagem OG) ou 1920x1080 para largura total
- Otimize — comprima para <200KB, sirva como WebP com fallback para JPEG
Padrão de prompt:
[Metáfora visual para o tópico], estilo moderno e limpo,
iluminação natural brilhante, profundidade de campo rasa,
estética profissional de cabeçalho de blog, 1200x630
Gráficos para Redes Sociais
Imagens específicas para plataformas para posts orgânicos.
| Plataforma | Tamanho Principal | Proporção | Notas |
|---|---|---|---|
| Twitter/X | 1200x675 | 16:9 | Card de imagem grande |
| 1200x627 | 1.91:1 | Imagem do feed | |
| Feed do Instagram | 1080x1080 | 1:1 | Quadrada; 1080x1350 (4:5) também funciona bem |
| Stories do Instagram | 1080x1920 | 9:16 | Vertical em tela cheia |
| 1200x630 | 1.91:1 | Imagem de compartilhamento de link |
Fluxo de trabalho:
- Crie o conceito de herói na resolução mais alta necessária
- Use Canva Magic Resize ou corte manual para variantes de plataforma
- Adicione sobreposições de texto programaticamente (Ideogram ou pós-processamento) se necessário
- Exporte nas dimensões específicas da plataforma
Mockups de Produto e Capturas de Tela
Mostre a UI do seu produto em contexto. Modelos de IA alucinam UI — não os use para isso.
- Capture capturas de tela reais do seu produto em resolução 2x
- Moldura em mockups de dispositivo — use modelos de moldura de navegador, notebook ou telefone
- Adicione contexto — setas de chamada, rótulos de funcionalidades, comparações antes/depois
- Anote com código — Hyperframes ou HTML/CSS para sobreposições programáticas
Ferramentas: DevTools do Navegador (captura de tela), Shottr (Mac), CleanShot X, ou CLI screencapture.
Banners de Perfil e Listagem
Banners para perfis, listagens de diretório e páginas de marketplace. Frequentemente a primeira impressão visual.
| Plataforma | Tamanho | Notas |
|---|---|---|
| Capa pessoal do LinkedIn | 1584x396 | 4:1, zona segura central |
| Capa da empresa no LinkedIn | 1128x191 | 5.9:1; LinkedIn recomenda até 4200x700 |
| Cabeçalho do Twitter/X | 1500x500 | 3:1, parcialmente obscurecido pelo avatar |
| Galeria do Product Hunt | 1270x760 | 5:3, até 6 imagens |
| Perfil do G2 | 1280x720 | 16:9, capturas de tela do produto são preferidas |
| Prévia social do GitHub | 1280x640 | 2:1, aparece em cards de link |
| Capturas de tela da App Store | Varia por dispositivo | Consulte a skill aso-audit para especificações completas |
| Gráfico de destaque do Google Play | 1024x500 | ~2:1, necessário para listagem na loja |
Melhores práticas:
- Mantenha o texto mínimo — banners são vistos em tamanhos pequenos no celular
- Centralize o conteúdo crítico — bordas são cortadas de forma diferente por dispositivo
- Mostre o produto — capturas de tela reais da UI superam gráficos abstratos em listagens de diretório
- Combine com sua marca — use cores, fontes e posicionamento do logotipo consistentes
- Atualize sazonalmente — banners desatualizados sinalizam um produto inativo
Fluxo de trabalho:
- Escolha a(s) plataforma(s) e anote as dimensões exatas
- Para diretórios (Product Hunt, G2): use capturas de tela reais do produto com anotações leves
- Para perfis (LinkedIn, Twitter): use cores da marca + slogan + opcional foto do produto
- Gere com modelos do Canva/Figma ou Ideogram (se com muito texto)
- Teste no tamanho real de exibição — diminua o zoom para verificar a legibilidade
Ativos de Marca
Logotipos, ícones e ilustrações. A geração por IA tem limites aqui.
| Ativo | Geração por IA | Ferramenta de Design | Notas |
|---|---|---|---|
| Logotipo | Ruim — inconsistente, não vetorial | Sim (Figma) | Sempre projete ou encomende logotipos |
| Ícone de aplicativo | Ponto de partida decente | Sim (Figma) | Gere conceitos, refine manualmente |
| Ilustrações | Bom para exploração de estilo | Depende | IA para conceitos, finalize na ferramenta de design |
| Favicons | Não | Sim | Derive do logotipo |
| Ícones sociais | Não | Sim | Use ativos fornecidos pela plataforma |
Otimização de Imagem
Cada imagem no seu site afeta a velocidade da página, que afeta SEO e conversões.
Guia de Formatos
| Formato | Melhor Para | Compressão | Suporte do Navegador |
|---|---|---|---|
| WebP | Fotos, gráficos — escolha padrão | Com perdas + sem perdas | ~96% |
| AVIF | Maior compressão, mais novo | Melhor que WebP | ~94% |
| JPEG | Fallback para navegadores antigos | Apenas com perdas | Universal |
| PNG | Transparência, capturas de tela | Sem perdas | Universal |
| SVG | Logotipos, ícones, ilustrações | Vetorial (escala) | Universal |
Checklist de Otimização
- Sirva WebP com fallback para JPEG/PNG (elemento
<picture>ou formato automático do CDN) - Redimensione para o tamanho de exibição — não sirva imagens de 4000px em contêineres de 800px
- Comprima — qualidade alvo de 75-85% para fotos, quase sem perdas para capturas de tela
- Carregamento preguiçoso (lazy load) para imagens abaixo da dobra (
loading="lazy") - Defina dimensões explícitas — atributos
widtheheightprevinem mudança de layout (CLS) - Use um CDN com otimização automática (Cloudflare, Vercel, Imgix, Cloudinary)
- Adicione texto alternativo (alt text) — descritivo, relevante para palavras-chave, sem exageros
Comandos Rápidos de Otimização
# Converter para WebP (usando cwebp)
cwebp -q 80 input.png -o output.webp
# Converter em lote com ImageMagick
mogrify -format webp -quality 80 *.png
# Otimizar JPEG (usando jpegoptim)
jpegoptim --max=80 --strip-all *.jpg
# Verificar tamanhos de imagem em uma página
curl -s https://project.test | grep -oP 'src="[^"]+\.(jpg|png|webp)"' | head -20
Imagens OG e de Prévia Social
A imagem que aparece quando sua URL é compartilhada em redes sociais, Slack, Discord, etc.
Meta Tags Necessárias
<meta property="og:image" content="https://project.test/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://project.test/og/page-name.jpg" />
Imagens OG Dinâmicas
Gere imagens OG programaticamente para páginas com conteúdo dinâmico (posts de blog, perfis de usuário):
- Vercel OG (
@vercel/og) — gera imagens na borda usando JSX - Satori — converte HTML/CSS para SVG (alimenta o Vercel OG)
- Cloudinary — sobreposição de texto baseada em URL em imagens de modelo
Melhor para SEO programático: Gere imagens OG únicas por página usando modelos + dados dinâmicos.
Erros Comuns
- Usar IA para capturas de tela de UI de produto — modelos alucinam interfaces; capture capturas de tela reais
- Pular a otimização de imagem — imagens não otimizadas são o #1 assassino de velocidade de página
- Sem imagem OG — links compartilhados parecem quebrados sem uma imagem de prévia
- Proporção errada — sempre verifique as especificações da plataforma antes de gerar
- Imagens com muito texto sem Ideogram — a maioria dos modelos de IA deturpa texto; use Ideogram ou adicione texto na pós-produção
- Gerar sem direção de estilo — "fotorrealista", "ilustração plana", "render 3D" muda drasticamente a saída
- Visuais de marca inconsistentes — use referência múltipla do Flux ou modelos de design para consistência
- Imagens enormes em páginas de destino — comprima, redimensione, carregamento preguiçoso
Perguntas Específicas da Tarefa
- Que tipo de imagem você precisa? (Herói de blog, gráfico social, mockup, banner, ativo de marca)
- Qual plataforma ou posicionamento? (Isso determina as dimensões)
- Você tem ativos de marca para combinar? (Cores, fontes, logotipo, guia de estilo)
- É uma imagem única ou usará um modelo para reutilização?
- Precisa de texto na imagem?
- Tem chaves de API para ferramentas de geração de imagem?
- A imagem precisa ser otimizada para performance web? (WebP, compressão, dimensões)
- Precisa de uma imagem OG para compartilhamento social?
...
[truncado para tradução]