SaaSランディングスキル

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

1. コンテキストの読み取り

何かを書く前に:

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

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

すべての色はDESIGN.mdのトークンから取得する必要があります。16進数値を独自に作成しないでください。
タイポグラフィ: 見出しには宣言された表示フォントを、その他すべてには本文フォントを使用します。
レイアウト: グリッド、最大幅、セクション間隔のルールに従います。
コンポーネント: 宣言されたボタン/カード/入力パターンを使用します。DESIGN.mdの「深度とエレベーション」が最小限と指示している場合、シャドウを追加しないでください。
アクセント: アクセントカラーは、ヒーローで1回、フッターCTAで1回、およびすべてのリンクにのみ使用します。ページにあふれさせないでください。

単一の自己完結型 index.html を出力します:

終了する前に、以下を確認してください:

すべてのテキストは意味のある内容であり、ダミーテキストではないこと（product_name と tagline の入力を使用し、残りは具体的で説得力のあるコピーを生成すること）。
壊れたカラー参照がないこと（すべてのCSSカラー値がDESIGN.mdのパレット内にあるか、有効なアルファ/フォールバックバリアントであること）。
レスポンシブブレークポイントがDESIGN.mdの「レスポンシブ動作」セクションと一致していること。
ページが1440w、768w、375wで適切に見えること（頭の中でシミュレーションすること）。
アクセントカラーの使用が合計2回以下であること。

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

これは最小限ですが完全なスキルです。構造:

saas-landing-skill/
├── SKILL.md    ← あなたはここにいます
└── assets/
    └── base.html    （オプションのスターターテンプレート; このスキルは使用しません）

注意すべき点:

od: フロントマターブロックは、Claude-Codeのみの互換性のためにはオプションですが、追加することでODの型付き入力、スライダー、プレビューメタデータ、機能ゲーティングが有効になります。
フロントマター以降のワークフローは、エージェントがシステムプロンプトとして読み取るプレーンマークダウンです。
DESIGN.mdは協力者として扱われ、上書きではありません。このスキルは、エージェントに、概要が矛盾する場合に上書きする権限を与えますが、新しいトークンを発明することは決して許可しません。
data-od-id タグ付けは、要素をコメントモードに配線する方法です。コメントモードとの互換性を必要とするスキルは、その出力に注釈を付ける必要があります。

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