Claude DesignからClaude Codeへデザインを渡すHandoffは、2026年4月17日の公開時から用意されていました。6月17日のベータ更新で双方向の連携が強化され、9月16日には通常の会話やアーティファクトタブからもClaude Designを使えるようになっています。Claude Code側の入口は、デザインシステムをClaude Designへ送る/design-syncと、Claude Codeの中でデザインを作ったり取り込んだりする/designの2つです。本記事では2026年9月時点のClaude Design公式ヘルプとClaude Codeのドキュメントをもとに、2つの役割の違い、使える条件、使えない環境、つまずきやすい点を整理します。
まとめ｜Claude DesignとClaude Code連携の要点
/design-syncはコード側のデザインシステムをClaude Designへ送る機能で、対象はReact製のコンポーネントです。/designはClaude Codeのセッションからデザインを作る、Claude Designのプロジェクトを作業ディレクトリへ取り込む、といった作業の入口になります。完成したデザインをClaude Codeへ渡すHandoffは、Claude Design側の「Export」から実行します。
利用には、Pro・Max・Team・Enterpriseのいずれかの有料プランと、claude.aiアカウントでのログインが必要です。APIキーで動かしているClaude Codeや、Amazon Bedrock・Google Cloud・Microsoft Foundry経由のClaude Codeでは、/designが使うアーティファクトを公開できません。Claude Designの作業はほかの作業と共通の使用量枠から差し引かれ、版履歴の機能はまだありません。React以外で組んだデザインシステムや、版の管理と承認フローが必須のチームでは、現時点でこの連携を主軸にしない判断もあり得ます。
2026年6月から9月までに変わったClaude Designの提供形態
6月の発表時点の情報だけで判断すると、入口と設定場所を取り違えます。公式発表とClaude Codeの週次リリースノートから、連携に関わる変更を日付順に並べると次のとおりです。
| 時期 | 変更 | 出典 |
|---|---|---|
| 2026年6月17日 | ベータ更新・/design-sync・連携強化 | Anthropic公式ブログ |
| 2026年6月17日 | 使用量枠をClaude Codeなどと共通化 | Anthropic公式ブログ |
| 2026年8月17〜21日 | Claude Codeに/designスキル | Claude Code週次リリースノート |
| 2026年9月16日 | 任意の会話・Claude Codeで利用可能に | Anthropic公式ブログ |
| 2026年9月16日 | スライドはClaude Slidesへ分離 | Anthropic公式ブログ |
6月の更新では、デザインシステムの取り込みの作り直し、キャンバス上で要素をドラッグ・リサイズ・整列できるエディタ、外部ツールへのコネクタ追加も同時に発表されました。公式ブログによると、Claude Designは公開から最初の1週間で100万人以上に使われています。
9月16日の変更はAnthropic公式ブログで発表されました。Claude Designは独立したツールというより、アーティファクトを作るときのテンプレートの1つになりました。会話中にデザインを頼む、メッセージ欄で「出力 > デザイン」を選ぶ、アーティファクトタブでデザインテンプレートを選ぶ、という3つの入口が加わっています。claude.ai/designの単体版もこれまでどおり使え、既存のプロジェクトもそのまま残ります。Claude Design全体の機能を知りたい場合はClaude Designの全体像とデザイン業務での役割を参照してください。
/design-syncでコードのデザインシステムをClaude Designへ送る仕組み
/design-syncはコードからデザインへ向かう方向の機能です。これを実行したあと、Claude Designで作るデザインはClaudeの汎用部品ではなく、自社のコンポーネントを使って組み立てられます。
React製コンポーネントを前提とする同期の対象
公式ヘルプは、デザインシステムがReactのコンポーネントとしてすでにある場合に/design-syncを使うよう案内しています。Claude Code v2.1.282に含まれるコマンドの説明文も「Push a React design system to claude.ai/design」で、StorybookかStorybookを持たない素のパッケージから実際のコンポーネントのコードをまとめて送る、という動作が書かれています。ファイルを複製するのではなく、コンポーネントをClaude Designが画面上で動かせる形にまとめ直して送る仕組みです。
Vue・Angular・Svelteなど、React以外のコンポーネントで組んだデザインシステムは対象外と考えてください。その場合の公式の代替手段は、チャットで「接続済みのアプリ・アップロードしたファイル・Figmaファイル・スライド・ロゴ・フォント」からデザインシステムを作る方法です。ヘルプはこれをブランド向け、/design-syncをプロダクトのUI向けと位置づけています。デザインシステムに何を含めるかはデザインシステムの構成要素と作り方で整理しています。
/design-loginでの認可と送信先プロジェクトの種類
/design-syncがclaude.ai/designのプロジェクトを読み書きするには、Claude Codeで/design-loginを実行して、claude.aiアカウントでの認可を別に行う必要があります。コマンドの説明によれば、この認可はセッション自体の認証とは別で、組織のclaude.ai/designプロジェクトへの読み書き権限だけを与えます。/design-syncはユーザーが自分で入力して起動するコマンドで、Claudeが会話の流れで勝手に実行することはありません。
送信先は「デザインシステム」種別のプロジェクトでなければなりません。Claude Code同梱のツール説明には、この種別はプロジェクト作成時に決まり、あとから変えられないと書かれています。通常のデザインプロジェクトへ送っても、そのプロジェクトはデザインシステムにはなりません。
送ったあとの管理と、同期の品質を決める元データ
会話で使うデザインシステムは「設定 > デザインシステム」で管理します。単体版claude.ai/designのデザインシステムを会話でも使う場合は、Designタブの「Migrate team design systems」から移行できます。Enterpriseプランでは、公開・組織の既定への設定・削除を特定のユーザーだけに許可できます。
取り込みの品質は元のコードで決まります。公式ヘルプは既知の制限として「取り込みは元データの質を超えない」「整理されていないコードベースや不完全なファイルはそのまま出力に表れる」と明記しています。巨大なリポジトリをブラウザから読み込むと動作が重くなるため、Claude Codeからリンクし、同期は/design-syncで行うよう案内されています。
/designでClaude Codeからデザインを作り取り込む流れ
/designは、Claude Codeを起点にデザインとコードを行き来するための入口です。公式ブログには、デザインをコードベースに取り込む、コードをライブのプロトタイプにする、Claudeに最初から最後まで任せる、という3つの使い方が挙げられています。
ブリーフからアートボードを起こすデザインキャンバス
/designに作りたいものの説明を続けて渡すと、Claudeは複数のアートボードを1枚のキャンバスに描き、デザイン用のアーティファクトとして公開します。ドキュメントの例は次の1行です。
/design a settings screen for a mobile banking app公開されたキャンバスをデスクトップのブラウザで開き、アートボード上の要素を選んで直接修正できます。修正は自動で保存され、アートボードごとにPNGかPDFで書き出せます。案を1つ選んでClaudeに実装を指示すれば、そのままコードに落とせます。この機能は8月にresearch previewとして追加されました。当時の告知はv2.1.234以降としていましたが、現行のドキュメントはClaude Code v2.1.265以降を必要としています。
import・export・statusでプロジェクトを出し入れする操作
Claude Code v2.1.282では、/designの引数候補に次の値が並びます。デザイン案を描かせるときは、これらの代わりに自由な文章を渡します。
| 引数 | 役割 |
|---|---|
| sync | /design-syncと同じ同期 |
| login | /design-loginと同じ認可 |
| import | プロジェクトを作業ディレクトリへ取り込む |
| export | 作業ディレクトリを新規プロジェクトとして送る |
| status | 認可状態と使えるデザインシステムの表示 |
| consent / revoke | Claudeによるプロジェクト操作の許可・取り消し |
既存のアプリにデザインを当てたいときはimport、コードで作った画面をデザイナーに見せたいときはexportが起点になります。
Claude Design側から始めるHandoffとの関係
Claude Designで作ったデザインを実装に回すときは、プロジェクト右上の「Export」から「Handoff to Claude Code」を選びます。送り先は、手元で動いているコーディングエージェントか、Web版のClaude Codeです。Claude Codeはスクリーンショットから作り直すのではなく、それまでの制作内容を引き継いで実装を続けます。操作の画面遷移と、コマンドが通らないときの切り分けはClaude DesignとClaude CodeのHandoff実行手順で解説しています。
Claude Codeとの連携を使うためのプラン・認証・環境の条件
連携が動かないときは、まずプラン・認証方式・組織の設定が公式の利用条件を満たしているか確認してください。ここでは条件を3つに分けて整理します。
プラン別の既定と管理者が触る設定の場所
| プラン | 既定 | 有効化の場所 |
|---|---|---|
| Free | 対象外 | なし |
| Pro / Max | オン | 設定不要 |
| Team | オン | 組織設定 > アーティファクト |
| Enterprise | オフ | 組織設定 > アーティファクト |
9月の変更後、会話やアーティファクトタブで使うClaude Designと、claude.ai/designの単体版は別々の設定になりました。管理者ガイドによると、単体版は「組織設定 > Claude Design」で有効にし、片方をオンにしてももう片方はオンになりません。Enterpriseでは、カスタムロールで利用者を段階的に広げられます。
claude.aiログインとAnthropic APIに限られる実行環境
Claude Codeの/designはアーティファクトとしてキャンバスを公開するため、アーティファクトの利用条件をすべて満たす必要があります。Claude Codeのドキュメントに書かれている主な条件は次のとおりです。
- 認証：CLIかデスクトップアプリで
/loginし、claude.aiアカウントでセッションを動かしていること。APIキー、ゲートウェイトークン、クラウド事業者の認証情報で動くセッションは公開できない - モデルの提供元：Anthropic APIであること。Amazon Bedrock、Google CloudのAgent Platform、Microsoft Foundryでは使えない
- 組織ポリシー：顧客管理の暗号鍵（CMEK）、HIPAA、Zero Data Retentionが有効な組織では使えない
- 実行面：Claude CodeのCLIか、デスクトップアプリのv1.13576.0以降
このほか、環境変数CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFICを設定していると、/design-syncが使う同期ツールは動きません。社内規程でこの変数を一律に設定している環境では、最初にここを確認してください。デスクトップアプリで動かす場合の実行環境はClaude Codeデスクトップアプリの使い方にまとめています。
共通の使用量枠と、上限に達したときの挙動
Claude Designの作業は、Claude Codeを含むほかの作業と同じ使用量枠から差し引かれます。Claude Design専用の週次枠は廃止されました。大きなコードベースを読み込ませたり、修正を何度も繰り返したりすると消費が増えます。上限に達すると、枠がリセットされるまでClaude Designは使えません。使用量クレジットを有効にしている場合だけ、上限後も作業を続けられます。
Claude Codeのドキュメントも、アーティファクトの生成は同じ内容を端末にテキストで出すより多くのトークンを使うとしています。/design-syncでデザインシステムを送り、/designで案を出し、実装まで進める流れを1日に何度も回す場合は、Claude Code単体で使っていたときより早く上限に達すると見込んでおくべきです。
「戻れない」「同期されない」ときに確認する既知の制限
Claude Designで以前のデザインに戻したい場合は、まず版履歴の制限を確認してください。Claude Designにはまだ版履歴がありません。別の方向を試す前に「Save what we have and try a completely different approach」のように現状の保存を頼んでおくと、Claudeがプロジェクトを保存して保存先を示すので、あとから会話の中で参照できます。一方、Claude Codeの/designで公開したアーティファクトは、公開のたびに版として残り、共有メニューで閲覧者に見せる版を選べます。
公式ヘルプには、このほかに次の制限が挙がっています。
- インラインコメントが画面に表示されないことがある。コメント一覧を開けば確認でき、Claudeに読まれない場合はチャットに貼り直すのが回避策
- 2人以上が同時に編集する機能は初歩的な段階で、確実には動かない
- 「chat upstream error」が出たら、同じプロジェクト内で新しいチャットタブを開く
- iOS・Androidアプリではデザインの依頼と閲覧はできるが、キャンバスの編集と共有設定の変更はWeb版かデスクトップ版で行う
デザインシステムの更新が反映されない場合は、送信先がデザインシステム種別のプロジェクトか、自分にそのプロジェクトの書き込み権限があるか、Enterpriseで公開操作が特定のユーザーに限定されていないかを順に確かめてください。
連携を主軸にすべき場面と、見送るべき場面
向いているのは、ReactのコンポーネントとStorybookがすでに整っており、管理画面・社内ツール・LPのように、見た目と実装が近い画面を短いサイクルで作るチームです。/design-syncで部品をそろえておけば、Claude Designで作った案がそのまま自社の部品で組まれるため、Handoff後に部品を差し替える作業が減ります。
見送るべきなのは次の3つの場合です。1つ目は、デザインシステムがReact以外で組まれている場合です。/design-syncの対象外なので、ブランド資産から作ったデザインシステムでは、生成されたデザインと実装の部品が1対1に対応しません。2つ目は、Claude CodeをBedrock・Google Cloud・Foundry経由で使っている組織や、Zero Data Retentionを有効にしている組織です。/design自体が使えません。3つ目は、デザインの版管理と承認フローを監査の要件にしている組織です。版履歴がなく同時編集も不安定な現段階では、Figmaを正本に残し、Claude CodeへはFigma MCPサーバー経由でデザインを渡すほうが運用を崩しません。
よくある質問
/design-syncと/designの違いは何ですか？
/design-syncは、React製のデザインシステムをClaude Designへ送る同期専用のコマンドです。/designはClaude Codeからデザインを作る、プロジェクトを取り込む、作業ディレクトリを送り出す、といった操作全般の入口で、引数にsyncを渡すと/design-syncと同じ同期も実行できます。
Claude Designで前のデザインに戻せますか？
2026年9月時点では版履歴の機能がありません。別の案を試す前に、現在の状態を保存するようClaudeに頼んでおく方法が公式ヘルプで案内されています。Claude Codeの/designで公開したキャンバスは、アーティファクトの版として公開ごとに残ります。
Claude Designはまだベータ版ですか？
はい。2026年9月時点でも、Pro・Max・Team・Enterpriseの有料プランでベータとして提供されています。Claude Codeの/designによるデザインキャンバスはresearch previewとして追加された機能です。仕様や制限は今後も変わる前提で扱ってください。
Claude Designの書き出し先にFigmaは含まれますか？
含まれていません。公式ヘルプの書き出し先は、ZIP・PDF・PPTX・単体HTML・Googleスライド（単体版のみ）と、Adobe・Canva・Gamma・HubSpot・Lovable・Miro・Netlify・Replit・v0・Vercel・Wixなど15のツールです。Figmaファイルは、デザインシステムを作るときの入力素材として使えます。
無料プランでClaude DesignとClaude Codeを連携できますか？
できません。Claude Designの対象はPro・Max・Team・Enterpriseで、Claude Codeの/designもこの4プランに限られます。Enterpriseは既定でオフなので、管理者が組織設定で有効にする必要があります。
