Affitor/affiliate-skills

インフォグラフィックジェネレーター

あらゆるコンテンツ、データ、トピックから完全なインフォグラフィック仕様書を生成します。 構造化されたレイアウト + すべてのコピー + データポイント + カラースキームを出力し、HTML/CSS、Satori（サーバーサイド）、Canva、Figma、その他あらゆるデザインツールでそのままレンダリング可能です。

画像付きのLinkedIn投稿は、エンゲージメントが2〜3倍向上します。 このスキルは、デザインスキルがなくてもコンテンツをビジュアルアセットに変換します。

content-pipelineのSatoriレンダリングにインスパイアされています：AIがコンテンツを作成 → 構造化された仕様書 → ブランドイメージとしてレンダリング

ステージ

このスキルはステージS2：コンテンツに属します

使用タイミング

• viral-post-writerがLinkedInの投稿を作成した後 — ビジュアルを追加
• content-research-briefが統計データを収集した後 — 可視化
• 比較コンテンツを作成する場合 — 機能／価格比較チャート
• データや統計を共有する場合 — 統計ハイライトカード
• リスト記事を作成する場合 — ビジュアルチェックリストまたは番号付きリスト
• ブランドイメージが効果的なソーシャルメディア投稿の場合

入力スキーマ

content: string                # (必須) 可視化するコンテンツ — 投稿テキスト、データ、記事
infographic_type: string       # (オプション、デフォルト: 自動検出)
                               # "stat_highlight" — 1〜3個の主要な数値を大きく太字で表示
                               # "comparison" — 製品／機能の比較表示
                               # "process_flow" — ステップバイステップのワークフローやハウツー
                               # "checklist" — チェックマーク付きのアイテムリスト
                               # "timeline" — 時系列イベント
                               # "data_chart" — 棒グラフ／円グラフ表現
                               # "quote_card" — 引用と帰属表示
                               # "feature_grid" — アイコン付きの機能／メリットグリッド
platform: string               # (オプション、デフォルト: "linkedin")
                               # "linkedin" — 1080×1350 (縦長、最適なエンゲージメント)
                               # "instagram" — 1080×1080 (正方形)
                               # "twitter" — 1200×675 (横長)
                               # "facebook" — 1200×630
                               # "blog" — 1200×800 (アイキャッチ画像)
brand: object                  # (オプション) ブランドカスタマイズ
  name: string                 # 会社／個人ブランド名
  primary_color: string        # 16進数 — "#0066FF"
  secondary_color: string      # 16進数 — "#1A1A2E"
  accent_color: string         # 16進数 — "#FF6B35"
  font_style: string           # "modern" | "classic" | "bold" | "minimal"
  logo_text: string            # テキストベースのロゴ — "Affitor" | "@yourhandle"
output_format: string          # (オプション、デフォルト: "spec")
                               # "spec" — 構造化JSON仕様書 (あらゆるレンダラー用)
                               # "html" — レンダリング可能なHTML/CSS (自己完結型)
                               # "both" — 仕様書 + HTML

ワークフロー

ステップ1：コンテンツを分析しタイプを選択

入力コンテンツを読み取り、最適なインフォグラフィックタイプを検出します：

コンテンツパターン	自動検出タイプ
1〜3個の顕著な数値／統計を含む	stat_highlight
"vs"、比較データを含む	comparison
番号付きステップまたはプロセスを含む	process_flow
アイテムのリスト（3〜10個）を含む	checklist または feature_grid
日付または時系列イベントを含む	timeline
注目すべき引用を含む	quote_card
パーセンテージまたは比率を含む	data_chart

infographic_typeが指定されている場合はそれを使用します。そうでなければ自動検出します。

ステップ2：ビジュアルデータを抽出

コンテンツから、インフォグラフィックに表示する必要があるものを正確に抽出します：

stat_highlightの場合：

stats:
  - number: "30%"        # 大きな数値
    label: "手数料"       # 測定対象
    context: "継続的"     # 追加コンテキスト
  - number: "60"
    label: "Cookie日数"
    context: "業界平均: 30"

comparisonの場合：

items:
  - name: "HeyGen"
    features:
      - label: "手数料"
        value: "30% 継続的"
        highlight: true         # この行の勝者
      - label: "Cookie"
        value: "60日"
        highlight: true
  - name: "Synthesia"
    features:
      - label: "手数料"
        value: "25% 一時金"
        highlight: false
      - label: "Cookie"
        value: "30日"
        highlight: false

process_flowの場合：

steps:
  - number: 1
    title: "リサーチ"
    description: "成果の出るプログラムを見つける"
    icon: "🔍"
  - number: 2
    title: "作成"
    description: "コンバージョンするコンテンツを書く"
    icon: "✍️"

checklistの場合：

items:
  - text: "継続的手数料"
    checked: true
  - text: "60日以上のCookie"
    checked: true
  - text: "無料トライアルあり"
    checked: true
  - text: "専任アフィリエイトマネージャー"
    checked: false

ステップ3：レイアウトを設計

タイプ＋プラットフォームに基づいてレイアウトを定義します：

プラットフォーム寸法：

プラットフォーム	幅	高さ	アスペクト比
LinkedIn	1080	1350	4:5 (縦長)
Instagram	1080	1080	1:1 (正方形)
Twitter	1200	675	16:9 (横長)
Facebook	1200	630	~2:1
ブログ	1200	800	3:2

レイアウト構成（全タイプ共通）：

┌─────────────────────────────┐
│         ヘッダー             │  10-15% 高さ
│    見出し / タイトル         │
├─────────────────────────────┤
│                             │
│         ボディ               │  70-80% 高さ
│    データ / コンテンツ       │
│    (タイプ固有のレイアウト)  │
│                             │
├─────────────────────────────┤
│         フッター             │  10% 高さ
│    ブランド / CTA / 出典     │
└─────────────────────────────┘

ステップ4：カラースキームを生成

ブランドカラーが指定されている場合： それらを直接使用します。

ブランドカラーがない場合： プロフェッショナルなパレットを生成します：

# デフォルトのプロフェッショナルパレットオプション
palettes:
  dark_modern:       # 暗い背景、明るいテキスト
    bg: "#1A1A2E"
    text: "#FFFFFF"
    accent: "#0066FF"
    secondary: "#16213E"
    
  light_clean:       # 明るい背景、暗いテキスト
    bg: "#FFFFFF"
    text: "#1A1A2E"
    accent: "#0066FF"
    secondary: "#F0F4F8"
    
  warm_bold:         # 暖色系
    bg: "#FFF8F0"
    text: "#2D2D2D"
    accent: "#FF6B35"
    secondary: "#FFE8D6"
    
  dark_gradient:     # グラデーション暗色
    bg: "linear-gradient(135deg, #1A1A2E, #16213E)"
    text: "#FFFFFF"
    accent: "#00D4AA"
    secondary: "#2A2A4A"

プラットフォームに基づいて自動選択：

• LinkedIn → dark_modern または light_clean (プロフェッショナル)
• Twitter → dark_gradient または warm_bold (注目を集める)
• Instagram → 任意 (最も視覚的な柔軟性)

ステップ5：すべてのコピーを生成

インフォグラフィックに表示されるすべてのテキストを記述します：

copy:
  headline: string          # メインタイトル — 太字、短く (最大8単語)
  subheadline: string       # オプションの補足行
  body_items: string[]      # データラベル、説明など
  cta: string               # コールトゥアクションテキスト — "プロフィールのリンク" | "コメントのリンクを見る"
  footer: string            # ブランド名または@ハンドル
  source: string            # "データ: openaffiliate.dev" または出典

コピールール：

• 見出し: 3〜8単語、大胆な主張または具体的な数値
• すべてのテキストはモバイルサイズで読みやすいこと (小さすぎない)
• インフォグラフィック上の総単語数は50語以内 (少ないほど良い)
• データ > 形容詞 (数値を示し、「素晴らしい」や「信じられない」は使わない)

ステップ6：出力

仕様書出力（デフォルト）：\n あらゆるレンダラーが消費できる完全な構造化仕様書：

infographic_spec:
  type: string
  platform: string
  dimensions:
    width: number
    height: number
  colors:
    background: string
    text: string
    accent: string
    secondary: string
  layout:
    header: object
    body: object
    footer: object
  data: object              # タイプ固有のデータ (統計、比較項目、ステップなど)
  copy:
    headline: string
    subheadline: string
    body_items: string[]
    cta: string
    footer: string
    source: string

HTML出力（output_formatが "html" または "both" の場合）：

インフォグラフィックを正確な寸法でレンダリングする、インラインCSS付きの自己完結型HTMLファイルを生成します。これは以下のことが可能です：

• ブラウザで開いてスクリーンショット
• SatoriやPuppeteerでサーバーサイドレンダリング
• デザインの反復の出発点として使用

<!-- 自己完結型、外部依存なし -->
<div style="width: 1080px; height: 1350px; ...">
  <!-- ヘッダー -->
  <!-- ボディ (タイプ固有) -->
  <!-- フッター -->
</div>

ステップ7：自己検証

出力を提示する前に、以下を確認します：

• インフォグラフィックの総単語数 ≤ 50語
• すべてのテキストが50%ズームで読み可能 (最小有効フォントサイズ)
• 色のコントラストがアクセシビリティを満たしている (WCAG AA: 4.5:1 比率)
• データポイントが正確で出典が明記されている
• レイアウトが窮屈に感じられない — ホワイトスペースが意図的に確保されている
• プラットフォームの寸法が正しい

いずれかのチェックに失敗した場合は、修正してから納品します。

出力形式

## インフォグラフィック: [見出し]

### 仕様
- **タイプ:** [stat_highlight]
- **プラットフォーム:** [LinkedIn] — 1080×1350
- **カラー:** [dark_modern] — bg: #1A1A2E、accent: #0066FF

### プレビュー (テキスト表現)

┌─────────────────────────────────┐
│                                 │
│     HeyGen vs Synthesia         │
│     本当の比較                  │
│                                 │
│  ┌──────────┐  ┌──────────┐    │
│  │  HeyGen  │  │Synthesia │    │
│  │          │  │          │    │
│  │ 30% 継続  │  │ 25% 一時 │    │
│  │ 60日     │  │ 30日     │    │
│  │ ★ 127    │  │ ★ 84     │    │
│  └──────────┘  └──────────┘    │
│                                 │
│     🏆 勝者: HeyGen              │
│                                 │
│  ───────────────────────────    │
│  @yourhandle · openaffiliate.dev │
└─────────────────────────────────┘

### データ

[YAMLまたはJSONとして構造化された仕様書]

### HTML (リクエストされた場合)

[自己完結型HTML/CSSコードブロック]

### 次のステップ
- [プラットフォーム]に`viral-post-writer`のバイラル投稿と一緒に投稿
- 他のプラットフォーム用のバリエーションを作成: `--platform instagram`
- `content-research-brief`の別のデータからさらにインフォグラフィックを生成

エラーハンドリング

• コンテンツに抽出可能なデータがない場合： 代わりにquote_cardまたはchecklistタイプを生成します。注意: 「数値データが見つかりませんでした。代わりに[タイプ]のインフォグラフィックを作成しました。」
• データが多すぎて1つのインフォグラフィックに収まらない場合： 最もインパクトのあるデータポイントを上位3〜5個選択します。注意: 「コンテンツに[X]個のデータポイントがあります。視覚的な明確さのため、最もインパクトのある[Y]個を選択しました。複数のインフォグラフィックの作成を検討してください。」
• ブランドカラーがない場合： デフォルトのパレットを使用します。注意: 「ブランドカラーが指定されていません。[パレット名]を使用しています。一貫したブランディングのためにブランドカラーを追加してください。」
• HTML出力が複雑すぎる場合： レイアウトを簡略化します。インフォグラフィックはシンプルであるべきです — 複雑さは視覚的なインパクトを損ないます。

例

例1： ユーザー: "LinkedIn用にHeyGenとSynthesiaを比較するインフォグラフィックを作成して" → タイプ: comparison、プラットフォーム: linkedin (1080×1350) → 抽出: 手数料、Cookie、評価、価格をそれぞれ → 出力: 勝者をハイライトした比較カード → ダークモダンパレット、太字の数値

例2： ユーザー: "リサーチブリーフからHeyGenの主要な数字を示す統計カードを作成して" → タイプ: stat_highlight、プラットフォーム: linkedin → 抽出: "6000万ドル調達"、"4万企業"、"30%手数料" → 出力: ラベルとコンテキスト付きの3つの大きな数値

例3： ユーザー: "アフィリエイトファネルのステップをインフォグラフィックで可視化して" → タイプ: process_flow、プラットフォーム: blog (1200×800) → ステップ: リサーチ → コンテンツ → ランディング → 展開 → 追跡 → 最適化 → 出力: アイコンと簡単な説明付きの水平フロー

フィードバックと問題報告

このスキルが予期しない、不完全、または不正確な出力を生成した場合は、skill_feedbackブロックを生成します（完全なスキーマについてはshared/references/feedback-protocol.mdを参照）。

スキル固有の失敗モード：

• コンテンツから抽出可能なデータがない場合： コンテンツが純粋に語りで、統計／数値がない。data_qualityとして報告。
• HTML出力が正しくレンダリングされない場合： CSSの問題、間違った寸法、テキストのオーバーフロー。HTMLとともにwrong_outputとして報告。
• インフォグラフィックの単語数が多すぎる場合： 50語を超えると読みにくくなる。wrong_outputとして報告。

自動検出トリガー：

• infographic_spec.dataのデータポイントが2未満
• すべてのコピーフィールドの総単語数が60を超える
• 寸法が宣言されたプラットフォームと一致しない

問題を報告: GitHub Issues | Discussions

参照

• shared/references/social-data-providers.md — インフォグラフィックコンテンツのデータソース
• shared/references/platform-rules.md — プラットフォーム固有の画像要件
• shared/references/flywheel-connections.md — マスターフライホイール接続マップ
• shared/references/feedback-protocol.md — 問題検出と報告の標準

フライホイール接続

出力先

• social-media-scheduler (S5) — 投稿と一緒にスケジュールできるインフォグラフィック
• landing-page-creator (S4) — ヒーロー画像またはセクションビジュアルとしてのインフォグラフィック
• email-drip-sequence (S5) — メールのビジュアルコンテンツとしてのインフォグラフィック
• bio-link-deployer (S5) — リンクハブ内のインフォグラフィック

入力元

• content-research-brief (S2) — 可視化のための主要統計とデータ
• viral-post-writer (S2) — 付随するビジュアルを作成するための投稿コンテンツ
• affiliate-blog-builder (S3) — アイキャッチ画像インフォグラフィックのためのブログデータ
• trending-content-scout (S1) — ベンチマークビジュアルのためのエンゲージメントデータ
• traffic-analyzer (S1) — 比較インフォグラフィックのためのトラフィックデータ
• comparison-post-writer (S3) — ビジュアル形式のための比較データ
• commission-calculator (S1) — 統計ハイライトのための手数料データ

フィードバックループ

• S6のインフォグラフィックあり・なしの投稿 → performance-...

[truncated for translation]