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進数値を発明してはならない。
タイポグラフィ：見出しには宣言された表示用フォントを、それ以外には本文用フォントを使用する。
レイアウト：グリッド、最大幅、セクション間隔のルールに従う。
コンポーネント：宣言されたボタン/カード/入力のパターンを使用する。DESIGN.md の「深度とエレベーション」セクションが最小限と指定している場合、シャドウを追加してはならない。
アクセント：アクセントカラーはヒーローで一度、フッターCTAで一度、そしてすべてのリンクにのみ使用する。ページ全体に多用してはならない。

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

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

すべてのテキストは意味のあるコンテンツであり、ダミーテキスト（lorem ipsum）ではない（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 タグは、要素をコメントモードに結びつける方法です。コメントモードとの互換性を望むスキルは、出力にこれらを注釈する必要があります。

詳細は ../../skills-protocol.md を参照してください。