Claude Code で作るLP（ランディングページ）が「量産SaaS感（Interフォント＋紫グラデ＋3カラム）」になってしまう――。これはスキルとMCPを足すだけで劇的に変わります。LPの見た目を底上げする最有力どころを、効果の大きい順にまとめ、そのまま真似できる“おすすめスタック”まで示します。
なぜAIのLPは“それっぽい量産型”になるのか
Claude Code はエンジニアリング（部品の配線・状態管理・実装）は得意ですが、タイポや配色・余白の“センス”は弱い――設計者として訓練されていないためです。だから放っておくと学習data由来の無難な見た目に寄ります。解決策は「強い入力を与える」こと。①美的方向を強制するスキル、②実デザインシステムを渡すMCP、③視覚で検証する目の3点を足すのが定石です。
① まず効く：AIスロップを断つ「デザインスキル」
LPが凡庸になる根本を潰す層。最初に1つ入れるならここ。
| スキル | 役割 |
|---|---|
| frontend-design（Anthropic公式） | コードを書く前に美的方向性を決めさせ、Inter/Roboto/Space Grotesk 等の多用フォントを禁止。導入の“底”として最有力（27万+インストール） |
| Taste Skill | アンチスロップ。VARIANCE / MOTION / DENSITY の3ダイヤルで作風を数値制御（→ 解説記事） |
| Impeccable | brand（マーケ）とproduct（アプリ）の2モード、23コマンド、27のアンチパターン検出 |
| UI/UX Pro Max | 240以上のスタイルと127のフォントペアから、業種に合うデザインシステムを自動選択 |
② LP特化スキル（“一発で良いLP”に一番近い）
- perfect-ui：ランディング／ポートフォリオ専用。カスタムアイコン（絵文字・アイコンライブラリ禁止）＋2Dイラスト＋シェーダー効果で「人が作った感」を出し、アンチスロップを段階（Tier）で強制。GSAP系スキルと自動連携。
- judaverse-landing-skill：1プロンプトで完成LP。20以上のレイアウト・35以上のコンポーネント・19のアニメを検索し、21st.dev Magic MCP から本番品質パーツを取得。Navbar → Hero → Marquee → Services → Stats → CTA → Footer を、ダミーではない実コピー付きで生成。
- neej-frontend-craft：デザインブリーフ＋コンポーネント＋アニメ＋自己採点ルーブリックを1本に統合（汎用スキルを上書き）。
③ 実デザインシステムを渡すMCP（“推測でなく本物のトークン”で作る）
- 21st.dev Magic MCP：プレミアムなReactコンポーネントを生成（→ 21st.dev解説）。
- Windframe MCP：Linear / ShadCN / Notion / Pandora・Autumn（マーケLP向き）／ Apple UI 等の実デザインシステムのトークンを返す。無料3回。
- shadcn MCP（公式）：ライブレジストリと
components.jsonを参照し、既存部品の作り直しを防ぐ。導入はclaude mcp add shadcn -- npx shadcn@latest mcp。 - AIDesigner MCP：Claudeが苦手な「洗練されたビジュアル参照＋ブランドキット」を1コールで生成し、それを土台に実装させる（“最後の25%”を埋める）。
④ モーション（LPの“おっ”を作る）
- Animation Design Skills（freshtechbro）：GSAP+ScrollTrigger／Framer Motion／Lottie／Locomotive／Three.js など23スキル（→ gsap-scrolltrigger解説）。
- shaders.com（MCP）：WebGPUの背景・エフェクトをコンポーネントで（→ Shaders解説）。
⑤ 仕上げ：視覚で検証する“目”
Playwright MCP や Chrome DevTools MCP を入れると、Claudeがページをスクショ→参照と比較→自動で手直しのループを回せます。「見た目OK」を担保する最重要ピースです。加えて Web Quality Skills（Addy Osmani） で Core Web Vitals・アクセシビリティ・SEO も点検できます。
おすすめ「LP劇的改善スタック」
複数の情報源が共通して推す構成です。全部でなく、太字の3つだけでも体感は大きく変わります。
- frontend-design（公式）で美的方向性を強制
- perfect-ui または judaverse-landing-skill ＋ 21st.dev Magic MCP でLPを生成
- shadcn MCP / Windframe MCP で実デザインシステムに接地
- AIDesigner MCP で“建てる前の完成イメージ”を用意
- freshtechbro（GSAP）でスクロール／ヒーロー演出
- Playwright MCP でスクショ比較→反復
- CLAUDE.md にアンチスロップ・ブロックを1つ（例：「Inter と紫グラデ禁止／shadcn優先／Tailwindのみ」）
注意点
- 多くは第三者製のスキル／MCPです。導入前に中身、とくにMCPが要求する権限・APIキーを確認してください。
- フォント禁止リストは「学習dataの偏りへの応急処置」で、デザイン哲学そのものではありません。“方向性を決めてから作る”という順序が本質です。
- スキルはセッション開始時に約100トークンと軽いですが、MCPは常時コンテキストを消費しがち。使う時だけ有効化するのが無難です。
MCPやスキルの基礎は MCPとは、Claude Codeスキル「9つの型」 も参照してください。
主な情報源
- Claude Code Frontend Design Toolkit（キュレーション集）
- Composio「Top 10 Design Skills for Claude Code and Codex」
- Anthropic frontend-design skill ／ AIDesigner「How to Design Beautiful UIs With Claude Code」
各スキル・MCPの名称・機能・インストール数は公開時点のものです（更新の速い領域です）。第三者製ツールの導入は各自の責任・環境でご確認ください。収集・要約はAI、公開判断は人。