Landing - ガイド付きセールスページ生成
ガイド付きセールスページ生成ツール。このスキルは、構造、カウントダウンロジック、およびガイド付き質問フローを処理します。設計システムは UUPM に委任され、UUPM がインストールされていない場合のフォールバックパスも用意されています。
実行時要件: Bash を実行できる環境が必要です。Claude Code はこれをネイティブでサポートしています。Claude Desktop では shell MCP が必要です。
ワークフロー概要
ステップ 1: ガイド付き Q&A（3 段階）
|
ステップ 2: 設計システムの処理（UUPM またはフォールバック）
|
ステップ 3: 2～3 のスタイルオプションを提示
|
ステップ 4: HTML を生成
|
ステップ 5: generated-pages/{slug}/ に出力
ステップ 1: ガイド付き Q&A
基本ルール: このフロー外のコンテキストを使用しない
/landing ワークフロー内では、ユーザーがその場で提供した回答のみを使用します。以下を参照しないでください。
- 会話履歴（以前のトピックやプロジェクトなど）
- メモリシステム（MEMORY.md やペルソナファイルなど）
- 既存のプロジェクトフォルダのコンテンツ
理由: ユーザーごとにコンテキストが異なり、スキルの動作は一貫している必要があります。ドメインをよく知っている場合でも、すべてをゼロから埋めるように動作します。最終的なページは、ユーザーの回答に基づいて生成され、AI の仮定に基づいてはなりません。
悪い例: 「これは Super Individual Work Method コースのことですよね？」これはメモリを参照しています。
良い例: 業界は A1 と A2 からのみ推測します。「これは X コースですか？」と質問しないでください。
詳細な質問バンク: references/question-bank.md
3 つの段階:
- A. 製品ポジショニング（4 問） - 製品タイプ、業界、ブランドトーン、スラッグ
- B. コンテンツ埋め込み（10 問） - ヒーロー / フック / アバウト / ラーニング / testimonial（オプション）/ オーディエンス / インフォ / プライシング / FAQ / スピーカー
- C. カウントダウンと CTA（3～4 問） - 最初にカウントダウンが必要かどうかを尋ね、その後詳細と CTA コピーを尋ねます
質問の表示ルール
各質問では、以下を表示する必要があります。
- 質問自体
- ガードレールとしての良い例と悪い例
- 回答欄
- 特別なコマンド: オプションの質問には
skip、AI 生成オプションにはgenerate 3 for me
オプションセクションの前に Yes/No を尋ねる
- B5a - 学生の声（testimonial）を含めるかどうかを尋ねます。「いいえ」の場合は B5b をスキップします。
- C0 - カウントダウンタイマーを含めるかどうかを尋ねます。「いいえ」の場合は C1～C2 をスキップします。
エキスパートモード（高速パス）
ユーザーが「すべてを一度に貼り付けます」と言った場合、ガードレールの表示をスキップし、完全なコピーを受け取り、すべてを一度に分類します。
回答の収集
すべての最終回答を generated-pages/{slug}/answers.json に次の形式で保存します。
{
"product": { "type": "...", "industry": "...", "tone": ["...", "..."], "slug": "..." },
"content": {
"hero": { "title": "...", "subtitle": "..." },
"hook": "...",
"about": "...",
"learn": ["...", "..."],
"testimonials": [{ "name": "...", "quote": "...", "role": "..." }],
"audience": { "fit": ["..."], "unfit": ["..."] },
"info": [{ "label": "...", "value": "..." }],
"pricing": [{ "plan": "...", "price": "...", "note": "..." }],
"faq": [{ "q": "...", "a": "..." }],
"speaker": { "name": "...", "bio": ["..."], "photo": "..." }
},
"countdown": {
"enabled": true,
"deadline": "2026-04-30T23:59:00+08:00",
"onZero": "ended-state"
},
"cta": { "text": "Register Now", "href": "#" }
}
ステップ 1.5: DESIGN.md を検出
設計システムのステップに入る前に、ユーザーがすでにブランドデザインガイドラインを持っているかどうかを確認します。
# 優先順位に従って DESIGN.md を検索
DESIGN_FILE=""
for f in \
"$PROJECT_ROOT/DESIGN.md" \
"$PROJECT_ROOT/design.md" \
"$PROJECT_ROOT/.claude/DESIGN.md" \
"$HOME/.claude/DESIGN.md"; do
if [ -f "$f" ]; then
DESIGN_FILE="$f"
break
fi
done
DESIGN.md が存在する場合、それを直接適用
DESIGN.md が見つかった場合、そのブランドカラー、タイポグラフィ、スタイルルールを読み取り、それらを設計システムとして直接使用します。
- DESIGN.md の色、タイポグラフィ、スタイルセクションを解析します。
- ユーザーに確認します：「DESIGN.md を見つけました。ブランドカラーは
#XXX、フォントはXXXです。この設定を使用しますか？」 - ユーザーが確認した場合、ステップ 2 とステップ 3 をスキップし、ステップ 4 の HTML 生成に直接進みます。
- ユーザーが「いいえ」と言った場合、通常通りステップ 2 に進みます。
DESIGN.md が存在しない場合、ステップ 2 に進む
UUPM フローまたはフォールバックフローのいずれかを使用します。
このステップが存在する理由: レッスン 3-2 では、学生が DESIGN.md を作成することを教えています。
/landingがそれを読み取らない場合、学生は使用できないブランドガイドラインを作成したことになり、エクスペリエンスが損なわれます。1 つの DESIGN.md で、ソーシャルカード、プレゼンテーション、セールスページなどのビジュアル出力を駆動できるようにする必要があります。
ステップ 2: 設計システムの処理（DESIGN.md が存在しない場合のみ）
詳細フロー: references/uupm-integration.md
UUPM の検出
test -d ~/.claude/skills/ui-ux-pro-max || \
test -d "$PROJECT_ROOT/.claude/skills/ui-ux-pro-max" || \
command -v uipro
いずれかのチェックが成功した場合、UUPM がインストールされており、フローは UUPM モードに入ります。
すべてのチェックが失敗した場合、references/uupm-integration.md の説得メッセージを表示します。
UUPM がインストールされていない場合の分岐
| ユーザーの応答 | 処理 |
|---|---|
y / yes / ok | npm install -g uipro-cli && uipro init --ai claude --global を実行し、インストール後にステップ 3 に進む |
n / no / later | フォールバックモードを使用。 references/fallback-design-rules.md を参照 |
| インストールが失敗 | エラーを表示し、フォールバックで続行するかどうかを尋ねる |
UUPM モード: 設計システムの生成
ステージ A の回答からクエリを構築します。
query="<A2 industry> <A3 tone keywords>"
slug="<A4>"
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py \
"$query" \
--design-system \
--persist \
-p "$slug" \
-f markdown
結果は design-system/MASTER.md に書き込まれます。それを読み取り、色、タイポグラフィ、パターン、アンチパターンを解析します。
ステップ 3: スタイルオプションの提示
UUPM モード
UUPM が推奨するパターンを主なオプションとして使用します。次に、他の 7 つのランディングページスタイルから互換性がありつつも異なる 2 つのオプションを選択し、合計 3 つのオプションを作成します。
たとえば、UUPM が Hero-Centric + Social Proof を推奨した場合、比較オプションとして Conversion-Optimized と Trust & Authority を追加します。
各スタイルを、ビジュアルコンパニオン UI を参照して <div class="cards"> を使用したミニプレビューカードとしてレンダリングし、ユーザーが選択できるようにします。
フォールバックモード
Claude が 2 つの方向性（ミニマル vs プレイフルなど）を生成します。各方向性には、独自の色、タイポグラフィ、およびスペーシングルールが含まれます。ユーザーがいずれかを選択します。
ステップ 4: HTML を生成
スケルトンの読み込み: templates/base.html
カウントダウン JS の読み込み: templates/countdown.js
アセンブリロジック
templates/base.htmlを読み込みます。- 条件付きでレンダリング:
{{#if countdown.enabled}}- 大きなヒーローカウントダウンと下部のスティッキーバーを保持します。それ以外の場合は両方のセクションを削除します。{{#if testimonials}}- testimonial セクションを保持します。それ以外の場合は削除します。
answers.jsonからコンテンツを埋め込みます。- デザイントークンを
<style>に注入します。UUPM モードでは MASTER.md を読み取ります。フォールバックモードでは、3 つのフォールバックルールから生成します。 - カウントダウンが有効な場合のみ、
countdown.jsを注入します。
ナビゲーション: 必須、上部固定
ナビゲーションは必須要件であり、すべての生成ページに含める必要があります。
- ブランド: 左側。A4 のスラッグから派生した短い名前、または製品タイプに基づく短い英語の略称。
- セクションリンク: 中央。About / Learn / Audience / Pricing / Speaker / FAQ にリンクします。存在しないオプションセクションへのリンクは含めないでください。
- 登録 CTA: 右側。「Register」や「Buy」などの短いラベル。
- スクロール時に固定。JS トグル
.scrolledを介してスクロール中にシャドウを追加します。 - モバイル（860px 未満）ではリンクを非表示にします。
必要なデータ。answers.json から推測:
"nav": {
"brandText": "AI Solo Workshop",
"linkAbout": "Workshop",
"linkLearn": "What You Will Learn",
"linkAudience": "Who It Is For",
"linkPricing": "Plans",
"linkSpeaker": "Instructor",
"linkFaq": "FAQ",
"ctaShort": "Register"
}
ナビゲーションのスタイルは、タイポグラフィ、色、区切りスタイルを含め、選択された設計システムに従う必要があります。構造とリンクは同じままです。
シングルファイル HTML 戦略
- Tailwind を CDN 経由で使用:
<script src="https://cdn.tailwindcss.com"></script> - CSS を
<style>にインライン化 - JS を
<script>にインライン化 - 学生が提供した画像 URL を使用
これにより、学生が Framer、Notion、または CMS にコピー＆ペーストするのが最も簡単になります。
ステップ 5: 出力
generated-pages/{slug}/ に書き込みます。
generated-pages/
└── {slug}/
├── index.html
├── design-system.md # UUPM モードのみ
└── answers.json
書き込み後にユーザーのためにファイルを開く
ファイルを手動で開くようにユーザーに指示しないでください。代わりに、ユーザーの代わりに開きます。
open "generated-pages/{slug}/index.html"
macOS では、デフォルトのブラウザでファイルが開きます。open コマンドがない Linux 環境などで失敗した場合は、手動で開く方法をユーザーに伝えてください。
学生への最終メッセージ:
セールスページが生成され、ブラウザで開かれました。
ファイルの場所:
generated-pages/{slug}/index.html
コピーを編集しますか？ HTML を直接編集するか、/landing を再度実行して回答を再入力してください。既存の answers.json が読み取られます。
エラーハンドリング
| 状況 | 動作 |
|---|---|
| npm 権限エラー | ! sudo npm install -g uipro-cli を提案し、学生に手動で実行させる |
| npm が存在しない | Homebrew または nvm を介して Node.js をインストールすることを提案する |
| Python3 が存在しない | brew install python3 を提案する |
| UUPM search.py が失敗 | エラーをログに記録し、自動的にフォールバックする |
| Bash ツールが利用不可 | エラーをキャッチし、手動コマンドの表示にフォールバックする |
| 同じスラッグのフォルダがすでに存在する | 上書きするか、タイムスタンプを追加するか、別の名前を選択するかを尋ねる |
対象外
- サブスクリプションまたはメンバーシップページ、サービス相談ページ
- 保証または返金セクション
- 多言語ページ（現在は英語のみ）
- 支払いやサブスクリプションなどのフォーム統合（CTA はリンクのみ）
- 実際のデプロイメント
on-zero: new-price動作
トリガーフレーズ
/landing、"make a sales page"、"help me make a landing page"、"sales page"