「Claude Codeに頼んでUIを作ってもらったのに、なんか普通すぎる…」と感じたことはありませんか？
Interフォント、白背景に紫グラデーション、無難なカードレイアウト、これ、実は世界中のエンジニアが同じ悩みを抱えています。
Claude Codeは非常に優秀なコーディングエージェントですが、デフォルトのまま使うとデザインが"AIっぽい平均点"に収束してしまうという問題があります。そこで登場するのが「Skills（スキル）」です。適切なSkillsを導入するだけで、Claude Codeが生成するUIのクオリティは驚くほど変わります。
この記事では、フロントエンド開発で特に役立つSkills10選を、実際の使いどころや導入方法とともに紹介します。UIをもっとリッチにしたい方、Claude Codeをフル活用したい方は、ぜひ参考にしてみてください。
結論：Skillsを使えばClaude Codeは「センスあるエンジニア」に化ける
Claude Codeは素のままでも優秀ですが、Skillsはその能力を特定のタスクに特化させる拡張モジュールです。フロントデザイン系のSkillsを入れることで、Claude Codeは「とりあえず動くUI」ではなく「意図を持って設計されたUI」を生成するようになります。
Skillsを使うとコーディングエージェントにセッションをまたいで使えるプロジェクト固有のコンテキストを与えられます。毎回同じ説明をプロンプトに書く必要がなくなり、効率と品質が同時に上がります。
エンジニアなら読むべき本を30冊以上紹介しています。
正直、私の仕事のやり方をガラッと変えた神本やSQLのチューニングに悩んだ時にめちゃくちゃ役に立ったもあります👇
→記事を読む
そもそもClaude CodeのSkillsとは何か？
「Skills」とは、SKILL.mdというファイルを中心とした再利用可能な指示セットのことです。
Claude Codeには、スラッシュコマンドで呼び出せるバンドルSkillsが最初から用意されていますが、サードパーティや自作のSkillsを追加することも可能です。
Skillsを使う主なメリットをまとめると、次のとおりです。
| 観点 | Skillsなし | Skillsあり |
|---|---|---|
| デザインの一貫性 | プロンプト次第でバラバラ | 毎回同じ基準で出力 |
| プロンプトの長さ | 毎回長い指示が必要 | スラッシュコマンド一発 |
| 出力品質 | 平均的なAI生成UI | 意図のある設計が入ったUI |
| チームでの再利用 | 個人の工夫に依存 | バージョン管理・共有が可能 |
Skillsは、ワークフローのロジックを肥大化したプロンプトから切り出して、検査・更新・再利用できるバージョン管理されたモジュールに変換してくれます。
役に立つフロントデザインSkills 10選
1. frontend-design（Anthropic公式）
「とりあえずこれを入れろ」と言えるほどの必須Skill。
Anthropic自身が「AIスロップ」と呼ぶ、すべてのAI生成UIが同じように見えてしまう問題に対処するために作られたSkillです。コードを書く前にClaude Codeに4つの軸、目的・トーン・制約・差別化を考えさせることで、凡庸な出力を根本から防ぎます。
# インストール方法
git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/
私はこのSkillを入れる前後でClaude Codeの出力が別物になったと感じました。特に「トーンを決めてから設計させる」という発想が、人間のデザイナーの思考プロセスに近くていいなと思っています。
2. baseline-ui（UI Skills）
AIが生成したUIの「荒削り感」をなくすポリッシュ専用Skill。
/baseline-uiは「エージェントUIスロップ」を除去し、スペーシング・タイポグラフィ・インタラクション状態を改善するためのSkillです。
frontend-designでデザインを生成したあと、このSkillをかけるとプロダクション品質に一歩近づきます。「デザイン → 磨き」の2ステップが定番の使い方です。
npx ui-skills add baseline-ui
3. fixing-accessibility（UI Skills）
見た目だけでなく、キーボード操作・スクリーンリーダー対応まで面倒を見てくれる。
キーボードナビゲーション、ラベル、フォーカス管理、セマンティクスを修正するSkillです。 Webアクセシビリティ対応は後回しになりがちですが、このSkillを使えばClaude Codeに任せてしまえます。
npx ui-skills add fixing-accessibility
4. web-design-guidelines（Vercel Labs）
コードを書いた後に「設計的に正しいか」をチェックするQAゲートとして使う。
このSkillはWebインターフェースコードを100以上のルールに照らし合わせてアクセシビリティ・パフォーマンス・UXの観点から検証します。常に最新のガイドラインを参照するため、進化する標準への準拠も担保されます。
frontend-designでクリエイティブな方向性を出し、web-design-guidelinesでクオリティを担保する——この組み合わせが特に効果的です。
5. fixing-motion-performance（UI Skills）
アニメーションを追加したのにパフォーマンスが落ちた、を防ぐSkill。
/fixing-motion-performanceはパフォーマンスファーストなモーションを適用し、prefers-reduced-motionへの準拠も含めて修正してくれます。
アニメーションはUXを豊かにしますが、やり方が悪いとjankの原因になります。このSkillはその調整を自動でやってくれます。
6. composition-patterns（Vercel Labs）
Reactコンポーネントの設計パターンを強制するSkill。
15個のboolean propsを持つReactコンポーネントの問題を解決するSkillです。コンパウンドコンポーネント、コンテキストプロバイダー、明示的なバリアント、適切な状態管理アーキテクチャなど、スケールするコンポジションパターンをClaudeに教えます。
デザインシステムを運用しているチームには特に刺さるSkillだと思います。
7. ux-strategist（コミュニティ）
UIを「見た目のいいもの」から「ユーザーのニーズに根ざしたもの」に引き上げるSkill。
このSkillはClaude Codeをいわば「UXストラテジスト」に変えてくれます。ユーザー行動・デザイン原則・実際のプロダクトニーズに基づいたUI設計をサポートし、表面的なデザインから実際のユーザーニーズに根ざした設計へと引き上げてくれます。バージョン2.0ではデザインシステムジェネレーターが追加されました。
8. react-best-practices（Vercel Labs）
パフォーマンスと保守性の高いReactコードを出力させるSkill。
このSkillはClaudeが確立されたパターンに従った、パフォーマンスの高いコードを生成するのを助けます。 UIコンポーネントが増えてきたプロジェクトで、品質を落とさずにスピードを維持したい場面に向いています。
9. design-requirements-grill（カスタム）
コードを書く前に「本当に作るべきものを明確にする」Skill。
このSkillはLLMを「尋問者」に変えます。1行もコードを書く前に要件を徹底的に問い詰め、何を作るのか・なぜ作るのか・ユーザーは誰かを明確にします。曖昧なまま作り始めて後で大幅に作り直す——そのパターンを防いでくれます。
「とりあえず作ってみて」でClaudeに頼む前に、一度このSkillを挟む習慣をつけると設計の質が格段に上がります。
10. design-review（カスタム + Playwright MCP連携）
完成したUIを自動でスクリーンショット撮影してデザインレビューするSkill。
フロントエンドが生成された後、このSkillがアウトプットを分析します。Playwright MCPサーバーと組み合わせるとClaude Codeがヘッドレスブラウザを起動し、アプリケーション内を自律的にナビゲートして全ページのスクリーンショットを取得し、デザインレビューを自動で実行できます。
手動レビューのコストを大幅に削減できる、かなり未来感のある使い方です。
10 Skills の早見表
| # | Skill名 | 主な役割 | 使うタイミング |
|---|---|---|---|
| 1 | frontend-design |
美的方向性の設定 | UI生成の最初 |
| 2 | baseline-ui |
スペーシング・タイポ調整 | 生成後のポリッシュ |
| 3 | fixing-accessibility |
a11y修正 | レビュー前 |
| 4 | web-design-guidelines |
設計原則チェック | QAゲートとして |
| 5 | fixing-motion-performance |
アニメーション最適化 | アニメ追加後 |
| 6 | composition-patterns |
Reactコンポーネント設計 | コンポーネント設計時 |
| 7 | ux-strategist |
ユーザー視点の設計 | 要件定義段階 |
| 8 | react-best-practices |
Reactパフォーマンス | コードレビュー前 |
| 9 | design-requirements-grill |
要件の明確化 | 開発着手前 |
| 10 | design-review |
自動デザインレビュー | 完成後の検証 |
おすすめの使い方：Skills をチェーンさせる
Skillsは単独で使うより、組み合わせて使うと真価を発揮します。
私のワークフローを最も変えた組み合わせは、「フロントエンドデザインSkillでUIを生成し、Reactベストプラクティスでパフォーマンス意識を高め、ドキュメントSkillsでクライアントへの成果物を作る」というものです。これらは競合せず、積み重なっていきます。
実際の開発フローに当てはめると、こんな流れになります。
/design-requirements-grill ← まず要件を明確に
↓
/ux-strategist ← ユーザー視点を入れる
↓
/frontend-design ← デザイン方向性を決めてUI生成
↓
/baseline-ui ← スペーシング・タイポを整える
↓
/fixing-accessibility ← a11yを修正
↓
/fixing-motion-performance ← アニメーションを最適化
↓
/design-review ← 最終チェック
すべてを毎回やる必要はありません。プロジェクトの性質に応じてステップを省略しながら使うのが現実的です。
まとめ
10のSkillsをまとめると、「生成 → 磨き → 検証」という3つのフェーズに整理できます。
Skillsを入れることで、Claude Codeは「デフォルト出力のAIエージェント」から「自分のプロジェクトを理解した設計パートナー」に変わります。私はこの違いを一度体感してしまうと、もう素のClaude Codeだけには戻れないと感じました。
まずはfrontend-design1つから試してみてください。最初の一歩が一番効果を実感しやすいはずです。
エンジニアなら読むべき本を30冊以上紹介しています。
正直、私の仕事のやり方をガラッと変えた神本やSQLのチューニングに悩んだ時にめちゃくちゃ役に立ったもあります👇
→記事を読む