SaaSランディングページスキル
1つの製品を1つのアイデアで販売する単一ファイルのSaaSランディングページを生成します。
ワークフロー
- アクティブなDESIGN.mdを読み込む（上記で注入）。ヒーロー、カード、CTAはすべてそのトークンからカラー、タイプ、スペーシング、半径を取得します。値を発明しないでください -
var(--token)のみ使用します。 - 製品名とプロミスを決める。 ブリーフから、具体的な製品名、1行のプロミス、単一の主要アクション（トライアル開始 / デモ予約 / はじめる）を導き出します。実際のコピーを書いてください - 「機能1 / あなたの会社名を入力」のようなプレースホルダーは避けてください。
- 次の順序でセクションをレイアウトします:
- 固定ナビ: 左にワードマーク、4-5のリンク、右にプライマリCTAボタン。
- ヒーロー: 1つのH1（最大約8語）、1つのサポート段落、2つのボタン（プライマリ+セカンダリ）、およびフレーム付きの製品ビジュアルプレースホルダー。
- ロゴストリップ: 5-6の顧客名、控えめに、均等に間隔を空ける。
- 機能グリッド: 6つのカード、それぞれに短いタイトル（<=5語）と1-2文のメリット - スペックリストではありません。
- テスティモニアル: 1つの引用（名前、役職、会社を含む）。
- 価格帯: 2-3のプランカード、ブリーフの通貨で価格表示、各カード5つ以下の機能箇条書き、1つのハイライトプラン。
- クロージングCTAバンド+スリムなフッター（製品/会社/法務の列）。
- craft barを維持する:
- ページ内に1つのH1のみ。各セクションにH2。階層はスケールで表現し、色では表現しない。
- プライマリカラーはアクションにのみ使用 - 装飾には使用しない。
- セクションのリズムはスペーシングスケール（
--section-y-*またはスペーストークン）を使用。表面/背景バンドを交互にして息継ぎの余地を作る。 - すべてのインタラクティブ要素に可視フォーカス状態を設定。ボタンは高さ44px以上。バンド背景上の控えめなテキストのコントラストは4.5:1以上。
- レスポンシブ: 768px未満では単一カラム、ナビはシンプルな積み重ねまたはハンバーガーメニューなしのリンク行に折りたたむ。
- 自己完結型の
index.htmlを1つ出力 - 埋め込み<style>、外部リクエストなし、JavaScriptはブリーフが要求する場合のみ。
アンチパターン
- ヒーローの背後にストックグラデーションを配置し、読みにくいオーバーレイテキストにすること。
- 6つの同じ大きさの機能すべてが「パワフル」と主張すること。
- 画面あたり2つ以上のアクセント色。エンバー/レッドはエラー用に予約。
- ロレム・イプサム、「Unlock the power of...」、「Revolutionize...」など。