frontend-design：Claude Code のフロントエンド出力をテンプレ感から引き離す Anthropic の Skill

これは何か

frontend-design は Anthropic の公式 skills リポジトリにあるフロントエンド設計の Skill で、Claude Code などのコーディング Agent に向けたものです。位置づけは UI フレームワークではなく「設計判断のレイヤー」です。コンポーネントライブラリを置き換えるのではなく、コードを書く前に設計判断を固めることで、AI 生成画面にありがちなテンプレ感を減らします。ソースと説明は github.com/anthropics/skills にあります。

何を縛るのか

実装前の思考フレーム。 コードを書く前に、画面の目的、対象、視覚的なトーン、技術的制約、記憶に残る要素を宣言させ、その判断を工程に明示的に書き込みます。生成中に場当たりで決めさせません。

タイポグラフィ。 Inter や Roboto といった既定書体は明確に避け、個性のある組み合わせを選ばせます。まず書体で性格を立てるわけです。

色とテーマ。 白背景に紫のグラデーションのような定番の型を外し、主色と鋭いアクセント色を組み合わせ、CSS 変数で全体を揃えます。

モーション。 散発的なマイクロインタラクションより、丁寧に構成した入場アニメーションを優先します。素の HTML は CSS、React はモーションライブラリを使えます。

空間構成。 非対称、重なり、対角線などグリッドを崩すレイアウトを推奨し、予測できる型にはめません。

背景とディテール。 グラデーションメッシュやノイズテクスチャで雰囲気を作れますが、細部は必ず全体の美学テーマに奉仕させます。

使い方

1. 自動で発動。 Claude Code や Codex でフロントエンドの作業を依頼すると、Agent が作業種別を判断し、この Skill の制約と手順を読み込みます。

2. 明示的に発動。 プロンプトに「frontend-design skill を使ってこのページを設計・実装してください」と書きます。

3. 業務コンテキストを補う。 製品の種類、想定ユーザー、ブランドの雰囲気、情報の優先順位、技術スタック、モバイル要件、アクセシビリティ要件を伝えます。「いい感じにして」だけでは設計の余地が広がりすぎます。

4. 既存の約束事を先に読む。 既存プロジェクトでは、変更前にコンポーネント、スタイル変数、設計ルールを Agent に読ませ、新しい画面が既存システムから浮かないようにします。

5. 既存コンポーネントを再利用。 コンポーネントライブラリがあれば Button や Table を再利用し、改善はスタイル層と組み合わせ方に置きます。

6. 実装後に検証。 デスクトップとモバイルのスクリーンショット、テキストの溢れ、インタラクション状態、テーマ色のコントラスト、モーションが邪魔をしていないかを確認します。

向いている場面

• ページ全体の構築： 製品サイトやキャンペーンのランディングページなど、ゼロから視覚方向を決める必要がある画面。

• コンポーネントの設計とリファクタ： React、Vue、Svelte、HTML/CSS の作業で、完成度と一貫性を上げたいとき。

• 既存画面のビジュアル改善： アーキテクチャを壊さずに新しい設計判断を持ち込む。

• デザインカンプがない試作： 高忠実度で動く画面を素早く出す。

• 管理画面や業務ツール： 見た目の派手さより、情報の走査効率、密度、状態の分かりやすさが重要な画面。

限界

• UI フレームワークやコンポーネントライブラリの代替ではなく、あくまで設計ガイドです。

• 画像生成はできません。挿絵や写真は別のツールが必要です。

• 結果はコンテキストの充実度に左右されます。製品情報が少ないほど、汎用テンプレートに戻りやすくなります。

• 出力には人の確認が必要です。とくにアクセシビリティ、コントラスト、実機での見え方。

よくある質問

普通のプロンプトとの違いは？ 普通のプロンプトは美意識を運任せにします。この Skill は目的・対象・トーン・制約を必ず答える問いに変え、避ける項目と代替案を具体的に示します。

有料ですか？ 素材では Claude Code と使う無料 Skill とされています。ライセンスは公式リポジトリで確認してください。

Vue や Tailwind でも？ 使えます。フレームワーク非依存の上位ガイドです。

デザイナーの代わり？ いいえ。手戻りを減らしますが、ブランド判断とデザインシステムは人が担います。