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

BrandCraft

The Visual Content Factory with Perfect Branding

9 specialized AI agents. 11 output formats. 1 command.

---

Your brand has an identity. Your materials should reflect it. Always.

PDFs. Presentations. Reels. Carousels. Social Cards. Everything perfectly aligned with your design system. In minutes, not days.

Get Started | See Examples | Pipeline in Action

The Problem

Have you ever spent hours creating a report in Word, adjusting fonts, colors, spacing... only to realize it doesn't match the company's visual identity?

Or created an Instagram carousel that looked "sort of" like the brand?

Or needed an animated Reel and spent a fortune on a designer who took a week?

Brand inconsistency is expensive. Studies show that brands with consistent presentation increase revenue by up to 23%. But maintaining that consistency across dozens of different formats — PDF, PPTX, Instagram, TikTok, LinkedIn — is an operational nightmare.

Until now.

The Solution

BrandCraft is an intelligent visual content factory. It:

1. Extracts the visual identity from any website automatically
2. Saves it as a reusable template forever
3. Generates any material — from A4 reports to animated Reels — with perfect branding
4. Validates every pixel before delivery, with objective quality scoring

All orchestrated by 9 AI agents working in perfect sync, like a senior design team — but in minutes.

Results

How It Works

The Intelligent Pipeline

No matter what you ask for — the Maestro (orchestrator) analyzes your goal and automatically routes to the correct pipeline:

                                    ┌──── Forge ──── PDF/PNG
                                    │
URL ──── Prober ──── Vault ────┬── Canvas ──── PPTX
                                │
         Content ──── Maestro ─┼── Director ── MP4/WebM
                                │
         Existing PDF ── Scribe ┘── Brush ──── AI Images
                                          │
                                     Gauge ◄─── QA Validation

5 Automated Workflows

1. Extract Design System from URL — Automatic visual identity capture

URL → Prober (analysis + extraction) → Vault (saves template)

The Prober analyzes any website and automatically extracts:

• Complete color palette (primary, secondary, accent, backgrounds)
• Typography (families, weights, sizes, hierarchy)
• Spacing (grid system, margins, paddings)
• Logos (SVG, PNG, all variations)
• Metadata (favicon, Open Graph, brand name)

Everything saved as a reusable template with versioning.

Command:

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

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

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

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

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

4. Create Videos — Reels, motion graphics and animated carousels

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

The Director composes programmatic videos with Remotion (React):

• Reels/Shorts 9:16 for Instagram, TikTok and YouTube
• Motion Graphics 16:9 for animated presentations
• Animated Carousels with multiple slides in video
• Professional frame-driven animations (spring physics, interpolation)
• Safe zones for each social platform
• Design tokens as TypeScript constants

Real example — Reel "5 Reasons to use BrandCraft" (Apple theme):

Intro	Content	CTA
Logo + title with spring	5 scenes with animation	Stats + Apple-style button

Full project at

examples/remotion-reel/

— 1080x1920, 30fps, 30 seconds, Apple theme (pure black background, Inter semibold typography, blue button #2997FF).

Command: *create-reel --content="product launch" --duration=15

5. Improve Existing PDF — Automatic redesign

Scribe (extracts content) → Maestro → Vault → Forge (re-renders) → Gauge (QA)

Have an ugly PDF? The Scribe reads and extracts all content (text, hierarchy, images). Then the Forge re-renders it with your brand's design system. Result: same content, completely transformed visuals.

Command:

*improve-pdf --path="./old-report.pdf"

The 9 Agents

Guaranteed Quality

Every material generated by BrandCraft goes through automatic validation before delivery. The Gauge (Inspector) analyzes 5 dimensions with weighted scoring:

Documents and Presentations

Videos (Remotion)

Verdicts

11 Output Formats

Documents

Videos

Real-World Examples

Example 1: Corporate A4 Report

You: "Create an A4 report about Q4 2025 results for
      TechVision, using the visual identity from techvision.io"

BrandCraft:
  1. Maestro identifies: A4 report + URL extraction
  2. Prober extracts tokens from techvision.io (blue #1E40AF, Inter, 16px grid)
  3. Vault saves template "techvision"
  4. Brush generates 3 images: hero, conceptual chart, team
  5. Forge renders A4 PDF with:
     - Full-bleed cover with hero image
     - Header with logo + page number
     - Inter typography with H1→H2→body hierarchy
     - #1E40AF colors applied to headings and highlights
  6. Gauge validates: Score 94/100 → PASS (Excellent)

  → Delivery: report-q4-techvision.pdf (12 pages, print-ready)

Example 2: Instagram Carousel

You: "Create a 7-slide Instagram carousel about
      '5 AI Trends for 2026', using the NovaTech template"

BrandCraft:
  1. Maestro identifies: Instagram carousel + existing template
  2. Vault loads template "novatech" (purple #7C3AED, Poppins)
  3. Brush generates 7 themed images (one per slide)
  4. Forge renders 7 PNGs at 1080x1080:
     - Slide 1: Cover with impactful title
     - Slides 2-6: One trend per slide with image and text
     - Slide 7: CTA "Follow for more" with logo
  5. Gauge validates: Score 91/100 → PASS

  → Delivery: 7 PNG files ready for upload

Example 3: Animated Reel

You: "Create a 15-second Reel announcing the launch of
      CloudSync, with professional animations"

BrandCraft:
  1. Maestro identifies: reel video 9:16
  2. Vault loads CloudSync brand tokens
  3. Director configures Remotion:
     - Composition: 1080x1920, 30fps, 450 frames (15s)
     - Scenes: Intro (3s) → Problem (3s) → Solution (4s) → CTA (5s)
     - Animations: spring() for entrances, interpolate() for transitions
     - Instagram safe zones respected
  4. Brush generates brand-coherent visual assets
  5. Director renders MP4 (H.264, CRF 18)
  6. Gauge validates: Score 88/100 → PASS

  → Delivery: cloudsync-launch-reel.mp4 (15s, 1080x1920, ready for upload)

See a real example rendered by BrandCraft:

Reel "5 Reasons to use BrandCraft" — Apple theme, 30s, 1080x1920 Full source code:

examples/remotion-reel/

Example 4: PDF Redesign

You: "This PDF I received from finance is horrible.
      Improve it using our company's visual identity."

BrandCraft:
  1. Maestro identifies: existing PDF improvement
  2. Scribe reads the PDF:
     - Extracts text with preserved hierarchy
     - Identifies tables, lists and images
     - Converts to structured Markdown
  3. Vault loads company template
  4. Forge re-renders with new design system:
     - Same content, transformed visuals
     - Professional header/footer with logo
     - Brand colors and typography applied
  5. Gauge validates: Score 92/100 → PASS

  → Delivery: Transformed PDF with preserved content and applied branding

Example 5: Investor Presentation

You: "Create a pitch deck presentation with 15 slides
      for FlowAI startup fundraising"

BrandCraft:
  1. Maestro identifies: PPTX + possible extraction
  2. Prober extracts tokens from flowai.io
  3. Canvas generates 16:9 PPTX with:
     - Slide master with 6 different layouts
     - 15 slides: Cover → Problem → Solution → Market →
       Product → Traction → Model → Team → Financials → Ask
     - Charts and icons with brand colors
  4. Brush generates illustrations for key slides
  5. Gauge validates: Score 89/100 → PASS

  → Delivery: flowai-pitch-deck.pptx (editable in PowerPoint/Google Slides)

Technology Stack

Document Rendering

Video Composition

Image Generation (MCP)

Installation

Prerequisites

• Node.js 18+ installed
• AIOS 2.1+ configured
• Claude Code (or another IDE with MCP support)

1. Install Node.js Dependencies

cd squads/brandcraft
npm install

2. Configure MCP Server (Required)

BrandCraft requires nano-banana-pro for image generation.

Get API Key:

1. Go to Google AI Studio
2. Generate an API key
3. Export in your shell:

export GEMINI_API_KEY="your_key_here"

Configure in 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. Optional MCPs (Recommended)

4. Verify Installation

# List configured MCPs
claude mcp list

# Inside Claude Code
/mcp

Quick Commands

Full Pipeline

Extraction

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

Documents

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

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

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

Presentations

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

Videos

Images

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

PDF Improvement

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

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

Validation

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

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

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

Template Format

Templates are .md files with YAML frontmatter — your portable design system:

---
name: "acme-corp"
description: "Design system extracted from 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

Detailed documentation of the extracted design system...

Once saved, the template is reused across any format: PDF, PPTX, video, carousel, social card. Total consistency.

Squad Architecture

squads/brandcraft/
├── squad.yaml                       # Squad manifest (v1.1.0)
├── README.md                        # This file
│
├── agents/                          # 9 specialized agents
│   ├── bc-orchestrator.md           # Maestro — orchestration
│   ├── bc-extractor.md              # Prober — token extraction
│   ├── bc-templater.md              # Vault — templates
│   ├── bc-renderer.md               # Forge — PDF/PNG
│   ├── bc-presenter.md              # Canvas — PPTX
│   ├── bc-illustrator.md            # Brush — AI images
│   ├── bc-filmmaker.md              # Director — Remotion videos
│   ├── bc-refiner.md                # Scribe — PDF reading
│   └── bc-inspector.md              # Gauge — QA validation
│
├── tasks/                           # 37 executable tasks
│   ├── bc-orchestrator-*.md         # (2) Pipeline routing
│   ├── bc-extractor-*.md            # (4) Token extraction
│   ├── bc-templater-*.md            # (5) Template management
│   ├── bc-renderer-*.md             # (5) PDF/PNG rendering
│   ├── bc-presenter-*.md            # (3) PPTX creation
│   ├── bc-illustrator-*.md          # (4) Image generation
│   ├── bc-filmmaker-*.md            # (6) Video composition
│   ├── bc-refiner-*.md              # (4) PDF reading/improvement
│   └── bc-inspector-*.md            # (4) Quality validation
│
├── workflows/                       # 5 automated workflows
│   ├── bc-extract-and-save.yaml     # URL → Template
│   ├── bc-create-document.yaml      # Content → PDF/PNG
│   ├── bc-create-pptx.yaml          # Content → PPTX
│   ├── bc-create-video.yaml         # Content → MP4/WebM
│   └── bc-improve-document.yaml     # Old PDF → New PDF
│
├── checklists/                      # 4 quality checklists
│   ├── extraction-completeness-checklist.md
│   ├── brand-consistency-checklist.md
│   ├── layout-correctness-checklist.md
│   └── video-brand-consistency-checklist.md
│
├── config/                          # Configuration
│   ├── coding-standards.md          # Code standards
│   ├── tech-stack.md                # Technology stack
│   └── source-tree.md               # Project structure
│
├── templates/                       # Reference templates
│   ├── design-system-template.md    # Design system format
│   └── quality-report-template.md   # QA report format
│
├── scripts/                         # Production scripts
│   ├── render.js                    # Puppeteer → PDF/PNG
│   └── create-pptx.js              # PptxGenJS → PPTX
│
└── assets/                          # Visual assets
    └── readme/                      # Images for this README

Why BrandCraft?

The ROI

• Freelance designer: $50-150 per piece
• Design agency: $500-3,000 per project
• BrandCraft: Unlimited, with consistent and validated quality

Every piece that BrandCraft produces with a PASS on the quality gate would be approved by a senior art director. The difference? It does it in minutes, not days.

FAQ