landing-page-design スキルで、質問をまとめて受けてからLPを作らせる（構成・コピー・見た目の数値まで1ファイル）

どんな問題を解決するか / いつ使うか

コーディングエージェントにLPを頼むと、目的や読み手を聞かずに「それっぽい」セクションを並べ、フォントや余白も既定値のままになりがち。このスキルは「何を言うか（戦略・構成）」と「どう見せるか（数値の決まった見た目のルール）」を1つの SKILL.md にまとめていて、Claude Code・Cursor・Codex で同じように使える。

やり方

1. Claude Code なら、次のように頼む（投稿のプロンプトの要旨）：
   「GitHub の elayadesign/ai-design-skills にある landing-page-design スキルをこのプロジェクトの .claude/skills に入れて、それを使ってこのプロジェクトのLPを作って。始める前に、聞きたいことは全部まとめて一度に聞いて」
   • Codex では「.claude/skills に入れて」の部分を「その SKILL.md を AGENTS.md に追記して」に変える。
   • Cursor では SKILL.md を .cursor/rules/ に置く（リポジトリのREADMEの手順）。
2. スキルの前半（Part A）で、エージェントが次を一度に質問してくる：
   • 一番取ってほしい行動（無料体験・デモ予約・購入など）と、何をもって成果とするか
   • 誰向けか、相手の悩み、申し込まない理由の上位3つ、流入元（広告・検索・SNS・メール）
   • 使える実績（ロゴ・声・数字）、スクショや動画、返金などの条件
   • 答えられない項目は、エージェントが仮定を1行で書いて先に進む
3. 構成は「ファーストビュー（成果＋相手が分かる見出し、補足、主ボタン1つ、実績1つ、画像）→課題と解決→ベネフィット3〜5個→使い方3ステップ→声→FAQ 6〜12問→リスクを下げる一言→最後のボタン（上と同じ）」が基本。4つのレイアウト型（定番・長い読み物・最小限・比較ページ）から1つ選び、理由を書かせる。
4. 後半（Part B）が見た目のルール：フォントは Geist・Manrope・Poppins などから1書体だけ（Inter・Roboto・Arial などは禁止、イタリックと極太も禁止）、文字サイズは Tailwind の標準の段階に丸める、余白は決められた値だけ使う、見出しは text-wrap: balance、本文は text-wrap: pretty で1語だけの最終行を防ぐ、など。
5. 自分の好みに合わせたいときは、ファイル末尾近くの「デザインの値」の節（フォント・色・余白・動き）だけを書き換える。リポジトリをフォークして編集すれば、ほかのルールはそのまま使える。

注意点

• ルールはかなり断定的（「ハイフンを本文に使わない」「タグラインを見せるセクションは必須」など）。英語のLP前提の項目もあるので、日本語のLPでは合わない項目を消すか、自分のDESIGN.mdで上書きする。
• 指定フォントは欧文用。日本語のLPでは和文フォントを別に決める（日本語UIのDESIGN.mdには、和文フォント・行間1.7〜2.0・字間0.04〜0.1emを明記する）。
• 既存サイトの手直しには、同じ作者の別リポジトリ redesign-skill を使うよう案内されている。
• 似たスキルとして Hallmarkスキルで「作る・採点・作り直し・好きなサイトから抽出」を使い分け、AIっぽくないUIにする や UI UX Pro Max スキルで、作る前に業種に合ったデザインシステム（構成・スタイル・配色・フォント）を推薦させる もある。こちらは「質問→構成→コピー」の前半が厚いのが違い。

出典

• @Voxyz_ai post
• リポジトリ：elayadesign/ai-design-skills