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

シングルページのSaaSランディングページを生成します。エージェントは以下のワークフローに厳密に従ってください。

1. コンテキストの読み込み

コードを書く前に以下を行ってください：

必須セクション（順序通り）：

ヒーロー — ロゴまたはワードマーク、見出し（タグライン入力）、サブ見出し（1〜2文）、プライマリCTA、セカンダリCTA。hero_density パラメータを垂直パディング（px）として使用する。
機能 — 3〜6個の機能タイル。各タイルはアイコン、短いタイトル、1〜2文の説明文を含む。
ソーシャルプルーフ — proof_count 個のロゴまたは testimonial。0の場合はこのセクションをスキップする。
価格 — 2〜3段階。has_pricing が true の場合のみ含める。
フッターCTA — アクセントカラーの大きなバナーと1つのボタンによるコールトゥアクション。
フッター — 最小限のリンクと著作権表示。

すべての色は DESIGN.md のトークンから取得すること。独自の16進数値を生成しないこと。
タイポグラフィ：見出しには display フォント、その他のテキストには body フォントを使用する。
レイアウト：グリッド、最大幅、セクション間隔のルールに従う。
コンポーネント：宣言されたボタン/カード/入力パターンを使用する。DESIGN.md の Depth & Elevation が「最小限」としている場合、シャドウを追加しない。
アクセント：アクセントカラーはヒーローで1回、フッターCTAで1回、すべてのリンクにのみ使用する。ページに過剰に使用しない。

単一の自己完結型 index.html を出力する：

終了前に以下を確認する：

すべてのテキストは意味のある内容であり、羅列的なダミーテキスト（lorem ipsum）ではない（product_name と tagline 入力を使用し、その他の部分にはもっともらしい具体的なコピーを生成すること）。
壊れた色参照がない（すべてのCSSカラー値が DESIGN.md のパレットに含まれているか、有効なアルファ/フォールバックバリエーションであること）。
レスポンシブブレークポイントが DESIGN.md の Responsive Behavior セクションと一致している。
ページが 1440w、768w、375w で適切に見える（頭の中でシミュレーションする）。
アクセントカラーが合計2回を超えて使用されていない。

index.html のみを作成する。別のCSSファイル、JSファイル、READMEは生成しない。

これは最小限かつ完全なスキルです。ディレクトリ構造：

saas-landing-skill/
├── SKILL.md    ← 現在のファイル
└── assets/
    └── base.html    （オプションのスターターテンプレート。このスキルは使用しません）

注意点：

od: フロントマターは互換性メタデータとして保持されます。Clean Design は型付き入力、スライダー、プレビューメタデータ、機能ヒントを読み取ります。
フロントマター以降のワークフローは、エージェントがシステムプロンプトとして読み取るプレーンマークダウンです。
DESIGN.md は協力者として扱われ、オーバーライドではありません。このスキルは、ブリーフと競合する場合にエージェントにオーバーライドの権限を与えますが、新しいトークンを生成することは決して許しません。
data-od-id タグは要素をローカルコメントモードに接続します。コメントモードとの互換性を必要とするスキルは、出力にタグを付ける必要があります。

完全なプロトコルについては ../../skills-protocol.md を参照してください。