Anthropicは6月18日、Claude Designのメジャーバージョンアップデートを発表しました。今回の更新が狙うのは、デザインと開発の協働の中で最も苦しい局面——デザインカンプからコードへのロスのある伝達です。Claude Codeでコードを書き、Claude Designで画面を作る開発者やデザイナーであれば、今回の更新で往復コミュニケーションの時間を大幅に節約できます。

4つの核心アップデート

デザインシステムの一括インポート

Claude Designは現在、GitHubリポジトリからのデザインシステム（カラー、フォント、コンポーネントライブラリ、余白ルール）の一括インポートに対応しています。インポート後、デザインカンプを生成するたびに、Claudeはあなたの実際のコンポーネントで組み立て、組み立てたら自分で審査し、規約に合わない箇所は自分で直してから見せてくれます。

AnthropicのデザイナーNate Parrottはデモでこの流れを披露しました。Claudeはデザイン仕様を2回読み込み、その後出力を6回精密に仕上げ、合計8ラウンドのセルフチェックを回して、ようやくダークバージョンのデザインカンプを提示しました。

/design-sync と /design の双方向コマンド

これが今回の更新で最も重要な部分であり、2つのコマンドがClaude DesignとClaude Codeを直結させます：

• /design-sync：Claude Codeで実行すると、コードリポジトリ内のデザインシステム（カラー、フォント、コンポーネントライブラリ、余白ルール）をすべてClaude Designへ取り込みます。
• /design：逆方向の操作。Claude Codeのターミナルで1行の指示でデザインプロジェクトの作成、既存デザインの編集、デザインフォルダ全体の同期ができ、ブラウザを開いたりウィンドウを切り替えたりする必要がありません。

以前はデザイナーがあるツールで作り終え、エンジニアが別のツールで組み直していました。今はデザインをClaude Designで作り、完了後ワンアクションでClaude Codeによるコード記述へ進められます。

9大プラットフォームへのワンクリックエクスポート

エクスポート先が一気に9つに拡大しました：

• Adobe
• Canva
• Vercel
• Replit
• Miro
• Gamma
• Lovable
• Wix
• Base44

デザイン協働からコードデプロイまでの完全なチェーンをカバーします。

キャンバス編集の作り直し

ドラッグ、拡大縮小、整列を画面上で直接操作でき、1ピクセル変更するたびにモデル呼び出しを1回分燃やす必要はありません。生成されるのは、もう動かせないモックではなく、生きたコンポーネントです——Figmaのようにドラッグでき、コードを書くように修正できます。

こんな人に向けて

• フロントエンド開発者：Claude Codeと組み合わせて、デザインカンプがそのまま保守可能なコンポーネントコードに変わる
• 個人開発者/フルスタック：1人でデザインからデプロイまでの全工程を完結
• プロダクトマネージャー：高精細プロトタイプを素早く作り出し、VercelやReplitに直接インポートして検証
• デザイナー：ブランド規約でAI生成を拘束し、手戻りを削減

競争構図

今回の更新で、デザインツール競争はいっそう激しくなります。2026年上半期、Claude Design、Figma AI、Google Stitch、Vercel v0、Lovableの5者混戦。Claude Designの差別化優位は、Claude Codeを背後に持つことで「アイデア」から「公開」までの完全なチェーンを押さえた点にあります。

---

原文リンク：本日より、Claude Designはデザイナーとプログラマーを同一種の人間に変えようとしている