Claude DesignとClaude Codeの連携が強化されてコーディングからデザインまでAIをバリバリ活用可能に

AnthropicがClaude Designの機能強化を2026年6月17日に発表しました。Claude Designはデザインシステムに沿った制作、キャンバス上での直接編集、Claude Codeとの同期、外部ツールとの連携に対応するようになり、デザインからコーディングまでの流れをより一体的に扱えるようになりました。

Claude Design now stays on brand for daily work | Claude
https://claude.com/blog/claude-design-stays-on-brand-for-daily-work

Claude DesignはAnthropic Claudeの視覚認識機能を活用して見栄えのよいUIやプレゼン資料を作ることができるデザインツールです。

「Claude Design」が登場、AIに頼んでUIやプレゼン資料をデザイン可能 - GIGAZINE

今回の機能強化でClaudeのデスクトップアプリのサイドバーからClaude Designを利用できるようになったほか、claude.ai/designからもアクセスできます。Anthropicによると、Claude Designは提供開始から最初の1週間で100万人以上に利用されており、今回のアップデートは実際の利用者からのフィードバックを反映したものだとのこと。

また、今回のアップデートでデザインシステムのインポート機能が作り直されました。Claude DesignがGitHubリポジトリ、デザインファイル、直接アップロードした素材などから1つまたは複数のデザインシステムを取り込み、既存コンポーネントを使った出力内容がデザインシステムに合っているかを確認してからユーザーに提示できるようになります。また、企業や大規模チーム向けには新しい管理者ロールも用意されています。管理者は標準となるデザインシステムを承認し、編集を制限できるため、制作物が社内ガイドラインから外れにくくなりました。

Claude DesignとClaude Codeの連携も強化され、デザインとコードの間を行き来しながら作業しやすくなったとのこと。Claude Design側では「/design-sync」を使ってデザインシステムを取り込み、既存コンポーネントを前提に制作を始められるほか、完成したデザインをClaude Codeに引き渡すことで、単なるスクリーンショットから作り直すのではなくそれまでの作業を引き継いでソフトウェア化できます。

Claude Codeから作業を始める場合も、ターミナルを離れずに「/design」を使ってデザインプロジェクトを作成・編集・同期が可能に。たとえば、既存のコードベースにデザインを取り込んだり、作成中のコードを動く試作品として確認したり、必要に応じてClaudeにデザインから実装まで進めさせたりできます。デザインとコードを別々の作業として分断せず、同じ流れの中で行き来できるようになるのがポイントです。

Claude Designの編集機能そのものも強化されています。新しいエディターではキャンバス上の各要素を直接操作でき、ドラッグ、リサイズ、整列といったレイアウト調整を細かく行えるようになったほか、数百件の安定性修正によって日常業務で使いやすくなったとのこと。

さらに利用上限の扱いも見直されました。Claude DesignはClaude CoworkやClaude Codeと利用上限を共有するようになり、多くのユーザーがより余裕を持って作成できるようになります。また、同じ結果を得るために必要なトークン量も平均的に減少し、エラーも大きく減ったとされています。

加えて、外部ツールとの連携も広がっています。Claude Designで作ったデザインはPDFやPowerPointとして書き出せるだけでなく、AdobeやCanva、Lovable、Replit、Vercel、Wixなどのサードパーティーのサービスに送り、その後の編集やアプリ開発につなげることができます。例えば、AIを使ってアプリやウェブサービスを作成できる開発サービスであるLovableとの連携では、Claudeでやり取りしながら作ったデザインやコードをLovableに送り、そのままアプリ開発につなげられるようになります。

また、ブラウザ上でアプリやウェブサービスを開発、実行、公開できる開発環境であるReplitとの連携では、Claude Designで作ったデザインをReplitに送り、そのまま動作するアプリとして組み立てられるようになります。つまり、Claude Designで画面や見た目を作り、Replitで実際に動くアプリに仕上げるという流れを、AIを介してつなげられます。

Anthropicは今後もClaude Designと連携できるサービスを増やしていく予定だと述べています。Claude Designは記事作成時点でベータ版として提供されており、Claude Pro、Max、Team、Enterpriseプランで利用可能です。