📐 social-carousel skill — quando 1:1 vs 9:16 vs 4:5
Por que cada aspect ratio existe.
O que é
Três aspect ratios cobrem 95% dos casos:
Instagram feed, LinkedIn, Twitter/X. Default seguro.
Stories, Reels, TikTok. Vertical full-screen.
Instagram feed alongado — máximo engajamento orgânico.
Por que aprender
Aspect ratio errado = corte automático ou letterbox no feed. 1:1 é safe; 4:5 ocupa mais real estate no feed do Instagram (mais visualizações). 9:16 é Stories ou Reels apenas. Saber decidir = não retrabalhar.
Conceitos-chave
- 1080px short edge: resolução padrão Instagram
- Safe zones: evitar texto crítico nas bordas
- Carousel max: Instagram aceita até 10 slides
- LinkedIn carousel: formato PDF, 1080×1080
🔗 A regra da continuidade visual
Headlines que se conectam entre cards.
O que é
Carrossel ruim = 5 cards independentes (5 headlines, 5 ideias). Carrossel bom = 1 narrativa em 5 partes. Headlines se completam: card 1 abre uma frase, card 2 continua, card 3 fecha. "Você sabe… [card 1] que 80% dos devs… [card 2] erram nessa pergunta? [card 3]"
Por que aprender
Algoritmo de Instagram premia tempo de visualização. Cards que se conectam fazem o usuário deslizar mais. Cards independentes = abandona após o primeiro. Continuidade = engajamento.
Conceitos-chave
- Sentence chain: headline atravessa cards
- Visual continuity: mesmo grid, mesma paleta, mesma tipografia
- Cliffhanger: card N termina sugerindo card N+1
- Anti-pattern: cada card com fundo de cor diferente "para variar"
📖 Estrutura: hook · proof · CTA
Card 1 (hook), 2-N (proof/story), N (CTA/loop).
O que é
Estrutura clássica:
- Card 1 — Hook: uma pergunta provocativa, número surpreendente, ou claim ousado
- Cards 2 até N-1 — Proof/Story: exemplos, dados, passos, evidências
- Card N — CTA/Loop: "salva esse post", "comenta X", "siga para mais"; ou loop visual ao card 1
Por que aprender
Sem hook = ninguém para. Sem proof = parecem afirmações vazias. Sem CTA = sem conversão. Estrutura funciona em qualquer plataforma: Instagram, LinkedIn, Twitter Threads.
Conceitos-chave
- Hook frame: número, pergunta, antes/depois
- 3 ou 5 ou 7 cards: ímpar funciona melhor (cliffhanger)
- CTA específico: "salva" > "siga"; "comenta X" > "comenta"
- Loop visual: último card sugere voltar pro primeiro (algoritmo ama)
🔁 Loop affordance
O último card sugerindo voltar ao primeiro.
O que é
Card final pode terminar com algo que se conecta visualmente ao primeiro: mesma cor de fundo, mesma silhueta de elemento, mesma tipografia. Visualmente, "feicha o ciclo". Algoritmo conta isso como retenção alta.
Por que aprender
É um truque de retenção que parece sutil mas multiplica engajamento. Sutil > óbvio: "deslize de novo" é cafona; visual loop é elegante.
Conceitos-chave
- Visual loop: mesmo elemento gráfico no card N e no 1
- Color loop: cor do fundo do último ≈ do primeiro
- Numeração contínua: "10/10" no último, "1/10" no primeiro
- Anti-pattern: "deslize de novo" escrito explicitamente
🅰️ Tipografia display em cards quadrados
Escala mínima, contraste, leitura em mobile.
O que é
Em 1080×1080, headlines precisam ser grandes: mínimo 72px de tamanho de fonte para texto principal. Em mobile (Instagram feed), 1080×1080 ocupa ~430×430 do viewport real. Texto a 72px lá fica ~30px reais — limiar de leitura confortável.
Por que aprender
Card "designer" muitas vezes tem texto bonito… mas ilegível em mobile. Como ninguém abre Instagram em desktop, isso quebra o conteúdo. P0 mecânico: text-size ≥ 72px ou warning.
Conceitos-chave
- Display ≥ 72px: sweet spot para 1080×1080
- Body ≥ 36px: bullets e labels
- Contraste 4.5:1 mínimo: WCAG AA verificado em OKLch
- Line-height tight: 1.05-1.15 para display
🏷️ Brand mark — posição, tamanho, recorrência
A regra do "logo discreto, sempre presente".
O que é
Logo aparece em todos os cards, sempre na mesma posição (canto inferior direito é default), tamanho discreto (~5% da largura). Não compete com o conteúdo, mas garante atribuição mesmo se o card for screenshot/repost.
Por que aprender
Conteúdo viraliza sem o handle. Logo embedded = atribuição garantida. Sem logo = você não recebe crédito quando viraliza. É baixo custo, alto retorno.
Conceitos-chave
- Posição fixa: mesma em todos os cards
- ~5% width: discreto mas legível
- Cor neutra: não rouba atenção do conteúdo
- @handle opcional: em apenas 1 card (primeiro ou último)
- Cliché evitado: "siga @user" gigante atrapalha
🖼️ Export: PNG por card via Playwright
Workflow imkt4/puppeteer pra exportar batch.
O que é
O HTML gerado pode ser exportado em PNGs individuais (um por card) via script Playwright/Puppeteer:
// scripts/export-carousel.js
const { chromium } = require('playwright');
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1080, height: 1080 } });
for (const card of [1,2,3,4,5]) {
await page.goto(`file://${path}?card=${card}`);
await page.screenshot({ path: `card-${card}.png` });
}
Por que aprender
Instagram aceita upload em batch (PNG). Você precisa dos arquivos individuais. Em vez de screenshot manual de cada um, batch script gera tudo em <30 segundos. Esse é o "ponto de saída" do pipeline.
Conceitos-chave
- Playwright/Puppeteer: headless browser → PNG
- ?card= deep-link: URL parameter por card
- Viewport 1080: match aspect ratio
- deviceScaleFactor 2: output 2160×2160 retina
🛠️ Hands-on
Brief: Carrossel de 5 cards explicando o que é OKLch para designers brasileiros.
Output: 5 cards encadeados, headline contínua, brand mark.
Headlines sugeridas (chain):
- Card 1: "HEX é um espaço de cor incômodo."
- Card 2: "Mesma luminosidade no HEX = brilho diferente percebido."
- Card 3: "OKLch resolve: L é perceptual."
- Card 4: "L=58 em qualquer hue parece igual."
- Card 5: "Use oklch.com pra converter. (Salva esse post.)"
Comando
/skill social-carousel /design-system editorial-monocle # cream + ink # Brief 5 cards 1080x1080 sobre OKLch para designers BR. Sentence chain entre cards. Logo @inema.club no canto inferior direito. Card 5 = CTA "salva". Loop visual: card 5 com mesma paleta do card 1.
📚 Fontes
No repositório
skills/social-carousel/SKILL.mdskills/social-carousel/assets/template.html
Externas
- Instagram aspect ratio docs
- Playwright screenshot API
- Algoritmo IG: tempo de visualização > tudo
📌 Resumo do Módulo
1. Aspect ratios: 1:1 default, 4:5 max engajamento IG, 9:16 stories/reels.
2. Continuidade visual: headlines em chain, mesma paleta/grid/tipografia.
3. Estrutura: hook (card 1) → proof (2 a N-1) → CTA/loop (N).
4. Loop affordance no último card = retenção mais alta.
5. Display ≥ 72px, body ≥ 36px, contraste 4.5:1 mínimo.
6. Brand mark sempre presente, discreto, mesmo lugar — atribuição em viral.
7. Export PNG via Playwright — batch automatizado para upload em IG.
Próximo módulo:
Módulo 2.5 · Dashboard / Tool UI →