Claudeのdesign-critiqueでデザインレビューを受ける手順 — designプラグイン
designプラグインのdesign-critiqueスキルは、Figma URLやスクリーンショットを5つの観点で採点し、重大度つきの表で返します。導入、渡し方、出力の形、限界を扱います。
design-critiqueは、画面のデザインを見せると「使いやすさ・視覚的な階層・一貫性・アクセシビリティ」の観点で講評を返すスキルです。Anthropicが公開しているknowledge-work-pluginsリポジトリのdesignプラグインに入っています。Claude Codeでも使えます。
渡せるのはFigmaのURL、スクリーンショット、言葉での説明の3種類です。返ってくる講評は、指摘ごとに重大度と改善案が付いた表の形に決まっています。
この記事では導入の手順、渡し方のコツ、出力の読み方、スキルが指示していないことまでを順に扱います。
design-critiqueはdesignプラグインのどこにいるか
designプラグインは、デザイン業務向けの6つのスキルをまとめたものです。READMEの冒頭には、主にCoworkのために作られたが、Claude Codeでも動くと書かれています。マニフェストのバージョンは1.2.0、作者はAnthropicです。
| スキル | 担当 |
|---|---|
design-critique | 担当使いやすさ・階層・一貫性の評価 |
design-system-management | 担当トークン・コンポーネント・パターンの管理 |
ux-writing | 担当マイクロコピーの作成 |
accessibility-review | 担当WCAG 2.1 AAの監査 |
user-research | 担当リサーチの計画と統合 |
design-handoff | 担当開発者向けの引き渡し仕様 |
READMEには同じ領域のスラッシュコマンドとして /critique も載っています。スキルは、関連する話題のときにClaudeが自動で読み込む知識として位置づけられています。
design-critiqueのfrontmatterにある説明は、「review this design」「critique this mockup」「what do you think of this screen?」といった言い回しや、Figmaのリンク・スクリーンショットを共有したときに起動する、という内容です。探索段階から最終仕上げまで、どの段階でも対象になります。
隣の accessibility-review は、同じアクセシビリティでもWCAG 2.1 AAに絞った監査用です。design-critiqueの中にもアクセシビリティの項目はありますが、5観点のうちの1つにすぎません。基準への適合を詳しく見たいときは別のスキルに分ける構成です。
導入する手順
designプラグインは公式マーケットプレイスではなく、knowledge-work-pluginsのマーケットプレイスにあります。先にマーケットプレイスを登録してから入れます。READMEが示すシェルでの手順は次の2行です。
claude plugin marketplace add anthropics/knowledge-work-plugins
claude plugin install design@knowledge-work-pluginsセッションの中から入れるなら、/plugin marketplace add anthropics/knowledge-work-plugins でGitHubリポジトリを登録し、続けて /plugin install design@knowledge-work-plugins を実行します。セッション内の /plugin install はすぐには入らず、/plugin パネルがそのプラグインの詳細で開きます。スコープを選んで確定する流れです。
入れたあとは、プラグインのスキルが /プラグイン名:スキル名 の形で呼べるようになります。design-critiqueなら /design:design-critique です。プラグインのスキルは名前空間が付くため、手元の同名スキルとは衝突しません。
プラグインの導入全般はClaude Codeプラグイン完全ガイドに、スキルの仕組みはSkillsのfrontmatter解説にあります。
画面を渡す3つの方法
スキルは冒頭で、渡されたものに応じて動きを変えると書いています。
- Figma URLがあれば、Figmaから設計を取得する
- ファイルが指定されていれば、それを読む
- どちらでもなければ、設計を説明するか共有するよう依頼する
呼び出しの引数ヒントは <Figma URL, screenshot, or description> で、/design:design-critique のあとにURLやファイルのパスを続けます。
/design:design-critique ./shots/checkout-mobile.pngスキルが求める入力は3つです。デザインそのもの、文脈(何の画面で誰向けか、探索・改善・最終のどの段階か)、そして任意の焦点です。文脈と焦点は、同じ呼び出しの文面に添えます。次は書き方の一例です。
/design:design-critique ./shots/checkout-mobile.png
B2B SaaSの請求書支払いフロー。改善段階。
焦点: スマホ幅でのCTAとエラー表示だけ見てください。スキル末尾のTipsも同じ趣旨です。文脈を伝えると関連する講評になり、段階を示すと探索期と仕上げ期で講評の重みが変わり、焦点を絞ると1つの領域が深くなります。
Figma URLで渡すとき
Figma URLで渡す場合は、Figmaに接続されたMCPサーバーを使います。スキルには、デザインツールが接続されていればFigmaから直接取得し、コンポーネント・トークン・レイヤーを調べられる、とあります。さらに既存のデザインシステムと照合して一貫性を見ます。
Figmaとの接続の仕方はFigma MCPサーバーの使い方にまとめています。接続しない場合でも、スクリーンショットか説明だけで講評は受けられます。READMEの表も、スタンドアロンでは「説明またはスクリーンショット」、Figma MCPがあれば「デザインを直接取得」と分けています。
講評の5観点と出力の形
スキルが定める講評の枠組みは5つの観点です。
design-critiqueが見る5つの観点
第一印象(2秒)
最初に目を引くものが正しいか。感情的な反応と、画面の目的がすぐ伝わるか。
使いやすさ
ユーザーが目的を達成できるか。ナビゲーションが直感的か、操作要素が分かりやすいか、無駄な手順がないか。
視覚的な階層
読む順序が明確か。強調すべき要素が強調されているか。余白とタイポグラフィが階層を作っているか。
一貫性
デザインシステムに沿っているか。余白・色・書体が揃っているか。似た要素が似た動きをするか。
アクセシビリティ
色のコントラスト比、タッチターゲットの大きさ、文字の読みやすさ、画像の代替テキスト。
出力のテンプレートも固定されています。全体の印象を1〜2文で述べたあと、観点ごとの節が続きます。
| 節 | 形式 |
|---|---|
| Usability | 形式指摘・重大度・推奨を並べた表 |
| Visual Hierarchy | 形式最初に目を引く要素、読みの流れ、強調の3点 |
| Consistency | 形式要素・問題・推奨の表 |
| Accessibility | 形式コントラスト、タッチターゲット、文字の読みやすさ |
| What Works Well | 形式良い点 |
| Priority Recommendations | 形式影響の大きい順の3つ |
重大度は3段階で、重大(赤)、中程度(黄)、軽微(緑)の絵文字つきです。Usabilityの表だけが重大度の列を持ち、Consistencyの表は列が要素・問題・推奨の3つです。重大度でレビューを並べ替えたいときは、Usabilityの表が起点になります。
良い点が必須になっている
スキルの方針には「良かった点も認める」が含まれ、テンプレートにも What Works Well の節があります。残すべきものが明示されるので、「全部直す」という読み方になりにくい構造です。
そのほかの方針は4つあります。
- 具体的に書く。「レイアウトが分かりにくい」ではなく、「CTAがナビゲーションと競合している」と書く
- 理由を添える。デザインの原則やユーザーのニーズに結び付ける
- 代案を示す。問題の指摘だけで終わらせない
- 段階に合わせる。探索期と最終仕上げで講評の重みを変える
使い所と、手元の運用に落とすときの注意
画面を作る前後の役割分担
画面を作る側のプラグインにfrontend-designがあります。こちらはコードを書く前の設計計画を整えるスキルで、design-critiqueは出来上がった画面を評価する側です。作る前に方向を決め、作ったあとに講評を受ける、という分担ができます。
講評は、実装コードではなく見た目を対象にします。スクリーンショットを撮れる環境なら、実装した画面の画像をそのまま渡せます。
講評の結果を残す
講評は会話の中に出るだけで、ファイルには残りません。レビュー結果を指摘管理表に移したいなら、Claudeに「Usabilityの表を指摘管理表の列に合わせて出して」と続けます。管理表側の作り方はデザインレビューの指摘事項管理表をClaudeで作るで扱っています。
人間のレビューの置き換えではない点
スキルの中身は評価観点の枠組みとテンプレートです。計測ツールやコントラスト比を計算する手順は指定されていません。色のコントラストの合否は、画像から見た目で判断した推定になります。数値で確かめたいときは、accessibility-review を使うか、専用の計測ツールで測ってください。
落とし穴
画像1枚だけだと、文脈のない一般論になりやすい
スキルは、デザインを説明するかスクリーンショットを共有するよう求めます。その画面が誰のどんな課題のためのものか、段階はどこかが渡されなければ、講評は一般的な原則の当てはめに寄りやすくなります。文脈と焦点を1〜2行添えるのが、いちばん効く使い方です。
まとめ
design-critiqueは、画面を見せるだけで5観点の講評を重大度つきの表で返すスキルです。導入はマーケットプレイスの登録とインストールの2手順で、Figma連携は任意です。
使うときは、画像だけでなく文脈・段階・焦点の3行を添えます。コントラストなどの数値は推定にとどまるため、基準への適合が必要な場面は accessibility-review か計測ツールで確かめます。