LP生成プロンプトの冒頭に「ミニ・デザインシステム」を書く

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

Lovable、v0、Claude などでランディングページを一発生成させるとき。セクションごとにトーンがバラバラになる問題への対策。

やり方

投稿で紹介されていた構成（自分の言葉で再構成）：

• 色は3つ、それぞれに役割：ダーク面用の「インク」、ライト面用の「ペーパー」、ボタン等のアクセント1色（各セクションのハイライトは1つだけ）
• フォントは2つ、それぞれに役割：見出し＝太いコンデンス書体・大文字・line-height 0.9、本文＝プレーンなグロテスク 16px
• 角丸は1種類：カード・ボタン・画像すべて 16px
• 余白は8刻みのスケール（8/16/24/32/48/64…）
• セクションはダークとライトを交互にしてページにリズムを出す
• 動きの指定も数値で：数字のカウントアップはカードが40%見えたら1回、1.6秒 ease-out など

プロンプト冒頭のテンプレ例：

# Design system (必ず守る)
colors: ink #0E0E10 (dark sections), paper #F4F1EA (light sections), accent #C6FF3D (buttons, 1 highlight per section)
fonts: headline = condensed heavy, uppercase, line-height 0.9 / body = grotesk 16px
radius: 16px everywhere
spacing: multiples of 8
sections alternate dark / light

注意点・対応状況

• 投稿自体は誇張気味の宣伝トーンなので、構成要素（役割付きトークンの先出し）だけを取り入れる。
• 和文を含む場合は見出しの line-height 0.9 は詰まりすぎるので 1.2 前後に調整。

出典

• 投稿者: @awp_Akira (Akira)
• 投稿: @awp_Akira · 2026-10-03
• 収集日: 2026-10-09（JST）