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

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Carousel: [Título]</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      font-family: 'Inter', sans-serif; 
      background: #1a1a1a;
      padding: 40px;
    }
    .slides-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }
    .slide {
      width: 1080px;
      height: 1350px;
      background: #0A0A0A;
      color: #FFFFFF;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 60px;
      text-align: center;
    }
    /* Glow sutil de fundo */
    .slide::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: 
        radial-gradient(circle at 20% 80%, rgba(0,255,136,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0,102,255,0.05) 0%, transparent 50%);
      pointer-events: none;
    }
    .slide-number {
      position: absolute;
      top: 30px;
      right: 40px;
      font-size: 24px;
      color: #333;
      font-weight: 700;
    }
    .neon-green { color: #00FF88; }
    .electric-blue { color: #0066FF; }
    h1 { font-size: 72px; font-weight: 900; line-height: 1.1; margin-bottom: 30px; }
    h2 { font-size: 48px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; }
    p { font-size: 32px; line-height: 1.5; color: #ccc; }
    .subtext { font-size: 28px; color: #666; margin-top: 40px; }
    .stat-big { font-size: 120px; font-weight: 900; color: #00FF88; line-height: 1; }
    .stat-medium { font-size: 48px; font-weight: 700; color: #ccc; }
    blockquote {
      font-style: italic;
      font-size: 42px;
      line-height: 1.4;
      max-width: 900px;
      padding: 40px 60px;
      position: relative;
    }
    blockquote::before {
      content: '"';
      position: absolute;
      top: -20px; left: 0;
      font-size: 120px;
      color: #00FF88;
      opacity: 0.3;
    }
    .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;
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <div class="slides-container">
    <!-- Slide 1: Capa -->
    <div class="slide">
      <div class="slide-number">01</div>
      <h1>HEADLINE<br><span class="neon-green">DESTAQUE</span></h1>
      <p>Subtítulo explicativo</p>
    </div>
    
    <!-- Slide 2-N: Conteúdo -->
    <div class="slide">
      <div class="slide-number">02</div>
      <div class="stat-big">65%</div>
      <h2>Título da Estatística</h2>
      <p>Explicação do dado</p>
    </div>
    
    <!-- Slide Final: CTA -->
    <div class="slide">
      <div class="slide-number">07</div>
      <h1>Comece<br><span class="neon-green">Agora</span></h1>
      <p class="subtext">openclaw.ia.br</p>
    </div>
  </div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Twitter: [Título]</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      font-family: 'Inter', sans-serif; 
      background: #1a1a1a;
      padding: 40px;
    }
    .twitter-card {
      width: 1200px;
      height: 675px;
      background: #0A0A0A;
      color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 60px;
      position: relative;
      overflow: hidden;
    }
    .twitter-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: 
        radial-gradient(circle at 10% 90%, rgba(0,255,136,0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 10%, rgba(0,102,255,0.08) 0%, transparent 40%);
      pointer-events: none;
    }
    .content { 
      position: relative; 
      z-index: 1; 
      text-align: center;
      max-width: 1000px;
    }
    h1 { font-size: 56px; font-weight: 900; line-height: 1.2; margin-bottom: 20px; }
    p { font-size: 28px; color: #ccc; line-height: 1.5; }
    .neon-green { color: #00FF88; }
    .stat-big { font-size: 96px; font-weight: 900; color: #00FF88; }
    .logo { 
      position: absolute; 
      bottom: 30px; 
      right: 40px; 
      font-size: 20px; 
      color: #666; 
    }
  </style>
</head>
<body>
  <div class="twitter-card">
    <div class="content">
      <div class="stat-big">327%</div>
      <h1>Crescimento de<br><span class="neon-green">Agentes Multi-IA</span></h1>
      <p>em apenas 4 meses (Databricks 2026)</p>
    </div>
    <div class="logo">openclaw.ia.br</div>
  </div>
</body>
</html>

💼 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)

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>LinkedIn: [Título]</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      font-family: 'Inter', sans-serif; 
      background: #1a1a1a;
      padding: 40px;
    }
    .linkedin-card {
      width: 1200px;
      height: 627px;
      background: #0A0A0A;
      color: #FFFFFF;
      display: flex;
      padding: 50px;
      position: relative;
      overflow: hidden;
    }
    .linkedin-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: 
        radial-gradient(circle at 0% 100%, rgba(0,255,136,0.06) 0%, transparent 50%),
        radial-gradient(circle at 100% 0%, rgba(0,102,255,0.06) 0%, transparent 50%);
      pointer-events: none;
    }
    .left-col { 
      flex: 1; 
      display: flex; 
      flex-direction: column; 
      justify-content: center; 
      z-index: 1;
    }
    .right-col { 
      flex: 1; 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      z-index: 1;
    }
    h1 { font-size: 48px; font-weight: 900; line-height: 1.2; }
    p { font-size: 24px; color: #ccc; margin-top: 20px; }
    .neon-green { color: #00FF88; }
    .stat-display { font-size: 140px; font-weight: 900; color: #00FF88; }
    .logo { 
      position: absolute; 
      bottom: 25px; 
      right: 30px; 
      font-size: 18px; 
      color: #666; 
    }
  </style>
</head>
<body>
  <div class="linkedin-card">
    <div class="left-col">
      <h1>Por que<br><span class="neon-green">65%</span> das PMEs<br>já usam IA?</h1>
      <p>Pequenas empresas lideram adoção de agentes de IA</p>
    </div>
    <div class="right-col">
      <div class="stat-display">65%</div>
    </div>
    <div class="logo">openclaw.ia.br</div>
  </div>
</body>
</html>

🎨 Cores e Códigos

Paleta Principal

/* 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

.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

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">

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

Abra o HTML no navegador (Chrome/Firefox)
Pressione F12 para DevTools
Vá em “Device Toolbar” (Ctrl+Shift+M)
Configure dimensões customizadas
Clique com botão direito → “Capture screenshot”

Método 2: Puppeteer/Playwright

// 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=<id> 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

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

Mantido por Archive 📚 | Última atualização: Fevereiro 2026

Templates Visuais para Redes Sociais — Referência Completa

Templates Visuais para Redes Sociais

📁 Localização dos Arquivos

📸 Template: Instagram Carousel

Especificações

Estrutura HTML Base

Tipos de Slide

🐦 Template: Twitter/X

Especificações

Estrutura HTML Base

💼 Template: LinkedIn

LinkedIn Post (Paisagem)

LinkedIn Carousel (Quadrado)

Estrutura HTML Base (Post)

🎨 Cores e Códigos

Paleta Principal

Classes CSS Reutilizáveis

🔤 Tipografia

Fonte Principal: Inter

Tamanhos por Contexto

Pesos Recomendados

📤 Exportação para Imagens

Método 1: DevTools do Navegador

Método 2: Puppeteer/Playwright

Método 3: Browser Action (pinworker1)

📋 Convenções de Nomenclatura

Diretórios

Arquivos

📚 Catálogo de Templates Existentes

Carousels Instagram

Twitter/X

LinkedIn

Infográficos

✅ Checklist de Qualidade

Antes de Exportar

Depois de Exportar

🔗 Recursos Relacionados

📚 Continue aprendendo

Guia Completo de Desenvolvimento de Skills — OpenClaw

Agendador de Posts Sociais — Receita OpenClaw

Contribuir com Documentação — Guia Escritores