Claude CLIに「/design」が追加、ブリーフ一言でUIアートボードを生成して実装まで完結

AnthropicがClaude CLIとCode Desktopに「/design」スキルを追加したことで、一言のブリーフを入力するだけでUIアートボードを自動生成し、そのままコードに実装できるようになりました。

テキスト一行から複数のUIアートボード候補が生成される

使い方はシンプルです。Claude Code上で「/design」と入力し、続けて設計意図を一言書くだけ。「ユーザーが本当に使う機能に絞って、コンポーザー画面を再設計して」のように打ち込むと、Claudeが複数のUIアートボード候補をキャンバス形式で生成・公開します。英語でも日本語でも入力でき、ランディングページ・ダッシュボード・設定画面など、用途に応じた構成を複数パターン提案します。

各アートボードはクリックで選択でき、テキストの書き換えや要素の配置調整も画面上で直接行えます。気に入ったデザインを選んだら「これを実装して」と続けるだけ。モックアップの確認からコード生成まで、1セッション内で完結します。

Figmaとエディタを行き来するロスタイムがなくなる

これまでのUIデザインフローでは、FigmaやAdobe XDでモックアップを作り、デザイナーとエンジニアが認識をすり合わせてからコードに書き直す工程が当然の手順でした。ツールを切り替えるたびに共有の手間が発生し、実装のたびにモックアップを参照する往復が積み重なります。規模が大きくなるほど、設計意図がコードに届くまでの摩擦は増えます。

/designはその往復を一本のCLIセッションに収めます。PMが「こういう画面にしたい」と一言打ち込み、Claudeがアートボード候補を返し、エンジニアが選んでそのまま実装を指示する。デザイナー・PM・エンジニアが同じツールの中でフィードバックループを回せます。

リサーチプレビューとして段階的に展開、チーム共有にも対応

/designスキルはClaude Code バージョン 2.1.233 以降で利用可能で、現時点では Pro・Max・Team・Enterpriseアカウント向けのリサーチプレビューです。Claude Codeはエンタープライズ向けのガバナンス機能も整備されており、組織規模での活用が着実に広がっています。

生成されたアートボードはClaudeのアーティファクトシステム上に保存されるため、チームメンバーとリンクで共有して意見を集めることもできます。「モックアップを先に見せてから実装に入る」という流れをCLIの外に出ることなく回せます。

「コードを書くためのツール」だったClaude Codeに、/designの追加はデザインという上流工程を取り込んだことになります。設計意図とコードを同じ場所で管理できる環境は、ソフトウェア開発における分業の境界線を変えていくことになりそうです。

ドリップ（執筆）

「モックアップとコード、どちらが先か」という議論をずっと見てきた気がします。

/designを使うと、その問いがそもそも成立しなくなります。ブリーフを打ったら候補が並んで、選んだらコードになる。設計とコードが同じ場所にある状態は、思ったより自然でした。

まず一言書いてみるだけで、感覚はつかめると思います。