メインコンテンツまでスキップ

/design コマンド：コードの前にアートボード

中級

Anthropic は Claude Code に、意図的にコーディングを飛ばすスラッシュコマンドを投入しました。/design は平易な英語のブリーフから編集可能な UI アートボードのキャンバスを公開します。あなたが 1 つを選んで手直しし、その後でようやく Claude がそれを実際のコードに変えます。成果物がコードではない初めての Claude Code 機能です — デザインフェーズそのものがアーティファクトなのです。

What you'll learn
  • アートボードとは何か、そしてそれがコーディングファーストの流れをどう変えるかを理解する
  • 初回から /design を正しく実行する（バージョン、プラン、プロンプトの形）
  • 3 つのフェーズを知る：下書き → 選択+編集 → 実装
  • 既知の 3 つの罠を避ける：トークンコスト、リポジトリからのスタイルのずれ、無料ティアの壁
  • 同じ週に出荷された Concise 出力スタイルと /design を組み合わせる

実際には何なのか​

/design はスキルです — 単なるスラッシュコマンドではありません。呼び出すと、Claude Code は Claude Design のアートボードワークフローに処理を渡し、公開されたキャンバスへのリンクを表示します。アートボードは操作できる動くスクリーンです：色を変える、ブロックを動かす、余白を広げる。アーティファクトランタイム上でレンダリングされるため、リポジトリ内のファイルではなく、あなたの Claude アカウントに存在します。

この区別は重要です。/design の出力は URL であり、diff ではありません。Claude に実装を指示するまで、git status には何も現れません。

What you'll learn
  • 可用性：Pro、Max、Team、Enterprise。無料プランでは利用不可。Claude Code v2.1.233 以降が必要。CLI と Claude Code Desktop の両方で出荷。
  • ステータス：リサーチプレビュー — 呼び出しの形、出力形式、含まれるアートボード数は変わると想定してください。

3 つのフェーズ​

Guided walkthrough1 of 3
  1. そのスクリーンが何のためのものかを述べたブリーフで /design を実行します。Claude は複数のアートボードバリアントを並べて公開し、それぞれ編集可能です。リンクが渡されるので、ブラウザで開きます。

効果のあるプロンプトの形​

/design は、ピクセル指定ではなく目的と対象ユーザーを記述するブリーフに報います。2 つのパターン：

/design — 機能ブリーフ

/design a few options for the sign-in screen. Users are engineers on mobile.
Optimize for one-hand thumb reach; SSO is the primary path, email/password
secondary. Show a state for a locked-out account.

/design — 既存サーフェスの再設計

/design redesign our composer based on what people actually use it for:
drafting long messages, attaching files, and switching model. The current
version buries the model picker; make it a first-class control.

これらのブリーフで静かに大きな働きをしている 2 つのこと：

  • ユーザーと制約（「モバイルのエンジニア」「片手の親指の届く範囲」）を名指しすることで、Claude をデフォルトの統計的平均レイアウトから引き離します。
  • 失敗状態（「ロックアウトされたアカウント」）を名指しすることで、アートボードがハッピーパスだけでなく空・エラー・エッジケースをカバーするよう強制します。

3 つの罠​

1. トークンを大量に消費する。 呼び出しごとに複数のフル忠実度アートボードが生成されるため、通常のチャットターンより速く予算を食います。リサーチプレビューのユーザーは一貫してこれを報告しています。/design は使い捨てのスケッチではなく、本当の意思決定のために取っておいてください。

2. コードベースと一致しない。 Claude Design は既存のコンポーネントではなく、汎用的な美学から生成します。アートボードをアプリの他の部分と馴染ませたいなら、リポジトリのルートに DESIGN.md（フォント、スペーシングスケール、カラートークン、既存コンポーネント）を前置きし、ブリーフでそれを参照させてください — /design の実装フェーズがあなたのボタンプリミティブを再発明しないようにするのと同じ手口です。

/design の前に DESIGN.md を参照させる

Before you draft anything, read DESIGN.md and list the type scale, spacing
scale, and named color tokens you'll use. Then /design a settings screen
that respects those tokens.

3. 無料ティアの壁。 /design は有料プラン（Pro 以上）の背後にゲートされています。チームが Claude Code のシートに支払っていても、契約者が無料プランなら、その人には /design が黙って存在しません。

Concise 出力スタイルと組み合わせる​

Anthropic は同じ週（v2.1.237）にビルトインの Concise 出力スタイルを出荷しました。Claude が結果から始め、前置きを省くようにするもので、/design との相性が良いです。引き渡しのターン（「オプション 2 を実装して」）にはナレーションが不要だからです：

~/.claude/settings.json
{
  "outputStyle": "Concise"
}

Concise はエラーレポート、セキュリティ警告、破壊的操作の確認については完全な詳細を保持します — 失うのはナレーションであり、安全のガードレールではありません。

/design が勝つとき vs. 直接コードを書くとき​

/design を使うとき飛ばすとき
視覚的な決定が難しい部分（新しいサーフェス、不明確なレイアウト）レイアウトはすでに分かっていて、必要なのはコードだけ
コミット前に 3 つ以上の方向性を安く比較したい既存スクリーンの形ではなくロジックを反復している
ステークホルダーが承認のためにクリック可能に近いアーティファクトを必要としているスクリーンが既存のデザインシステムと 1:1 で一致しなければならない
失敗・空・ローディング状態が重要使い捨ての社内ツールをプロトタイピングしている

自明でない仕組み​

  • キャンバス URL は共有可能。 アートボードはアーティファクト上にあるため、あなたの Claude アカウントのビューにアクセスできる誰にでもリンクが機能します — 何もエクスポートせずにデザイナーや PM に送れます。
  • 反復はデュアルチャネル。 キャンバス上で編集しかつ Claude Code スレッドでプロンプトを続けられます。両方が同じコンテキストに流れ込みます。
  • 実装はそれでもリポジトリを尊重する。 「実装して」と言った時点で、Claude Code は通常のリポジトリ認識の挙動に戻ります — あなたの Tailwind 設定、コンポーネント、ファイル構造を使います。アートボードは目標、コードベースは地形です。
Enter キーまたはスペースキーでカードを裏返します。左右の矢印キーでカードを移動できます。用語を表示しました。
1 / 7

理解度チェック

0/4
  1. /design のアートボードはどこに存在しますか？
  2. Claude Code v2.1.230 と無料の Claude アカウントを使っています。/design はどうなりますか？
  3. 有用なアートボードを得る可能性が最も高いブリーフの形はどれですか？
  4. Concise 出力スタイルが /design と相性が良いのはなぜですか？

出典と参考資料​

次へ​