content-asset-creator

内容资产创建器

根据结构化数据生成精美、符合品牌风格的内容资产（报告、落地页、单页资料）。专为以编程方式制作潜在客户磁铁、行业报告和营销资料而设计。

快速开始

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.

输入

• 资产类型（必填）— report、landing-page、comparison、one-pager
• 内容数据（必填）— 资产的结构化数据（标题、章节、统计数据、叙述内容）
• 品牌配置（可选）— 颜色、字体、徽标 URL。默认为 Juicebox 品牌。
• 输出 — HTML 文件路径（默认：output/[asset-type]-[date].html）

资产类型

1. 行业报告（2-3 页）

包含统计数据、叙述章节和可视化内容的数据型文档。

输入结构：

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. 落地页（含 CTA 的单页）

包含标题、价值主张和电子邮件采集功能的单页营销资产。

3. 对比页（并排对照）

对两款产品进行可视化对比（例如，Juicebox 与 LinkedIn Recruiter）。

4. 单页资料（快速参考）

内容密集的单页参考资料（例如，“PeopleGPT Prompt Library”）。

分步流程

第 1 步：选择生成方式

检查哪些工具可用（按优先级排序）：

1. Gamma API（首选）— 如果已设置 GAMMA_API_KEY，则使用 Gamma Generate API v1.0（自 2025 年 11 月起正式发布）。需要 Pro 账户（每月 $16）。可通过编程方式创建演示文稿、文档和网页。支持 60 多种语言，输入上限为 100K 个 Token。速率限制：每小时数百次。
2. v0.dev Platform API — 如果已设置 V0_API_KEY，则使用 Vercel 的 v0 Platform API（Beta 版）。需要 Premium（每月 $20）或 Team 方案。可根据提示词生成 React + Tailwind 代码。最适合落地页和交互式网页内容。
3. 自托管 HTML — 后备方案：直接使用 Tailwind CSS 模板生成 HTML。无需外部依赖。可完全控制输出。

第 2A 步：使用 Gamma API 生成（首选）

Gamma 的 Generate API v1.0 可根据文本提示词创建演示文稿、文档和网页。

API 文档： 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>"
  }'

Gamma 使用技巧：

• 首先列出可用主题：GET /v1/themes
• 可通过编程方式以电子邮件分享
• 支持根据模板创建：使用 POST /v1/generate-from-template
• 输出可作为托管的 Gamma 页面查看，也可导出

第 2B 步：使用 v0.dev Platform API 生成

v0 的 Platform API 可根据自然语言提示词生成 React + Tailwind 代码。

API 文档： https://v0.app/docs/api/platform/overview

工作流：提示词 → 项目 → 代码文件 → 部署。输出可立即部署到 Vercel。

# 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..."
  }'

v0 使用技巧：

• 最适合交互式网页和落地页
• 输出为 React/Next.js + Tailwind，可部署或转换为静态 HTML
• 订阅费用之外，按用量计费

第 2C 步：生成自托管 HTML（后备方案）

生成独立的 HTML 文件：

1. 加载模板，选择对应资产类型
2. 从结构化数据中注入内容
3. 应用品牌样式（颜色、字体、徽标）
4. 使用内联 SVG 或 CSS 生成数据可视化
5. 输出为单个 HTML 文件，并内联所有样式

HTML 模板结构：

<!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">
  
</body>
</html>

章节模板：

• hero-stat：大型统计数字，附带标签和来源
• narrative：标题 + 正文，采用简洁的排版
• stat-grid：3-4 项统计数据组成的响应式网格
• comparison-table：带高亮显示的并排对照表
• chart：使用 CSS 或内联 SVG 绘制的简易条形图/环形图
• cta：包含按钮的行动号召区块
• footer：包含免责声明的品牌页脚

第 3 步：输出

保存 HTML 文件：

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

也可转换为 PDF：

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

或者提供手动转换为 PDF 的说明（在浏览器中打印为 PDF）。

品牌配置

Juicebox 品牌

{
  "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"
}

将品牌配置保存至：skills/content-asset-creator/brands/[client].json

提示

• 报告最多控制在 2-3 页。忙碌的招聘人员不会读更多内容。
• 开篇就呈现最大、最令人惊讶的数据。让读者无法划过。
• 每个部分都应恰好有一个核心结论。不要用多个观点冲淡重点。
• CTA 应显得自然，而不是生硬地添加。数据应引导读者得出需要你们产品的结论。
• 用 PDF 分发时：发送前测试 HTML 的打印效果。使用 @media print 样式。
• 在网页上分发时：添加 Open Graph 元标签，让内容在 LinkedIn/Twitter 上分享时呈现良好。

依赖项

• Tailwind CSS（通过 CDN 引入，无需构建步骤）
• Google Fonts（通过 CDN 引入）
• 可选：Gamma API 密钥（GAMMA_API_KEY）— 需要 Gamma Pro 账号（$16/月）。API v1.0 GA。文档：https://developers.gamma.app
• 可选：v0.dev API 密钥（V0_API_KEY）— 需要 v0 Premium（$20/月）。平台 API（测试版）。文档：https://v0.app/docs/api/platform/overview
• 可选：用于 PDF 转换的 Playwright/Puppeteer

模板

模板存储在 skills/content-asset-creator/templates/：

• report.html — 行业报告模板
• landing-page.html — 带电子邮件收集功能的落地页
• comparison.html — 产品对比页面
• one-pager.html — 快速参考页

每个模板都接受上文定义的内容数据结构。