Anthropic公式が公開してるClaude CodeのPluginの中身を覗いてみる -Frontend Design編-

はじめに

この記事は DENSO アドベントカレンダー 2025 の13日目の記事です。

色々な人が生成AIの使いこなしに向けて色んなプラクティスを実践していますよね。
うまくいったら周りに共有したいですが、なかなか共有が難しかったりしますよね。

そんな悩みを解決する方法の1つが、Claude Codeのプラグインではないでしょうか？

Claude Codeのプラグインとは、「カスタムコマンド、エージェント、フック、スキル、MCPサーバーを通じてClaude Codeを拡張する」機能です。

もちろんこのプラグインという機能自体が非常に便利ですが、Anthropic公式が公開しているプラグインの中身がなかなか参考になりそうなので、Anthropicがどのようにプラグインを作っているかを覗いてみようというシリーズです。
まずは、Frontend Designというプラグインの中身を見ていきたいと思います。

ちなみに、Anthropic公式のプラグインはGithubで公開されていますので、気になる方は覗いてみてください。

なお、この記事の内容は執筆時点のものなので、今後プラグインの中身が変わる可能性がありますのでご了承ください。

Frontend Designプラグインとは

このプラグインのREADMEには以下のように書かれています（翻訳はChatGPT）。

Frontend Design プラグイン
汎用的でAIっぽい見た目を避け、独自性のあるプロダクション品質のフロントエンド UI を生成します。

機能概要

Claude はフロントエンド作業の際に自動的にこのスキルを使用します。以下の特徴を備えたプロダクションレベルのコードを生成します：

• 大胆な美的デザインの選択
• 個性的なタイポグラフィとカラーパレット
• インパクトのあるアニメーションやビジュアル表現
• 文脈を理解した実装

使用例

• 「音楽ストリーミングアプリ向けのダッシュボードを作って」
• 「AI セキュリティ系スタートアップのランディングページを作って」
• 「ダークモード対応の設定パネルをデザインして」

Claude は明確なデザイン方向性を選び、細部まで丁寧に作り込んだプロダクションコードを実装します。

READMEの中でFrontend Aesthetics Cookbookに詳細が書かれているとのことなので、別の機会でそちらも詳しく見てみたいと思います。

プラグインの中身を覗いてみる

では、実際にプラグインの中身を覗いてみましょう。
このプラグインの構成は非常にシンプルで、frontend-designというプラグインと同名のSkillのみとなっています。

今回は、このSkillについて深掘りしていきます。
たった42行のプロンプトでFrontend Designプラグインが実現されているのは驚きです。
実際にこのプロンプトを使用した例を @oikonさんが公開してくださっていますが、確かにこのプラグインの使用有無で生成されるフロントエンドのデザインが大きく変わっていることが分かります。

Frontend Design Skill

フロントマターYAML

まずはフロントマターYAMLから見ていきましょう（読みやすさのために表にしています）。

このフロントマターYAMLはClaude Codeを立ち上げたときに読み込まれ、Skillのメタデータとして扱われます。Claude Codeに指示した内容に応じて、適切なSkillが選択されます。

name	description	license
frontend-design	独自性があり、プロダクション品質でデザイン性の高いフロントエンドインターフェースを作成します。ユーザーが Web コンポーネント、ページ、アプリケーションの構築を求めたときにこのスキルを使用します。汎用的な "AIっぽさ" を避け、創造的で洗練されたコードを生成します。	利用規約は LICENSE.txt を参照してください

Anthropicが公開しているスキル作成のベストプラクティスに則り、「何をするか」と「いつ使うか」が明記されています。

また、明確に「AIっぽさ(AI Slop)」を避けるよう書かれている点も特徴的です。

プロンプト

次に、実際のプロンプトを見ていきましょう。

このスキルは、汎用的で “AIっぽい” 外観を避け、独自性のあるプロダクション品質のフロントエンドインターフェースを作成するためのガイドである。美的ディテールや創造的な選択に細部までこだわり、実際に動作するコードを実装する。

ユーザーは、コンポーネント、ページ、アプリケーション、または構築するインターフェースといったフロントエンド要件を提示する。目的、対象ユーザー、技術的制約などの文脈が含まれる場合がある。

デザイン思考

コードを書く前に、文脈を理解し、大胆（BOLD）な美的方向性を明確に定める：

• 目的：このインターフェースはどのような問題を解決するのか？誰が利用するのか？
• トーン：徹底的なミニマル、カオスなマキシマリズム、レトロフューチャー、オーガニック／ナチュラル、ラグジュアリー／洗練、玩具のような遊び心、雑誌風エディトリアル、ブルータリズム、アールデコ／幾何学、柔らかいパステル、工業的／ユーティリタリアンなど、極端な方向性から選ぶ。選択肢は無数にある。これらを参考にしつつ、選んだ美観に忠実にデザインする。
• 制約：技術要件（フレームワーク、性能、アクセシビリティ）。
• 差別化：何がこのデザインを「忘れられないもの」にするのか？ユーザーが記憶に残すひとつの要素は何か？

重要：明確なコンセプト方向を選び、精密に実行すること。大胆なマキシマリズムも、洗練されたミニマリズムも成立する──鍵は強度ではなく「意図性」である。

そのうえで、以下の特徴を備えた実際に動作するコード（HTML/CSS/JS、React、Vue など）を実装する：

• プロダクション品質で機能的である
• 視覚的に強い印象を与え、記憶に残る
• 明確な美的視点に基づいて統一されている
• 細部まで徹底的に作り込まれている

フロントエンド美学ガイドライン

• タイポグラフィ: 美しく、個性的で、興味深いフォントを選ぶ。Arial や Inter のような汎用フォントは避け、独自性を高めるフォントを使う。個性的なディスプレイフォントと洗練された本文フォントの組み合わせが有効。
• 色とテーマ: 一貫した美的方向性を徹底する。CSS変数で統一性を確保。主色＋鋭いアクセント色の方が、控えめで均一な配色より効果的。
• モーション: アニメーションは効果やマイクロインタラクションのために使う。HTML では CSS のみを優先。React では Motion ライブラリを活用。ページロード時の段階的登場など、インパクトのある瞬間を丁寧に演出する。スクロールトリガーやホバーのサプライズも有効。
• 空間構成: 予想外のレイアウト、非対称、重なり、斜めの流れ、グリッド破り、広い余白または密度の高い構成などを活用する。
• 背景とビジュアルディテール: 単色背景に頼らず、雰囲気と奥行きを生み出す。美観に合った質感やエフェクトを追加。例：グラデーションメッシュ、ノイズテクスチャ、幾何学パターン、透明レイヤー、ドラマチックな影、装飾ボーダー、カスタムカーソル、グレイン効果など。

決して、汎用的な AI 生成風の美観──頻繁に使われすぎているフォントファミリー（Inter、Roboto、Arial、システムフォント）、陳腐化した配色（特に白背景に紫のグラデーション）、予測可能なレイアウトやコンポーネント構造、文脈固有の個性を欠いた紋切り型のデザイン──を使用してはならない。

文脈に即して創造的に解釈し、意外性があり、その状況のために本当にデザインされたと感じられる選択を行うこと。同じデザインになるべきではない。ライトテーマとダークテーマ、フォント、美観を毎回変えること。世代をまたいで、よくある選択（たとえば Space Grotesk）のようなものに決して収束してはならない。

重要：実装の複雑さは、美的ビジョンに合わせること。マキシマリストなデザインには、手の込んだ、アニメーションやエフェクトを多用したコードが必要である。ミニマリストや洗練されたデザインには、抑制、精密さ、余白・タイポグラフィ・微細なディテールへの細やかな注意が求められる。エレガンスとは、ビジョンを適切に実行することから生まれる。

忘れないでほしい：Claude は卓越した創造的な仕事を行える。遠慮せず、既存の枠を超えて発想し、独自のビジョンに完全にコミットしたときに何が本当に作り得るのかを示すべきである。

スキル作成のベストプラクティスと比較してみる

改めてスキル作成のベストプラクティスと比較してみると、以下のような特徴があることに気がつきます。

1. 「適切な自由度」の設定
   • ベストプラクティスでは、「タスクの「壊れやすさ（fragility）」と「変動の大きさ（variability）」に応じて、指示の自由度を調整する」とあります。例えば、複数のアプローチが有効であったり、決定がコンテキストに依存したりする場合は、自由度を高く設定するためにテキストベースの指示が有効とされています。
   • このスキルは、まさに「高い自由度」がふさわしい領域（クリエイティブなUIデザイン）なので、固定スクリプトではなく「デザイン思考」と「フロントエンド美学ガイドライン」というテキストベースの指針になっています。
2. ワークフローの活用
   • ベストプラクティスでは、「複雑なタスクにはチェックリストやステップ分解されたワークフローを用意することを推奨」しています。
   • このスキルでは、デザイン思考とフロントエンド美学ガイドラインという2つのセクションに分けており、特にデザイン思考では、目的、トーン、制約、差別化というステップに分けるように指示しており、いわゆる「Chain of Thought」に似たアプローチを取っています。
3. コンパクトなプロンプト
   • コンテキストウィンドウを節約するために、スキルにはできるだけ「Claudeが既に持っていないコンテキストのみを追加してください」とベストプラクティスでは書かれています。
   • このスキルは42行と非常にコンパクトであり、HTML/CSSの基礎など「Claudeが当然知っていること」は書かず、フロントエンドの美学・作法という、モデルがデフォルトではあまり強く持っていない"味付け"に特化しています。

このスキル特有のポイント

このスキル特有のポイントも考えてみます。

1. 美学の軸を「極端に」選ばせるデザイン指向
   • 大胆（BOLD）な美的方向性を明確に定める、極端な方向性から選ぶなどの表現が使われており、平均的なデザインを避け、極端なデザインを促すように強調している点が一番の特徴です。
   • また、ただ極端なデザインにするだけでなく、鍵は強度ではなく「意図性」であると書かれている通り、明確なコンセプトに基づいたデザインを促しています。
2. 毎回違うデザインを生成するための指示
   • 同じデザインになるべきではない。ライトテーマとダークテーマ、フォント、美観を毎回変えること。といった指示があり、生成されるデザインが多様化するように促しています。
   • つまり、このスキルを使って生成されたデザインに満足できなかった場合でも、一旦すべての変更を破棄してもう一度生成し直すことで、まったく異なるデザインが得られるということです。これは、このプラグインを使用する際に理解しておくべき重要なポイントです。
3. デザインと実装の連携
   • 実装の複雑さは、美的ビジョンに合わせること。と書かれており、デザインの方向性に応じて実装の複雑さも変えるように指示しています。
   • 例えば、マキシマリストなデザインには手の込んだ、アニメーションやエフェクトを多用したコードを、ミニマリストや洗練されたデザインには抑制、精密さ、余白・タイポグラフィ・微細なディテールへの細やかな注意が払われたコードを生成するよう促しています。これは、デザインと実装が一貫したものになるようにするための工夫です。
4. アンチパターンの明示
   • 汎用的で "AIっぽい" 外観を避け、Arial や Inter のような汎用フォントは避け、汎用的な AI 生成風の美観──頻繁に使われすぎているフォントファミリー（Inter、Roboto、Arial、システムフォント）、陳腐化した配色（特に白背景に紫のグラデーション）、予測可能なレイアウトやコンポーネント構造、文脈固有の個性を欠いた紋切り型のデザイン──を使用してはならない というように、避けるべきアンチパターンを明記しています。
   • 特に、ただ「AIっぽさ(AI Slop)を避けろ」と言うだけでなく、具体的にどのようなデザインがAIっぽいのかを明記している点が特筆すべき点です。
5. AIの自己効力感を高める表現
   • 特徴的なのが最後の一文で、忘れないでほしい：Claude は卓越した創造的な仕事を行える。遠慮せず、既存の枠を超えて発想し、独自のビジョンに完全にコミットしたときに何が本当に作り得るのかを示すべきである。と書かれています。
   • あたかも人間を励ますかのような表現で、AIの自己効力感を高めるプロンプトが含まれているのは非常に興味深い点です。
   • ChatGPTを使ってこの一文のように自己効力感を高める表現をLLMに与えた際の研究結果を調べてみたところ、こちらの論文が見つかりました。このあたりの内容を意識してこの一文が盛り込まれているのかもしれません。
     • 要約すると、「励まし・煽り・批判のようなプロンプトによりほとんどのタスクで性能が向上。過剰な持ち上げによりLLMの主張が強くなることがある」です。
     • 今回のようにクリエイティブなフロントエンドデザインを生成するタスクにおいては、励ましのプロンプトが相性が良さそうです。

おわりに

今回はAnthropic公式が公開しているClaude CodeのFrontend Designプラグインの中身を覗いてみました。
非常にシンプルな構成ながら、Anthropicがスキル作成のベストプラクティスをしっかりと踏まえた上で、さらにこのスキル特有の工夫が盛り込まれており、自分でプラグインを作成する際の参考になります。

次回は、Anthropic公式が公開している別のプラグインを覗いてみたいと思います。