Creates beautiful, branded HTML content assets

Content Asset Creator

Generates beautiful, branded content assets (reports, landing pages, one-pagers) from structured data. Designed for producing lead magnets, industry reports, and marketing collateral programmatically.

Quick Start

Create a 2-page industry report for Juicebox about "The State of AI Recruiting in 2026".
Use these data points: [list stats]. Brand: Juicebox blue, clean modern design.

Inputs

• Asset type (required) — report, landing-page, comparison, one-pager
• Content data (required) — structured data for the asset (title, sections, stats, narrative)
• Brand config (optional) — colors, fonts, logo URL. Defaults to Juicebox brand.
• Output — HTML file path (default: output/[asset-type]-[date].html)

Asset Types

1. Industry Report (2-3 pages)

A data-forward document with stats, narrative sections, and visualizations.

Input structure:

type: report
title: "The State of AI Recruiting — 2026"
subtitle: "Data-driven insights on how AI is transforming talent acquisition"
brand:
  name: "Juicebox"
  primary_color: "#4F46E5"  # Indigo/blue
  secondary_color: "#10B981"  # Green accent
  font: "Inter"
  logo_url: "https://juicebox.ai/logo.svg"
sections:
  - type: hero-stat
    stat: "93%"
    label: "of recruiters plan to increase AI use in 2026"
    source: "LinkedIn Talent Solutions"
  - type: narrative
    title: "The AI Recruiting Revolution"
    body: "AI adoption in recruiting jumped from 26% to 43% in just two years..."
  - type: stat-grid
    stats:
      - { value: "800M+", label: "Profiles searchable by AI" }
      - { value: "47%", label: "Reduction in time-to-fill" }
      - { value: "10x", label: "Cheaper than LinkedIn Recruiter" }
  - type: comparison-table
    headers: ["Feature", "Traditional", "AI-Powered"]
    rows:
      - ["Search method", "Boolean keywords", "Natural language"]
      - ["Data sources", "1 (LinkedIn)", "60+ sources"]
  - type: cta
    headline: "See AI recruiting in action"
    body: "Try PeopleGPT free — search 800M+ profiles in natural language"
    button_text: "Get Started Free"
    button_url: "https://juicebox.ai"
footer:
  text: "© 2026 Juicebox. Data sources cited throughout."

2. Landing Page (single page with CTA)

A single-page marketing asset with a headline, value props, and email capture.

3. Comparison Page (side-by-side)

A visual comparison of two products (e.g., Juicebox vs LinkedIn Recruiter).

4. One-Pager (quick reference)

A dense, single-page reference sheet (e.g., "PeopleGPT Prompt Library").

Step-by-Step Process

Step 1: Choose Generation Method

Check which tools are available (in priority order):

1. Gamma API (preferred) — If GAMMA_API_KEY is set, use Gamma Generate API v1.0 (GA since Nov 2025). Requires Pro account ($16/mo). Can create presentations, documents, and web pages programmatically. Supports 60+ languages, up to 100K token input. Rate limit: hundreds per hour.
2. v0.dev Platform API — If V0_API_KEY is set, use Vercel's v0 Platform API (beta). Requires Premium ($20/mo) or Team plan. Generates React + Tailwind code from prompts. Best for landing pages and interactive web content.
3. Self-hosted HTML — Fallback: generate HTML directly using Tailwind CSS templates. No external dependency. Full control over output.

Step 2A: Gamma API Generation (Preferred)

Gamma's Generate API v1.0 creates presentations, documents, and web pages from text prompts.

API docs: https://developers.gamma.app/docs/getting-started

curl -X POST https://api.gamma.app/v1/generate \
  -H "Authorization: Bearer $GAMMA_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "<structured content prompt>",
    "format": "document",
    "theme": "<optional theme ID>"
  }'

Tips for Gamma:

• List your available themes first: GET /v1/themes
• Can share via email programmatically
• Supports creating from templates: use POST /v1/generate-from-template
• Output can be viewed as a hosted Gamma page or exported

Step 2B: v0.dev Platform API Generation

v0's Platform API generates React + Tailwind code from natural language prompts.

API docs: https://v0.app/docs/api/platform/overview

The workflow: prompt → project → code files → deployment. Output is deployable to Vercel instantly.

# Create a project with a prompt
curl -X POST https://api.v0.dev/v1/projects \
  -H "Authorization: Bearer $V0_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "Create a professional industry report page with..."
  }'

Tips for v0:

• Best for interactive web pages and landing pages
• Output is React/Next.js + Tailwind — can be deployed or converted to static HTML
• Usage-based billing on top of subscription

Step 2C: Self-Hosted HTML Generation (Fallback)

Generate a self-contained HTML file:

1. Load the template for the asset type
2. Inject content from the structured data
3. Apply brand styles (colors, fonts, logo)
4. Generate data visualizations using inline SVG or CSS
5. Output as a single HTML file with all styles inlined

HTML Template Structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            brand: '{{ primary_color }}',
            accent: '{{ secondary_color }}'
          },
          fontFamily: {
            sans: ['Inter', 'sans-serif']
          }
        }
      }
    }
  </script>
  <style>
    /* Print styles for PDF conversion */
    @media print {
      .page-break { page-break-before: always; }
      body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }
  </style>
</head>
<body class="font-sans bg-white text-gray-900">
  <!-- Content sections generated here -->
</body>
</html>

Section Templates:

• hero-stat: Large stat number with label and source
• narrative: Title + body text in clean typography
• stat-grid: 3-4 stats in a responsive grid
• comparison-table: Side-by-side table with highlighting
• chart: Simple bar/donut chart using CSS or inline SVG
• cta: Call-to-action block with button
• footer: Branded footer with disclaimers

Step 3: Output

Save the HTML file:

clients/<client>/strategies/<strategy>/content/[asset-name].html

Optionally convert to PDF:

# Using playwright/puppeteer (if installed)
npx playwright screenshot output.html output.pdf --format=pdf

Or provide instructions for manual PDF conversion (print to PDF from browser).

Brand Configurations

Juicebox Brand

{
  "name": "Juicebox",
  "primary_color": "#4F46E5",
  "secondary_color": "#10B981",
  "accent_color": "#F59E0B",
  "background": "#FFFFFF",
  "text_color": "#111827",
  "font_heading": "Inter",
  "font_body": "Inter",
  "logo_url": "https://juicebox.ai/logo.svg"
}

Save brand configs at: skills/content-asset-creator/brands/[client].json

Tips

• Keep reports to 2-3 pages max. Busy recruiters won't read more.
• Lead with the biggest, most surprising stat. Make it impossible to scroll past.
• Every section should have exactly ONE key takeaway. Don't dilute with multiple messages.
• The CTA should feel natural, not bolted on. The data should lead to the conclusion that the reader needs your product.
• For PDF distribution: test that the HTML prints well before sending. Use @media print styles.
• For web distribution: add Open Graph meta tags so it looks good when shared on LinkedIn/Twitter.

Dependencies

• Tailwind CSS (via CDN — no build step)
• Google Fonts (via CDN)
• Optional: Gamma API key (GAMMA_API_KEY) — Requires Gamma Pro account ($16/mo). API v1.0 GA. Docs: https://developers.gamma.app
• Optional: v0.dev API key (V0_API_KEY) — Requires v0 Premium ($20/mo). Platform API (beta). Docs: https://v0.app/docs/api/platform/overview
• Optional: Playwright/Puppeteer for PDF conversion

Templates

Templates are stored at skills/content-asset-creator/templates/:

• report.html — Industry report template
• landing-page.html — Landing page with email capture
• comparison.html — Product comparison page
• one-pager.html — Quick reference sheet

Each template accepts the content data structure defined above.