/designコマンドと元々存在していたClaude Designのウェブ版は、実際には同じ技術なのか。
同じ核心的な編集技術だが、入口と文脈が異なる。パロット氏は明確に、/designはClaude Designのエディタとプロンプト機能を引き継いだものであり、独立した新しいデザインエンジンをゼロから作ったのではないと説明している——これは両者がキャンバス操作やプロンプト理解といった基盤能力を共有していることを意味する。違いは使用文脈にある——Claude Designのウェブ版は独立した製品であり、デザインが完成した後にパッケージ化されてClaude Codeに引き渡される。一方/designは同じ編集能力を、開発者が既に使っているClaude Codeのインターフェースに直接持ち込み、2つのツールのタブを切り替えたりコードをコピー＆ペーストしたりする手間を省く。
Claude Designが核心的なデザイン編集能力を提供し、/designはその能力への新しい入口の一つであり、既にコーディングしている人がわざわざ外に出なくて済むようにするもの、と理解できる。両者は背後で独立に進化した2つの技術ではない。
「デザインはビルド段階まで引き継がれるが、現時点ではまだ手動で保存する必要がある」というのは、開発段階のどんなシグナルを示しているのか。
これは基礎となる技術的経路（アートボードのデータが実装段階まで伝わるかどうか）は既に通っているが、ユーザー体験レベルの詳細はまだ磨き上げられていないことを示している——これはリサーチプレビュー段階でよくある状態だ。核心的な機能は動作するが、操作フローには「自動化されるべきだが暫定的に手動処理が必要」なステップがまだ残っている。パロット氏はこの手動保存ステップが近々なくなると明言しており、これは意図的に残された手動確認メカニズムではなく、単に最適化が間に合っていない過渡的な状態であることを示唆している。
この機能の導入を検討している開発者にとって、この詳細は注意する価値がある——現段階での使用時、手動で保存を押し忘れると、編集したアートボードの内容が実際には実装ステップに反映されない可能性がある。これは現在の使用上注意すべき点であり、この機能自体の設計が悪いという意味ではない。
パロット氏は実装がデザインに従うかどうかは「モデル次第」だと認めているが、この機能を評価する人にとって、実際どう解釈すべきか。
この発言は、この機能の現時点での能力の境界を明確に示している——アートボードは強制的に実行される仕様文書ではなく、モデルに見せる施工参考図であり、実際にコードを書く際、モデルは依然として自身の判断で実装するが、その判断はアートボードの内容を参考にするのであって、ピクセル単位で複製するわけではない。これは、もしあなたのタスクが「完成品がデザイン案と完全に一致しなければならない」という厳格な要件を持つ場合（例えば非常に厳密なブランド基準を持つ正式なプロダクトインターフェースなど）、現時点でこの機能はまだ完全には満たせない可能性があり、追加の人的な照合確認が必要になることを意味する。
より現実的な位置づけ方は、/designが生成するアートボードを「エンジニアに意図を伝える」ツールとして扱うことであり、「正式な検収プロセスを代替する」ツールとしてではない——まずアートボードで方向性を素早くすり合わせ、実装完了後も実際の出力がアートボードに本当に沿っているかを人が確認する必要がある。この確認の層は現時点では省略できない。
この機能と、今年6月から既に存在していた/design-syncコマンドは、具体的にどう役割分担しているのか。
/design-syncが解決するのは「同期」の問題だ——コードベース内の既存のReactデザインシステムをClaude Designにアップロードし、その後Claude Design内でのデザイン作業がチームの実際のコンポーネントライブラリを使えるようにする。汎用テンプレートを適用するのではなく。これは一方向的で、前段階の準備的な性質の動作だ。
/designが解決するのは「生成から実装まで」の一連の流れを圧縮する問題だ——既にClaude Codeの開発現場にいる状態で、複数のデザインオプションを直接生成し、選び、編集し、実装する。Claude Designのウェブ版に切り替えてこの一連のステップを完了する必要がない。両者は代替ではなく補完関係にあると見なせる——もしチームが既に/design-syncでデザインシステムをClaude Designに同期していれば、理論上そのデザインシステム資産は/designが生成するアートボードを既存のスタイルにより近づける助けにもなるはずだが、この点は現在開発コミュニティが提起している、公式がまだ明確に答えていない3つの疑問の一つであり、実際の統合度は今後の観察が必要だ。
Anthropicのプロダクトデザイナー、ネイト・パロット氏は米国時間8月17日、Xで Claude Codeの「/design」コマンドの早期プレビューを公開したと発表した。開発者がターミナルまたはデスクトップ版で「/design この機能のいくつかのオプションをデザインして」といった指示を入力すると、Claudeはまず複数の編集可能なインターフェースデザイン案（アートボード）を生成する。開発者は気に入った一つを選び、直接修正し、その後Claudeにそれに沿って実装させる。この機能は現在ターミナルとデスクトップ版のみに対応しており、VS Codeにはまだ対応していない。
この機能は、AIがインターフェースを書く際の長年の問題を狙っている——開発者はこれまでテキストで欲しい画面を説明するしかなく、生成結果が違えば再度説明し直す必要があり、この往復の推測作業はかなりの時間を消費していた。/designはこの順序を逆転させ、開発者がまず複数の視覚的なオプションを見てから、どの方向に進むかを決められるようにする。パロット氏によれば、Claudeはユーザーのコードベースを読み取り、既存のUIスタイルと照合し、デザイン案をArtifact（Claudeが生成し、独立してプレビュー・共有できるインタラクティブなコンテンツ）内の共有可能なモックアップにする。この基盤メカニズムは、Claude Code Artifactsがセッション出力を共有可能なページに変換するのと同じ技術だ。
生成されたアートボードは直接手を加えられる。パロット氏によれば、チームはClaude Designのエディタとプロンプト機能を「Claude Codeに直接統合」し、開発者はキャンバス上でデザインを調整でき、テキスト指示を書き直して再生成する必要がない。これは今回のアップデートでClaude Designと最も直接的に相互作用する部分でもある——/designコマンドは独立した新しいデザインエンジンをゼロから作ったのではなく、今年4月にリリースされたClaude Designのエディタ機能をそのままClaude Codeのインターフェースに持ち込んだものであり、開発者はコーディング環境を離れてclaude.ai/designに行かなくても、同じ編集体験を得られる。
ある開発者が返信で尋ねた——アートボードの内容はビルド段階まで引き継がれるのか、それともプロンプトでレイアウトを再度説明する必要があるのか。パロット氏は「引き継がれる」と返答したが、このプレビュー版ではまだ手動で「保存」を押さないとデザインが実装に反映されないと注意を促し、この手動ステップは近々なくなると述べた。パロット氏はまた、実装がデザインに実際に従うかどうかは「モデル次第」だが、モデルは「この点で改善し続けている」と率直に認めた。言い換えれば、アートボードは現時点ではモデルに見せる施工参考図であり、強制的な仕様ではない——完成品はデザイン案とずれる可能性が依然としてある。
Claude DesignとClaude Codeの間には既に経路があった——公式発表によれば、Claude Designでデザインが完成した後、「引き渡しパッケージ」としてまとめられ、一つのコマンドでClaude Codeに引き継いで開発できる。Claude Code側では、今年6月から既に「/design-sync」コマンドがあり、コードベース内の既存のReactデザインシステムをClaude Designにアップロードし、デザインがチームの実際のコンポーネントを使えるようにしていた。/designの新しさは入口の位置にある——「デザインオプションを生成し、直接編集し、Claudeに実装させる」という一連の流れを、Claude Code内の単一のコマンドに直接収めた。開発者はまずClaude Designに迂回したり、MCP（外部ツール接続プロトコル）のフローを経由したりする必要がなく、コーディングしているその場でデザインアートボードを呼び出せる。ある開発者はSNSでこの機能が現在「かなりトークンを消費する」と指摘しているが、この点について公式からのさらなる説明はまだない。
この機能は現在も早期プレビューの位置づけであり、開発コミュニティから提起されている疑問には以下が含まれる——アートボードはコードベース内のファイルとして保存されるのか、それとも単一の作業セッション内にのみ存在するのか——前者であって初めて、デザインレビューがチームの既存のコードレビュー（PR）プロセスに組み込める。ユーザーが既にClaude Designで構築したデザインシステムを直接読み込めるかどうか——これが新しい入口が既存のデザイン資産に接続できるかを決める。実装結果がアートボードから逸脱した場合、Claude Codeが自発的に修正するかどうか。この3つの答えが出るまでは、/designはコーディング前の素早いスケッチツールに近い位置づけであり、正式な開発フローの中で安定した一部となるかどうかは、Anthropicが今後どう補っていくか次第だ。