デザインから実装まで、別ツールで何度も説明し直す手間が大きなボトルネックになっていました。Anthropicは2026年6月17日、Claude Designの大型アップデートを公開し、コーディングエージェントのClaude Codeとの連携を強化しました。
この記事では、今回の変更点と、デザイン・開発の現場でどう使えるかを整理します。
この記事でわかること
- Claude DesignとClaude Codeの双方向連携の仕組み
/designと/design-syncコマンドの役割- デザインシステム取り込みと組織向け管理機能
- 利用条件とアクセス方法
何が変わったか
Anthropicは、Claude Designのプレビュー公開から約2か月後の6月17日に、デザインとコードの往復を前提にした大型アップデートを展開しました（参考）。
Claude Designは2026年4月17日にAnthropic Labsの製品として登場し、Claude Opus 4.7を基盤にプロトタイプやスライドなどのビジュアル制作を会話で進めるツールです。公開初週に100万人以上が利用したとAnthropicは報告しています。
今回の更新の中心は、ローカルのコードベースを起点にデザインを組み立て、完成後はClaude Codeへそのまま引き渡せる流れです。スクリーンショットで意図を伝え直す工程が不要になります。
なぜデザインとコードの分断が課題になるか
AIでモックアップを作っても、実装フェーズでコンポーネント名やレイアウト規則がずれると、エンジニアが原型から組み直すことになります。デザインシステムがあっても、制作ツールと開発環境が別だと、色や余白の解釈がぶれやすいのが実務上の痛点です。
Anthropicは今回、Claude DesignとClaude Codeが同じデザインシステムを参照する設計に寄せています。プロトタイプ段階から既存コンポーネントを使い、実装時も同じ文脈を引き継ぐ狙いです。
デザインシステムの取り込みが強化された
デザインシステムのインポート機能を再設計しました。GitHubリポジトリ、デザインファイル、生のアップロードから、1つまたは複数のデザインシステムを取り込めます。
Claudeは登録済みのコンポーネントで画面を組み立て、出力をデザインシステムと照合してから表示します。ユーザーが見る前にズレを修正する流れです（参考）。
大規模チーム向けには、管理者が標準のデザインシステムを承認し、編集をロックする役割も追加されています。組織内の制作物がブランドガイドラインから外れにくくする仕組みです。
Claude Codeとの双方向連携
Claude Code側では、ターミナルで/design-syncを実行すると、ローカルコードベースのデザインシステムをClaude Designへ同期できます。Claude Designで作る画面は、手元の既存コンポーネントを起点に組み立てられます。
デザインが固まったら、Claude DesignからClaude Codeへハンドオフできます。設計ファイル、チャット履歴、解釈用のREADMEをまとめたバンドルを渡し、Claude Codeが途中から実装を続けます。コードベースをリンク済みなら、プロトタイプで使ったコンポーネントやパターンをそのまま引き継げます（参考）。
逆方向の入口も用意されています。Claude Codeのターミナルで/designと入力すれば、ターミナルを離れずにデザインプロジェクトの作成・編集・同期ができます。デザインから始めたい人も、コードから始めたい人も、同じプロジェクト上で往復できる構成です。
エディターと利用枠の改善
キャンバス上で要素をドラッグ、リサイズ、整列できるレイアウト操作が強化されました。位置やサイズの微調整を、会話だけに頼らず直接行える点が実務向きです。
利用上限は、チャット、Claude Cowork、Claude Codeと共有する方式に変わりました。Anthropicによれば、多くのユーザーは以前より余裕を持って使え、1ターンあたりのトークン消費も抑え、エラー率も下がっています（参考）。
公開当初はデザイン生成でトークンを大量消費しやすいという指摘がありました。今回の変更は、日常業務で継続利用しやすくするための調整と読めます。
使い方と利用条件
Claude Designは、Webブラウザでclaude.ai/design、またはClaudeデスクトップアプリのサイドバーから開けます。
対象プランはClaude Pro、Max、Team、Enterpriseです。サブスクリプションに含まれ、Enterpriseはデフォルトでオフのため、管理者が組織設定から有効化する必要があります。2026年6月時点ではベータ提供です。
エクスポート先はPDFやPowerPointに加え、Adobe、Canva、Gamma、Lovable、Miro、Replit、Vercel、Wixなどとの連携が拡充されています。社内で使うデザインシステムを先に取り込み、プロトタイプから/design-syncやハンドオフでClaude Codeへ渡す流れが、今回の更新でいちばん実用的な使い方です。