Claude Codeの/designとは｜ターミナルから画面デザインを扱うコマンド
/designとは、Claude Codeのターミナルからデザインプロジェクトを作成・編集し、Claude Designと同期するためのコマンドです。
Anthropicは公式ブログで、Claude Codeから始めたい場合はターミナルを離れずにデザインプロジェクトを作成・編集・同期できると説明しています（出典: claude.com）。製品ページにも同じ趣旨の記載があり、リポジトリのデザインシステムを取り込む/design-syncと対になる形で紹介されています。
つまり/designは、Claude Codeを使っている人が、ブラウザやデスクトップアプリへ移動せずにデザイン側の作業を始めるための入口だと考えると分かりやすくなります。
関連記事：Claude Codeとは？できること・料金・使い方と社内導入の判断軸
/designでできること
公式の記載から確認できるのは、デザインプロジェクトの作成・編集・同期という3つの操作です。作ったものはClaude Design側のプロジェクトとして扱われるため、ターミナルで着手した内容をあとからブラウザ側で開いて続けることもできます。
逆に、ブラウザ側で調整した内容をターミナルへ戻すこともできます。デザインを詰める作業と、実装を進める作業を、同じプロジェクトを見ながら行き来できる状態になります。
ここで注意したいのは、公式が説明しているのは「デザインプロジェクトを扱える」という範囲までだという点です。画面のどこを操作するのか、どんなオプションが用意されているのかといった/design自体の操作手順は、2026年8月18日時点で公式ドキュメントに記載がありません。
Claude Designとの関係
Claude Designは、会話からデザインやインタラクティブなプロトタイプ、プレゼン資料を作るための機能です。生成物は画面右側のcanvasに表示され、チャットでの指示、要素へのコメント、テキストの直接編集、Claudeが用意する調整スライダーで詰めていきます（出典: claude.com）。
この本体機能に対して、/designはClaude Code側から同じプロジェクトへ入るための通路にあたります。デザインを生成する仕組みそのものはClaude Design側にあり、Claude Codeはそこへ連携していると理解しておくと、後述する4つの接点の関係も整理しやすくなります。
関連記事：Claude Designとは？できることと使い方、Figma/Canvaとの違いを実例つきで解説
Claude Codeとデザインをつなぐ4つの接点｜/designと/design-syncの違い
Claude CodeとClaude Designの間には、名前の似た入口が複数あります。3つはClaude Code側から実行するコマンドで、残る1つはClaude Design側から実装へ渡す機能です。起点がどちら側にあるかで役割が分かれます。
下表は、起点・何をするか・公式ドキュメントへの掲載状況の3観点で4つを整理したものです。自分がやりたいのが「デザインを作ること」なのか「既存の見た目に合わせること」なのか「実装に渡すこと」なのかで、使う入口が変わります。
| 接点 | 起点 | 何をするか | 公式ドキュメントの掲載 |
|---|---|---|---|
| /design | Claude Code | デザインプロジェクトを作成・編集・同期する | スラッシュコマンド一覧には未掲載（ブログと製品ページに記載） |
| /design-sync | Claude Code | リポジトリのReactデザインシステムを変換してClaude Designへアップロードする | 掲載あり |
| /design-login | Claude Code | claude.aiアカウントでデザインシステムへのアクセスを認可する | 掲載あり |
| Claude Codeへのハンドオフ | Claude Design | 完成したデザインを実装へ渡す（ローカルのコーディングエージェント、またはClaude Code Webを選択） | ヘルプセンターに掲載 |
混同しやすいのは/designと/design-syncです。前者はデザインそのものを扱うのに対し、後者は自社のコンポーネントを送り込むための準備にあたります。/design-loginはその準備の前段で、claude.aiアカウントの認可を通す役割を持ちます（出典: claude.com）。
4つ目のハンドオフだけは向きが逆で、Claude Design側で仕上げたものをClaude Codeへ渡します。公式ヘルプセンターでは書き出しの選択肢のひとつとして案内されており、ローカルのコーディングエージェントへ送るか、Claude Code Webへ送るかを選べます。スクリーンショットを渡して作り直させるのではなく、それまでの作業を引き継いだ状態で実装へ進める点が特徴です。
全国8,000人調査で、AI活用方法によって生産性向上に約3.8倍の差が生まれることが判明。
デザインシステムを取り込む仕組み｜Claude Code designの出力を自社の見た目に合わせる
AIが出した画面案を、そのまま自社のプロダクトに載せられることはほとんどありません。色やタイポグラフィ、ボタンの形が既存の画面と揃っていなければ、結局は作り直しになります。この差を埋めるのが/design-syncによるデザインシステムの取り込みです。
/design-syncがアップロードするもの
/design-syncは、リポジトリにあるReactのデザインシステムを変換してClaude Designへアップロードするコマンドです。取り込んだあとは、Claude Designが生成する画面が実際のコンポーネントを使うようになります（出典: claude.com）。
デザインシステムには名前を付けられます。複数のプロダクトを持っている場合でも、どの資産を使って生成するのかを指定できる作りになっています。
Anthropicは公式ブログで、取り込んだコンポーネントと生成結果を突き合わせて検証し、ずれていれば表示前に自動で補正する仕組みについても説明しています。デザインシステムの取り込み元は、リポジトリのほかデザインファイルやアップロードにも対応しています。
初回同期の所要時間と利用できない環境
初回の同期では、すべてのコンポーネントを検証するため、規模の大きなリポジトリでは数時間かかることがあります。試す時間帯を選ぶ必要がある処理だと考えておくと安全です。
また、利用できる基盤にも条件があります。AnthropicのAPIでは利用できますが、Amazon Bedrock、Google CloudのAgent Platform、Microsoft Foundry、Claude Platform on AWSでは、内部で使うツールがclaude.aiへ到達できないため、このコマンドは利用できません（出典: claude.com）。自社がどの基盤でClaude Codeを動かしているかで、使えるかどうかが変わります。
「そのまま使えない」を減らすために取り込みが要る
自社の見た目に合わせる工程が要る理由は、実務でつまずいている箇所とも重なります。GiftXが実施したビジネス職生成AI活用実態調査2026では、デザイナーの個人課題として「出力が実務でそのまま使えない」が突出して多く挙がりました（複数回答）。同調査でのデザイナーのAI利用率は60.3%で、使ってはいるものの成果物の精度で止まっている状態がうかがえます。
デザインシステムの取り込みは、この「そのまま使えない」を構造的に減らすための工程です。生成のたびに手で直すのではなく、生成の前提に自社の資産を置いておくという考え方になります。
詳細な調査データは「ビジネス職生成AI活用実態調査（2026年版）」にてご覧ください。
Claude Code designを使う前に確認しておく前提
デザイン機能を試す前に、契約と提供状況の2点を確認しておくと、動かないときの切り分けが早くなります。
対応プランとEnterpriseの既定オフ
Claude Designは、Claude Pro、Max、Team、Enterpriseの各プランでbeta版として提供されており、サブスクリプションに含まれています（出典: claude.com）。追加の契約を結ばなくても、対象プランを使っていれば範囲内です。
ただしEnterpriseプランでは既定でオフになっています。管理者が組織の設定から有効化しないと使えないため、社内で試そうとして反応がない場合は、まず自社の設定状態を確認するのが先になります。
関連記事：Claude Code の料金｜月額プランと従量課金の違い・1人あたりの目安
スラッシュコマンド一覧に/designが載っていない
2026年8月18日時点で、Claude Codeのスラッシュコマンド一覧には/design-syncと/design-loginが掲載されている一方、/designは掲載されていません。同日時点のCHANGELOGにも、このコマンドの追加を記録したエントリは見当たりません。
一方で、公式ブログと製品ページには/designの記載があります。記載場所が分かれているため、コマンド一覧だけを見て「存在しない」と判断してしまうと取りこぼします。手元で反応しない場合も、環境の問題と提供範囲の問題を分けて考える必要があります。
Claude Codeでデザインから実装まで進めた自社事例
GiftXでは、デザインと実装をまたぐ工程にAIを組み込んで運用しています。ここでは実際の数値と、画面1つを作り直すときの変化を紹介します。
開発の工数を約75%削減した実例
GiftXが運営するGIFTFULでは、フロントエンドとバックエンドの開発にClaude Codeを導入し、コード生成・リファクタ・テスト作成をAIと協働する形に切り替えました。その結果、機能追加1件あたりの所要が平均2日から平均半日になり、工数を約75%削減しています。
効いたのは、AIに全部を任せることではなく、担当者がレビューする前提で工程ごとに切り分けたことです。生成された結果を人が確認して直すサイクルを回せる形にしたため、品質を落とさずに所要を縮められました。
全国8,000人調査で、AI活用方法によって生産性向上に約3.8倍の差が生まれることが判明。
画面を作り直すときのBefore/After
社内で使っているWebツールの画面を1つ作り直す場面を考えます。従来は画面イメージを図で起こし、エンジニアと往復しながら仕様を固めていました。図の作成に3時間、すり合わせを3回で3時間、合わせて1画面あたり約6時間かかります。
ターミナルから画面案を複数出し、1案に絞り込んでから実装に渡す形にすると、案出しが30分、すり合わせが1回で1時間、合わせて約1.5時間になります。削減率にして約75%、月に4画面を改修するなら月あたり約18時間相当の差になります。効いているのは案を早く可視化して、決める回数を減らした点です。
Claude Code designでデザインから実装まで進めるときに陥りがちな3つの落とし穴
デザインから実装までをAIでつなごうとするとき、つまずき方には共通の型があります。ツールを入れたこと自体は問題にならず、対象の広げ方と進め方でつまずくケースがほとんどです。ここでは、支援の現場で繰り返し見てきた3つを挙げます。
落とし穴1｜いきなり全てをやろうとする
既存画面の全面刷新から手をつけると、確認すべき箇所が一気に増えて判断が止まります。プロダクト全体を対象にせず、1画面に絞って回すほうが結果的に早く進みます。
落とし穴2｜壮大なAI戦略から考えて手が止まる
デザインから実装までの理想的な体制を先に描こうとすると、関係者の調整だけで数か月が過ぎます。全社の方針を固める前に、手元の1画面で試して判断材料を作るほうが現実的です。
落とし穴3｜既製品のチャット型AIツールでは業務フローに組み込めない
汎用のチャット型AIツールに画面案を出させても、自社のコンポーネントに合わせるカスタマイズが難しく、そのまま実装へ渡せる質には届きません。既存の開発フローに組み込める形にして初めて、手戻りが減ります。
スモールスタートで1業務をAIエージェントに任せる
3つに共通するのは、範囲を広げすぎることです。まず1業務、たとえば「1画面のデザイン案を出して実装に渡すまで」に絞り、そこで型ができてから対象を広げるほうが確実に進みます。GiftXでは、こうしたスモールスタート前提のAIエージェント構築を1業務単位から伴走支援しています。詳細はAIエージェント構築支援サービスをご覧ください。
Claude Code designに関するよくある質問
Claude Codeの契約だけでデザイン機能は使えますか
Claude DesignはClaude Pro、Max、Team、Enterpriseの各プランにbeta版として含まれており、別途の契約は不要です。対象プランを使っていれば範囲内ですが、Enterpriseでは管理者による有効化が必要です。
/designが公式のコマンド一覧に載っていないのはなぜですか
理由は公表されていません。2026年8月18日時点で、公式ブログと製品ページには記載がある一方、スラッシュコマンド一覧とCHANGELOGには見当たらない状態です。記載場所が分かれている点だけを事実として押さえておくのが安全です。
Claude DesignとClaude Codeはどちらから始めるべきですか
作りたいものが画面のデザイン案で、実装は後から考える場合はClaude Design側から始め、仕上がったものをハンドオフで渡すのが素直です。すでにリポジトリで作業しているならターミナル側から入るほうが移動が減ります。
デザインシステムを取り込むと何が変わりますか
生成される画面が自社の実コンポーネントを使うようになります。色やボタンの形を毎回手で直す作業が減るため、出てきたものをそのまま検討の土台にしやすくなります。
Amazon BedrockでClaude Codeを使っていますが同期できますか
Amazon Bedrock、Google CloudのAgent Platform、Microsoft Foundry、Claude Platform on AWSでは、内部で使うツールがclaude.aiへ到達できないため/design-syncは利用できません。AnthropicのAPIでは利用できます。
まとめ
Claude Codeからデザインを扱う入口は1つではありません。ターミナルから作る/design、自社のコンポーネントを送り込む/design-sync、その認可を通す/design-login、そしてClaude Design側から実装へ渡すハンドオフの4つがあり、起点と役割が分かれています。使い始める前に確認したいのは、対応プランとEnterpriseでの有効化、それに自社が使っている基盤で同期が可能かという3点です。
生成された画面をそのまま使えるようにする鍵は、デザインシステムを先に取り込んでおくことにあります。そのうえで、いきなり全面刷新を狙うのではなく、まず1画面の改修という1業務をAIエージェントに任せ、そこで型を作ってから広げていくほうが確実です。
AIエージェントの活用をご検討の方へ
本記事で紹介したAIエージェントの活用に向けて、自社の業務でも具体的に進めたい・相談したいとお考えの方は、ぜひGiftX AIエージェント構築支援までお問い合わせください。
GiftX AIエージェント構築支援では、貴社の業務に合わせて1業務単位のスモールスタートから本番運用まで、AIエージェント構築をワンストップで支援します。ユースケースの洗い出しから、PoC、本番運用、社内ナレッジ化まで伴走します。
AI活用にご関心のある方は、ぜひ一度ご相談ください。
▶ GiftX AIエージェント構築支援の詳細・お問い合わせはこちら
