| 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"
secondary_color: "#10B981"
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):
- 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.
- 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.
- 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.
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:
- Load the template for the asset type
- Inject content from the structured data
- Apply brand styles (colors, fonts, logo)
- Generate data visualizations using inline SVG or CSS
- 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>
@media print {
{ : always; }
{ -webkit-: exact; : exact; }
}
Section Templates:
hero-stat: Large stat number with label and sourcenarrative: Title + body text in clean typographystat-grid: 3-4 stats in a responsive gridcomparison-table: Side-by-side table with highlightingchart: Simple bar/donut chart using CSS or inline SVGcta: Call-to-action block with buttonfooter: Branded footer with disclaimers
Step 3: Output
Save the HTML file:
clients/<client>/strategies/<strategy>/content/[asset-name].html
Optionally convert to PDF:
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 templatelanding-page.html — Landing page with email capturecomparison.html — Product comparison pageone-pager.html — Quick reference sheet
Each template accepts the content data structure defined above.
