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

SaaSランディングスキル

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

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

何かを書き始める前に:

• 現在の作業ディレクトリにある DESIGN.md を読み込んでください。存在しない場合は、停止して作成を依頼してください。
• カラーパレット、タイポグラフィトークン、レイアウトの原則を特定してください。
• 「エージェントプロンプトガイド」セクションに注意してください。このセクションは、ここでの指示と競合する場合、それに優先します。

2. セクションの計画

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

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

3. デザインシステムの適用

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

4. ファイルの作成

以下の内容を含む単一の自己完結型 index.html を出力します:

• すべてのCSSは <head> 内の <style> ブロックにインライン化。
• DESIGN.mdのフォントがGoogle Fontsなどから読み込めない場合のシステムフォントフォールバック。
• 外部JSはなし。
• セマンティックHTML（<header>, <main>, <section>, <footer>）。
• 各編集可能要素には data-od-id="<ユニークスラッグ>" のタグを付け、ホストアプリのコメントモードがターゲットにできるようにします。

5. 自己チェック

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

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

6. 完了

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

---

スキル作成者が参考に読むためのセクション

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

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

注意点:

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

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