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