SaaSランディングスキル
シングルページSaaSランディングを生成します。エージェントは、以下のワークフローを正確に実行してください。
1. コンテキストを読む
書き始める前に：
- カレントワーキングディレクトリの
DESIGN.mdを読む。存在しない場合は停止し、作成を依頼する。 - カラーパレット、タイポグラフィトークン、レイアウト原則を特定する。
- 「エージェントプロンプトガイド」セクションに注意する。ここでの指示が競合する場合は、本スキルの指示よりも優先される。
2. セクションを計画する
必須セクション（順番通り）：
- ヒーロー — ロゴまたはワードマーク、見出し（タグライン入力）、サブ見出し（1〜2文）、プライマリCTA、セカンダリCTA。
hero_densityパラメータを垂直方向のパディング（px）として使用する。 - 機能 — 3〜6個の機能タイル。各タイル：アイコン、短いタイトル、1〜2文の説明。
- ソーシャルプルーフ —
proof_count個のロゴまたは推薦文。0の場合はこのセクションをスキップする。 - 料金プラン — 2〜3段階。
has_pricingがtrueの場合のみ含める。 - フッターCTA — アクセントカラーの大きな帯に、1ボタンのコールトゥアクション。
- フッター — 最小限：リンク + 著作権表示。
3. デザインシステムを適用する
- すべての色は
DESIGN.mdのトークンから取得する。新しいHEX値を発明しないこと。 - タイポグラフィ：見出しには定義された表示フォントを、それ以外には本文フォントを使用する。
- レイアウト：グリッド、最大幅、セクション間隔のルールに従う。
- コンポーネント：定義されたボタン/カード/入力パターンを使用する。
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の型指定入力、スライダー、プレビューメタデータ、機能ゲーティングが有効になります。- フロントマター以降のワークフローは、エージェントがシステムプロンプトとして読み取るプレーンマークダウンです。
DESIGN.mdはオーバーライドではなく、協力者として扱われます。スキルは、ブリーフが競合する場合にエージェントにオーバーライドの権限を与えますが、新しいトークンを発明することは決して許可しません。data-od-idタグ付けは、要素をコメントモードに配線する方法です。コメントモードとの互換性を求めるスキルは、出力にこれらを注釈する必要があります。
完全なプロトコルについては ../../skills-protocol.md を参照してください。