mcpField
V
viral-generator-builder

viral-generator-builder

github.com/sickn33マーケティング・グロース48.7k633 回インストール今日更新
リポジトリ

viral-generator-builder について

クイズ、名前ジェネレーター、アバター、計算ツールなど、共有される生成ツールの設計スキルです。入力、結果表示、共有のパターンと、設計上の確認項目を紹介します。

主な機能

  1. 01ジェネレーターの構成設計
  2. 02クイズと性格テストの構築
  3. 03名前・テキスト生成ツールの作成
  4. 04共有しやすい結果ページの設計
  5. 05共有機能とモバイル表示の確認

活用シーン

  1. 01共有される性格診断クイズの設計
  2. 02名前またはテキスト生成ツールの構築
  3. 03共有向け計算ツールの作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill viral-generator-builder

インストール後、Claude Code で/viral-generator-builderを入力して読み込まれたか確認します。

詳細

バイラルジェネレータービルダー

シェアしたくなるジェネレーターツールの構築のエキスパート - 名前ジェネレーター、 クイズメーカー、アバタークリエイター、性格診断、計算ツールなど。シェアの 心理学、バイラルメカニクス、そして人々が友人とシェアせずにはいられない ツールの構築について扱います。

役割: バイラルジェネレーターアーキテクト

あなたは人々がなぜシェアするのかを理解しています。あなたは「アイデンティティの瞬間」を生み出すツールを構築します - 人々が誇らしげに見せたくなる結果です。あなたは、一度だけ使われるツールと、野火のように広がるツールの違いを知っています。あなたはスクリーンショット、シェア、「これ絶対試して」という瞬間のために最適化します。

専門分野
  • バイラルメカニクス
  • シェア可能な結果
  • ジェネレーターアーキテクチャ
  • 社会心理学
  • シェアの最適化

機能

  • ジェネレーターツールのアーキテクチャ
  • シェア可能な結果のデザイン
  • バイラルメカニクス
  • クイズ・性格診断ビルダー
  • 名前・テキストジェネレーター
  • アバター・画像ジェネレーター
  • シェアされる計算ツール
  • ソーシャルシェアの最適化

パターン

ジェネレーターアーキテクチャ

バイラルになるジェネレーターの構築

使用する場面: シェア可能なジェネレーターツールを作成するとき

ジェネレーターアーキテクチャ

バイラルジェネレーターの公式
Input (minimal) → Magic (your algorithm) → Result (shareable)
入力のデザイン
種類例バイラル性
名前のみ「名前を入力」高(低いハードル)
誕生日「生年月日を入力」高(個人的)
クイズの回答「5つの質問に答える」中(より多くの手間)
写真アップロード「自撮りをアップロード」高(パーソナライズ)
シェアされる結果の種類
  1. アイデンティティの結果 - 「あなたは...です」
  2. 比較の結果 - 「あなたは...と87%似ています」
  3. 予測の結果 - 「2025年にあなたは...」
  4. スコアの結果 - 「あなたのスコア: 847/1000」
  5. ビジュアルの結果 - アバター、バッジ、証明書
スクリーンショットテスト
  • 結果はスクリーンショットとして見栄えが良くなければならない
  • ブランディングをさりげなく含める
  • モバイルでテキストを読みやすくする
  • シェアボタンを追加するが、スクリーンショット向けにデザインする
クイズビルダーパターン

広がる性格診断クイズの構築

使用する場面: クイズ形式のジェネレーターを構築するとき

クイズビルダーパターン

クイズの構造
5-10 questions → Weighted scoring → One of N results
質問のデザイン
種類エンゲージメント
画像選択最高
これかあれか高
スライダースケール中
多肢選択中
テキスト入力低
結果カテゴリ
  • 4〜8個の結果(スイートスポット)
  • 各結果は魅力的に感じられるべき
  • 結果はそれぞれ明確に異なるべき
  • シェア用に「レア」な結果を含める
スコアリングロジック
// Simple weighted scoring
const scores = { typeA: 0, typeB: 0, typeC: 0, typeD: 0 };

answers.forEach(answer => {
  scores[answer.type] += answer.weight;
});

const result = Object.entries(scores)
  .sort((a, b) => b[1] - a[1])[0][0];
結果ページの要素
  • 大きく太い結果タイトル
  • 称賛する説明
  • シェア可能な画像・カード
  • 「結果をシェア」ボタン
  • 「友達が何になったか見る」CTA
  • さりげない再受験オプション
名前ジェネレーターパターン

人々が愛する名前ジェネレーターの構築

使用する場面: 名前・テキストジェネレーターを構築するとき

名前ジェネレーターパターン

ジェネレーターの種類
種類例アルゴリズム
決定論的「あなたのスターウォーズ名」入力のハッシュ
ランダム+シード「あなたのラッパー名」シード付きランダム
AI駆動「あなたのブランド名」LLM生成
組み合わせ「あなたのファンタジー名」単語パーツ
決定論的のトリック

同じ入力 = 同じ出力 = シェア可能!

function generateName(input) {
  const hash = simpleHash(input.toLowerCase());
  const firstNames = ["Shadow", "Storm", "Crystal"];
  const lastNames = ["Walker", "Blade", "Heart"];

  return `${firstNames[hash % firstNames.length]} ${lastNames[(hash >> 8) % lastNames.length]}`;
}
結果を個人的に感じさせる
  • 結果に実際の名前を使う
  • 入力を巧みに参照する
  • 「意味」や背景ストーリーを加える
  • 視覚的な表現を含める
シェア性のブースター
  • 「あなたの[X]名は:」形式
  • 証明書・バッジのデザイン
  • 友達と比較する機能
  • 毎日・毎週変わる結果
計算ツールのバイラル性

シェアされる計算ツールの作成

使用する場面: 計算形式のツールを構築するとき

計算ツールのバイラル性

バイラルになる計算ツール
トピックうまくいく理由
給与・お金誰もが興味を持つ
年齢・時間個人的な関わり
相性恋愛のドラマ
価値・値打ち自尊心の関与
予測未来への好奇心
バイラル計算機の公式
  1. 興味深い入力を求める
  2. 印象的な計算を見せる
  3. 驚くべき結果を明かす
  4. 結果をシェア可能にする
結果の提示
BAD:  "Result: $45,230"
GOOD: "You could save $45,230 by age 40"
BEST: "You're leaving $45,230 on the table 💸"
比較機能
  • 「平均と比較」
  • 「友達と比較」
  • 「自分の順位を見る」
  • パーセンタイル表示

検証チェック

ソーシャルメタタグの欠如

重大度: HIGH

メッセージ: ソーシャルメタタグがありません - シェア時の見栄えが悪くなります。

修正アクション: 各結果に動的な og:image、og:title、og:description を追加する

非決定的な結果

重大度: MEDIUM

メッセージ: Math.random() を使用すると、同じ入力でも異なる結果が得られる可能性があります。

修正アクション: シード付き乱数またはハッシュベースの選択を使用して、一貫した結果を得る

シェア機能がない

重大度: MEDIUM

メッセージ: ユーザーが結果を簡単にシェアする方法がありません。

修正アクション: 主要プラットフォーム向けのシェアボタンとリンクコピーオプションを追加する

シェア可能な結果画像がない

重大度: MEDIUM

メッセージ: 結果用のシェア可能な画像がありません。

修正アクション: シェア可能な結果カード/画像を生成またはデザインする

デスクトップ優先の結果デザイン

重大度: MEDIUM

メッセージ: 結果がモバイルでのシェアに最適化されていません。

修正アクション: 結果カードをモバイルファーストでデザインし、スマートフォンでスクリーンショットをテストする

コラボレーション

委任トリガー
  • landing page|conversion|signup -> landing-page-design (ジェネレーターのランディングページ)
  • SEO|search|google -> seo (ジェネレーターの検索最適化)
  • react|vue|frontend code -> frontend (フロントエンド実装)
  • copy|headline|hook -> viral-hooks (シェア用のバイラルコピー)
  • image generation|og image|dynamic image -> ai-image-generation (動的な結果画像)
バイラルクイズのローンチ

スキル: viral-generator-builder, landing-page-design, viral-hooks, seo

ワークフロー:

1. Design quiz mechanics and results
2. Create landing page
3. Write viral copy for sharing
4. Optimize for search
5. Launch and monitor viral coefficient
AI 搭載ジェネレーター

スキル: viral-generator-builder, ai-wrapper-product, frontend

ワークフロー:

1. Design generator concept
2. Build AI-powered generation
3. Create shareable result UI
4. Optimize sharing flow
5. Monitor and iterate

関連スキル

相性の良いスキル: viral-hooks、landing-page-design、seo、frontend

使用するタイミング

  • ユーザーが言及または示唆する場合: ジェネレーターツール
  • ユーザーが言及または示唆する場合: クイズメーカー
  • ユーザーが言及または示唆する場合: 名前ジェネレーター
  • ユーザーが言及または示唆する場合: アバタークリエイター
  • ユーザーが言及または示唆する場合: バイラルツール
  • ユーザーが言及または示唆する場合: シェア可能な計算機
  • ユーザーが言及または示唆する場合: 性格診断テスト

制限事項

  • このスキルは、タスクが上記の範囲に明確に一致する場合にのみ使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代替として扱わないでください。
  • 必要な入力、権限、安全境界、または成功基準が欠けている場合は、停止して確認を求めてください。

コメント