Anthropic、ターミナルでのUIモックアップ作成用にClaude Codeへ/designコマンドを追加

Anthropicは、ターミナルを離れることなくUIモックアップの作成、反復、表示ができる新しい/designコマンドをClaude Codeに追加しました。

ターミナル内で直接UIプロトタイピング

Figmaとシェルを行き来する代わりに、/design a few options for a login screen（ログイン画面のオプションをいくつか作成して）といったコマンドを入力できるようになりました。Claudeは、高精度なモックアップを表示する複数のインタラクティブな「アートボード」を返します。プロダクションコードを一行も書く前に、レイアウトを比較し、お気に入りを選び、追加の質問をして見た目を洗練させることができます。

コードベースに基づいたコンテキスト認識型モックアップ

開発者のNate Parrott氏は、Claudeが実際に現在のリポジトリを読み取っていると指摘しています。カラーパレット、コンポーネントライブラリ、レイアウトの慣習を抽出し、各デザインをプロジェクトの既存のスタイルに合わせて調整します。結果は「Artifacts」として表示されます。これはClaude内の専用ビューで、別のグラフィックエディタを開くことなく画像を表示できます。現時点では、モックアップはClaudeのワークスペース内にのみ存在します。コードに変換する前に、明示的にファイルシステムに保存する必要があります。

AI支援開発においてこれが重要である理由

このコマンドは、ソフトウェア開発ライフサイクルの2つの段階、つまり「デザイン」と「コーディング」を1つに統合します。スピードを重視するチームは、単一のプロンプトで複数のレイアウトオプションを生成でき、初期段階の探索を加速させることができます。Claudeは実際のコードベースを使用するため、モックアップはブランドイメージを維持し、コンポーネントシステムとの互換性も保たれます。これにより、一般的な画像生成の後に必要となる手動の修正作業を削減できます。

Anthropicは、これをロジックと美学の両方を扱う「AIソフトウェアエンジニア」への一歩として位置づけています。ターミナルがマルチモーダルなワークスペースとして機能するようになれば、コードを書くこととユーザーエクスペリエンスを形作ることの境界線は劇的に薄くなります。

現在の制限事項

この機能はまだプレビュー段階です。生成されたモックアップが自動的にソースファイルになるわけではなく、自分でエクスポートして統合する必要があります。この追加の手順は、特に数十のコンポーネントを持つ大規模なプロジェクトでは、節約できる時間を削ってしまう可能性があります。

試用方法

claude updateを実行して、最新のプレビュービルドを取得し、/designコマンドを有効にします。

主なポイント

  • 統合されたプロトタイピング: /designは、ターミナルのプロンプトから直接複数のUIアートボードを生成します。
  • コンテキストの一貫性: Claudeは現在のコードベースをスキャンし、モックアップを既存のデザインシステムに適合させます。
  • 合理化されたワークフロー: Claude Designのプロンプト能力とClaude Codeの実行力を融合させることで、開発者はツールを切り替えることなく、コンセプトから視覚的なプロトタイプへと移行できます。

Anthropicの新しい/designコマンドにより、開発者はターミナルから直接UIモックアップを作成・反復できるようになります。これにより、多くのスピード感のあるチームが依然として直面しているボトルネックである、デザインツールとコードエディタ間の行き来を削減できます。

CLIプロンプトからのビジュアルドラフト生成

/design a few options for a login screenのようなコマンドを入力すると、Claudeが一連のインタラクティブなアートボードを返します。各アートボードには高精度なモックアップが表示され、詳細の確認、比較、および追加の質問による洗練が可能です。

Claudeは現在のプロジェクト内のファイルを読み取り、カラーパレット、コンポーネントライブラリ、レイアウトの慣習を抽出して、それらに合わせてデザインを調整します。出力は「Artifacts」として表示され、別のグラフィックエディタを開くことなく画像を表示できます。この時点では、モックアップはClaudeのワークスペース内にのみ存在します。コードに変換する前に、明示的にファイルシステムに保存する必要があります。

なぜ開発者が「ターミナル内デザイン」ツールを重視するのか

多くの開発者は、一日のかなりの時間をコード用のターミナルとUIデザインアプリの切り替えに費やしています。コードを書くのと同じウィンドウにビジュアルプロトタイピングを持ち込むことで、ソフトウェア開発ライフサイクルの2つの段階を1つに統合できます。

スピードを重視するチームにとって、単一のプロンプトで複数のレイアウトオプションを生成することは、初期段階の探索フェーズを加速させます。Claudeが既存のコードベースを読み取ることで、モックアップはブランドイメージを維持し、プロジェクトのコンポーネントシステムとの互換性も保たれるため、一般的な画像生成の後に通常必要となる手動の修正作業を減らすことができます。

Anthropicは、この機能追加を、ロジックと美学の両方を扱える「AIソフトウェアエンジニア」への一歩として位置づけています。ターミナルがマルチモーダルなワークスペースとして機能するようになれば、コードを書くこととユーザーエクスペリエンスを形作ることの境界線はより薄くなります。

制限事項と従来の設計ツールの必要性

この機能はまだプレビュー段階であり、いくつかの実用的な制約が残っています。第一に、生成されたモックアップは自動的にソースファイルになるわけではなく、開発者が手動でエクスポートして統合する必要があります。この余分なステップにより、数十ものコンポーネントを同期させる必要がある大規模なプロジェクトでは、節約できるはずの時間が損なわれる可能性があります。

機能の成熟に伴う注目点

Anthropicのアップデートノートによると、このコマンドは簡単な claude update で有効にできるとのことです。

要点: Claude Codeのターミナル内にデザインプロンプトを組み込むことは、開発者にとってコンセプトから視覚的なプロトタイプへのショートカットとなりますが、そのワークフローは依然として手動の受け渡しに依存しており、専用のUIツールの深みには欠けています。このコマンドがニッチな利便性に留まるのか、それともAI主導の開発スタックの核となるのかは、今後の進化にかかっています。