デザイナーが作ったモックを、エンジニアがコードで一から作り直す。出来上がりを見たデザイナーが「思ってたのと違う」と言う。この往復のすれ違いは、ものづくりの現場で長年すり減ってきたところ。Anthropic が、Claude Code と Claude Design を双方向で同期できるようにした。デザインからコードへ、コードからデザインへ、行き来が一本につながる。地味だけど、現場の摩擦をまっすぐ狙いに来た更新。中身を整理する。
- デザインとコードが、双方向で行き来できるようになった
- 「自分の本物の部品」で組むから、AIスロップになりにくい
- キャンバスで直接いじれる、エディタの刷新
- デザイン↔実装の「作り直し問題」に効く
- まず手元の小さな画面で、同期の感触を確かめる
デザインとコードが、双方向で行き来できるようになった
まず何ができるようになったか。Claude Code(ターミナルで動くコーディング相棒)と Claude Design(AI でデザインを作るツール)が、両方向でつながった。
つなぐのは /design-sync というコマンド。使い方は 2 通り。ひとつは、デザインシステムをリポジトリに取り込んで、自分の本物の部品を使ってコードを組む方向。もうひとつは、Claude Code で作ったものを Claude Design に戻して、キャンバス上で編集を続ける方向。デザインを渡して実装に回すのも、コードから始めてターミナルからデザインプロジェクトに同期するのも、どちらもいける。本日からの段階的なロールアウトで、Claude Design 自体は全有料プランでベータ提供(Web とデスクトップ)。
「デザインシステム」という言葉が要かもしれないので補足すると、これは色・フォント・ボタンといった UI 部品のルールと見た目を、組織でそろえた設計図のこと。これがあると、誰が作っても同じトーンに仕上がる。今回の同期は、この設計図を軸にデザインとコードを往復させる仕組み、と捉えると分かりやすい。
「自分の本物の部品」で組むから、AIスロップになりにくい
個人的にいちばん効くと思ったのが、ここ。Claude Design は、リポジトリ・デザインファイル・コードベースからデザインシステムを取り込んで、自分の本物の部品を使って組む。
なぜこれが大事か。AI に「いい感じの画面を作って」と頼むと、どこかで見たような、量産型ののっぺりした見た目になりがち。いわゆる「AI スロップ」と呼ばれる、文脈のない既製品っぽさ。これを避けるには、その組織やプロダクト固有の素材を AI に渡すのが効く。Claude Design は、既存のデザインシステムを取り込むことで、最初から自社の見た目で組み上げる。
さらに賢いのが、Claude が自分の出力を、取り込んだデザインシステムと照合してから見せるという点。作りっぱなしで投げてくるのではなく、「これ、うちのルールに合ってる?」を自分でチェックしてから出す。前に Claude Code のセキュリティプラグインを取り上げたとき、書いたコードを別の観点でレビューしてから出す設計に感心したけれど、デザインでも同じ「出す前に自己点検する」発想が入っている。ブランドから外れたものが、そもそも目の前に出てきにくくなる。
キャンバスで直接いじれる、エディタの刷新
作る側の使い勝手も上がっている。エディタが刷新されて、日常使いで安定したという。
目を引くのが、キャンバス上で要素をドラッグ・リサイズ・整列できるレイアウト操作。これまで AI でデザインを作ると、「言葉で指示して、出てきたものを受け取る」という一方通行になりがちだった。それが、出てきたものを手で直接動かして微調整できる。プロンプトで大枠を作り、最後の数ミリは手でそろえる、という人間の手触りを残した編集ができる。
出力の幅も広がっていて、PDF や PowerPoint への書き出しに対応した。デザインだけでなく、資料の形で外に出せる。さらに、ふだん使っている他のツールとの連携も増えている。Claude Design の中で完結させるだけでなく、作ったものを既存のワークフローに流し込める方向。
デザイン↔実装の「作り直し問題」に効く
この更新の本当の狙いは、冒頭に書いた「作り直し問題」だと見ている。
これまで、デザインと実装の間には、必ず溝があった。デザイナーがツールで作ったものを、エンジニアが別の言語(コード)で書き直す。その過程で細部がずれ、後から「ここ違う」のやり取りが発生する。両者が別々のツールで作業している限り、この往復は避けられなかった。
双方向同期は、ここに橋を架ける。デザインを実装に渡すときも、実装をデザインに戻すときも、間に手作業の翻訳が挟まらない。しかも本物の部品で組むので、「デザインでは存在するのに、コードにはない部品」みたいなズレも起きにくい。デザイナーとエンジニアが、同じ素材を共有しながら、それぞれの得意な場所で手を動かせる。チームでものを作る立場から見ると、この「翻訳のロスが減る」効果は、派手さはないけれど積み上がると大きい。
まず手元の小さな画面で、同期の感触を確かめる
景気のいい話が続いたので、冷静な部分も書いておく。これはまだベータで、使えるのは有料プランのみ。挙動が固まりきっていない前提で触るのが無難。
それと、「本物の部品で組むから AI スロップになりにくい」の裏返しで、そもそも整ったデザインシステムを持っていないと、その恩恵は受けにくい。設計図がない状態で AI に丸投げすれば、結局はどこかで見た見た目に寄っていく。この機能が効くのは、自社の素材をきちんと用意できているチーム、というのは押さえておきたい。デザインのワークフローを Anthropic のキャンバスに寄せることになるので、特定ツールへの依存が深まる点も、頭の隅に置いておく。
とはいえ、デザインとコードの往復を一本につなぐ発想は、現場のすり減りどころを的確に突いている。まず試すなら、本番の大きなプロジェクトではなく、手元の小さな画面やコンポーネントひとつで /design-sync を回して、デザインとコードがどれくらいきれいに行き来するかを確かめてみたい。そこで翻訳のロスがどれだけ減るかを肌で測ってから、チームのワークフローに組み込むか判断する。デザイナーとエンジニアの間の溝は、ツールで完全には埋まらないけれど、橋が一本増えるだけで、日々の手戻りはずいぶん軽くなる。そこに効くかどうかを、自分の現場で見極めるのが先決だと思っている。
