Claude Coworkの公式プラグインは現在24種類。今回はDesign(UX/UIデザイン)プラグインを取り上げます。まず重要な区別から始めます。このプラグインは2026年4月リリースの「Claude Design(Anthropic Labs)」とは別物です。
| Design プラグイン(本記事) | Claude Design(Anthropic Labs) | |
|---|---|---|
| 役割 | UX/UIの「プロセス業務」を自動化 | テキストからデザイン成果物を「生成」 |
| モデル | Claude Sonnet | Claude Opus 4.7 |
| リリース | 2026年2月24日 | 2026年4月17日 |
| 主な用途 | 監査・フィードバック・ドキュメント・リサーチ | プロトタイプ・デザインシステム・デッキ生成 |
Designプラグインは、デザイナーが日常的に行う「地味だが時間がかかる60%の作業」—アクセシビリティ監査・デザインレビュー・ハンドオフ仕様書・デザインシステム文書化・ユーザーリサーチ合成・UXコピー—を自動化します。GitHubではオープンソース公開されており、スキル7種・コネクタ9種という構成です。
① スキル(Skill)—デザインの「プロセス業務」を7種類のファイルで定義
Designプラグインのスキルは、UX/UIデザイナーが手を動かすよりも時間を取られがちな評価・文書化・リサーチ・コピー業務をカバーしています。
- アクセシビリティ監査(accessibility-review):WCAG 2.1 AA基準に沿ったアクセシビリティ監査の手順を定義。カラーコントラスト比・キーボードナビゲーション・タッチターゲットサイズ・スクリーンリーダー対応の各観点でデザインまたはページを評価し、問題点を重大度別に整理した監査レポートを生成。「この画面は a11y 的に大丈夫?」に即答できる。
- デザインクリティーク(design-critique):ユーザビリティ・視覚的ヒエラルキー・一貫性の観点でデザインへの構造化フィードバックを提供するルールを定義。探索段階から最終仕上げまでのあらゆるステージで、Figmaリンクまたはスクリーンショットを渡すだけで「良い点・改善が必要な点・優先度付きの推奨アクション」をまとめたレビューコメントを生成。
- 開発者ハンドオフ(design-handoff):デザインが実装フェーズに移る際に必要な仕様書を生成するルールを定義。レイアウト・デザイントークン・コンポーネントのProps・インタラクション状態・レスポンシブブレークポイント・エッジケース・アニメーションの詳細を網羅したスペックシートを自動生成。エンジニアが「これを見れば実装できる」水準のドキュメントを数分で作成。
- デザインシステム管理(design-system):デザインシステムの監査・文書化・拡張の手順を定義。コンポーネント間の命名の不一致やハードコードされた値の検出・コンポーネントのバリアント/状態/アクセシビリティ注釈のドキュメント作成・既存システムに沿った新パターンの設計に対応。「うちのデザインシステムに一貫性があるか確認して」に即答。
- ユーザーリサーチ計画・実施(user-research):ユーザーリサーチの計画・実施・合成の全フェーズをサポートするルールを定義。リサーチプラン・インタビューガイド・ユーザビリティテストスクリプト・アンケート設計・リサーチ質問の作成に対応。「〇〇機能のユーザーインタビューを計画して」という一言で構造化されたリサーチプランを生成。
- リサーチ合成(research-synthesis):インタビュートランスクリプト・調査結果・ユーザビリティテストメモ・サポートチケット・NPS回答をテーマ・インサイト・推奨アクションに合成するルールを定義。「この20件のインタビューメモから共通パターンを抽出して」という問いに対して、ユーザーセグメント・優先化されたインサイト・プロダクトへの推奨事項をまとめたリサーチレポートを生成。
- UXコピー(ux-copy):マイクロコピー・エラーメッセージ・空の状態・CTA・オンボーディングテキストの執筆とレビューのルールを定義。「このボタンに何と書くべきか?」「このエラーメッセージを改善して」「このオンボーディング画面のコピーをレビューして」という問いに、ユーザビリティとブランドボイスを考慮した具体的なコピー案を複数提示。
② コネクタ(Connector / MCP統合)—デザインとプロダクト開発ツールを繋ぐ9種
Designプラグインのコネクタ数は9種です。Figmaを中心に、プロジェクト管理・顧客フィードバック・コミュニケーションツールまで、デザインとエンジニアリングの境界をまたいだツールスタックを網羅しています。
| カテゴリ | コネクタ | ClaudeができるようになることDesign用途 |
|---|---|---|
| デザインツール | Figma | デザインファイルの参照・コンポーネント情報の取得・デザインシステムの監査・ハンドオフ仕様書へのリンク埋め込み |
| プロジェクト管理 | Linear | デザインタスクのIssue作成・UXバグのチケット化・スプリントへのデザイン作業の組み込み |
| プロジェクト管理 | Asana | デザインレビュータスクの管理・ハンドオフ期日の追跡・ステークホルダーへのデザイン進捗報告 |
| プロジェクト管理 | Atlassian(Jira/Confluence) | デザイン仕様書のConfluenceへの公開・バグのJiraチケット化・スプリントにおけるデザイン作業の可視化 |
| 顧客フィードバック | Intercom | ユーザーからの問い合わせ・フィードバックをリサーチ合成のインプットとして取得。「ユーザーがこの機能についてどう言っているか」を即座に集約 |
| コミュニケーション | Slack | デザインレビューの通知・ハンドオフ完了の告知・アクセシビリティ問題の共有 |
| ドキュメント | Notion | デザインシステムのドキュメント作成・ユーザーリサーチレポートの保存・UXコピーガイドラインの管理 |
| スケジュール | Google Calendar | ユーザーインタビューのスケジュール管理・デザインレビュー会議の調整 |
| メール | Gmail | インタビュー対象者へのリクルーティングメール送付・リサーチ参加者への案内送信 |
③ スラッシュコマンド(Slash Command)—デザイン業務を「一言」で起動する7つのショートカット
スラッシュコマンドは /design:コマンド名 と入力するだけで定義済みのワークフローを即時起動できます。
/design:accessibility-review:Figmaファイルのリンクまたはスクリーンショットを渡すと、WCAG 2.1 AA基準でのアクセシビリティ監査を実行。カラーコントラスト不足・フォーカス表示の欠落・タッチターゲットの小ささ・代替テキストの欠如などを問題の重大度別(Critical/Major/Minor)に一覧化し、具体的な修正方法と参照するWCAG達成基準番号を付記。ハンドオフ前のチェックリストとして即座に活用できる。/design:design-critique:デザインのスクリーンショットまたはFigmaリンクを渡すと、ユーザビリティ(操作の明確さ・フィードバックの適切さ)・視覚ヒエラルキー(情報の優先度・視線誘導)・一貫性(スタイルの統一・コンポーネントの整合性)の3観点で構造化されたクリティークを生成。「良い点3つ・改善点3つ・優先アクション」の形式で出力し、Figmaのコメントとして追加するオプション付き。/design:design-handoff:ハンドオフ準備が整ったFigmaファイルを渡すと、エンジニアが実装に必要な全情報を網羅したスペックシートを生成。レイアウト(グリッド・余白・サイズ)・デザイントークン(カラー・タイポグラフィ・影)・コンポーネントのProps・インタラクション状態(hover/focus/disabled/error)・レスポンシブブレークポイント・エッジケースをConfluenceまたはNotionに自動保存。/design:design-system:デザインシステムのコンポーネント名・バリアント・デザイントークンを分析し、命名の不一致・ハードコードされた値の使用・ドキュメント不足のコンポーネントを検出してレポートを生成。または「新しいカードコンポーネントのドキュメントを書いて」という指示で、バリアント・状態・使用ガイドライン・アクセシビリティ注釈を含む標準化されたドキュメントを作成。/design:user-research:「〇〇機能のユーザビリティテストを計画して」と入力すると、調査目的・対象ユーザー像・セッション構成・インタビューガイド・観察ポイントを含む完全なリサーチプランを生成。Google Calendarで参加者スケジュールを調整し、GmailでリクルーティングメールをIntercomのユーザーリストに送付するオプション付き。/design:research-synthesis:インタビューメモ・録音トランスクリプト・サポートチケット・NPS回答などをインプットとして渡すと、Intercomから関連フィードバックを自動収集して、共通テーマ・ユーザーセグメント別の痛点・優先度付きのプロダクト推奨事項をまとめたリサーチレポートをNotionに生成。/design:ux-copy:「このエラーメッセージを改善して」「オンボーディング画面のコピーを書いて」という指示に対して、UXライティングのベストプラクティス(明確・簡潔・行動指向・ブランドボイスに沿っている)を適用したコピーを複数バリアントで提案。A/Bテスト用の代替案も生成し、採用したコピーをNotionのUXコピーガイドラインに自動追記。
④ サブエージェント(Sub-agent)—デザインプロセスを分担する「専門Claudeチーム」
サブエージェントは特定のデザイン業務フェーズに特化した権限・プロンプト・ツールアクセスを持つ独立したClaudeのインスタンスです。Designプラグインでは、リサーチ・評価・文書化・コミュニケーションを並行処理できるよう以下のサブエージェントが用意されています。
- デザインレビュアーエージェント:Figmaへの読み取り権限を持ち、アクセシビリティ監査とデザインクリティークに特化。デザイナーが制作中のほかのコンポーネントを作っている間、並行して前のバージョンのa11yチェックとレビューを進め、Figmaにコメントとして追加します。リリースサイクルのボトルネックになりがちなレビュー待ちを解消。
- ハンドオフドキュメンターエージェント:Figma・Notion・Confluenceへのアクセス権を持ち、開発者ハンドオフ仕様書とデザインシステムドキュメントの作成に特化。デザイナーが新しい画面の設計を進めている間、完成した画面のスペックシートをバックグラウンドで自動生成してConfluenceに公開します。
- リサーチコーディネーターエージェント:Intercom・Google Calendar・Gmailへのアクセス権を持ち、ユーザーリサーチの準備と合成に特化。Intercomから対象ユーザーを抽出してリクルーティングメールを送付し、インタビュースケジュールをCalendarで調整し、収集したデータをNotionにリサーチレポートとして合成するまでを自律的に処理します。
- UXライターエージェント:Notion・Slack・Figmaへのアクセス権を持ち、UXコピーの作成とガイドライン管理に特化。新機能の画面が追加されるたびに、Figmaから画面コンテキストを取得してマイクロコピー・エラーメッセージ・空の状態のコピーを自動生成し、デザイナーとコンテンツチームにSlackでレビュー依頼を送ります。
4要素が連携する全体像—新機能のデザインレビューからハンドオフまで
以下は新機能のデザインが完成してから開発チームに渡すまでの4要素の連携フローです。
- デザイナーが スラッシュコマンド
/design:accessibility-reviewにFigmaファイルのリンクを入力 - サブエージェント(デザインレビュアー) が コネクタ(Figma) からデザインを取得してWCAG 2.1 AA監査を実行、問題点をFigmaコメントに追加
- 修正完了後、スラッシュコマンド
/design:ux-copyで各画面のマイクロコピーをレビュー・改善 - サブエージェント(UXライター) が確定コピーを コネクタ(Notion) のUXコピーガイドラインに自動追記
- スラッシュコマンド
/design:design-handoffでエンジニア向け仕様書を生成 - サブエージェント(ハンドオフドキュメンター) が コネクタ(Confluence) に仕様書を公開し、コネクタ(Linear) に実装チケットを作成して コネクタ(Slack) でエンジニアに通知
レビュー→a11y修正→コピー確定→ハンドオフというデザインの最終フェーズが、コマンド数回で完結します。
Claude Design(Anthropic Labs)との組み合わせ
Designプラグインと Claude Design(Anthropic Labs)は補完関係にあります。
- Claude Designで初稿プロトタイプを生成(
/design:prototype) - Designプラグインでアクセシビリティを監査(
/design:accessibility-review) - DesignプラグインでUXコピーを洗練(
/design:ux-copy) - Designプラグインでハンドオフ仕様書を作成(
/design:design-handoff) - Claude Codeで本番実装へ移行
まとめ:Designプラグインの構成要素一覧
| 要素 | 数 | 主な内容 |
|---|---|---|
| スキル | 7種 | アクセシビリティ監査(WCAG 2.1 AA)/ デザインクリティーク / 開発者ハンドオフ仕様書 / デザインシステム管理 / ユーザーリサーチ計画 / リサーチ合成 / UXコピー |
| コネクタ | 9種 | Figma / Linear / Asana / Atlassian / Intercom / Slack / Notion / Google Calendar / Gmail |
| スラッシュコマンド | 7種 | /design:accessibility-review /design:design-critique /design:design-handoff /design:design-system /design:ux-copy など |
| サブエージェント | 4種 | デザインレビュアー / ハンドオフドキュメンター / リサーチコーディネーター / UXライター |
DesignプラグインのソースコードはGitHub(anthropics/knowledge-work-plugins)でオープンソース公開されています。自社のデザインシステムのコンポーネント名・ブランドボイスガイドライン・アクセシビリティ基準をスキルにカスタマイズすることで、より精度の高い監査・レビューが実現します。インストールはClaudeデスクトップアプリのCoworkタブ → Plugins から行えます。


コメント