Claude Codeで作る
フロントエンド・UIデザイン
Claude Code（Anthropic）でフロントエンドやUIを作る人が増え、「フロントエンド特化」の設定やスキルを紹介する記事もよく見かけるようになりました。ただ、道具は性格がそれぞれ違うため、まとめて入れるより役割で分けて組み合わせるのがコツです。
Claude Codeでフロントエンドを作るときの道具は、大きく2つです。Claude Codeが書く画面の質を底上げする公式プラグインfrontend-designと、デザインの基準を固定するdesign.mdやUI/UXスキル。本記事ではこの2つの役割と使い分けを、公式ドキュメントに基づいて整理します。スキル全般の探し方・選び方はClaude Code・Codexのおすすめスキルで扱っているので、本記事はフロントエンドに絞って深掘りします。なお、ラフから本格的なビジュアルを作り込むAnthropicのデザイン機能Claude Designとの連携にも最後に触れますが、Claude Design自体の使い方・料金などはClaude Designとは｜できること・使い方・料金・始め方とClaude Code連携にまとめています。
まずClaude Codeにfrontend-designプラグインを入れて画面の質を底上げし、ブランドや配色など守るべき基準はdesign.mdやデザインシステムで型として与えます。この2つを押さえれば、日々の実装の見た目が安定します。本格的なビジュアル制作が必要な場面では、別ツールのClaude Designで設計してClaude Codeへ渡せます（詳細は別記事）。
01.まず結論：質の底上げと型づくりで道具を分ける
フロントエンド向けの道具は数が多く、何を入れるか迷いがちです。けれど役割で見ると、Claude Code側でやることは次の2つに整理できます。
- 出力の質を底上げする（frontend-design）
- 守るべき基準（型）を与える（design.md・UI/UXスキル）
この2つに道具を当てはめれば、過不足なく組み立てられます。
- 1質を底上げする（frontend-design）
公式プラグインを入れ、Claude Codeが書く画面のデザイン判断・タイポグラフィ・余白の質を引き上げる。
- 2型を与える（design.md・デザインシステム）
配色・フォント・コンポーネントなど守るべき基準を定義ファイルで固定し、出力のブレを抑える。
02.Claude Codeでフロントエンドを作るときの全体像
まず、登場する道具の関係を押さえます。コードを書く主役はあくまでClaude Codeで、frontend-designとdesign.mdはその「内側」で出力の質と基準を整えるもの、という位置づけです。どちらもターミナルの中で完結します。
図：Claude Code側のフロントエンド制作での道具の役割分担
frontend-designとdesign.mdは、いずれもClaude Codeの内側で実装の質と基準を整える。
① 質を底上げ
frontend-design
Claude Codeが書く画面のデザイン判断を引き上げる公式プラグイン（スキル）。
② 型を与える
design.md・UI/UXスキル
配色・フォント・コンポーネントなど守るべき基準を定義し、ブレを抑える。
スキルそのものの仕組み（SKILL.md・必要なときだけ読み込む設計）は、専門知識をフォルダで配るAgent Skillsの作り方で整理しています。あわせてご覧ください。
03.frontend-design（公式プラグイン）｜できること・入れ方・使い方
フロントエンド特化の話題の中心にあるのが、Anthropic公式のfrontend-designです。これは、Claude Codeがフロントエンドの作業をしているときに自動で発火し、太字のデザイン判断・タイポグラフィ・アニメーション・視覚的なディテールについての指針を与えるものです。指示なしでも「AIっぽい無難な見た目」に流れにくくなり、出力の第一印象が変わります。
配布形態は2つあります。Anthropic公式のスキル集（anthropics/skills）に単体スキルとして収録されているほか、公式プラグインとしても配布されています（anthropics/claude-code の plugins/frontend-design）。プラグインはスキルを含む配布単位で、Claude Codeのプラグイン管理（/plugin）から公式マーケットプレイス経由で導入できます。入れ方の一般的な手順は公式ドキュメント（Discover and install plugins）にまとまっています。
frontend-designは入れるだけで発火するため、特別な呼び出しは要りません。ただし与えるのは一般的なデザインの良し悪しの指針なので、自社のブランドや配色・コンポーネントといった固有の基準は、次章のdesign.mdやデザインシステムで別途与えるのが効果的です。「質の底上げはfrontend-design、固有の型はdesign.md」と分担させると、汎用の質と自社らしさの両方が出ます。
04.デザインの型を与える｜design.mdとUI/UXスキル
frontend-designが「一般的な質」を上げるのに対し、守るべき固有の基準（型）を与えるのが次の道具です。「いい感じにして」が毎回ブレる属人化を、定義ファイルやスキルで揃えます。
| 道具 | 役割 | 配布元 |
|---|---|---|
| design.md | 色・タイポグラフィ・間隔などのデザイントークンと「なぜその値か」をMarkdownで定義する形式。デザインの基準をエージェントに恒久的に理解させる | google-labs-code/design.md |
| ui-ux-pro-max-skill | 配色・フォント・UXルールでUI/UXを底上げする定番スキル | nextlevelbuilder/ui-ux-pro-max-skill |
| taste-skill | AIっぽさを排し、動き・余白・密度などの美的センスを与えるデザインスキル | Leonxlnx/taste-skill |
design.mdは「やり方」を配るスキルとは別物で、SKILL.mdやAGENTS.mdと同じ「エージェント向けの形式」ファミリーに属します。スキルが作業のやり方を配るのに対し、design.mdは守るべき見た目の定義を配る、という分担です。frontend-designで質を底上げしつつ、design.mdで自社の基準を固定し、必要に応じてUI/UXスキルを重ねる、という組み方が無理がありません。これらを含むスキルの探し方・安全な入れ方はClaude Code・Codexのおすすめスキルで詳しく整理しています。
05.使い分け｜frontend-design・design.md・スキル・外部ツール
最後に、似た場面で迷いやすい道具の使い分けを表にまとめます。どれか1つを選ぶより、目的に応じて組み合わせるのが基本です。表には、本格的なビジュアル制作を担うClaude Designも参考として並べます（Claude Design自体の使い方・料金はClaude Designとは｜できること・使い方・料金・始め方とClaude Code連携を参照）。
| 道具 | 向いている場面 | 立ち位置 |
|---|---|---|
| frontend-design | Claude Codeが書く画面の見た目を、指示なしでも底上げしたい | 実装の質を上げるプラグイン |
| design.md / UI/UXスキル | 配色・コンポーネントなど自社固有の基準を毎回守らせたい | 型（基準）を与える定義・スキル |
| Claude Design | ラフから本格的なビジュアル・プロトタイプを対話で設計し、実装へ渡したい | ブラウザ上のビジュアル制作 |
| 外部ツール（v0 など） | 別系統の生成UIを試したい・既存ワークフローに組み込みたい | Claude外の選択肢 |
実務では、Claude Codeにfrontend-designとdesign.mdを入れて日々の実装の質を担保しつつ、新規画面やLPなど見た目を作り込みたい場面でClaude Designを使って設計し、ハンドオフして実装する、という流れが収まりがよいはずです。
06.よくある質問（FAQ）
frontend-designはスキルですか、プラグインですか。どう入れますか？
frontend-designは、Anthropic公式のスキル集（anthropics/skills）に単体スキルとして収録されており、公式プラグイン（anthropics/claude-code の plugins/frontend-design）としても配布されています。Claude Codeのプラグイン管理（/plugin）から公式マーケットプレイス経由で導入でき、入れたあとはフロントエンドの作業をしているときに自動で発火します。中身は、太字のデザイン判断・タイポグラフィ・アニメーション・視覚的なディテールについての指針で、AIっぽい無難なUIになりがちな出力を引き上げる狙いです。
frontend-designとClaude Design、Claude Codeはどう使い分けますか？
コードを書く主役はClaude Codeです。frontend-designは、そのClaude Codeが書くフロントエンドの見た目の質を底上げするプラグイン（スキル）で、ターミナルの中で完結します。一方Claude Designは、ブラウザ上で対話しながらデザインやプロトタイプ・スライドを作るビジュアル制作ツールで、デザインが固まったらハンドオフのまとまりや/designコマンドでClaude Codeに引き渡して実装に移ります。つまり「実装＝Claude Code＋frontend-design」「ビジュアル設計＝Claude Design」で、両者は往復して使うのが基本です。
07.フロントエンド制作を、自社の開発に落とし込む
フロントエンドは、frontend-designで質を底上げし、design.mdやデザインシステムで自社の型を与える。この役割分担を持っておけば、増え続ける「フロントエンド特化」の道具に振り回されずに、画面づくりを着実に底上げできます。本格的なビジュアル制作が必要なときは、Claude Designで設計してClaude Codeへ渡す流れも組み合わせられます。
とはいえ、どの基準をdesign.mdに落とし、どこまでをClaude Designに任せ、チームでどう共有するかは、プロダクトの設計や体制によって変わります。弊社では、AIをフル活用した開発・運用の体制づくりを、道具の選定からデザインシステムの整備、安全に運用するための取り決めまで伴走して支援しています。Claude Codeでのフロントエンド制作を自社にどう取り入れるかでお悩みの場合は、お気軽にお問い合わせください。
コーディングエージェントの導入・運用設計を伴走します
Claude Codeでのフロントエンド・UI制作の型づくりから、デザインシステムの整備、安全に運用するための取り決め、チームへの定着までを実務で伴走しています。お気軽にお問い合わせください。
