Claude Codeを最強のデザインレビュアーにする！「Agent Skill」自作ガイド

エンジニアがUIを実装する際、つい後回しになりがちなのが「デザインの品質管理」です。「なんとなく色がバラバラ」「余白に統一感がない」……そんな悩みを、Claude Codeの新機能「Agent Skill」で解決しましょう。

今回は、デザインの4原則と配色の黄金比をAIに叩き込み、コードを自動修正させるスキルの作り方を5ステップで解説します。

ステップ1：フォルダの作成

まずはスキルを管理するための専用フォルダを作成します。ターミナルでプロジェクトのルートディレクトリに移動し、以下のコマンドを実行してください。

mkdir -p .claude/skills/design-checker

ステップ2：SKILL.mdの作成（定義の記述）

次に、スキルの「本体」となる定義ファイルを作成します。作成したフォルダ内に SKILL.md という名前でファイルを作成し、以下の内容をコピー＆ペーストして保存してください。

---

name: design-checker

description: デザインの4原則とカラー原則に基づき、UIの実装（HTML/CSS等）をレビュー・修正するスキル。

---

# Design Checker

## デザイン4原則の適用

1. 近接: 関連する項目は近づけてグループ化し、関連のない項目は離す。

2. 整列: すべての要素の端を揃え、ページ全体の一体性を維持する。

3. 反復: 色、書体、線などの要素を繰り返し使い、一貫性を強化する。

4. コントラスト: 重要な要素には強い強弱を付け、視覚的な引きを作る。

## カラー原則（配色の黄金比）

以下の比率とカラーコードを厳守してください。

- ベースカラー (70%): #0F2854 (背景・余白)

- メインカラー (25%): #1C4D8D (サイトの主役)

- アクセントカラー (5%): #4988C4 (目を引く役割)

- 参考URL: https://colorhunt.co/palette/0f28541c4d8d4988c4bde8f5

## 実行手順

1. 指定されたファイルの構造を解析する。

2. 上記の原則に照らして、改善が必要な箇所を特定する。

3. 修正案を提示し、ユーザーの承認を得てからコードを反映する。

ステップ3：スクリプトの配置（任意）

より高度な処理（例：CSSから色の使用比率を正確に計算する等）を行わせたい場合は、scripts/ フォルダにPythonスクリプトなどを配置できます。

今回は SKILL.md の指示だけでもClaudeが賢く判断してくれるため、最初は空欄のままでもOKです。

ステップ4：スキルの認識

準備ができたら、ターミナルで Claude Code を起動します。

起動時に .claude/skills/ ディレクトリが自動的にスキャンされ、今作成した design-checker スキルがClaudeの「能力」として追加されます。

ステップ5：スキルの実行

あとは、チャット欄でやりたいことを伝えるだけです。

プロンプト例

design-checkerスキルを利用して既存のデザインをレビューして

これだけで、Claudeは自律的にデザイン原則を読み込み、「メインカラーが多すぎてアクセントが死んでいますね」といったプロの視点でのフィードバックと、具体的な修正コードを提案してくれます。

まとめ：AIに「デザインの審美眼」を。

この「Agent Skill」の素晴らしい点は、一度定義してしまえば、プロジェクトの全メンバーが同じ基準でデザインチェックを受けられることです。

デザインの基礎をAIに任せて、エンジニアはロジックの実装に集中する。そんな開発体験をぜひ試してみてください！