Claude Codeのデザイン大幅改善可能に。「Claude Design」大型アップデート

　Anthropicは6月17日(現地時間)、AIデザインツール「Claude Design」の大型アップデートを発表した。注目はClaude Codeとの双方向連携で、Claude Codeで生成するUIのデザインを大幅に改善できるようになった。また、1回あたりのトークン消費量が減少し、使用制限もチャットやClaude Cowork、Claude Codeと共通化された。Claude Designは、有料プラン(Pro/Max/Team/Enterprise)で利用できる。

　Claude Codeはコードを生成・編集できるツールだが、UIのデザインは見た目が粗くなりがちだった。今回の連携では、Claude Designで作り込んだデザインをスクリーンショットからの再構築ではなく、そのままコードに反映できる。

　Claude Codeで「/design-sync」コマンドを使えば、ローカルのコードベースにあるデザインシステムをClaude Design側に同期できる。アプリ本体を丸ごとではなく、ボタンやカードといったコンポーネント単位で取り込み、各コンポーネントはプレビューや使い方の情報とともに同期される。Webアプリであれば既存のHTML/CSSからプレビューを切り出して利用可能だ。

　ただし、筆者が制作中のWebアプリで「/design-sync」を試そうとしたところ、すぐに同期は始まらずReact化を提案された。WebアプリのUIがコンポーネントとして切り出されていなかったためだ。「/design-sync」は“既存のデザインシステムを持つプロジェクト”向けの機能で、UIが部品化されていないアプリにそのまま使えるわけではない、という点は押さえておきたい。

　Claude Designではそのほか、デザインシステムのインポート機能も刷新された。GitHubリポジトリやデザインファイルから複数のデザインシステムを取り込めるようになり、Claudeが出力をデザインシステムに照合して自動修正する。大規模チーム向けには管理者ロールが新設され、標準デザインシステムのロックが可能になった。エディタにはドラッグやリサイズ、整列が可能なレイアウトコントロールも追加されている。