Claude Design とは
Claude Design は Anthropic Labs が2026年4月17日にリリースした AI デザインツールです。テキストプロンプトやスクリーンショットから、プロトタイプ・スライド・ランディングページ・ワイヤーフレームを生成します。Claude Opus 4.7 で動作し、Pro・Max・Team・Enterprise の各プランで利用できます。
従来「Claude に UI コードを書かせる」場合は、ひたすらプロンプトで指示を書き、返ってきたコードをローカルで確認するという往復が必要でした。Claude Design ではチャットとライブキャンバスが左右に並ぶ スプリットスクリーン になっており、変更がリアルタイムで反映されます。デザインは画像ではなく実際のコードとして出力されるため、生成物をそのまま本番に近い形で使えます。
ワークフロー:プロンプトから実装まで
入力として受け付けるのは、テキストプロンプト・スクリーンショット・コードベース・Figma ファイル・既存の CSS の5種類です。特徴的なのはスクリーンショットからの編集で、UI の特定領域を指定して「このボタンを大きくする」と伝えると、Claude がその DOM ノードを特定して変更します。デザイン上の見た目だけでなく、裏側のマークアップまで正確に把握して操作できる点が他のデザインツールとの大きな違いです。
出力は HTML/CSS/JavaScript・React コンポーネント・PDF・PPTX・共有 URL の形で取り出せます。そして最も重要なのが Claude Code への引き渡し機能です。デザインが固まったら「Claude Code で実装を続ける」ボタンを押すだけで、設計の文脈ごと Claude Code に渡せます。スケッチからコードレビューまでを同じ会話の延長で行える、という発想です。
2 つのモード:速さと品質の使い分け
Wireframe モード は素早いアイデア検証向けで、構造とレイアウトを確認するための粗いスケッチを生成します。「まずページの骨格を決めたい」場面で使います。
High Fidelity モード はブランドに沿った本番品質のデザインを生成します。コードベースや Figma ファイル・CSS を読み込んでデザインシステムを学習し、色・タイポグラフィ・コンポーネントの使い方を以降のプロジェクトに引き継ぎます。一度登録したデザインシステムを常に適用し続けてくれるため、ブランド一貫性のためにプロンプトを書き直す手間がなくなります。
DESIGN.md との接続
前の記事で扱った DESIGN.md は、AI エージェントにデザインシステムを伝えるためのファイル仕様でした。Claude Design はまさにその思想の実装例に当たります。DESIGN.md の YAML フロントマターに書かれたトークン(色・フォント・余白)を Claude Design が読み込めば、High Fidelity モードで自動的にブランドに一致したデザインが出力されます。
「エージェントにデザインの文脈を渡す」という仕組みを仕様レベルで定義したのが DESIGN.md、それを対話 UI として実装したのが Claude Design、と考えると両者の役割分担が整理できます。
まとめ
- Claude Design はプロンプト・スクリーンショット・既存コードからプロトタイプを生成し、そのままコードとして出力する Anthropic Labs の新機能
- チャットとライブキャンバスのスプリットスクリーンで、変更をリアルタイムに確認しながら反復できる
- Wireframe モードと High Fidelity モードの2段階で、速さと品質を使い分ける
- 生成したデザインは Claude Code へそのまま引き渡せ、設計〜実装の文脈が途切れない
- DESIGN.md と組み合わせることで、ブランドの一貫性をエージェント間で自動維持できる