/content-asset-creator

name: content-asset-creator
description: >
  Creates beautiful, branded HTML content assets — industry reports, landing pages,
  comparison sheets, one-pagers — from structured data. Uses Gamma API (preferred),
  v0.dev Platform API, or a self-hosted HTML template system with Tailwind CSS.
  Outputs self-contained HTML files that can be hosted as web pages or converted to PDF.

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: {