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/ 配下に生成し、必要な画像は ChatGPT（GPT-4o の画像生成）を Playwright MCP 経由で立ち上げて自動生成する。

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

できること

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

  1. ヒアリング（5点）
    1. 商品・サービス名
    2. ターゲット
    3. 一番のオファー
    4. 参考にしたい既存LPのURL
    5. 画像生成の参考にしたい画像URL（人物・商品の写真など。任意）
  2. 画像プラン作成（hero / product / benefit-1〜3 / 参考画像のイラスト化など）
  3. ChatGPT を Playwright MCP で起動して、各画像を順に生成・ローカル保存
  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. Playwright MCP を Claude Code に有効化する（ChatGPT 操作に必要）
  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）
  • Playwright MCP（ChatGPT を操作するため）
  • ChatGPT アカウント（画像生成のため、無料アカウントでも可・回数制限あり）

ライセンス

GPL-2.0-or-later