はじめに
2026年8月、Claude Codeに /designコマンド（リサーチプレビュー）が追加されました。ターミナルから指示を出すだけで、既存コードベースのUIスタイルに合わせたモックアップ案を複数生成し、その場で編集して実装まで進められる機能です。
「デザインツールを別途立ち上げず、コーディングの流れのままUI案を作りたい」という開発者のニーズに応える形で登場しました。この記事では、/designコマンドの基本的な使い方・生成されるものの仕組み・現時点（リサーチプレビュー）での注意点を整理します。
この記事で分かること
/designコマンドの基本的な使い方- 生成される「アートボード」の仕組みと編集〜実装までの流れ
- リサーチプレビュー段階での制限事項
/designコマンドとは
/designは、Claude Codeのターミナルセッション内から直接呼び出せる新しいコマンドです。もともとClaude Design（Webのキャンバス型デザインエディタ）が持っていた「複数案のアートボードを一つのキャンバス上に並べて編集する」というワークフローを、コーディング作業の流れの中に統合したものです。
■ /designの位置づけ
└→ Claude Codeのターミナルセッション内で直接呼び出し
└→ 既存コードベースを読み込んでUIスタイルを把握
└→ 複数のデザイン案を「アートボード」として生成
└→ 選択・編集したアートボードをそのまま実装コードに変換2026年8月17日〜18日にかけてリサーチプレビューとして公開されており、今後もコマンドの仕様・トークンコストなどが変更される可能性がある段階です。
基本的な使い方
コマンドの形式はシンプルで、作りたい機能・画面を自然文で伝えるだけです。
/design a few options for {作りたい機能・画面}ポイント：ピクセル単位の細かい仕様を最初から指定する必要はありません。「意図」を伝えれば、Claudeが複数の解釈でデザイン案を提示してくれます。
実行後の流れ
- アートボード生成：Claudeがコードベースを読み込み、複数のUI案を1つのキャンバス（Artifact）上にアートボードとして並べて生成
- 選択・編集：気に入った案をキャンバス上でクリックして選択し、テキストや配置を直接編集
- 実装への変換：編集済みのアートボードを、そのままセッション内でコードに実装
同じセッション内で「デザイン案の検討」と「実装」が地続きになっているのが最大の特徴です。従来のように、Figmaなどの外部デザインツールで案を固めてからコーディングに移る、という往復が不要になります。
生成されるアートボードの実体
/designが生成するアートボードは、Artifacts（Claudeの成果物表示機能）のランタイム上でレンダリングされます。単なる静止画のモックアップではなく、フォームや簡易的な操作を伴うインタラクティブな見た目を確認できる点も特徴です。
Claudeは生成時に既存コードベースのスタイル（配色・コンポーネントの雰囲気など）を読み取ろうとしますが、後述の通りデザインシステムとの自動マッチングの精度はまだ検証段階です。既存のコンポーネントライブラリを厳密に使わせたい場合は、実装時に参照してほしいコンポーネントを明示的に指定した方が確実です。
リサーチプレビュー段階での注意点
現時点（2026年8月）では、以下の制約・注意点を踏まえて使うのがおすすめです。
| 項目 | 内容 |
|---|---|
| トークン消費量 | デザイン案の生成・編集を伴うため、通常のコーディングセッションより消費量が多くなりがち |
| デザインシステムの自動適用 | 既存コンポーネントとの自動マッチングは未確認。重要な画面では手動で参照を指定するのが無難 |
| 保存の手動操作 | 生成したデザインは自動保存されないため、必要なら明示的に保存する操作が必要 |
| 仕様変更の可能性 | リサーチプレビューのため、コマンドの構文やコスト体系が今後変わる可能性がある |
本番のチーム開発フローに組み込む前に、まずは小さな画面・機能で試して挙動を確認することをおすすめします。
こんな場面で使うと効果的
- プロトタイピングの初速を上げたい：真っ白な状態からUI案を複数出してもらい、方向性のたたき台として使う
- 既存機能に手を加える際の見た目確認：改修対象のコンポーネント周辺で「こういう見せ方もできる」という選択肢を素早く比較する
- 非デザイナーがひとまず形にしたい：個人開発・小規模プロジェクトで、専用デザインツールを別途契約せずに済ませたい場合
逆に、既存のデザインシステムを厳密に守る必要がある大規模プロダクトのUIや、ピクセル単位の精度が求められる最終成果物には、現時点ではそのまま使うより「たたき台」として使う方が現実的です。
まとめ
/designコマンドは、Claude Codeのターミナル作業の流れの中でUIモックアップの検討から実装までを一気通貫で進められる新機能です。リサーチプレビュー段階のため制約はありますが、「デザイン案を出す→選ぶ→実装する」のサイクルを高速化できる可能性を持っています。
Claude Codeの他のコマンドも体系的に押さえておきたい方は、こちらの記事もあわせてご覧ください。
👉 Claude Codeコマンド一覧【2026年最新】スラッシュコマンド全100種以上を10カテゴリで完全解説｜よく使うTOP10付き
AIへの指示の出し方そのものを底上げしたい方は、こちらの記事とあわせてどうぞ。
👉 プロンプトエンジニアリングとは？Claude Codeで実践する精度を上げる指示のコツ
おすすめの学習法
Claude Code自体の使い方を体系的に学びたい場合は、動画講座も有効です。
プロンプトエンジニアリングを学ぼう！-大規模言語モデル（LLM）の真価を引き出す技術-
我妻幸長氏によるベストセラー講座（評価4.2・レビュー2,051件・受講者12,208人）。Claude Codeへの指示の出し方の土台になる、LLM全般に効くプロンプト設計の考え方を学べます。
コメント