--- title: "Templates Visuais para Redes Sociais — Referência Completa" url: "https://openclaw.ia.br/docs/social-visual-templates/" markdown_url: "https://openclaw.ia.br/docs/social-visual-templates.MD" description: "Catálogo de templates HTML para criação de conteúdo visual para Instagram, Twitter e LinkedIn. Especificações, exportação e exemplos." date: "2026-02-01" author: "" --- # Templates Visuais para Redes Sociais — Referência Completa Catálogo de templates HTML para criação de conteúdo visual para Instagram, Twitter e LinkedIn. Especificações, exportação e exemplos. # Templates Visuais para Redes Sociais Referência completa dos templates HTML usados para criar conteúdo visual do OpenClaw. --- ## Localização dos Arquivos ``` ~/clawd/openclaw-brasil/static/images/social/ ├── carousel-*/ # Carousels Instagram/LinkedIn │ └── slides.html # Template HTML ├── linkedin/ # Imagens LinkedIn ├── twitter-*/ # Imagens Twitter ├── instagram/ # Conteúdo específico Instagram ├── threads/ # Conteúdo Threads └── reels-*/ # Frames para Reels ``` --- ## Template: Instagram Carousel ### Especificações | Atributo | Valor | |----------|-------| | Dimensões | 1080 × 1350 px | | Aspect Ratio | 4:5 | | Formato | PNG (export) | | Tamanho máx. | 5MB por slide | | Slides recomendados | 5-10 | ### Estrutura HTML Base ```html Carousel: [Título]
01

HEADLINE
DESTAQUE

Subtítulo explicativo

02
65%

Título da Estatística

Explicação do dado

07

Comece
Agora

openclaw.ia.br

``` ### Tipos de Slide | Tipo | Uso | Elementos | |------|-----|-----------| | **Capa** | Slide 1 | Headline + subtítulo, sem logo | | **Estatística** | Slides 2-N | Número grande + contexto | | **Citação** | Slides 2-N | Quote + autor | | **Lista** | Slides 2-N | 3-5 bullet points | | **Comparação** | Slides 2-N | Antes/Depois ou VS | | **CTA** | Último | CTA + logo + URL | --- ## Template: Twitter/X ### Especificações | Atributo | Valor | |----------|-------| | Dimensões | 1200 × 675 px | | Aspect Ratio | 16:9 | | Formato | PNG ou JPEG | | Tamanho máx. | 5MB | ### Estrutura HTML Base ```html Twitter: [Título]
327%

Crescimento de
Agentes Multi-IA

em apenas 4 meses (Databricks 2026)

``` --- ## Template: LinkedIn ### LinkedIn Post (Paisagem) | Atributo | Valor | |----------|-------| | Dimensões | 1200 × 627 px | | Aspect Ratio | 1.91:1 | | Formato | PNG | ### LinkedIn Carousel (Quadrado) | Atributo | Valor | |----------|-------| | Dimensões | 1080 × 1080 px | | Aspect Ratio | 1:1 | | Formato | PDF ou PNG | ### Estrutura HTML Base (Post) ```html LinkedIn: [Título]

Por que
65% das PMEs
já usam IA?

Pequenas empresas lideram adoção de agentes de IA

65%
``` --- ## Cores e Códigos ### Paleta Principal ```css /* Fundo */ --dark-bg: #0A0A0A; --preview-bg: #1a1a1a; /* Texto */ --text-primary: #FFFFFF; --text-secondary: #CCCCCC; --text-muted: #666666; --text-dark: #333333; /* Acentos */ --neon-green: #00FF88; --electric-blue: #0066FF; /* Gradientes de fundo */ --glow-green: radial-gradient(circle at 20% 80%, rgba(0,255,136,0.05) 0%, transparent 50%); --glow-blue: radial-gradient(circle at 80% 20%, rgba(0,102,255,0.05) 0%, transparent 50%); /* Box de destaque */ --highlight-bg: linear-gradient(135deg, rgba(0,255,136,0.1) 0%, rgba(0,102,255,0.1) 100%); --highlight-border: rgba(0,255,136,0.3); ``` ### Classes CSS Reutilizáveis ```css .neon-green { color: #00FF88; } .electric-blue { color: #0066FF; } .stat-big { font-size: 120px; font-weight: 900; color: #00FF88; line-height: 1; } .stat-medium { font-size: 48px; font-weight: 700; color: #ccc; } .subtext { font-size: 28px; color: #666; } .highlight-box { background: linear-gradient(135deg, rgba(0,255,136,0.1) 0%, rgba(0,102,255,0.1) 100%); border: 2px solid rgba(0,255,136,0.3); border-radius: 20px; padding: 40px; } ``` --- ## Tipografia ### Fonte Principal: Inter ```html ``` ### Tamanhos por Contexto | Plataforma | H1 | H2 | Parágrafo | Stat Big | |------------|----|----|-----------|----------| | Instagram Carousel | 72px | 48px | 32px | 120px | | Twitter | 56px | 36px | 28px | 96px | | LinkedIn Post | 48px | 32px | 24px | 140px | | LinkedIn Carousel | 60px | 40px | 28px | 100px | ### Pesos Recomendados | Peso | Uso | |------|-----| | 900 | Headlines, números de impacto | | 700 | Subtítulos | | 600 | Destaques em texto | | 400 | Corpo de texto | --- ## Exportação para Imagens ### Método 1: DevTools do Navegador 1. Abra o HTML no navegador (Chrome/Firefox) 2. Pressione `F12` para DevTools 3. Vá em "Device Toolbar" (`Ctrl+Shift+M`) 4. Configure dimensões customizadas 5. Clique com botão direito → "Capture screenshot" ### Método 2: Puppeteer/Playwright ```javascript // screenshot.js const puppeteer = require('puppeteer'); async function captureSlides(htmlPath, outputDir) { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(`file://${htmlPath}`); const slides = await page.$$('.slide'); for (let i = 0; i < slides.length; i++) { await slides[i].screenshot({ path: `${outputDir}/slide-${String(i + 1).padStart(2, '0')}.png` }); } await browser.close(); } captureSlides('./slides.html', './output'); ``` ### Método 3: Browser Action (pinworker1) ``` browser action=open target=node node=pinworker1 profile=clawd targetUrl="file:///path/to/slides.html" browser action=screenshot target=node node=pinworker1 profile=clawd targetId= fullPage=true ``` --- ## Convenções de Nomenclatura ### Diretórios | Padrão | Exemplo | |--------|---------| | `carousel-[tema]/` | `carousel-gen-z-ia/` | | `linkedin-[tema]/` | `linkedin-eupresario/` | | `twitter-[tema]/` | `twitter-ia-autonoma/` | | `campanha-[nome]/` | `campanha-carnaval-2026/` | ### Arquivos | Tipo | Padrão | Exemplo | |------|--------|---------| | Template HTML | `slides.html` | `carousel-xyz/slides.html` | | Slide exportado | `slide-NN.png` | `slide-01.png` | | Imagem única | `[plataforma]-[tema].png` | `twitter-mei-ia-stats.png` | | Conceito | `*-concept.md` | `eupresa-twitter-concept.md` | --- ## Catálogo de Templates Existentes ### Carousels Instagram | Pasta | Tema | Slides | |-------|------|--------| | `carousel-empresa-bilhao/` | Empresa de $1B com uma pessoa | 7 | | `carousel-gen-z-ia/` | Gen Z e IA no trabalho | 7 | | `carousel-agentic-commerce/` | Comércio agêntico | 8 | | `carousel-3-sinais/` | Sinais que precisa de IA | 5 | | `carousel-7-sinais/` | 7 sinais completos | 7 | | `carousel-8-prompts/` | Prompts essenciais | 8 | | `carousel-5-negocios/` | 5 negócios com IA | 6 | | `ferramentas-ia-carousel/` | Ferramentas de IA | - | | `marco-legal-carousel/` | Marco legal IA Brasil | - | ### Twitter/X | Arquivo | Tema | |---------|------| | `twitter-ai-agents-growth.png` | Crescimento do mercado | | `twitter-ai-agents-latam.png` | Oportunidade LATAM | | `twitter-ai-agents-trust.png` | Confiança em IA | | `twitter-mei-ia-free.png` | IA grátis para MEIs | | `twitter-mei-ia-stats.png` | Estatísticas MEI | | `twitter-eupresario-hook.png` | Hook Eupresário | | `twitter-eupresario-vision.png` | Visão Eupresário | ### LinkedIn | Arquivo | Tema | |---------|------| | `linkedin-eupresario-bilionario.png` | Empresário bilionário | | `linkedin/chatbot-vs-agente.html` | Comparação chatbot vs agente | ### Infográficos | Arquivo | Tema | |---------|------| | `infografico-89-vs-10.png` | 89% vs 10% adoção | | `10-tendencias-ia-brasil-2026.svg` | Tendências 2026 | --- ## ✅ Checklist de Qualidade ### Antes de Exportar - [ ] Dimensões corretas para a plataforma - [ ] Fonte Inter carregada (verificar renderização) - [ ] Cores dentro da paleta (#00FF88, #0066FF, etc.) - [ ] Contraste texto/fundo adequado - [ ] Número do slide visível (carousels) - [ ] Textos sem erros ortográficos - [ ] Logo no slide final (CTA) ### Depois de Exportar - [ ] Arquivo PNG/JPG gerado corretamente - [ ] Dimensões verificadas no arquivo - [ ] Tamanho < 5MB - [ ] Texto legível em miniatura - [ ] Cores não distorcidas --- ## Recursos Relacionados - [Guia de Estilo Visual](/docs/brand-guidelines/) - [Contribuir com Skills](/contribuir/skills/) - [Discord - Suporte](https://discord.com/invite/clawd) --- *Mantido por Archive | Última atualização: Fevereiro 2026*