create-static-lp

create-static-lp sample download

HTML ★ 0 🕔 0 GNU General Public License v2.0
Source ZIP Download

create-static-lp

Version
License

Claude Code 用の 教材サンプル Skill。静的 LP（ランディングページ）のスケルトンを public_html/ 配下に生成し、必要な画像は ウィザードで選んだ方式で自動生成する。画像生成は次の2方式から選べる。

  • Codex CLI（image_gen） … WSL の codex exec 組み込みツールで生成。ブラウザ操作を伴わず規約面がクリーンで、参考写真の添付にも対応。推奨・既定。
  • ChatGPT をブラウザで操作（Playwright MCP） … chatgpt.com を自動操作して生成（⚠ 利用規約に抵触するおそれがあるため明示選択時のみ）。

このリポジトリは「Skill そのもの」と「Skill が生成した LP のサンプル成果物」を一緒に同梱しています。

できること

/create-static-lp を起動すると、以下のフローで静的 LP が出来上がります。

  1. ヒアリング（7点・ウィザード形式 / 2ラウンド）
    1. 商品・サービス名
    2. ターゲット
    3. 一番のオファー
    4. 参考にしたい既存LPのURL
    5. 画像生成の参考にしたい画像URL（人物・商品の写真など。任意）
    6. 画像生成の方式（Codex CLI ＝既定 / ChatGPT ブラウザ操作）
    7. 画像のテイスト（アイソメトリック3D / リアル / アニメ・イラスト風 / フラットベクター）
  2. 画像プラン作成（hero / author / product / benefit-1〜3 / concept（コンセプト図）/ step-1〜4（プロセス図）。テイストを全プロンプトへ反映）
    • ヒーローは「貼るだけ」にしない: 被写体カットアウト＋CSS合成、もしくはフルブリード＋テキストoverlay でファーストビューを作り込む
    • インフォグラフィック・図解を標準化: コンセプト図／○ステップのプロセス図／数値バンドを織り込む（画像は文字なし、ラベル・数値は HTML で重ねる）
  3. 選んだ方式で各画像を生成・ローカル保存（Codex CLI は参考写真を -i で添付。生成後に Read で目視検証）
  4. 9 セクション構成（Hero / 課題提起 / 解決策 / ベネフィット3 / お客様の声 / 料金 / FAQ / 最終CTA / フッター）で index.html を生成
  5. ブランドカラー・フォントを :root カスタムプロパティで CSS に展開
  6. Organization / FAQPage の JSON-LD を <head> 内に埋め込み

ディレクトリ構成

.
├── .claude/skills/create-static-lp/
│   └── SKILL.md           ← Skill 定義（本体）
├── .sampletxt/
│   └── answers.txt        ← ヒアリング回答のテスト再利用用サンプル
├── public_html/           ← Skill が生成した LP のサンプル成果物
│   ├── index.html
│   └── assets/
│       ├── css/style.css
│       ├── js/main.js
│       └── images/        ← ChatGPT で生成した画像
├── README.md
├── CHANGELOG.md
├── LICENSE
└── .gitignore

使い方

  1. このリポジトリの .claude/skills/create-static-lp/SKILL.md を、自分の Claude Code プロジェクトの .claude/skills/create-static-lp/SKILL.md にコピー
  2. プロジェクトルートに CLAUDE.md を作成し、以下を記載
    • 案件名・ドメイン・サーバ・サイト構成
    • ブランドカラー・フォント
    • ディレクトリ構成
    • フォーム送信先（例: Formspark の環境変数）
    • 計測タグ（GA4 / Microsoft Clarity）
  3. 画像生成方式に応じて準備する
    • Codex CLI 方式（既定）: WSL に Codex CLI（codex）を導入・ログイン済みにする
    • ChatGPT ブラウザ方式: Playwright MCP を Claude Code に有効化（⚠ 利用規約に留意）
  4. Claude Code を起動して /create-static-lp を実行

サンプル LP のプレビュー

このリポジトリの public_html/index.html をブラウザで直接開くと、Skill が生成した LP のサンプルを確認できます。

  • 商品（架空サンプル）: かっしーのめちゃ簡単SEOマニュアル
  • 配色: 黒 #1A1A1A / オレンジ #FF6B35 / 白 #FFFFFF / 補助グレー #F5F5F5
  • フォント: Noto Sans JP（Google Fonts）

必要環境

  • Claude Code（CLI）
  • 画像生成方式に応じて、いずれか:
    • Codex CLI 方式（推奨・既定）: WSL ＋ Codex CLI（codex、image_gen 利用・ログイン済み）
    • ChatGPT ブラウザ方式: Playwright MCP ＋ ChatGPT アカウント（⚠ ブラウザ自動操作は利用規約に抵触するおそれあり）

ライセンス

GPL-2.0-or-later