lp-designer

# LP/HP Designer - ランディングページ・ホームページ制作スキル LP（ランディングページ）/ HP（ホームページ）をゼロから制作するための統合ワークフロースキル。 AskQuestionToolによるヒアリングからVercelデプロイまで、6つのフェーズで完結する。 ## トリガーフレーズ - 「LPを作って」「ランディングページを作成」 - 「HPを作りたい」「ホームページ制作」 - 「Webページを作って」「サイトを作りたい」 - 「Pencilでデザインして実装」 ## 前提条件 - Cursor IDE で ai-agent-camp を開いていること - Pencil MCP が有効（.pen ファイル操作用） - Node.js 18+ がインストール済み（Vercelデプロイ用） - Gemini API キーが設定済み（diagram-generator 用） ## ワークフロー概要 ``` Phase 1: ヒアリング（AskQuestion） ↓ サービス概要・ターゲット・訴求軸 Phase 2: 訴求整理 ↓ ペルソナ・ベネフィット・コピー Phase 3: WF作成 ↓ ASCII WF + ビジュアルWF Phase 4: Pencilデザイン ↓ .pen デザインファイル Phase 5: コード実装 ↓ HTML/CSS(Tailwind)/JS Phase 6: Vercelデプロイ ↓ 公開URL ``` --- ## Phase 1: ヒアリング（AskQuestion） 最初にAskQuestionToolを使って、制作するLP/HPの要件を構造的に収集する。 ### Step 1-1: プロジェクト種別の確認 ```json { "title": "LP/HP制作ヒアリング", "questions": [{ "id": "project_type", "prompt": "どのタイプのページを作成しますか？", "options": [ {"id": "lp", "label": "LP（ランディングページ）- 1つのCTAに集中"}, {"id": "hp", "label": "HP（ホームページ）- 複数セクション・ナビ付き"}, {"id": "product", "label": "プロダクトページ - 機能紹介中心"}, {"id": "event", "label": "イベント/キャンペーンページ"} ] }] } ``` ### Step 1-2: サービス/プロダクト情報 ```json { "title": "サービス情報", "questions": [ { "id": "service_category", "prompt": "サービスのカテゴリを選んでください", "options": [ {"id": "saas", "label": "SaaS / Webサービス"}, {"id": "ec", "label": "ECサイト / 物販"}, {"id": "consulting", "label": "コンサルティング / 士業"}, {"id": "education"...