/lp-designer

name: lp-designer
description: "LP/HP作成ワークフロー。ヒアリング→訴求整理→WF→Pencilデザイン→HTML実装→Vercelデプロイの全フローをガイド。 「LPを作って」「ランディングページ作成」「HPデザイン」「Webページ制作」等のリクエストで発動。"
triggers:
  - LPを作って
  - ランディングページを作成
  - HPを作りたい
  - ホームページ制作
  - Webページを作って
  - lp-designer
  - landing page

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: プロジェクト種別の確認

{
  "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: サービス/プロダクト情報

{
  "title": "サービス情報",
  "questions": [
    {
      "id": "service_category",
      "prompt": "サービスのカテゴリを選んでください",
      "options": [
        {"id": "saas", "label": "SaaS / Webサービス"},
        {"id": "ec", "label": "ECサイト / 物販"},
        {"id": "consulting", "label": "コンサルティング / 士業"},
        {"id": "education", "label": "教育 / スクール"},
        {"id": "event", "label": "イベント / セミナー"},
        {"id": "portfolio", "label": "ポートフォリオ / 個人"},
        {"id": "other", "label": "その他"}
      ]
    },
    {
      "id": "design_tone",
      "prompt": "デザインのトーンを選んでください",
      "options": [
        {"id": "professional", "label": "プロフェッショナル・信頼感"},
        {"id": "modern", "label": "モダン・スタイリッシュ"},
        {"id": "playful", "label": "ポップ・親しみやすい"},
        {"id": "luxury", "label": "高級感・エレガント"},
        {"id": "minimal", "label": "ミニマル・シンプル"},
        {"id": "tech", "label": "テック・先進的"}
      ]
    }
  ]
}

Step 1-3: 追加ヒアリング（自由入力）

AskQuestion の後、以下を自由入力で確認する:

• **サービス名**: 正式名称
• **キャッチコピー案**: あれば（なければ生成）
• **ターゲット**: 誰に向けたページか
• **主な訴求ポイント**: 3つ程度
• **参考サイト**: あればURL
• **CTAの目的**: 問い合わせ / 申し込み / 資料請求 / 購入 など

---

Phase 2: 訴求整理

Phase 1 のヒアリング結果をもとに、以下のドキュメントを生成する。

出力: `output/lp-brief.md`

# LP ブリーフ

## ペルソナ
- 名前: {例: 田中太郎}
- 年齢: {例: 35歳}
- 職種: {例: マーケティングマネージャー}
- 課題: {例: LP制作に時間がかかりすぎる}

## 訴求軸（ベネフィット3点）
1. {メインベネフィット}
2. {サブベネフィット1}
3. {サブベネフィット2}

## コピー
- ヘッドライン: {例: AIで、LP制作を10倍速く}
- サブヘッドライン: {例: ヒアリングからデプロイまで、すべてをAIがサポート}
- CTA文言: {例: 無料で始める}

## セクション構成
1. Hero（ヘッドライン + CTA）
2. Pain Points（課題提起）
3. Solution（ソリューション紹介）
4. Features（機能 / 特徴 3-4点）
5. Social Proof（実績 / お客様の声）
6. Pricing / Plan（料金・プラン）※オプション
7. FAQ（よくある質問）
8. Final CTA（最終アクション）

---

Phase 3: WF（ワイヤーフレーム）作成

Step 3-1: ASCII ワイヤーフレーム

テキストベースで各セクションの構造を設計する:

┌─────────────────────────────────┐
│           HEADER / NAV          │
├─────────────────────────────────┤
│                                 │
│     [Hero Image / Video]        │
│                                 │
│     ヘッドライン（H1）            │
│     サブヘッドライン              │
│     [ CTA ボタン ]              │
│                                 │
├─────────────────────────────────┤
│     Pain Points セクション       │
│   ┌─────┐ ┌─────┐ ┌─────┐     │
│   │課題1│ │課題2│ │課題3│     │
│   └─────┘ └─────┘ └─────┘     │
├─────────────────────────────────┤
│     Solution セクション          │
│   [画像]  説明テキスト           │
├─────────────────────────────────┤
│     Features セクション          │
│   ┌──────┐ ┌──────┐            │
│   │機能1 │ │機能2 │            │
│   └──────┘ └──────┘            │
│   ┌──────┐ ┌──────┐            │
│   │機能3 │ │機能4 │            │
│   └──────┘ └──────┘            │
├─────────────────────────────────┤
│     Social Proof                │
│     ★★★★★ お客様の声           │
├─────────────────────────────────┤
│     FAQ                         │
│     Q1 / A1                     │
│     Q2 / A2                     │
├─────────────────────────────────┤
│     Final CTA                   │
│     [ CTA ボタン ]              │
├─────────────────────────────────┤
│           FOOTER                │
└─────────────────────────────────┘

Step 3-2: ビジュアルWF生成

diagram-generator を使ってビジュアルワイヤーフレームを生成:

uv run python tools/generate_diagram.py --topic "LP wireframe: {セクション構成}" --style minimalist

出力先: `output/images/lp-wireframe.png`

---

Phase 4: Pencilデザイン

Pencil MCP を使って .pen デザインファイルを作成する。 .pen ファイルは暗号化されているため、Read/Grep ではなく必ず Pencil MCP ツールを使うこと。

Step 4-0: Pencil エディターを開く

まず現在のエディター状態を確認する。ファイルが開いていなければ新規作成する。

# 1) エディター状態を確認
CallMcpTool: user-pencil / get_editor_state
  arguments: {}

# → ファイルが開いていない場合エラーが返る
# → 既にファイルが開いている場合はノード一覧が返る

# 2-A) 新規ドキュメントを作成する場合
CallMcpTool: user-pencil / open_document
  arguments: { "filePathOrTemplate": "new" }

# 2-B) 既存の .pen ファイルを開く場合
CallMcpTool: user-pencil / open_document
  arguments: { "filePathOrTemplate": "path/to/design.pen" }

# 3) 開いた後、再度 get_editor_state でノード構造を確認
CallMcpTool: user-pencil / get_editor_state
  arguments: {}

**重要**: `open_document` は Pencil アプリ内で対象ファイルを開く操作。 Cursor の MCP 設定で `user-pencil` が有効になっている必要がある。

Step 4-1: LPデザインガイドライン取得

LP 特化のデザインルール（セクション構成、ヒーロー設計、フッター設計等）を取得する:

CallMcpTool: user-pencil / get_guidelines
  arguments: { "topic": "landing-page" }

このガイドラインには以下が含まれる:

• SaaS/LP の推奨セクション構成（Hero → Features → Social Proof → Pricing → FAQ → CTA → Footer）
• ヒーローセクションのベストプラクティス
• コンテンツ→ビジュアルの順序原則
• batch_design でのページコンテナ作成例

Step 4-2: スタイルガイド取得

デザインのトーンに合ったスタイルガイドを取得する:

# 1) 使えるタグ一覧を確認
CallMcpTool: user-pen