FeedGenie

Gere posts e carrosséis de Instagram prontos para publicação a partir de um prompt — sem Canva, sem Photoshop, sem sair do terminal.

FeedGenie é um pipeline de skills + biblioteca Node.js que conecta Claude Code / Codex ao Playwright para transformar prompts em PNGs de 1080×1080 (post) ou 1080×1350 (carrossel). O agente cuida da parte criativa; a lib cuida do determinístico.

"crie um carrossel sobre erros em gráficas rápidas"
            │
            ▼
    FeedGenie (Claude Code skill)
    ├─ WebSearch → tendências e ângulos
    ├─ LLM → copy estruturado (JSON)
    ├─ Handlebars → HTML 1080px
    └─ Playwright → PNG pronto para Instagram

Índice

1. Pré-requisitos
2. Instalação rápida
3. Instalar skills no Claude Code
4. Usar com Codex CLI
5. CLI — referência de comandos
6. Schema do conteúdo
7. API programática (TypeScript)
8. Skills disponíveis
9. Exemplos de prompt
10. Configuração de tema
11. Testes
12. Roadmap

Pré-requisitos

| Requisito | Versão mínima | |---|---| | Node.js | 20+ | | npm | 10+ | | Claude Code CLI | qualquer versão recente | | Chromium (via Playwright) | instalado pelo script |

Instalação rápida

# 1. Clone o repositório
git clone https://github.com/hadagalberto/FeedGenie.git
cd FeedGenie

# 2. Instale dependências
npm install

# 3. Instale o Chromium para Playwright
npx playwright install chromium

# 4. Teste com os fixtures incluídos
npm run example:post        # → output/post.png (1080×1080)
npm run example:carousel    # → output/carousel/slide-01.png … slide-05.png

Instalar skills no Claude Code

As skills permitem que o Claude Code execute o pipeline completo a partir de linguagem natural.

Opção A — Script automático (recomendado)

Linux / macOS:

bash scripts/install-skills.sh

Windows (PowerShell):

.\scripts\install-skills.ps1

O script copia as 6 skills para ~/.claude/skills/feedgenie/ e confirma a instalação.

Opção B — Manual

mkdir -p ~/.claude/skills/feedgenie
cp skills/*.md ~/.claude/skills/feedgenie/

Verificar instalação

Abra uma nova sessão no Claude Code e diga:

"crie um post sobre controle de estoque para donos de salgados"

O agente deve iniciar o pipeline automaticamente.

Usar com Codex CLI

O arquivo AGENTS.md na raiz do repositório é lido automaticamente pelo Codex. Ao rodar o Codex dentro do diretório FeedGenie, ele já conhece todas as instruções do pipeline.

Para usar o FeedGenie em outro repositório via Codex, copie o conteúdo de skills/feedgenie-orchestrate.md para o AGENTS.md desse projeto.

CLI — referência de comandos

# Valida o JSON antes de renderizar (sempre recomendado)
npx feedgenie validate --content ./tmp/content.json

# Renderiza apenas o HTML (para preview no navegador)
npx feedgenie build-html --content ./tmp/content.json --out ./tmp/preview.html

# Renderiza PNG(s) + HTML + JSON no diretório de saída
npx feedgenie render --content ./tmp/content.json --out ./output/meu-post

O comando render detecta type: "post" ou "carousel" automaticamente e gera:

| Tipo | Arquivos gerados | |---|---| | post | post.png, post.html, post.json | | carousel | slide-01.png … slide-NN.png, slide-NN.html, carousel.json |

Schema do conteúdo

O arquivo JSON passado para a CLI segue um schema validado via Zod. Veja src/lib/schemas.ts para a fonte da verdade.

Post único (1080×1080)

{
  "type": "post",
  "theme": {
    "primaryColor": "#0F172A",
    "accentColor": "#F59E0B",
    "fontFamily": "Inter, 'Segoe UI', system-ui, sans-serif",
    "tone": "educativo",
    "niche": "salgados"
  },
  "hook": "Você está perdendo dinheiro sem perceber",
  "body": "Sem controle de estoque, ingredientes vencem e seu lucro some antes do fim do mês.",
  "cta": "Comece a controlar agora",
  "caption": "Caption longa para o Instagram (até 2200 chars).",
  "hashtags": ["#salgados", "#gestao", "#estoque"]
}

Carrossel (1080×1350 por slide)

{
  "type": "carousel",
  "theme": { "primaryColor": "#1E1B4B", "accentColor": "#FACC15", "fontFamily": "Inter, system-ui, sans-serif", "tone": "autoridade", "niche": "graficas" },
  "slides": [
    { "kind": "hook",     "title": "5 erros que custam caro", "body": "E como evitar todos antes do fechamento." },
    { "kind": "problem",  "title": "Sem padrão de orçamentos", "body": "Cada vendedor cota diferente, margem some." },
    { "kind": "explain",  "title": "Estoque no improviso",     "body": "Insumos parados ou faltando travam entregas." },
    { "kind": "solution", "title": "Centralize tudo",          "body": "Um sistema para cotar, comprar e produzir." },
    { "kind": "cta",      "title": "Quer ver na sua gráfica?", "body": "Manda GESTÃO no direct." }
  ],
  "caption": "Caption do carrossel.",
  "hashtags": ["#grafica", "#gestao"]
}

Limites por campo:

| Campo | Limite | |---|---| | hook | 160 chars | | body (post) | 800 chars | | slide.body | 400 chars | | slide.title | 120 chars | | caption | 2200 chars | | hashtags | 30 itens | | slides | 3–10 |

Valores válidos para tone: educativo · venda · storytelling · autoridade

Valores válidos para slide.kind: hook · problem · explain · solution · cta

API programática (TypeScript)

import {
  exportPost,
  exportCarousel,
  PostContentSchema,
  CarouselContentSchema,
} from "feedgenie";

// Post único
const content = PostContentSchema.parse(jsonInput);
const { png, html, json } = await exportPost(content, "./output/meu-post");
console.log(`PNG gerado em: ${png}`);

// Carrossel
const carousel = CarouselContentSchema.parse(jsonInput);
const { slides, json: carouselJson } = await exportCarousel(carousel, "./output/carousel");
console.log(`${slides.length} slides em: ${slides.map(s => s.png).join(", ")}`);

Skills disponíveis

Após a instalação, o Claude Code terá acesso a 6 skills:

| Skill | Função | |---|---| | feedgenie-orchestrate | Entry point — orquestra o pipeline completo | | feedgenie-research-topic | WebSearch + síntese de ângulos editoriais | | feedgenie-generate-copy | Gera o JSON de conteúdo validado | | feedgenie-build-html | Renderiza HTML para preview no navegador | | feedgenie-render-playwright | Converte HTML em PNG via Playwright | | feedgenie-export-images | Confirma arquivos e entrega resumo ao usuário |

Normalmente você só precisa chamar feedgenie-orchestrate — ela orquestra as demais automaticamente.

Exemplos de prompt

# Post simples
"crie um post sobre controle financeiro para quem vende salgados"

# Carrossel com especificações
"crie um carrossel de 5 slides para donos de gráficas sobre erros de gestão, tom profissional"

# Com cores específicas
"post sobre meditação para iniciantes, cores: fundo #064E3B, destaque #A7F3D0"

# Modo venda
"post de venda para o meu curso de confeitaria, tom direto"

Configuração de tema

Se o usuário não especificar cores, a skill usa paletas pré-definidas por nicho:

| Nicho | Primary | Accent | |---|---|---| | Alimentos / food | #7C2D12 | #F59E0B | | Tech / SaaS | #1E1B4B | #FACC15 | | Serviços / B2B | #0F172A | #22D3EE | | Saúde / bem-estar | #064E3B | #A7F3D0 |

Cores personalizadas: passe qualquer hex válido (#RGB ou #RRGGBB) no campo theme.primaryColor e theme.accentColor.

Testes

npm test

Suite Vitest com 20 testes cobrindo:

• schemas.test.ts — validação Zod (campos inválidos, tipos errados, limites)
• buildHtml.test.ts — injeção de variáveis no template, escape de HTML, CSS vars
• renderPng.test.ts — assinatura PNG, dimensões IHDR via Playwright headless
• e2e.test.ts — pipeline completo post + carrossel a partir dos fixtures

Roadmap

• V1 (atual) — post + carrossel, 2 templates, theme tokens, CLI + 6 skills
• V2 — branding (logo upload, CSS custom), templates premium por nicho
• V3 — Instagram API publish/schedule, analytics básico

Licença

MIT