Claude Coworkの公式プラグインは現在24種類。今回はClaude Designを取り上げます。2026年4月17日にAnthropicの実験部門「Anthropic Labs」からリリースされたこのプラグインは、他の23種と根本的に異なる性格を持っています。Sales・Legal・HRが既存の職種業務を自動化するのに対し、Claude Designはデザインツール市場そのものに参入する製品です。ローンチ直前にFigmaの取締役を退任したAnthropicのCPO・Mike Krieger氏の動きも重なり、リリース当日にFigmaの株価が5〜7%下落したことで大きな注目を集めました。
Claude Designは他のナレッジワーク系プラグインが使うClaude Sonnetではなく、Claude Opus 4.7（ビジョン対応の新モデル）を搭載しており、コードベース・Figmaエクスポート・スクリーンショットなどの画像インプットを理解した上でデザインを生成できます。
Claude Designとは何か——「デザインの初稿」を自動化するプラグイン
Claude Designは、以下のいずれかのインプットから編集可能なデザイン成果物を生成するプラグインです。
- 自然言語プロンプト（「B2Bデータ製品の料金ページ、青緑のパレット、エンタープライズらしい雰囲気で」）
- 既存のコードベース（コンポーネントライブラリ・型システム・ブランドを自動推論）
- FigmaエクスポートファイルやPDF・スクリーンショット（ビジュアルリファレンス）
- ミーティングの文字起こしや音声ブリーフ（Productivityプラグインと連携）
返ってくるのは静止画像ではなく編集可能なアーティファクトです。Coworkアプリ内のインキャンバスエディターで要素へのコメント・手書き指示・スライダーによるフォントや色の微調整が可能で、各フェーズで承認を求める設計のため、許可しない限りファイルやリポジトリには何も書き込まれません。
① スキル（Skill）—デザイン4カテゴリをカバーする生成ルールセット
Claude Designのスキルは、Anthropic Labsが独自に定義したデザイン生成・編集・ハンドオフの専門知識をカプセル化したものです。他プラグインのMarkdownスキルと異なり、Claude Opus 4.7のビジョン機能を活用して視覚的なインプットも処理できる点が特徴です。
- プロトタイプ生成スキル（prototype）：自然言語のブリーフ・コードベース・Figmaエクスポートからインタラクティブな複数ページのウェブサイトプロトタイプを生成するルールを定義。レスポンシブレイアウト・コンポーネント階層・インタラクションフローの設計方針を適用。生成されたプロトタイプはブラウザで直接動作する自己完結型HTMLとして出力。
- デザインシステム生成スキル（design-system）：プロンプトまたは既存のブランドアセットから、カラートークン・タイポグラフィスケール・スペーシングシステム・コンポーネントライブラリを生成するルールを定義。「ブランドの雰囲気」という曖昧な入力からGoogleのMaterial Design・Appleのヒューマンインターフェースガイドラインに相当する体系的なデザインシステムを数分で構築。
- スライドデッキ生成スキル（slide-deck）：ピッチデッキ・社内プレゼンテーション・提案書を生成するルールを定義。ブリーフのナラティブ構造・スライドごとのコンテンツ密度・視覚的なヒエラルキーの設計方針を適用。スピーカーノートをブリーフから自動生成し、PPTX・PDFとして出力可能。
- ワンペーガー生成スキル（one-pager）：マーケティング・セールス用のシングルページ資料を生成するルールを定義。ヒーローセクション・バリュープロポジション・ソーシャルプルーフ・CTAの配置ロジックとブランドボイスの適用方法を定義。PDFまたはWordPressへのワンクリック公開に対応。
- インキャンバス編集スキル：生成後の編集インターフェース上でユーザーのフィードバック（コメント・手書き指示・スライダー操作）を受け取り、指定箇所だけを再生成するルールを定義。「このカードを大きくして」「このアイコンを削除して」という指示で全体を再生成せず対象コンポーネントだけを更新する差分編集に対応。
② コネクタ（Connector / MCP統合）—デザインからコード・公開まで繋ぐ5ツール
Claude Designのコネクタは、デザイン生成後の「最終仕上げ→エクスポート→公開/実装」フローを担います。
| コネクタ | 役割 | 具体的な使い方 |
|---|---|---|
| Canva | 最終仕上げ | Claude Designで生成したプロトタイプまたはデッキをCanvaワークスペースにワンクリックでエクスポート。デザイナーやマーケターがCanvaで細部を仕上げる |
| WordPress | 直接公開 | ワンペーガーや製品ページのHTMLをWordPressに直接パブリッシュ。マーケターがデベロッパーを介さずにランディングページを公開できる |
| Claude Code | 本番実装 | 生成したプロトタイプをClaude Codeセッションに送り、既存コンポーネントライブラリに沿ったReactコンポーネントとして本番実装（リサーチプレビュー） |
| Figma（ロードマップ） | プロフェッショナル仕上げ | デザインシステムとプロトタイプをFigmaファイルとしてエクスポートしてプロのデザインフローに接続。現時点では未公開、公式ロードマップ掲載済み |
| Marketing プラグイン連携 | 文脈取り込み | Marketingプラグインのブランドボイス設定とキャンペーン文脈を自動的にClaude Designに受け渡し、ブランド準拠のデザインを初回から生成 |
③ スラッシュコマンド（Slash Command）—4つのデザイン成果物を「一言」で生成
Claude Designは4つのスラッシュコマンドをCoworkのチャット入力欄に追加します。
/design:prototype：ブリーフまたはコードベースからインタラクティブなマルチページウェブサイトのプロトタイプを生成。「B2Bデータ製品のサイト、ヒーロー・料金・FAQ・CTAのセクション構成で」という指示から、ブラウザで動くレスポンシブなHTMLプロトタイプが数分で完成。Claude Codeへのハンドオフで本番Reactコンポーネントに変換可能。/design:design-system：ブランドのカラー・フォント・ロゴを与えると体系的なデザインシステムを生成。カラートークン・タイポグラフィスケール・スペーシング・ボタン/カード/フォームなどの基本コンポーネントライブラリをまとめて出力。既存のコードベースから推論して現在の実装に沿ったシステムを生成することも可能。/design:slide-deck：ブリーフや会議メモを渡すとピッチデッキや提案資料を生成。スライド構成の提案→コンテンツ生成→デザイン適用→スピーカーノート生成→PPTX/PDFエクスポートまでを一気通貫で処理。Salesプラグインと組み合わせると顧客情報を取り込んだカスタムデッキを即座に生成。/design:one-pager：製品・サービスの説明・セールスの概要文を渡すとマーケティング用ワンペーガーを生成。ヒーロー・バリュープロポジション・特徴・CTA・連絡先を構造化したシングルページ資料をブランドボイスに沿って生成。PDFエクスポートまたはWordPressへのワンクリック公開が可能。
④ サブエージェント（Sub-agent）—生成・編集・実装を分担する「デザインチーム」
Claude Designのサブエージェントは、デザイン生成の各フェーズを分担する独立したインスタンスとして機能します。Claude Opus 4.7のビジョン能力を活用できるため、他プラグインのサブエージェントとは異なる視覚的な処理も担います。
- ビジュアルジェネレーターエージェント：Claude Opus 4.7の視覚処理能力を活用し、インプット（プロンプト・コードベース・Figmaエクスポート・スクリーンショット）を解析して初回デザインアーティファクトを生成することに特化。既存のコードベースからコンポーネント階層・カラーシステム・タイポグラフィを自動推論し、一貫性のあるデザインを出力します。
- インキャンバスエディターエージェント：生成後のユーザーフィードバック（コメント・手書き指示・スライダー操作）を解釈して、全体を再生成せずに指定箇所だけを差分更新することに特化。「このボタンの色を変えて」「このセクションを削除して」という指示を受けて対象コンポーネントのみを更新し、他の要素への影響を最小化します。
- コードハンドオフエージェント：生成したデザインをClaude Codeで実装可能なReactコンポーネント構造に変換することに特化。既存コンポーネントライブラリのパターンに合わせた実装方針を決定し、プロトタイプから本番コードへのギャップを最小化します（リサーチプレビュー段階）。
- エクスポートコーディネーターエージェント：Canva・WordPress・PPTX・PDFなどの出力形式別に最適化されたエクスポート処理を担当。「Canva用にエクスポート」「WordPressにパブリッシュ」という指示に対して、各プラットフォームの仕様に合わせた変換と送信を自律的に実行します。
4要素が連携する全体像—製品ページを「一言」で本番公開まで
以下は新製品のランディングページを「今日中に公開したい」という状況での4要素の連携フローです。
- マーケターが スラッシュコマンド
/design:one-pagerに製品概要とターゲットを入力 - Marketingプラグイン連携 でブランドボイスとカラーパレットが自動的にコンテキストとして取り込まれる
- サブエージェント（ビジュアルジェネレーター） が スキル（one-pager） に従い、ヒーロー・バリュープロポジション・CTA付きのブランド準拠ワンペーガーを生成
- インキャンバスエディターでマーケターが「ヒーロー画像を変えて」「CTAの文言をXXにして」と指示
- サブエージェント（インキャンバスエディター） が対象箇所のみを差分更新
- 承認後、サブエージェント（エクスポートコーディネーター） が コネクタ（WordPress） に直接パブリッシュ
従来ならデザイナーへの依頼→制作→レビュー→修正→エンジニアへの依頼→公開という数日のフローが、数十分で完結します。
他のCoworkプラグインとの連携
Claude Designは単体でも機能しますが、他プラグインと組み合わせることで真価を発揮します。
- Marketing + Design：ブランドボイスとキャンペーン文脈をDesignに自動受け渡し。ブランド準拠のコンテンツを初回から生成
- Sales + Design：商談情報からカスタムピッチデッキを即座に生成。
/sales:call-prepで得た顧客情報が/design:slide-deckのインプットに - Product Management + Design：仕様書やユーザーリサーチをプロトタイプのインプットに変換。
/product-management:write-specの成果物が/design:prototypeのブリーフになる
注意点：トークンコストが高い
Claude Designは追加課金なしで全有料プランに含まれますが、トークン消費量は他プラグインより大幅に多い点を理解しておく必要があります。デザインシステム・ウェブサイトプロトタイプ・製品動画を一日で作成すると、Maxプランの週次トークン上限の50%以上を消費したという事例もあります。「デザインエージェンシーとのリテイナー契約」に近い位置づけとして、初稿コストとして考えると費用対効果は高い一方、日常的な大量生産ツールとして使うにはコスト管理が必要です。
まとめ：Claude Designプラグインの構成要素一覧
| 要素 | 数 | 主な内容 |
|---|---|---|
| スキル | 5種 | プロトタイプ生成・デザインシステム生成・スライドデッキ生成・ワンペーガー生成・インキャンバス差分編集 |
| コネクタ | 5種 | Canva / WordPress / Claude Code / Figma（ロードマップ）/ Marketingプラグイン連携 |
| スラッシュコマンド | 4種 | /design:prototype /design:design-system /design:slide-deck /design:one-pager |
| サブエージェント | 4種 | ビジュアルジェネレーター（Opus 4.7）/ インキャンバスエディター / コードハンドオフ / エクスポートコーディネーター |
Claude DesignはAnthropicの実験部門Labsが開発した初めてのCoworkプラグインとして、デザインツール市場への明確な参入宣言を意味します。現在はリサーチプレビューとして全有料プラン（Pro・Max・Team・Enterprise）で利用可能です。インストールはClaudeデスクトップアプリのCoworkタブ → Plugins →「Anthropic Labs」セクションから行えます。
コメント