content-asset-creator

コンテンツアセット作成ツール

構造化データから、ブランドに合わせた美しいコンテンツアセット（レポート、ランディングページ、1枚ものの資料）を生成します。リード獲得用コンテンツ、業界レポート、マーケティング資料をプログラムで作成するために設計されています。

クイックスタート

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 を含む 1 ページ）

見出し、価値提案、メールアドレスの入力欄を含む、1 ページのマーケティングアセットです。

3. 比較ページ（横並び）

2 つの製品を視覚的に比較します（例：Juicebox と LinkedIn Recruiter）。

4. 1 枚ものの資料（クイックリファレンス）

情報量の多い、1 ページのリファレンスシートです（例：「PeopleGPT Prompt Library」）。

ステップごとの手順

ステップ 1：生成方法を選ぶ

利用可能なツールを優先順位順に確認します。

1. Gamma API（推奨） — GAMMA_API_KEY が設定されている場合は、Gamma Generate API v1.0（2025 年 11 月から GA）を使用します。Pro アカウント（月額 $16）が必要です。プレゼンテーション、ドキュメント、ウェブページをプログラムで作成できます。60 以上の言語に対応し、最大 100K トークンの入力を受け付けます。レート制限は 1 時間あたり数百回です。
2. v0.dev Platform API — V0_API_KEY が設定されている場合は、Vercel の v0 Platform API（ベータ版）を使用します。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ページに収めてください。忙しい採用担当者は、それ以上は読みません。
• 最も大きく、意外性のある統計データから始めてください。読み飛ばせない内容にしましょう。
• 各セクションの要点は必ず1つにしてください。複数のメッセージを盛り込んで、要点をぼかさないようにしましょう。
• CTAは後付けではなく、自然に感じられるものにしてください。データから、読者にとって製品が必要だという結論につながるようにしましょう。
• PDFで配布する場合：送信前に、HTMLがきれいに印刷されることを確認してください。@media printスタイルを使用します。
• Webで配布する場合：LinkedIn/Twitterで共有した際に見栄えがよくなるよう、Open Graphのメタタグを追加してください。

依存関係

• Tailwind CSS（CDN経由。ビルド手順は不要）
• Google Fonts（CDN経由）
• オプション：Gamma APIキー（GAMMA_API_KEY）— Gamma Proアカウント（$16/mo）が必要です。API v1.0 GA。ドキュメント：https://developers.gamma.app
• オプション：v0.dev APIキー（V0_API_KEY）— v0 Premium（$20/mo）が必要です。Platform 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 — クイックリファレンスシート

各テンプレートは、上記で定義されたコンテンツデータ構造を受け取ります。