Claude Designは、画面を見ながら案を比較するならWeb・Desktop、コードベースとつないで実装へ渡すならClaude Code＋Design MCPが向いています。
大事なのは「どちらが高機能か」ではありません。どこで考え、どこで直接直し、どこから実装へ渡すかが違います。
このページでは、やりたいことから入口を選び、実際に試せるプロンプトまで進めます。
やりたいことからWeb・Desktop・CLIを選ぶ
Claude Designでできること・できないこと
| やりたいこと | Web・Desktop | Claude Code＋MCP | 判断 |
|---|---|---|---|
| 画面を見ながら3案を比較する | ◎ 向いている | ○ 指示できる | まずWeb・Desktop |
| 余白・色・配置を直接触る | ◎ キャンバスで操作 | × 直接操作ではない | Web・Desktop |
| 既存コードや部品を読み込む | ○ 文脈として渡す | ◎ コードと往復 | CLI＋MCP |
| 選んだ案を実装へ渡す | ○ 書き出して渡す | ◎ Claude Codeへ接続 | CLI＋MCP |
| スマホだけで細かく編集する | × 主な作業場所ではない | × 主な作業場所ではない | PCを使う |
| 対象プランなしで新規生成する | × 生成できない | × ログイン後も権限が必要 | 契約状態を確認 |
◎は主な作業場所、○は条件つき、×はその入口だけではできないことです。
Web・Desktop・CLIは「操作する場所」が違う
WebとClaude Desktopは、生成案を見て、コメントや直接編集で詰める場所です。Claude Code＋Design MCPは、コードベースとデザインを往復し、実装へ渡す場所です。
どちらか一方に閉じるより、Webで3案を比較し、選んだ案をCLIへ渡すほうが役割を分けやすくなります。
Claude Designは、デザインシステムを取り込めば色・フォント・コンポーネントを継承して使えます。スクリーンショット、画像、文書、コードベースを文脈として渡し、最初の案をチャット、コメント、直接編集で詰めていきます。成果物はZIP、PDF、PPTX、Canva、スタンドアロンHTML、Claude Codeへの引き渡しへ出せます。 公式発表
Claude DesignをCLIから使う手順
Claude Codeが入っていれば、Design MCPをユーザースコープへ追加し、ログインします。
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcpその後、Claude Codeで次を実行します。
/design-login接続後は、コードベースへデザインを取り込み、コードをライブプロトタイプとして出し、Claude Codeへ引き渡す流れが使えます。既存のコンポーネントを使うなら、先に/design-syncでデザインシステムを同期する手があります。コマンド、ログイン、できる範囲は公式ヘルプを確認してください。
よい依頼は「目的・配置・中身・相手・制約」で書く
Claude Designでは、見た目の形容詞より、判断材料を先に渡します。
- 目的：何を決める、伝える、試すための画面か
- 配置：どの要素を上・左・中央に置くか
- 中身：見出し、数値、ボタン、画像など何を表示するか
- 相手：誰が、どの端末で、何をしたいのか
- 制約：変えないURL、画像、計測class、画面幅など
依頼の最後に「まず3案を比較し、すぐ実装しない」と書くのも大切です。一案目を完成品として扱わず、人が違いを見て選びます。公式ヘルプも、目標・レイアウト・コンテンツ・対象者を具体的に書き、必要なら代替案を頼むことを勧めています。
まず1回試すプロンプト
attripトップの「新しい記録。」を題材にします。既存のURLと画像を変えず、6件の優先順位だけを変える実験です。
実行後は、きれいかどうかだけで判断しません。
- 最初に読む記事が一目で分かるか
- 6件の差が大きさだけで伝わるか
- 375pxで横スクロールが出ないか
- 実装へ渡してもURL・画像・計測が残るか
この4点を満たした案だけ、実装へ渡します。Claudeが選ぶのではなく、人が観察して判断します。
実際に開いて確認した範囲
Chromeでclaude.ai/designを開き、次の状態を確認しました。
| 確認項目 | 状態 | このページでの扱い |
|---|---|---|
| テンプレート一覧 | 実画面で確認 | UI mockups、Slides、Wireframeなどが表示された |
| 既存プロジェクト | view-onlyで確認 | 開く・ダウンロードまで確認した |
| 新規生成・直接編集 | 未確認 | 契約終了中のため、できたとは書かない |
| Design MCP | 未接続 | 公式情報を基に手順を掲載した |
つまり、このページで確認済みなのは画面とview-only状態です。新規生成、直接編集、CLIとの往復は、再契約後に上のプロンプトで検証します。
向いていない場面と制約
- Claude Designは研究プレビュー／ベータで、対象プランと利用権限が必要
- Web・Desktopが主なキャンバス操作の場所で、スマホ向けの作業環境ではない
- view-onlyでは新しい生成や編集を試せない
- 使用量はClaudeのほかの機能と共有される
- 同時編集やインラインコメントは安定しない場合がある
- 大きなコードベースや不完全なデザインシステムは、出力の質へ影響する
画面を見て比較するならWeb・Desktop。コードと実装へつなぐならClaude Code＋Design MCP。この順番を決めてから使うと、できることとできないことを混同しにくくなります。
