SaaSランディングスキル は何をしますか？
シングルページのSaaSランディングを生成します。エージェントは以下のワークフローに正確に従ってください。
1. コンテキストの読み取り
コードを書く前に:
- カレントワーキングディレクトリにある
DESIGN.mdを読んでください。存在しない場合は、停止して作成を依頼してください。 - カラーパレット、タイポグラフィトークン、レイアウトの原則を特定してください。
- 「Agent Prompt Guide」セクションに注意してください。これは、競合する場合、ここでの指示を上書きします。
2. セクションの計画
必須セクション（順番通り）:
- ヒーロー — ロゴまたはワードマーク、ヘッドライン（タグライン入力）、サブヘッド（1〜2文）、プライマリCTA、セカンダリCTA。ヒーローの密度パラメータを垂直パディング（px）として使用します。
- 特徴 — 3〜6個の特徴タイル。各タイル: アイコン、短いタイトル、1〜2文の本文。
- 社会的証明 —
proof_count個のロゴまたは推薦文。0の場合は、このセクションをスキップします。 - 価格 — 2〜3のプラン。
has_pricingがtrueの場合のみ含めます。 - フッターCTA — 大きなアクセントカラーの帯に1ボタンのコールトゥアクション。
- フッター — 最小限: リンク + 著作権。
3. デザインシステムの適用
- すべての色はDESIGN.mdのトークンから取得する必要があります。十六進数値を独自に発明しないでください。
- タイポグラフィ: 宣言された表示フォントをヘッドラインに、本文フォントをそれ以外のすべてに使用します。
- レイアウト: グリッド、最大幅、セクション間隔のルールに従います。
- コンポーネント: 宣言されたボタン/カード/入力パターンを使用します。DESIGN.mdのDepth & Elevationが最小限と指定している場合、シャドウを追加しないでください。
- アクセント: アクセントカラーは、ヒーローとフッターCTAでそれぞれ1回のみ、およびすべてのリンクに使用します。ページに氾濫させないでください。
4. ファイルの作成
自己完結型の index.html を1つ出力してください:
- すべてのCSSは
<style>ブロックにインライン化して<head>に配置します。 - DESIGN.mdのフォントがGoogle Fontsなどから読み込めない場合のシステムフォントフォールバックを含めます。
- 外部JSは含めません。
- セマンティックHTML（
<header>、<main>、<section>、<footer>）を使用します。 - 各編集可能要素には
data-od-id="<ユニークスラッグ>"をタグ付けし、ホストアプリのコメントモードがそれをターゲットにできるようにします。
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 ← ここにあります
└── assets/
└── base.html （オプションのスターターテンプレート。このスキルは使用しません）
注意点:
od:フロントマターブロックはClaude-Codeのみの互換性ではオプションですが、追加するとODの型付き入力、スライダー、プレビューメタデータ、機能ゲーティングが利用可能になります。- フロントマター以下のワークフローは、エージェントがシステムプロンプトとして読み取るプレーンマークダウンです。
- DESIGN.mdはオーバーライドではなく、コラボレーターとして扱われます。スキルは、概要が競合する場合にエージェントにオーバーライドの権限を与えますが、新しいトークンを発明することは決して許可しません。
data-od-idタグ付けは、要素をコメントモードに配線する方法です。コメントモードとの互換性を望むスキルは、出力にアノテーションを付ける必要があります。
完全なプロトコルについては ../../skills-protocol.md を参照してください。