Claude Code /designの使い方 — CLIでUI案を並べて選ぶ
/designはCLIでUI案を複数ドラフトし、artboardを選んで実装まで進めるバンドルスキルです。使い方と利用条件、/design-syncとの違いを扱います。
/designは、UIモックアップや画面フロー、ランディングページ、ポスターなどの案を1つのキャンバスに並べて比較し、選んだ案をそのまま実装に進められるClaude Codeのバンドルスキルです。ブリーフを1行渡すだけで、Claudeが複数のアートボード(artboard、1枚のキャンバスに並んだ案の単位)を含むDesign artifactを公開します。
/designで何ができるか
/designは、Claude Designのartboardワークフローをartifacts基盤の上でCLIとClaude Code Desktopに持ち込むスキルです。公式のコマンドリファレンスは「Draft UI mockups, screen flows, landing pages, or posters as artboards on one canvas, published as a Design artifact」と説明しています。
単一のダッシュボードやPRレビュー画面をその場で作る通常のArtifactと違い、/designは最初から「複数案を並べて比較する」ことを前提にした専用フローです。ブリーフを渡すとClaudeが複数のartboardを一度に作り、どれを採用するかをあとから選べます。
Week 34のリリースダイジェストで紹介され、対象プランはPro・Max・Team・Enterpriseです。ダイジェスト本文では「Available on Pro, Max, Team, and Enterprise」とだけ紹介されており、複数案を先に見てから実装に進む、という順序そのものが新しい点です。
コマンドリファレンスが挙げる対象は「UI mockups, screen flows, landing pages, or posters」の4種類です。画面単体のモックアップだけでなく、複数画面の遷移を示す画面フロー、マーケティング向けのランディングページ、印刷物寄りのポスターまで同じ/designの入口から作れます。ブリーフの書き方によって出てくるartboardの粒度が変わる、実装前の比較専用の入口という位置づけです。
使い方 — ブリーフを渡してartboardを選ぶまで
手順は3段階です。ブリーフを渡す、公開されたCanvasでartboardを選ぶ、実装するartboardをClaudeに伝える、の3つで完結します。
> /design redesign the composer based on what people actually use it forClaudeはブリーフをもとに複数のartboardを含むCanvasを作り、公開したDesign artifactへのリンクを印字します。リンクを開き、デスクトップブラウザでartboardをレビューします。要素を選んで変更すると、その編集は自動的に保存されます。各artboardはPNGまたはPDFとして書き出せます。
採用する案が決まったら、どのartboardを実装するかをClaudeに伝えます。ここから先の実装は、通常のClaude Codeのセッションと同じ流れで進みます。/designが公開するDesign artifactは、Claude Code Artifactsのデザインシステムと共同編集で扱っている通常のArtifactと同じ基盤(artifacts)の上に成り立つ機能です。
利用条件とバージョン
/designは、Artifactsが使える状態であることが前提で、そのうえで固有のバージョン条件が重なります。
| 条件 | 内容 |
|---|---|
| プラン | 内容Pro・Max・Team・Enterpriseのいずれか |
| 認証 | 内容claude.aiアカウントでのサインイン(/login)。APIキーやゲートウェイトークンのセッションは対象外 |
| モデルプロバイダ | 内容Anthropic API。Amazon Bedrock・Google Cloud's Agent Platform・Microsoft Foundry・Claude Platform on AWSでは使えない |
| 組織ポリシー | 内容CMEK・HIPAA・Zero Data Retentionが有効な組織では使えない |
| バージョン | 内容Claude Code v2.1.265以降 |
| 実行面 | 内容Claude Code CLI、またはClaude Code Desktop |
Amazon Bedrock・Google Cloud's Agent Platform・Microsoft Foundry・Claude Platform on AWSでは、内部の基盤がartifactsに到達できないため、/designはコマンド自体が使えません。この制約はArtifacts全般に共通するもので、/designだけの特別な制限ではありません。
公開後の共有範囲
/designが公開するDesign artifactは、公開した本人だけに見える状態から始まります。ブラウザで開いた際のページヘッダーにあるShareの操作から、他の人に見せる範囲を広げます。
共有できる範囲はプランによって変わります。Team・Enterpriseプランでは、組織内の特定の人だけに見せる、または組織全員に見せるという選択ができます。Pro・Maxプランには組織内共有という概念自体がなく、誰でも開ける公開リンクにするのが唯一の共有方法です。Team・Enterpriseプランでも、公開リンクによる社外共有はOwnerが有効化するまで既定でオフになっています。
閲覧者に編集も許可したい場合は、共有相手を閲覧者から編集者に切り替えます。編集者はArtifactのURLを渡されたセッションから同じページを更新でき、更新はページを開いている全員にその場で反映されます。この共有・編集の仕組みは通常のArtifactと共通で、/designが作るDesign artifactも同じ枠組みに従っています。
/design-syncとの違い
名前が似ている/design-syncとは別のコマンドです。/designはUI案を複数ドラフトしてその場で比較する機能で、/design-syncはリポジトリのReactデザインシステムをClaude Designにアップロードして同期する機能です。公式のコマンドリファレンスの説明を並べると違いがはっきりします。/designは「Draft UI mockups, screen flows, landing pages, or posters as artboards on one canvas」、/design-syncは「Convert your repo's React design system and upload it to Claude Design, so designs it produces use your real components」です。前者は毎回の実装前にアイデアを並べて選ぶための機能で、後者は既存のコンポーネントをClaude Design側に反映させるための機能なので、目的がまったく重なりません。詳しい使い方はClaude Code design-syncの使い方にまとめています。
両者とも公式のコマンド一覧で[Skill]に分類されるバンドルスキルです。バンドルスキルと組み込みコマンドの違いで解説した挙動がそのまま当てはまり、disableBundledSkillsを有効にすると両方とも無効になります。片方だけ隠したい場合は、skillOverridesで対象のコマンド名を指定します。
使い分け早見表 — /design・Artifact・/design-sync
同じ「デザインに関わるコマンド」でも、目的によって選ぶものが変わります。
| 状況 | 使うもの | 理由 |
|---|---|---|
| UIの複数案を並べて比較してから決めたい | 使うもの/design | 理由artboardを並べたCanvasで選択・編集・書き出しができる |
| すでに方針が決まったダッシュボードやレビュー画面を1つ作りたい | 使うもの通常のArtifact | 理由単一ページの生成で完結し、/designの比較フローは不要 |
| リポジトリの既存Reactコンポーネントをそのままデザインに使いたい | 使うもの/design-sync | 理由Claude Designにコンポーネントを同期し、以降の生成に反映する |
よくあるつまずき
- Bedrock・Google Cloud's Agent Platform・Foundry・Claude Platform on AWSで動かない: これらの環境ではartifacts自体が使えないため、
/designはコマンド自体が利用不可になります。Anthropic APIのセッションで試します - バージョンが古くて起動しない: v2.1.265より前では
/designは使えません。claude --versionで確認し、必要ならアップデートします - 編集がすぐ反映されない感覚になる: 公開されたCanvasはデスクトップブラウザで開いてレビューする前提の機能です。要素の変更は自動保存されるので、明示的な保存操作は不要です
- APIキーのセッションで使えない:
/designはclaude.aiアカウントでのサインインが前提です。APIキーやゲートウェイトークンだけで動かしているセッションでは公開そのものができません - 共有範囲を勘違いする: 公開直後のDesign artifactは自分だけに見える状態です。他の人に見せるにはページヘッダーの共有操作が必要で、Pro・Maxプランでは公開リンク以外の共有手段がありません
- 組織のポリシーで公開自体ができない: CMEK・HIPAA・Zero Data Retentionのいずれかを有効化している組織では、
/designに限らずArtifacts自体が使えません。管理者に組織設定を確認します - モデルプロバイダの違いに気づかない: Anthropic API以外の経路で使っているセッションでは、
/designが見当たらない場合があります。利用しているプロバイダを先に確かめておくと切り分けが早くなります
まとめ
/designは、ブリーフから複数のUI案をartboardとして並べ、選んだ案をそのまま実装に進められるClaude Codeのバンドルスキルです。Pro・Max・Team・Enterpriseプランのartifacts利用条件に加えて、Claude Code v2.1.265以降というバージョン条件が現在の公式ドキュメントには明記されています。名前が似ている/design-syncはリポジトリのReactコンポーネントをClaude Designに同期する別のコマンドなので、複数案を比較したいときは/design、既存コンポーネントを反映させたいときは/design-syncと使い分けます。バージョン条件が発表後に引き上げられているので、実行前に手元のバージョンとプランの組み合わせを確認しておくと迷いません。