Claude Code /designの使い方 — CLIでUI案を並べて選ぶ
/designはCLIでUI案を複数ドラフトし、artboardを選んで実装まで進めるバンドルスキルです。使い方、動かないときの切り分け、/design-syncとの違いを扱います。
/designは、UIモックアップや画面フロー、ランディングページ、ポスターの案を1つのキャンバスに並べ、選んだ案をそのまま実装に進められるClaude Codeのバンドルスキルです。ブリーフを1行渡すと、複数のアートボード(artboard、キャンバス上に並んだ案の単位)を含むClaude Design artifactが公開されます。
/designは何を出すコマンドか
単一のダッシュボードやレビュー画面を1枚作る通常のArtifactと違い、/designは「描く対象を決めずに、まず案を見たい」ときの入口です。Week 34のリリースダイジェストでは、このスキルが紹介されました。Claude Designのartboardワークフローをartifacts基盤の上でCLIとデスクトップアプリに持ち込むもので、research previewの扱いです。
コマンドリファレンスの説明は次のとおりです。
Draft UI mockups, screen flows, landing pages, or posters as artboards on one canvas, published as a Claude Design artifact
例として/design a settings screen for a mobile banking appが載っています。
使い方 — ブリーフからartboardの選択まで
/designの3ステップ
- 1
ブリーフを渡す
次のように、描いてほしいものを1行で書きます。
> /design redesign the composer based on what people actually use it for - 2
公開されたキャンバスを開く
Claudeが公開したキャンバスのリンクを、デスクトップブラウザで開きます。要素を選んで変更すると、編集は自動で保存されます。artboardごとにPNGまたはPDFで書き出せます。
- 3
実装する案を伝える
採用するartboardをClaudeに伝えると、以降は通常のセッションと同じ流れで実装に進みます。
/designが公開するのは、Claude Code Artifactsのデザインシステムと共同編集で扱う通常のArtifactと同じ基盤の上のページです。通常のArtifactでは、Claudeがプロジェクト内の既存のデザインシステムを探します。CLAUDE.mdやテーマファイルなど、Claudeが見つけられる場所に書いておくと使われます。実装そのものはClaude Codeの通常のセッションです。
/designが動かないときの切り分け
/designが動かない原因は、4系統のうち3つは公式の利用条件、残る1つは同名コマンドの衝突です。
/designが動かない4つの系統
プロバイダ・認証が対象外
Amazon Bedrock・Google Cloud's Agent Platform・Microsoft Foundry・Claude Platform on AWSではコマンド自体が使えません。APIキー、ゲートウェイトークン、クラウドの認証情報のセッションでも公開できないため、
/loginでclaude.aiアカウントに入ります。組織の設定で止まっている
CMEK・HIPAA・Zero Data Retentionのいずれかが有効な組織ではArtifactsが使えません。Enterpriseでは、OwnerがOrganization settings > ArtifactsでDesignテンプレートをオンにする必要があり、オフのままだと
/designは案を作りません。バージョンが古い
コマンドリファレンスの要件はv2.1.265以降です。
claude --versionで確かめます。別の/designが出てくる
同じ名前で、
/design-syncと対になる同意用コマンドも登録されていることがあります。メニューに説明の違う/designが2つ並び、Agent SDK経由のようにartifactsが使えない環境ではconsent | revokeの使い方表示だけが出た、というIssueがあります。
バージョンは次のコマンドで確かめます。
claude --versionv2.1.287では次の表示です。
2.1.287 (Claude Code)組織ポリシーはClaude Codeがapi.anthropic.comから読み込みます。ポリシーを読めないとArtifactsは使えない扱いになるため、プロキシやVPNの内側ではapi.anthropic.comを通す設定を管理者に頼みます。
CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFICを設定している環境では、Artifactsは既定でオフです。Agent SDK・GitHub Action・MCPサーバーの文脈も同じです。個人でオフにする手段は/configのArtifacts行のほかに3つあります。CLAUDE_CODE_DISABLE_ARTIFACT=1、設定の"enableArtifact": false、permissions.denyへのArtifactの追加です。v2.1.242以降は、プロジェクトの設定ファイルに"enableArtifact": falseを書けば、そのプロジェクトだけオフにできます。trueを書いても、オンには戻りません。
公開リンクで共有したあとは、Claude Codeが会話ごとに1回、変更前に承認を求めます。ログインしていない人や組織外の閲覧者には「Content is user-generated and unverified.」と表示されます。
同名コマンドの衝突として報告されている症状
GitHubのanthropics/claude-codeには、/designが期待どおり動かないというIssueが複数あります。
- #92138: canvasスキルと同意コマンドが同じ
/designで登録され、メニューに2回出る。artifactsが使えない文脈では、ブリーフを付けても同意コマンドの使い方表示になる - #96088: v2.1.278のWindows(VS Code)で、
/designがキャンバスを作らずログインや同意の選択肢を出す - #97459: Remote Control経由のセッションで
designスキルが見えず、/design consentが403になる。同じコマンドがローカルでは動いたと報告されている
いずれも報告の段階で、原因や修正は確定していません。手元で/designが使い方表示だけを返すときは、バージョンと実行環境(CLI・Remote Control・Agent SDK)を見比べると切り分けやすくなります。
利用条件とバージョン
| 条件 | 内容 |
|---|---|
| プラン | 内容Pro・Max・Team・Enterpriseのいずれか。Pro・Maxに管理者設定はなく、Team・Enterpriseでは既定でオンで、Ownerが組織単位でオフにできる |
| 実行面 | 内容Claude Code CLI、またはデスクトップアプリ1.13576.0以降。Claude TagとArtifactsが組織で有効なら、Claude Tagのセッションからも公開できる |
v2.1.265以降でも、ANTHROPIC_BASE_URLでサードパーティのAnthropic互換エンドポイントを使うと、すべてのターンがHTTP 400で失敗する不具合がありました。v2.1.265から起きていた問題です。Artifactツールの入力スキーマにある正規表現を、それらのエンドポイントが拒否したためで、v2.1.268(2026年9月10日)で修正されています。
Designテンプレートは公式でbeta扱いです。
公開後の共有範囲
公開直後のDesign artifactは、作った本人だけに見えます。他の人に見せるには、ブラウザで開いたページヘッダーのShareを使います。
プランごとの共有の選択肢
Team・Enterprise
組織内の特定の人、または組織全員に見せられます。共有した相手には、閲覧者か編集者のどちらかの役割を付けます。公開リンクはOwnerがExternal sharingをオンにするまで使えません。
Pro・Max
組織内共有は選択肢にありません。公開リンクにすると、claude.aiにサインインしていない人でも開けます。
編集者になった人は、ArtifactのURLをClaudeに渡して現在の内容を読み込ませ、変更を加えて再公開します。ページを開いている全員に更新がその場で反映されます。編集者の設定はTeam・Enterpriseだけの機能です。
External sharingは、リンクを知っている誰にでもArtifactを見せられる設定です。オフにすると、既存の公開リンクも再びオンにするまで開けなくなります。組織外へのメール招待は別の設定(Email invitations outside your organization)です。個別のArtifactだけ例外として外部共有を許す「Allow external sharing」もあります。
Artifactは公開のたびに1つのバージョンになり、ページヘッダーのShareから、閲覧者に見せるバージョンを選べます。
Team・Enterpriseでは、管理者がOrganization settings > Data and privacyで保持期間を設定できます。まだ本人だけに見えるArtifactと共有済みのArtifactには、別々の期間を決められます。
Enterpriseの管理者設定
スタンドアロンのClaude Design(claude.ai/design)は、Designテンプレートとは別の製品です。設定もOrganization settings > Claude Designに別にあり、片方をオンにしてももう片方はオンになりません。テンプレートをオフにしても、そのテンプレートで作成済みのArtifactには影響しません。Enterpriseのカスタムロールでは、権限がテンプレートごとに分かれていて、Designには「Designテンプレートからのartifact作成」があります。デザインシステムの作成・編集は、別に「Design systems」の権限で分かれています。
/designでできることはコマンドの説明より広い
サポート記事では、Claude Codeで自分のアイデアをデザインにするよう頼むか、/designでデザインの作成・編集・同期を行います。デスクトップでもターミナルでも使えます。
デザインをコードベースに取り込む、コードをライブプロトタイプとして書き出す、最初から最後までClaudeに組ませる、もサポート記事では/designの守備範囲です。コマンドリファレンスはドラフトの説明に絞っているため、2つのページで/designの守備範囲の書き方に差があります。
/design-syncとの違い
名前が似ていますが、別のコマンドです。コマンドリファレンスの説明を並べると、目的が重ならないことが分かります。
/designと/design-sync
/design
UIモックアップなどをartboardとして1つのキャンバスに並べ、選んでから実装します。通常のArtifactが1ページを作るのに対し、複数案の比較が目的です。
/design-sync
リポジトリのReactデザインシステムを変換してClaude Designにアップロードし、以降のデザインに自分のコンポーネントを使わせます。初回の同期は、大きなリポジトリだと数時間かかることがあります。
/design-syncのためのログインは、別に/design-loginで行います。詳しい使い方はClaude Code design-syncの使い方にあります。
どちらもコマンド一覧で[Skill]と分類されるバンドルスキルです。バンドルスキルと組み込みコマンドの違いのとおり、disableBundledSkillsをtrueにすると、バンドルスキルは両方とも消えます。片方だけ隠すならskillOverridesにコマンド名を指定します。
まとめ
複数案を見比べてから実装に入りたいなら/design、既存のReactコンポーネントをデザイン側に反映させたいなら/design-syncと使い分けます。/designはresearch preview、Designテンプレートはbetaで、同名コマンドのIssue 3件は未解決のままです。チームで常用する前に、Remote ControlやAgent SDKなど実際に使う経路で1回試しておくと、使い方表示だけが出る状況を早めに見分けられます。