🌐 EN | PT-BR | ES | FR | DE | 日本語

BrandCraft

A Fábrica de Conteúdo Visual com Marca Perfeita

9 agentes de IA especializados. 11 formatos de saída. 1 comando.

---

Sua marca tem uma identidade. Seus materiais deveriam refletir isso. Sempre.

PDFs. Apresentações. Reels. Carrosséis. Social Cards. Tudo perfeitamente alinhado com seu design system. Em minutos, não em dias.

Comece Agora | Veja Exemplos | Pipeline em Ação

O Problema

Você já passou horas criando um relatório no Word, ajustando fontes, cores, espaçamentos... só para perceber que ele não combina com a identidade visual da empresa?

Ou criou um carrossel para Instagram que ficou "mais ou menos" parecido com a marca?

Ou precisou de um Reel animado e gastou uma fortuna com um designer que demorou uma semana?

A inconsistência de marca custa caro. Estudos mostram que marcas com apresentação consistente aumentam a receita em até 23%. Mas manter essa consistência em dezenas de formatos diferentes — PDF, PPTX, Instagram, TikTok, LinkedIn — é um pesadelo operacional.

Até agora.

A Solução

O BrandCraft é uma fábrica inteligente de conteúdo visual. Ele:

1. Extrai a identidade visual de qualquer website automaticamente
2. Salva como template reutilizável para sempre
3. Gera qualquer material — de relatórios A4 a Reels animados — com marca perfeita
4. Valida cada pixel antes de entregar, com scoring objetivo de qualidade

Tudo orquestrado por 9 agentes de IA que trabalham em sincronia perfeita, como uma equipe de design sênior — mas em minutos.

Resultados

Como Funciona

O Pipeline Inteligente

Não importa o que você peça — o Maestro (orquestrador) analisa seu objetivo e roteia automaticamente para o pipeline correto:

                                    ┌──── Forge ──── PDF/PNG
                                    │
URL ──── Prober ──── Vault ────┬── Canvas ──── PPTX
                                │
         Conteúdo ──── Maestro ─┼── Director ── MP4/WebM
                                │
         PDF existente ── Scribe ┘── Brush ──── Imagens IA
                                          │
                                     Gauge ◄─── Validação QA

5 Workflows Automatizados

1. Extrair Design System de URL — Captura automática de identidade visual

URL → Prober (análise + extração) → Vault (salva template)

O Prober analisa qualquer website e extrai automaticamente:

• Paleta completa de cores (primária, secundária, acento, backgrounds)
• Tipografia (famílias, pesos, tamanhos, hierarquia)
• Espaçamentos (grid system, margins, paddings)
• Logos (SVG, PNG, todas as variações)
• Metadados (favicon, Open Graph, brand name)

Tudo salvo como template reutilizável com versionamento.

Comando:

*extract-design-system --url=https://suaempresa.com

Maestro → Vault → Brush (imagens) → Forge (HTML→PDF/PNG) → Gauge (QA)

*create-document --format=report-a4 --content="./meu-conteudo.md"

Maestro → Vault → Canvas (layouts + PPTX) → Brush (imagens) → Gauge (QA)

*create-pptx --content="./apresentacao.md"

4. Criar Vídeos — Reels, motion graphics e carrosséis animados

Maestro → Vault → Director (React→MP4) → Brush (assets) → Gauge (QA)

O Director compõe vídeos programáticos com Remotion (React):

• Reels/Shorts 9:16 para Instagram, TikTok e YouTube
• Motion Graphics 16:9 para apresentações animadas
• Carrosséis Animados com múltiplos slides em vídeo
• Animações frame-driven profissionais (spring physics, interpolation)
• Safe zones para cada plataforma social
• Design tokens como TypeScript constants

Exemplo real — Reel "5 Razões para usar BrandCraft" (tema Apple):

Intro	Conteúdo	CTA
Logo + título com spring	5 cenas com animação	Stats + botão Apple-style

Projeto completo em

examples/remotion-reel/

— 1080x1920, 30fps, 30 segundos, tema Apple (fundo preto puro, tipografia Inter semibold, botão azul #2997FF).

Comando: *create-reel --content="lançamento do produto" --duration=15

5. Melhorar PDF Existente — Redesign automático

Scribe (extrai conteúdo) → Maestro → Vault → Forge (re-renderiza) → Gauge (QA)

Tem um PDF feio? O Scribe lê e extrai todo o conteúdo (texto, hierarquia, imagens). Depois o Forge re-renderiza com o design system da sua marca. Resultado: mesmo conteúdo, visual completamente transformado.

Comando:

*improve-pdf --path="./relatorio-antigo.pdf"

Os 9 Agentes

Qualidade Garantida

Cada material gerado pelo BrandCraft passa por validação automática antes da entrega. O Gauge (Inspector) analisa 5 dimensões com scoring ponderado:

Documentos e Apresentações

Vídeos (Remotion)

Veredictos

11 Formatos de Saída

Documentos

Vídeos

Exemplos Reais

Exemplo 1: Relatório Corporativo A4

Você: "Crie um relatório A4 sobre os resultados do Q4 2025 da
      empresa TechVision, usando a identidade visual do site techvision.io"

BrandCraft:
  1. Maestro identifica: relatório A4 + extração de URL
  2. Prober extrai tokens de techvision.io (azul #1E40AF, Inter, 16px grid)
  3. Vault salva template "techvision"
  4. Brush gera 3 imagens: hero, gráfico conceitual, equipe
  5. Forge renderiza PDF A4 com:
     - Cover full-bleed com imagem hero
     - Header com logo + número de página
     - Tipografia Inter com hierarquia H1→H2→body
     - Cores #1E40AF aplicadas em títulos e destaques
  6. Gauge valida: Score 94/100 → PASS (Excelente)

  → Entrega: relatorio-q4-techvision.pdf (12 páginas, print-ready)

Exemplo 2: Carrossel Instagram

Você: "Crie um carrossel de 7 slides para Instagram sobre
      '5 Tendências de IA para 2026', usando o template da NovaTech"

BrandCraft:
  1. Maestro identifica: carrossel Instagram + template existente
  2. Vault carrega template "novatech" (roxo #7C3AED, Poppins)
  3. Brush gera 7 imagens temáticas (uma por slide)
  4. Forge renderiza 7 PNGs em 1080x1080:
     - Slide 1: Cover com título impactante
     - Slides 2-6: Uma tendência por slide com imagem e texto
     - Slide 7: CTA "Siga para mais" com logo
  5. Gauge valida: Score 91/100 → PASS

  → Entrega: 7 arquivos PNG prontos para upload

Exemplo 3: Reel Animado

Você: "Crie um Reel de 15 segundos anunciando o lançamento do
      produto CloudSync, com animações profissionais"

BrandCraft:
  1. Maestro identifica: vídeo reel 9:16
  2. Vault carrega tokens da marca CloudSync
  3. Director configura Remotion:
     - Composition: 1080x1920, 30fps, 450 frames (15s)
     - Cenas: Intro (3s) → Problema (3s) → Solução (4s) → CTA (5s)
     - Animações: spring() para entradas, interpolate() para transições
     - Safe zones Instagram respeitadas
  4. Brush gera assets visuais brand-coherent
  5. Director renderiza MP4 (H.264, CRF 18)
  6. Gauge valida: Score 88/100 → PASS

  → Entrega: cloudsync-launch-reel.mp4 (15s, 1080x1920, pronto para upload)

Veja um exemplo real renderizado pelo BrandCraft:

Reel "5 Razões para usar BrandCraft" — tema Apple, 30s, 1080x1920 Código-fonte completo:

examples/remotion-reel/

Exemplo 4: Redesign de PDF

Você: "Esse PDF que recebi do financeiro está horrível.
      Melhore usando a identidade visual da nossa empresa."

BrandCraft:
  1. Maestro identifica: melhoria de PDF existente
  2. Scribe lê o PDF:
     - Extrai texto com hierarquia preservada
     - Identifica tabelas, listas e imagens
     - Converte para Markdown estruturado
  3. Vault carrega template da empresa
  4. Forge re-renderiza com novo design system:
     - Mesmo conteúdo, visual transformado
     - Header/footer profissional com logo
     - Cores e tipografia da marca aplicadas
  5. Gauge valida: Score 92/100 → PASS

  → Entrega: PDF transformado com conteúdo preservado e marca aplicada

Exemplo 5: Apresentação para Investidores

Você: "Crie uma apresentação de pitch deck com 15 slides
      para captação de investimento da startup FlowAI"

BrandCraft:
  1. Maestro identifica: PPTX + possível extração
  2. Prober extrai tokens do site flowai.io
  3. Canvas gera PPTX 16:9 com:
     - Slide master com 6 layouts diferentes
     - 15 slides: Cover → Problema → Solução → Mercado →
       Produto → Tração → Modelo → Equipe → Financeiro → Ask
     - Gráficos e ícones com cores da marca
  4. Brush gera ilustrações para slides-chave
  5. Gauge valida: Score 89/100 → PASS

  → Entrega: flowai-pitch-deck.pptx (editável no PowerPoint/Google Slides)

Stack Tecnológica

Renderização de Documentos

Composição de Vídeo

Geração de Imagens (MCP)

Instalação

Pré-requisitos

• Node.js 18+ instalado
• AIOS 2.1+ configurado
• Claude Code (ou outra IDE com suporte a MCP)

1. Instalar Dependências Node.js

cd squads/brandcraft
npm install

2. Configurar MCP Server (Obrigatório)

O BrandCraft requer nano-banana-pro para geração de imagens.

Obter API Key:

1. Acesse Google AI Studio
2. Gere uma API key
3. Exporte no shell:

export GEMINI_API_KEY="sua_chave_aqui"

Configurar no Claude Code:

claude mcp add --transport stdio --scope project \
  --env GEMINI_API_KEY=${GEMINI_API_KEY} \
  nano-banana-pro -- npx -y @rafarafarafa/nano-banana-pro-mcp

.cursor/mcp.json

{
  "mcpServers": {
    "nano-banana-pro": {
      "command": "npx",
      "args": ["-y", "@rafarafarafa/nano-banana-pro-mcp"],
      "env": { "GEMINI_API_KEY": "${GEMINI_API_KEY}" }
    }
  }
}

3. MCPs Opcionais (Recomendados)

4. Verificar Instalação

# Listar MCPs configurados
claude mcp list

# Dentro do Claude Code
/mcp

Comandos Rápidos

Pipeline Completo

Extração

*analyze-url --url=https://...

Documentos

*render-pdf --content=./content.md

*render-png --content=./card.md

*render-carousel --content=./slides.md

Apresentações

*create-pptx --content=./deck.md

Vídeos

Imagens

*edit-image --path=./img.png

Melhoria de PDF

*read-pdf --path=./doc.pdf

*improve-pdf --path=./doc.pdf

Validação

*validate-tokens --document=./doc.pdf

*validate-layout --document=./doc.pdf

*validate-images --document=./images/

Formato de Template

Templates são arquivos .md com YAML frontmatter — seu design system portável:

---
name: "acme-corp"
description: "Design system extraído de acme.com"
source_url: "https://www.acme.com"
extracted_at: "2026-02-24T14:30:00Z"
version: "1.0.0"
tokens:
  colors:
    primary: "#1a73e8"
    secondary: "#34a853"
    accent: "#ea4335"
    background: "#ffffff"
    surface: "#f8f9fa"
    text_primary: "#202124"
    text_secondary: "#5f6368"
  typography:
    font_heading: "'Inter', sans-serif"
    font_body: "'Source Sans Pro', sans-serif"
    size_h1: "2.5rem"
    size_h2: "2rem"
    size_h3: "1.5rem"
    size_body: "1rem"
    weight_heading: "700"
    weight_body: "400"
  spacing:
    xs: "4px"
    sm: "8px"
    md: "16px"
    lg: "24px"
    xl: "32px"
    xxl: "48px"
logos:
  primary: "assets/acme-corp/logo.svg"
  icon: "assets/acme-corp/icon.png"
---
# Acme Corp — Design System

Documentação detalhada do design system extraído...

Uma vez salvo, o template é reutilizado em qualquer formato: PDF, PPTX, vídeo, carrossel, social card. Consistência total.

Arquitetura do Squad

squads/brandcraft/
├── squad.yaml                       # Manifesto do squad (v1.1.0)
├── README.md                        # Este arquivo
│
├── agents/                          # 9 agentes especializados
│   ├── bc-orchestrator.md           # Maestro — orquestração
│   ├── bc-extractor.md              # Prober — extração de tokens
│   ├── bc-templater.md              # Vault — templates
│   ├── bc-renderer.md               # Forge — PDF/PNG
│   ├── bc-presenter.md              # Canvas — PPTX
│   ├── bc-illustrator.md            # Brush — imagens IA
│   ├── bc-filmmaker.md              # Director — vídeos Remotion
│   ├── bc-refiner.md                # Scribe — leitura de PDFs
│   └── bc-inspector.md              # Gauge — validação QA
│
├── tasks/                           # 37 tasks executáveis
│   ├── bc-orchestrator-*.md         # (2) Pipeline routing
│   ├── bc-extractor-*.md            # (4) Extração de tokens
│   ├── bc-templater-*.md            # (5) Gestão de templates
│   ├── bc-renderer-*.md             # (5) Renderização PDF/PNG
│   ├── bc-presenter-*.md            # (3) Criação de PPTX
│   ├── bc-illustrator-*.md          # (4) Geração de imagens
│   ├── bc-filmmaker-*.md            # (6) Composição de vídeos
│   ├── bc-refiner-*.md              # (4) Leitura/melhoria de PDFs
│   └── bc-inspector-*.md            # (4) Validação de qualidade
│
├── workflows/                       # 5 workflows automatizados
│   ├── bc-extract-and-save.yaml     # URL → Template
│   ├── bc-create-document.yaml      # Conteúdo → PDF/PNG
│   ├── bc-create-pptx.yaml          # Conteúdo → PPTX
│   ├── bc-create-video.yaml         # Conteúdo → MP4/WebM
│   └── bc-improve-document.yaml     # PDF antigo → PDF novo
│
├── checklists/                      # 4 checklists de qualidade
│   ├── extraction-completeness-checklist.md
│   ├── brand-consistency-checklist.md
│   ├── layout-correctness-checklist.md
│   └── video-brand-consistency-checklist.md
│
├── config/                          # Configurações
│   ├── coding-standards.md          # Padrões de código
│   ├── tech-stack.md                # Stack tecnológica
│   └── source-tree.md               # Estrutura do projeto
│
├── templates/                       # Templates de referência
│   ├── design-system-template.md    # Formato de design system
│   └── quality-report-template.md   # Formato de relatório QA
│
├── scripts/                         # Scripts de produção
│   ├── render.js                    # Puppeteer → PDF/PNG
│   └── create-pptx.js              # PptxGenJS → PPTX
│
└── assets/                          # Assets visuais
    └── readme/                      # Imagens deste README

Por Que BrandCraft?

O ROI

• Designer freelancer: R$ 150-500 por peça
• Agência de design: R$ 2.000-10.000 por projeto
• BrandCraft: Ilimitado, com qualidade consistente e validada

Cada peça que o BrandCraft produz com PASS no quality gate seria aprovada por um diretor de arte sênior. A diferença? Ele faz em minutos, não em dias.

FAQ