【新機能】Claude Codeに `/design` が来た──「作ってから直す」が「並べて選んでから作る」に変わります

https://note.com/yasuda_forceai/membership

2026年8月18日、Claude Codeに `/design` コマンドが早期プレビューとして追加されました。

コードを書く前に、UIの案を複数出して、選んで、その場で編集して、実装まで進めます。

ただ、私が一番効くと思ったのは案が出ること自体ではありません。 既存のコードベースを読んで、いまのUIスタイルに合わせてくる ところでした。

1. 何ができるのか──4つの工程

結論：「案を出す → 選ぶ → 直す → 実装する」が、ターミナルの中で完結します。

使い方はこういう形です。

/design a few options for {機能名}

「この機能の案をいくつか」と頼むだけです。

• 1️⃣ 複数の案が「アートボード」として並びます

• 2️⃣ 気に入ったものを選びます

• 3️⃣ キャンバス上でその場で編集します

• 4️⃣ そのまま実装まで進みます

生成物は Artifacts として共有できます。 チームに見せるときに、そのままリンクを渡せる形です。

🖥️ 使える場所と条件

• 💻 Claude Code の CLI と デスクトップアプリ

• 👤 Pro / Max / Team / Enterprise のリサーチプレビュー

• 🔄 `claude update` を実行すれば使えるようになります

📊 デモで示されていた流れ

公開されたデモでは、こういう進み方をしていました。

• 🔍 利用データを分析 ── Attach・モデル切替・音声入力の3操作が composer 操作の 71% を占めると自動で検出

• 🎨 その知見から3方向のUI案を、4枚のアートボードで生成

• ✏️ キャンバス上で Background・Radius・Opacity などをその場で調整

• 💾 選んだ案を `+71 / −38行` の差分としてソースへ実装

2. 【重要】既存コードのUIスタイルに合わせてくる

結論：汎用のモックアップ生成ではありません。あなたのコードを読んでから描きます。

Claudeは既存のコードベースを解析し、いまのUIスタイルに合わせて案を作ります。

ここが決定的な差だと思いました。

一般的な画像生成やモックアップツールで案を出すと、 「きれいだが自分のアプリに合わない」 ものが出てきます。結局そこから作り直しになります。

最初から自分のスタイルに寄せて出てくるなら、選んだ案がそのまま使えます。

🧬 中身は「Claude Design」です

これは完全な新規開発ではありません。

別プロダクトである Claude Design のエディタとプロンプト機能が、そのまま Claude Code に組み込まれています。 そして Artifacts の上に載っています。

系譜としてはこうなります。

• 🕐 Claude Design ── デザイン側のプロダクトとして存在

• 🕑 2026年6月：`/design-sync` ── デザインとコードの双方向ブリッジ

• 🕒 2026年8月：`/design` ── デザインの工程そのものがCLIに入った

3. プレビュー版の現在地と、変わること

結論：まだ粗さはあります。それでもワークフローの向きが変わります。

⚠️ 現時点で分かっている制約

• 💾 デザインからビルド工程へは進めますが、現時点では手動で保存する必要があります

• 💴 料金・対応言語・一般提供の時期は、現時点で言及されていません

• 🧪 リサーチプレビューです 。仕様は変わる前提で触ってください

🔄 それでも、向きが変わります

これまでのAIコーディングは「作ってから直す」でした。

1つ実装させて、見て、違うと言って、直させる。 直すコストが高いので、最初の一発に賭けることになります。

`/design` は「並べて選んでから作る」です。

実装前に捨てられます。 そして 捨てるコストが下がると、試す回数が増えます。

🤔 逆に、気をつけたいこと

既存スタイルに寄せてくれるのは強みですが、裏返しでもあります。

いまのUIを大きく変えたいときには、寄りすぎる可能性があります。 そこは案を見て判断が要るところです。 プレビュー段階なので、まずは小さい機能で試すのが安全でした。

こんな人に刺さります：

• 🎨 デザイナーがいないチームで、UIを自分で決めている 人

• 🔁 実装してから「やっぱり違う」を繰り返している 人

• 🧩 既存のUIと統一感を保ちながら機能を足したい 人

なお 案を選ぶ側の目 がないと、並べられても決められません（ オブジェクト指向UIデザイン で"良し悪しの基準"を持つ と、生成された案を評価できるようになります）。

🎯 まとめ

• 📅 2026年8月18日、`/design` が早期プレビューとして追加

• ⌨️ `/design a few options for {機能名}` で複数案がアートボードとして並ぶ

• 🔁 案を出す → 選ぶ → キャンバスで直す → 実装 までCLI内で完結

• 🧬 既存コードベースを読み、いまのUIスタイルに合わせてくる ──ここが本命

• 🏗️ 中身はClaude Designのエディタとプロンプト 。Artifactsの上に載っている

• 💻 CLIとデスクトップ、Pro/Max/Team/Enterprise 。`claude update` で利用可

• ⚠️ 現時点では手動保存が必要。料金・GA時期は未言及

• 🔄 「作ってから直す」から「並べて選んでから作る」へ ──捨てるコストが下がる

出典： Claude Code gets a /design command（The Decoder）

この記事が役に立ったら「スキ」をお願いします！

あなたはUIを決めるとき、何案くらい比べますか？「1案で走る派」の理由も聞いてみたいです！

📖 この記事を読んだ方におすすめの関連商品

• オブジェクト指向UIデザイン──使いやすいソフトウェアの原理
  案が並んでも、選ぶ基準がなければ「なんとなく好きなほう」で決めることになります。何をもって使いやすいと言えるのかを持っておくと、生成された案を評価できるようになりました。
  👉 Amazonで オブジェクト指向UIデザイン を見る

• エルゴトロン LX モニターアーム（デスクマウント）
  案を並べて比べる作業は、画面の面積がそのまま効きます。位置と角度を自由に動かせると、アートボードを横に並べて見比べるのが現実的になりました。
  👉 Amazonで エルゴトロン LX モニターアーム を見る