saas-landing

SaaS ランディングページスキル

1 ページの SaaS ランディングページを作成します。エージェントは、次のワークフローに正確に従ってください。

1. コンテキストを読む

何かを書く前に：

• 現在の作業ディレクトリにある DESIGN.md を読みます。存在しない場合は、作業を中止してファイルを求めてください。
• カラーパレット、タイポグラフィのトークン、レイアウトの原則を特定します。
• 「Agent Prompt Guide」セクションを確認します。ここに記載された内容は、矛盾する場合、この指示より優先されます。

2. セクションを計画する

必須セクションは次の順番です：

1. ヒーロー — ロゴまたはワードマーク、見出し（タグライン入力）、サブ見出し（1～2 文）、メイン CTA、サブ CTA。hero_density パラメーターを縦方向のパディング（px）として使用します。
2. 機能 — 機能タイルを 3～6 個。それぞれにアイコン、短いタイトル、1～2 文の本文を含めます。
3. ソーシャルプルーフ — proof_count の数のロゴまたは推薦文。0 の場合、このセクションは省略します。
4. 料金プラン — 2～3 段階。has_pricing が true の場合にのみ含めます。
5. フッター CTA — 1 つのボタンで行動を促す、アクセントカラーの大きな帯。
6. フッター — リンクと著作権表示のみのシンプルなもの。

3. デザインシステムを適用する

• すべての色は DESIGN.md のトークンを使用してください。16 進数のカラー値を新たに作らないでください。
• タイポグラフィ：見出しには指定されたディスプレイフォントを使用し、それ以外には本文用フォントを使用します。
• レイアウト：グリッド、最大幅、セクション間隔のルールに従います。
• コンポーネント：指定されたボタン、カード、入力フィールドのパターンを使用します。DESIGN.md の「Depth & Elevation」で最小限とされている場合は、シャドウを追加しないでください。
• アクセント：アクセントカラーはヒーローで 1 回、フッター CTA で 1 回のみ使用し、すべてのリンクにも使用します。ページ全体に多用しないでください。

4. ファイルを書く

次の条件を満たす、自己完結型の index.html のみを出力します。

• すべての CSS を <head> 内の <style> ブロックに記述します。
• DESIGN.md のフォントを Google Fonts などから読み込めない場合は、システムフォントのフォールバックを指定します。
• 外部 JavaScript は使用しません。
• セマンティック HTML（<header>、<main>、<section>、<footer>）を使用します。
• 編集可能な各要素に data-od-id="<unique-slug>" を付け、ホストアプリのコメントモードで対象にできるようにします。

5. 自己チェック

完了前に、次の項目を確認します。

• すべてのテキストに実質的な内容があり、lorem ipsum を使用していません（product_name と tagline の入力を使用し、残りの内容には具体的で説得力のある文言を作成してください）。
• 色の参照に誤りがありません（すべての CSS の色の値が、DESIGN.md のパレットに含まれているか、有効なアルファ値／フォールバックのバリエーションです）。
• レスポンシブのブレークポイントが、DESIGN.md の「Responsive Behavior」セクションと一致しています。
• 1440w、768w、375w の表示が適切です（頭の中でシミュレーションします）。
• アクセントカラーの使用は合計 2 回以下です。

6. 完了

index.html のみを書きます。CSS ファイル、JS ファイル、README を別途生成しないでください。

---

参考資料として読むスキル作成者向け

これは、必要最小限でありながら完結したスキルです。構成：

saas-landing-skill/
├── SKILL.md    ← you are here
└── assets/
    └── base.html    (optional starter template; this skill doesn't use one)

注目点：

• od: フロントマターブロックは、Claude-Code のみとの互換性を保つ場合は任意ですが、追加すると OD の型付き入力、スライダー、プレビューのメタデータ、機能の利用可否制御が有効になります。
• フロントマターより後のワークフローは、エージェントがシステムプロンプトとして読む通常の Markdown です。
• DESIGN.md は上書き対象ではなく、協力者として扱います。依頼内容と矛盾する場合にエージェントが上書きする権限を与えますが、新しいトークンを作ることは決して許可しません。
• data-od-id タグを使って、要素をコメントモードに連携させます。コメントモードとの互換性が必要なスキルでは、出力にこのタグを付ける必要があります。

プロトコルの詳細については、../../docs/skills-protocol.md を参照してください。