saas-landing

SaaS ランディングスキル

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

1. コンテキストを読む

何かを書く前に:

• 現在の作業ディレクトリにある DESIGN.md を読みます。存在しない場合は、停止してその提供を求めます。
• カラーパレット、タイポグラフィトークン、レイアウト原則を特定します。
• 「Agent Prompt Guide」セクションに注目します。ここに書かれている指示と矛盾する場合は、そちらが優先されます。

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

必須セクション（この順序で）:

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

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

• すべての色は DESIGN.md のトークンから取得する必要があります。16 進数の値を独自に考案しないでください。
• タイポグラフィ: 見出しには宣言されたディスプレイフォントを、それ以外のすべてには本文フォントを使用します。
• レイアウト: グリッド、max-width、セクションの余白ルールを尊重します。
• コンポーネント: 宣言されたボタン／カード／入力のパターンを使用します。DESIGN.md の Depth & Elevation が minimal としている場合は、シャドウを追加しないでください。
• アクセント: アクセントカラーは、ヒーローで 1 回、フッター CTA で 1 回、およびすべてのリンクにのみ使用します。ページを埋め尽くさないでください。

4. ファイルを書く

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

• すべての CSS を <head> 内の <style> ブロックにインライン化します。
• DESIGN.md のフォントが Google Fonts などから読み込めない場合は、システムフォントのフォールバックを使用します。
• 外部 JS は使用しません。
• セマンティック 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: front-matter ブロックは、Claude-Code 専用の互換性のためには任意ですが、追加すると OD の型付き入力、スライダー、プレビューメタデータ、ケイパビリティゲーティングが有効になります。
• front-matter の下のワークフローは、エージェントがシステムプロンプトとして読むプレーンな Markdown です。
• DESIGN.md はオーバーライドではなく、共同作業者として扱われます。スキルは、ブリーフが矛盾する場合にエージェントがオーバーライドする権限を与えますが、新しいトークンを考案する権限は決して与えません。
• data-od-id タグ付けは、要素をコメントモードに接続する方法です。コメントモード互換性を求めるスキルは、その出力に注釈を付ける必要があります。

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