LLMとSkillsで美しいインターフェースを実現：プロンプトとプラグイン実践
前のレッスンでは、AI IDEでデザイン稿をコードに変換し、コンポーネントライブラリで素早くインターフェースを構築する方法を学びました。しかし、一つ気まずい問題に気づいたかもしれません：同じ要件でも、AIが生成したページは何かが足りない——フォントはどこにでもあるInter、配色はよく見る紫のグラデーション、レイアウトはあくびが出るほど対称的なカードグリッド、ページ全体から濃厚な「AI臭」が漂っています。
これはAIのせいではなく、あなたがどんなスタイルが欲しいかを伝えていないからです。
美容室に行くことを想像してみてください。「髪を切って」とだけ言えば、美容師は無難で平凡な結果を出します。しかし「日系のゆるふわパーマ、前髪はハチの字型、長さは鎖骨まで、レイヤー感をはっきり」と言えば、あなたの期待に本当に合う結果が得られます。
AIも同じです。明確な美学的方向性を説明することで、初めて美しくユニークなインターフェースを生成できます。
このレッスンでは、AIに美しいインターフェースを生成させる2つの方法を教えます：
- 入念に設計されたプロンプトテンプレート——自然言語でAIに望む美学スタイルを伝える
- フロントエンドSkillsプラグイン——AIにプロのデザイン仕様を自動ロードさせる
学べること
- なぜAIがデフォルトで生成するインターフェースが「普通」なのかを理解する
- デザインスタイルを説明する5つの次元（フォント、色、レイアウト、アニメーション、ディテール）をマスターする
- インターフェースを美しくする3つのSkillsプラグインの使い方を学ぶ
- 3つの実践シーンを通じて、プロンプト + Skillsで美しいインターフェースを生成する練習をする
1. なぜAIがデフォルトで生成するインターフェースは「普通」なのか？
AIの学習データには膨大なフロントエンドコードが含まれており、その大部分が「安全」な選択を使用しています：
| 次元 | AIのデフォルト選択 | 問題点 |
|---|---|---|
| フォント | Inter、Roboto、Arial | 一般的すぎて個性がない |
| カラー | 紫のグラデーション、青のメインカラー | テック業界で使いすぎて視覚的疲労 |
| レイアウト | 対称グリッド、カード積み重ね | 予測可能で、驚きに欠ける |
| アニメーション | フェードイン/アウト、シンプルなhover | 精緻さに欠け、層が浅い |
| 背景 | 単色、シンプルなグラデーション | 単調で、質感に欠ける |
これらの選択は個別に見れば悪くありませんが、すべてのAI生成ページがこれらを使うと、「AI臭」になります。
💡 重要な洞察：AIはデザインができないのではなく、デフォルトで「統計的平均」に戻るだけです。平均から逸脱する方向を明確に伝える必要があります。
2. 方法1：プロンプトでデザインスタイルを説明する
2.1 デザインスタイルの5つの次元
美しいインターフェースを生成するには、5つの次元から望む効果を説明する必要があります：
| 次元 | 説明のポイント | キーワード例 |
|---|---|---|
| フォント | タイトルは太字のディスプレイフォント、本文は読みやすいボディフォント | Space Grotesk、Playfair Display、JetBrains Mono |
| カラー | メインカラー + アクセントカラー、均等な分布を避ける | #4F46E5 メイン + #F59E0B アクセント |
| レイアウト | 非対称、重なり、グリッドの打破 | Bento Grid、非対称セクション、浮遊要素 |
| アニメーション | 入念にコリオグラフィされたページロード、マイクロインタラクション | staggered reveals、スクロールトリガー |
| ディテール | 背景、シャドウ、ボーダー、テクスチャ | ノイズ、幾何学模様、グラデーションメッシュ |
2.2 百聞は一見に如かず：普通のプロンプト vs 美化プロンプト
ランディングページの例で効果を比較してみましょう：
普通のプロンプト：
AI執筆アシスタントのランディングページを作ってください。ナビバー、ファーストビュー、機能紹介、料金、フッターを含めて美化プロンプト：
AI執筆アシスタントのランディングページを作ってください。要件：
**美学スタイル：Neubrutalism（新ブルータリズム）**
**フォント：**
- タイトル：Space Grotesk、ウェイト 700-900
- 本文：IBM Plex Sans、ウェイト 400
**カラー：**
- メインカラー：#000000（純黒）
- アクセント：#FF6B00（オレンジ）
- 背景：#FFFDF0（オフホワイト）
- ボーダー：3px 黒の実線
**レイアウト：**
- 非対称レイアウト、要素間は太い黒線で区切る
- カードにハードシャドウ（box-shadow: 8px 8px 0px #000）
- 大胆な余白のコントラスト
**アニメーション：**
- ページロード時に要素が下からバウンスイン
- hover時にボタンが2px上に移動
**ディテール：**
- 角丸はすべて0px（直角）
- ボタンに強い3D効果
- 背景に微妙なノイズテクスチャ同じ要件でも、2番目のプロンプトでAIはスタイルが明確で印象的なページを生成できます。
2.3 フロントエンド美化Skillsリソースライブラリ
ゼロからプロンプトを書かないで！ここではフロントエンド美化に直接関連するAI Skillsを収集しています：
| リポジトリ名 | 内容 | Star | リンク |
|---|---|---|---|
| ui-ux-pro-max-skill | 57種のスタイル + 95種のカラーリング + 56種のフォント | 10k+ | GitHub |
| antigravity-awesome-skills | 一般的なAI審美パターンを回避 | - | GitHub |
| superdesigndev/superdesign | AIネイティブUI開発ツール | 4.7k | GitHub |
| anthropics/skills/frontend-design | Anthropic公式フロントエンドデザインSkill | - | GitHub |
💡 さらに多くのスタイルプロンプトは付録：デザインスタイルプロンプト早見表を参照してください
2.5 よく使われる3つのスタイルテンプレート
ここでは検証済みの3つのスタイルテンプレートを紹介します。コピーして修正してそのまま使えます：
テンプレート1：ミニマリズム
**美学スタイル：ミニマリズム**
**フォント：**
- タイトル：PP Neue Montreal、ウェイト 500-700
- 本文：Inter、ウェイト 400
**カラー：**
- メインカラー：#FFFFFF（白）
- テキスト：#1A1A1A（ほぼ黒）
- アクセント：#3B82F6（青、少量使用）
**レイアウト：**
- 大量の余白（padding 最小 64px）
- 単一カラムまたは2カラムレイアウト、中央揃え
- 要素間は分割線ではなく余白で区切る
**アニメーション：**
- ゆっくりとしたフェードイン（duration 600ms）
- hover時にカラーのグラデーショントランジション
**ディテール：**
- 角丸：8px
- シャドウ：subtle（0 4px 12px rgba(0,0,0,0.08)）
- 背景装飾なしテンプレート2：グラスモーフィズム
**美学スタイル：Glassmorphism（グラスモーフィズム）**
**フォント：**
- タイトル：Outfit、ウェイト 600-800
- 本文：Plus Jakarta Sans、ウェイト 400-500
**カラー：**
- 背景：グラデーション #667eea から #764ba2
- カード背景：rgba(255, 255, 255, 0.1)
- テキスト：#FFFFFF
**レイアウト：**
- 浮遊カードデザイン
- カード間に重なり
**アニメーション：**
- ページロード時にカードが順次浮上（staggered）
- hover時にカードが1.05倍に拡大
**ディテール：**
- 角丸：20px
- 背景ブラー：backdrop-blur-xl
- ボーダー：1px rgba(255, 255, 255, 0.2)
- 微妙なグラデーショングロウ効果テンプレート3：Bento Grid（弁当箱）
**美学スタイル：Bento Grid**
**フォント：**
- タイトル：SF Pro Display、ウェイト 700
- 本文：SF Pro Text、ウェイト 400
**カラー：**
- 背景：#F5F5F7（薄いグレー）
- カード：#FFFFFF（白）
- アクセント：#0071E3（Appleブルー）
**レイアウト：**
- グリッドレイアウト、異なるサイズのカードを組み合わせ
- カード間 gap 16px
- 角丸 24px
**アニメーション：**
- hover時にカードがわずかに浮上
- クリック時にプレス効果
**ディテール：**
- 大きなカードは重要なコンテンツを表示
- 小さなカードは二次情報を表示
- テキストの一部をアイコンで代用
- クリーンなシャドウ（0 4px 24px rgba(0,0,0,0.06)）3. 方法2：Skillsプラグインでデザイン仕様を自動ロード
毎回手動でスタイルプロンプトを書くのは面倒です。Skillsは再利用可能なデザイン仕様パッケージで、インストール後にAIが自動的にこれらの仕様を適用します。
3.1 インターフェースを美しくする3つのSkills
| Skills | 特徴 | インストールコマンド |
|---|---|---|
| UI/UX Pro Max | 67種のスタイル、96種のカラーリング、57種のフォント組み合わせ | npm install -g uipro-cli && uipro init --ai claude |
| frontend-design | Anthropic公式、AI審美パターンを回避 | npx skills add anthropics/skills/frontend-design |
| SuperDesign | IDEプラグイン、複数のデザインバリエーションを生成 | VSCode拡張機能マーケットで「SuperDesign」を検索 |
3.2 UI/UX Pro Maxのインストール（最も推奨）
UI/UX Pro Maxは現在、最も包括的なデザイン仕様Skillsです。以下がプリセットされています：
- 67種のUIスタイル：Glassmorphism、Neumorphism、Brutalism、Bento Grid...
- 96種のカラースキーム：業界別分類（SaaS、EC、ソーシャル...）
- 57種のフォントペアリング：プロのデザイナーが検証した組み合わせ
- 100+のデザインルール：間隔、角丸、シャドウの仕様
インストール手順：
# 1. CLIをグローバルインストール
npm install -g uipro-cli
# 2. 初期化（使用するAIツールを選択）
uipro init --ai claude
# または
uipro init --ai cursor
# または
uipro init --ai traeインストール後、プロンプトに1行追加するだけです：
UI/UX Pro MaxのGlassmorphismスタイルを使用して、AI執筆アシスタントのランディングページを作ってくださいAIが自動的に対応するフォント、カラー、レイアウトの仕様を適用します。
3.3 Anthropic公式frontend-designのインストール
これはAnthropic公式のフロントエンドデザインSkillで、「AI審美パターン」問題を特別に解決します：
# Claude Codeで実行
npx skills add anthropics/skills/frontend-designインストール後、AIは自動的に以下を避けます：
- ❌ Inter、Roboto、Arialフォント
- ❌ 紫のグラデーション背景
- ❌ 対称グリッドレイアウト
- ❌ 薄すぎるシャドウ
その代わり、以下を好むようになります：
- ✅ ユニークなフォント組み合わせ
- ✅ 大胆なメインカラー + シャープなアクセントカラー
- ✅ 非対称、重なるレイアウト
- ✅ 質感のある背景（ノイズ、幾何学模様）
4. 実践1：美化プロンプトでランディングページを再設計
これまでの知識を使って、普通のランディングページを美しくしてみましょう。
4.1 普通のバージョン
まず普通のプロンプトでAIが何を出すか見てみましょう：
ペット里親プラットフォームのランディングページを作ってください。含む：
- ナビバー（ロゴ、リンク、登録ボタン）
- ファーストビュー（タイトル、サブタイトル、CTAボタン、ペット画像）
- ペット紹介（3枚のペットカード）
- 私たちについて
- フッター生成されたページは...使えるけど、普通です。
4.2 美化バージョン
ここでスタイル説明を追加：
ペット里親プラットフォームのランディングページを作ってください。要件：
**美学スタイル：温かく柔らかい + 手描き感**
**フォント：**
- タイトル：Nunito（丸ゴシック）、ウェイト 700-800
- 本文：Nunito、ウェイト 400-600
**カラー：**
- メインカラー：#FFB347（ウォームオレンジ）
- セカンダリ：#FFCCB3（ライトオレンジ）
- 背景：#FFF8F0（オフホワイト）
- テキスト：#5D4037（ブラウン）
**レイアウト：**
- 丸みを帯びたカード（border-radius: 24px）
- カードをわずかに傾ける（異なる角度）
- 要素の浮遊、重なり効果
**アニメーション：**
- ページロード時に要素が両側からスライドイン
- ペットカードhover時にペットが首を振るような（rotateアニメーション）
- ボタンhover時にバウンス効果
**ディテール：**
- すべての角丸は16-24px
- 温かく柔らかいシャドウ（0 8px 24px rgba(255,179,71,0.3)）
- 背景に足跡パターン装飾
- 画像は不規則な切り抜き（clip-path）
- 手描き風のアイコン（アウトラインスタイル）生成されたページは、温かくて可愛く、ペットを里親に出したくなるようなインターフェースになります。
5. 実践2：Skillsで素早くダッシュボードを生成
Skillsはページ数が多いバックエンドシステムに特に適しています。
5.1 UI/UX Pro Maxを使用
UI/UX Pro MaxのDashboard Darkスタイルを使用して、
SaaSプロダクト管理バックエンドのダッシュボードページを作ってください。含む：
**トップ：** 4つの統計カード（ユーザー数、アクティブユーザー、収益、API呼び出し）
**中央：**
- 左：ユーザー成長の折れ線グラフ（直近7日間）
- 右：サブスクリプションプラン分布の円グラフ
**ボトム：** 最近のアクティビティリスト（時間、ユーザー、操作）AIは自動的にダークダッシュボードのデザイン仕様を適用します：
- ダークグレーの背景（#1A1A2E）
- 高コントラストカード（#16213E）
- 鮮やかなデータカラー（青、緑、オレンジ）
- グラスモーフィズム効果の浮遊カード
5.2 frontend-design Skillを使用
frontend-design skillを使用して、
個人ブログのホームページを作ってください。スタイルはユニークで個性的にAIは非主流の美学方向（例えばレトロフューチャリズムやマガジンスタイル）を選び、ユニークなフォント、カラーリング、レイアウトで実装します。
6. 実践3：独自のデザインシステムSkillを作成
固定のブランドスタイルがある場合、独自のSkillを作成し、すべてのAI生成ページをブランドに準拠させることができます。
6.1 Skillファイルの作成
プロジェクトに.claude/skills/my-brand/SKILL.mdを作成：
---
name: my-brand
description: 私のプロジェクト専用デザインシステム、すべてのUIが統一されたデザイン言語に従うことを保証
---
# 私のプロジェクトデザインシステム
## ブランドカラー
- メインカラー：#6366F1（Indigo 500）
- セカンダリ：#8B5CF6（Violet 500）
- 成功：#10B981
- 警告：#F59E0B
- エラー：#EF4444
- 背景：#F9FAFB
- カード：#FFFFFF
## フォントシステム
- タイトル：Plus Jakarta Sans
- H1: 700, 48px
- H2: 600, 36px
- H3: 600, 24px
- 本文：Inter
- Body: 400, 16px
- Small: 400, 14px
## スペーシングシステム
- 基本単位：4px
- コンポーネント内パディング：8px / 12px / 16px
- セクション間隔：24px / 32px / 48px
- ページマージン：64px
## 角丸
- ボタン：8px
- カード：12px
- 入力ボックス：8px
- モーダル：16px
## シャドウ
- 小：0 1px 3px rgba(0,0,0,0.1)
- 中：0 4px 12px rgba(0,0,0,0.1)
- 大：0 8px 24px rgba(0,0,0,0.12)
## アニメーション
- トランジション時間：150ms / 300ms
- イージング関数：cubic-bezier(0.4, 0, 0.2, 1)
- hover効果：わずかな拡大（scale-105）
## 禁止スタイル
- 紫のグラデーション背景は使用しない
- Inter以外のフォントは使用しない
- 16pxを超える角丸は使用しない
- 純黒（#000000）は使用せず、#1F2937を使用6.2 独自のSkillを使用
作成後、プロンプトでこう言うだけです：
my-brand skillを使用して、ユーザー設定ページを作ってくださいAIが自動的に定義したすべてのデザイン仕様を適用します。
7. まとめ
AIに美しいインターフェースを生成させるには2つの方法があります：
| 方法 | 利点 | 欠点 | 適用シーン | | :--- | :--- | :--- | | プロンプト説明 | 柔軟、毎回調整可能 | 繰り返し書く必要がある | 一度きりのページ、異なるスタイルの実験 | | Skillsプラグイン | 一度インストール、継続的に有効 | インストールと設定が必要 | 固定スタイル要件のあるプロジェクト |
Vibe Codingワークフローの提案：
- 探索段階：異なるスタイルプロンプトで実験し、好みの美学方向を見つける
- スタイル確定後：対応するSkillをインストール（UI/UX Pro Maxまたはfrontend-design）
- ブランドプロジェクト：独自のSkillを作成し、プロジェクト全体のデザイン言語を統一
練習
以下のいずれかのシーンを選び、このレッスンの方法でゼロから完成させてください：
- スタイルプロンプトを使って、以前作ったプロジェクトのインターフェースを再設計（好きなスタイルを1つ選ぶ）
- UI/UX Pro Maxをインストールし、そのスタイルの1つで新しいページを生成
- 独自のデザインシステムSkillを作成し、ブランドカラーとフォントを定義
付録：デザインスタイル早見表
| スタイル | キーワード | 適用シーン | 例のプロダクト |
|---|---|---|---|
| ミニマリズム | 余白、モノクロ、シンプル | 高級プロダクト、個人ポートフォリオ | Apple公式サイト |
| グラスモーフィズム | すりガラス、グラデーション、ブラー | テックプロダクト、SaaSランディング | macOS Big Sur |
| 新ブルータリズム | 太いボーダー、ハードシャドウ、純色 | トレンドブランド、アート系サイト | Brassius |
| Bento Grid | グリッド、コラージュ、カード | 情報表示、ダッシュボード | Apple プロモーションページ |
| レトロフューチャー | ネオン、グラデーション、シンセウェーブ | ゲーム系、音楽系 | STRANGER THINGS |
| 手描きスタイル | 不規則、丸み、イラスト | 教育系、子ども向けプロダクト | Duolingo |
| マガジン風 | 大きなフォント、非対称、余白 | コンテンツ型サイト、ブログ | Medium |
| ダークラグジュアリー | ダーク、ゴールド、精緻 | 高級プロダクト、ラグジュアリーブランド | 各種ハイエンドブランド |
付録：Skillsインストール早見表
# UI/UX Pro Max
npm install -g uipro-cli
uipro init --ai claude
# Anthropic frontend-design
npx skills add anthropics/skills/frontend-design
# Anthropic brand-guidelines
npx skills add anthropics/skills/brand-guidelines
# Claude Codeにインストール済みのSkillsを確認
/help付録：カラースキームおすすめ
| カラースキーム | メインカラー | アクセント | 背景 | スタイル | | :--- | :--- | :--- | :--- | | サンセット | #F97316 | #FBBF24 | #FFF7ED | 温かい、活力 | | オーシャン | #0EA5E9 | #06B6D4 | #F0F9FF | 清潔、プロフェッショナル | | フォレスト | #10B981 | #34D399 | #ECFDF5 | 自然、健康 | | ベリー | #8B5CF6 | #EC4899 | #FAF5FF | ロマンチック、クリエイティブ | | コーヒー | #78350F | #D97706 | #FFFBEB | 温かい、レトロ | | ストーン | #6B7280 | #9CA3AF | #F9FAFB | プロフェッショナル、ニュートラル |
付録：デザインスタイルプロンプト早見表
フロントエンドページをより美しくするためのプロンプト：
スタイルカテゴリ
| スタイル | キーワード（英語） | 核心的な視覚特徴 | プロンプト例 |
|---|---|---|---|
| ポップアート | Pop Art | 大胆な色の衝突、黒い輪郭線、ドットテクスチャ | Pop art style website, bold colors and comic dots, vibrant |
| ミニマリズム | Minimalism | 豊富な余白、極少の色と線、装飾なし | Minimalist web design, ample white space, geometric, serene |
| 抽象表現主義 | Abstract Expressionism | 感情的な筆致、色の飛び散り | Abstract expressionism background, dynamic paint splashes, emotional |
| レトロスタイル | Retro/Vintage | オールドスタイルのフォント、アンティークテクスチャ、レトロカラー | Retro 80s website design, neon grid and synthwave color palette |
| サイバーパンク | Cyberpunk | 高コントラストのネオン、グリッチアート効果、ダーク背景 | Cyberpunk UI, neon lights on dark background, glitch effects |
| ニューモーフィズム | Neumorphism | 柔らかなシャドウとハイライト、わずかな隆起/陥没質感 | Neumorphism design style, soft shadows, clean and modern |
| ジェネレーティブアート | Generative Art | アルゴリズム生成の流動的な視覚パターン | Generative art background, flowing algorithmic patterns, digital |
| アシッドデザイン | Acid Graphics | メタリック質感、ガラス態、ギザギザフォント | Acid graphics web layout, glass morphism, chaotic typography |
| イマーシブ3D | Immersive 3D | インタラクティブ3Dシーン、強い空間感 | Immersive 3D website, interactive product model in space |