Claude Design

Claude Opus 4.7 を使い、対話でプロトタイプ / スライド / LP / モック / ワンページャーを作れる Anthropic Labs のビジュアル制作環境。Claude Code へハンドオフして実装に繋げられる。

『デザインが分からない人でも、最初の可視化までを AI と一緒に作れる』を狙った Anthropic 公式のデザインツール。ブランド・デザインシステムを取り込めば毎回同じトンマナで出力され、完成したら Claude Code に渡してそのまま実装できる。研究プレビュー段階で Pro / Max / Team / Enterprise で利用可能。

30秒サマリ

Claude Design = 対話で作る Figma / Canva ハイブリッド。裏側は Claude Opus 4.7
テキスト・画像・DOCX/PPTX/XLSX・コードベース・Web キャプチャから作り始められる
コメント / 直接編集 / 数値スライダー（Claude が作る）で微調整
自社のデザインシステムを読み込ませると、以後すべての出力が自動でブランド準拠
完成品は URL / フォルダ / Canva / PDF / PPTX / スタンドアロン HTML でエクスポート
『Handoff to Claude Code』で 1 コマンド分のバンドルにまとめ、そのまま実装フェーズへ

Claude Pro / Max / Team / Enterprise の契約に含まれる。Enterprise は既定でオフなので管理者が Organization 設定で有効化する。

向き不向き

○ プロトタイプ / モック / ピッチデック / LP / SNS クリエイティブの初稿
○ デザイナーが探索の幅を広げたい（10 方向を並列に出す）
○ PM が feature フローをワイヤーで示し、そのまま Claude Code に投げたい
△ 印刷用の厳密な入稿データ、フォント埋め込みが厳しいケース
× 既存プロダクトのピクセルパーフェクトな最終仕上げ（Figma のほうが速い）

セットアップ（初回オンボーディング）

claude.com/product/design を開いてサインイン（Enterprise は先に管理者が有効化）
オンボーディングで自社のコードベース or デザインファイル（Figma / PDF）を接続し、Claude にデザインシステムを組ませる
生成された色 / タイポ / コンポーネントを確認し、必要なら手動で微調整
複数ブランドを扱うチームは、デザインシステムを 2 つ以上登録しておく
テストプロジェクトを 1 つ作り、既存 LP のスクショを Web キャプチャで取り込んでみる

デザインシステムは後から育てられる。最初は 60 点で登録し、実プロジェクトで気づいた差分を都度反映するのが速い。

30分ワークスルー：LP を初稿までいっぺんに

『新製品◯◯の LP。ターゲットは中小企業の情シス。3 セクション（hero / features / CTA）で』とプロンプト
初回生成が出たら、hero の見出しにインラインコメントで『もう少しベネフィット寄りに』と指示
features カードを直接クリックしてテキストを 3 パターンに増やす
スライダーで余白と行間を調整、Claude に『この変更を全カードに反映』と依頼
『他方向で 3 案』と依頼して探索を広げる
気に入った 1 案を選び、組織内リンクで共有 → コメント収集
確定したら『Handoff to Claude Code』でバンドル化、Claude Code に実装を依頼

Claude Code への Handoff の流れ

Handoff バンドルには、デザインの構造・使用したデザインシステムのトークン・アセット参照・意図メモがまとまっている。Claude Code 側では 1 コマンドでこれを開き、既存リポの規約に沿って実装に落とし込む。

Claude Design 側で『Handoff to Claude Code』を実行し、バンドル URL / ファイルを取得
対象リポの直下で `claude` を起動
『添付の Claude Design バンドルを取り込み、既存の UI ライブラリと Tailwind 設定に合わせて実装して』と指示
実装後、Claude Design のプレビュー URL とローカルの実装を突き合わせてレビュー
差分は Claude Design 側に戻して修正 → 再 Handoff、を数往復

Handoff は『Figma → 実装』の指示書渡しに近いが、デザインシステムのトークン名がそのまま渡るので Tailwind / shadcn 系リポなら 1 発で近い実装が返ってくる。

実務パターン 5 選

① 静的モック → インタラクティブプロトタイプ化：デザイナーがコードレビューなしにユーザーテストを回す
② PM のワイヤーフレーム：機能フローを図示 → そのまま Claude Code に実装依頼
③ ピッチデック：アウトラインから PPTX まで一気通貫、Canva に送って最終仕上げ
④ マーケコラテラル：LP / SNS / 広告バナーをブランド準拠で量産、デザイナーが最終ポリッシュ
⑤ Frontier design：voice / video / shaders / 3D / 内蔵 AI を使ったコード駆動プロトタイプ

運用のコツと落とし穴

○ プロンプトは『用途 / 対象 / セクション構成』の 3 点を先に言う。抽象語だけだと平均的な絵しか出ない
○ 1 プロジェクト内で複数方向を並列生成し、良いところを合成する
○ デザインシステムを整えるほど、以降の全プロジェクトが速くなる（複利）
△ 共有はデフォで組織スコープ。外部レビュー時はエクスポートしてから渡す
× デザインを完成品として直入稿するのは非推奨。必ずデザイナー / エンジニアの最終レビューを挟む

エクスポートと共有

組織内 URL：閲覧のみ / 編集可 / グループチャット同席、の 3 段階
フォルダ保存：バージョン管理用に定期的にスナップショット
Canva 連携：マーケが最終加工する経路
PDF / PPTX：営業・経営向けの配布物
スタンドアロン HTML：外部レビューや LP そのものとして配布

チートシート

入力：      テキスト / 画像 / DOCX・PPTX・XLSX / コードベース / Web キャプチャ
編集：      インラインコメント / 直接編集 / スライダー（Claude 生成）
適用：      『この変更を全体に反映』で一括更新
共有：      組織内 URL（view / edit / group chat）
エクスポート：Canva / PDF / PPTX / HTML / フォルダ
実装連携：  Handoff to Claude Code → `claude` に渡す
対応プラン：Pro / Max / Team / Enterprise（Enterprise は既定 OFF）
公式：      https://claude.com/product/design

Claude Design（Anthropic Labs）