版面はできます、画像はできません。画像生成の仕組みがないため、挿絵や写真は描けません。できるのは、コードで組み立てるもの、つまり画面の骨組み、見た目の試作、触れる試作、着地ページ、資料の一式です。Anthropic のデザイン向けの仕組みを通して作ります。


デザイン作業が行き詰まる原因は、技術面よりもコンセプト面にあることの方がはるかに多いものです。曖昧なブリーフ、言葉にできないアイデア、理由を丁寧に説明する必要があるクライアント。まさにそこでデザイン向けClaudeプロンプトが役立ちます。Claudeはビジュアルそのものを作りませんが、その前後に必要な思考を生み出してくれます。
以下では、ブリーフ、書体・配色システム、インターフェースコピー、講評、引き継ぎを網羅する19個のプロンプトを紹介します。どれもそのまま貼り付けて使えます。Claude、GPT、Geminiを一か所で使えるChat Smithという無料AIチャットで実行し、デザイン以外の仕事にも使えるClaudeプロンプトも確認してみましょう。

Claudeはあなたのファイルを見ることができません。デザインについて得られる情報は、あなたがどれだけ正確に説明するかにかかっています。そのため、出力の質は説明の質にほぼそのまま比例します。Claude Sonnet 5のような長いコンテキストを扱えるモデルなら、ブリーフ、ブランドガイド、3回分の講評を1つの会話に保持できます。だからこそ、一度きりではなく反復的なデザイン作業が可能になります。役立つプロンプトと一般的なプロンプトを分ける習慣は4つあります。
意図ではなく、画面に実際にあるものを説明する。レイアウト、階層、余白、カラー値、文字サイズを書きます。意図を説明すれば、得られるのも意図に対するフィードバックです。
対象者と意思決定を明示する。「3社のベンダーを比較しているB2B SaaSの購入担当者」と「ユーザー」では、得られる助言が異なります。デザインが促すべき意思決定は、見た目以上に重要です。
答えだけでなく理由を求める。根拠を説明できない書体の組み合わせは、クライアントとの会議でも擁護できません。すべての提案に理由を添えてもらいましょう。
確認できることは必ず検証する。フォントの入手可否、ライセンス、コントラスト比は、モデルが自信を持って誤答する可能性があります。クライアントに提示する前に、フォントベンダーとコントラスト確認ツールで検証してください。
何かを描き始める前の段階で使う4つのプロンプトです。失敗するプロジェクトの多くは、この段階ですでに方向を誤っています。言葉によるムードボードはビジュアル版よりすばやく反復できます。方向性が決まったら、テキストから画像を生成するツールも役立ちます。
1. クリエイティブブリーフ作成
[プロジェクト]の詳細なクリエイティブブリーフを書いてください。クライアントとブランド:[説明]。対象者:[誰か、現在何を使っているか、何を信じているか]。ブランドからは[3つの形容詞]という印象を受けるべきです。ブランド概要、対象者、デザイン目標、トーン、成果物、制約を含めてください。最後に、私の入力のうち矛盾している点や、デザインの根拠にするには曖昧すぎる点を指摘してください。
2. 言葉によるムードボード
[プロジェクト]について、本質的に異なる4つのビジュアル方向性を説明してください。それぞれに、16進数の候補を含む配色、書体の個性、画像のスタイル、UIコンポーネントの雰囲気、生み出すべき感情を示してください。程度の違いではなく種類の違いにし、同じアイデアの派生案を2つ作らないでください。最後に、最もリスクが高い案とその理由を教えてください。
3. カテゴリー慣習の監査
[カテゴリー]の主要な企業は、視覚的に次のように自社を表現しています:[サイト、色、書体、画像を説明]。このカテゴリーで全社が行っている慣習を特定してください。次に、実際の使いやすさを理由に存在する慣習と、単なる模倣である慣習を分けてください。後者なら安全に差別化できます。
4. 対象者ニーズの翻訳
私の対象者は[役割、状況、訪問時にしていること、不安に思っていることを説明]です。これをデザイン上の要件に変換してください。最初に見る必要があるもの、ページへの不信感を生むもの、実際に読む文章量、利用しそうな端末と環境を示してください。各項目を実際の改善につなげられるほど具体的にしてください。
システム層に使う4つのプロンプトです。命名や構造は今なら安く変更できますが、開発者がそれを基に実装した後では変更コストが高くなります。
5. 書体の組み合わせ
[ブランドと業界を説明]に合い、[3つの形容詞]という印象を与える書体の組み合わせを3つ提案してください。各案について、見出し用フォント、本文用フォント、クライアントとの会議で説明できる選定理由を示してください。[Google Fonts / Adobe Fonts]で利用できると確信しているファミリーだけに限定し、ライセンスを自分で確認すべき場所も教えてください。
6. タイプスケール
[製品タイプ]向けに、[数]段階、基本サイズ[X]pxのタイプスケールを作成してください。各段階のサイズ、行間、ウェイト、用途と、モバイル用の値を示してください。次に、近すぎてデザイナーが誤用しそうな2段階を挙げ、その片方が本当に必要かを判断してください。
7. カラーパレットの命名
私のパレットは次のとおりです:[各色と16進数値を列挙]。ブランドは[説明]です。各色に、ブランドに合う印象的で覚えやすい名前と、システム内の役割を示す1行の説明を付けてください。色自体を説明するだけの名前は避けてください。16進数以上の情報を加えられないからです。
8. トークン命名規則
[製品]のデザインシステムを構築しています。ブランドカラー、ニュートラルスケール、ステータスカラー、背景と前景の組み合わせを網羅する、意味に基づくカラートークンの命名規則を作ってください。表形式で示してください。さらに、6か月後に参加する開発者が私に聞かず拡張できるよう、命名ルールを1段落で説明してください。
インターフェース内の言葉に使う4つのプロンプトです。言葉は多くの視覚的判断以上に体験を左右します。引き継ぎ前に最終文言をAI文法チェッカーに通し、マーケティングサイト用のAI広告コピー生成ツールが作る文章ともトーンをそろえましょう。
9. オンボーディングのマイクロコピー
[製品]の[数]画面からなるオンボーディングフローのマイクロコピーを書いてください。各画面に、見出し、2文以内の本文、ボタンラベルを含めます。トーン:[説明]。各画面は次へ進む価値を生む必要があります。機能説明だけの画面なら、コピーを書くのではなく削除するよう提案してください。
10. 空状態とエラー状態
[製品領域を説明]の空状態とエラーメッセージを書いてください。それぞれに、何が起きたか、ユーザーにできること、ボタンラベルを含めます。謝罪せず、ユーザーを責めず、「おっと」も使わないでください。こちらに原因があるエラーは明確にそう伝え、ユーザーが直せない場合は代わりにこちらが何をしているかを伝えてください。
11. フォームラベルと補助テキスト
フォームには次のフィールドがあります:[目的とともに列挙]。各フィールドのラベル、プレースホルダー、補助テキストを書いてください。ラベルはプレースホルダー内だけに置かず、常に表示します。次に、補助テキストが本来ラベルの役割を担っているフィールドと、完全に削除できるフィールドを指摘してください。
12. ボタンとアクションの監査
[フローまたは画面を説明]にある全ボタンのラベルは次のとおりです:[列挙]。語調と文法形式の一貫性、クリック後に起きることの曖昧さ、混同しやすい2つのラベルがないかを確認してください。問題のあるものを書き直し、この画面で視覚的に最も目立たせるべき1つのアクションを教えてください。
レビュー時に使う4つのプロンプトです。意図した姿ではなく、現在のデザインをそのまま説明してください。本節の価値はそれにかかっています。好意的に飾った説明からは、好意的に飾ったフィードバックしか得られません。
13. レイアウト講評
私のデザインは次のとおりです:[レイアウト、階層、色、書体、余白、ファーストビューの内容を説明]。対象者:[説明]。取ってほしい行動:[明記]。コンバージョン重視の原則に照らして講評し、予想効果の高い順に具体的な改善案を5つ示してください。私が抵抗しそうな案と、それでも正しい理由も教えてください。
14. 階層チェック
画面上のすべてを表示順に列挙します:[要素をサイズとウェイトとともに列挙]。ユーザーが実際に気づく順序と、私が意図した重要度の順序[意図した順序を記載]が一致するかを教えてください。異なる箇所について、何を変えるべきか示してください。
15. アクセシビリティレビュー
私のデザインは次のとおりです:[16進数値付きの色、文字サイズ、インタラクティブ要素、状態を説明]。色のコントラスト、文字サイズ、タッチターゲットの大きさ、意味を色だけに依存していないか、フォーカス状態、動きの観点からアクセシビリティを確認してください。あなたの回答だけを信じず、実際のコントラストチェッカーやスクリーンリーダーで検証すべき点も教えてください。
16. 「何か違う」の診断
このデザインには何か問題がありますが、うまく言葉にできません:[できるだけ詳しく説明]。まだ修正案は出さないでください。意図、制約、状況について最大6つ質問してから、本当に問題になっている点を診断してください。多くの場合、問題は私が見つめている箇所そのものではありません。
優れた仕事が、説明の巧拙によって承認または却下される段階で使う3つのプロンプトです。論点が固まった後の文書構成にはAI提案書生成ツールを使えます。1画面ではなくフローを示したい場合は、AIストーリーボード生成ツールが役立ちます。
17. デザインの根拠
[制作物と、色、書体、構成、画像などの具体的な判断を説明]について、デザインの根拠を3段落で書いてください。対象者はデザイナーではない[創業者 / クライアント / ステークホルダー]です。デザイン理論ではなく、各判断が相手のビジネスにもたらす効果として説明してください。説明が必要な専門用語は使わないでください。
18. ブランドボイスガイド
[会社と対象者を説明]のブランドボイスと個性のガイドを作成してください。アーキタイプ、説明付きの4つの性格特性、トーンの原則、使う言葉と避ける言葉、改善前後のコピー例を3つ含めます。さらに、エラー状態とサポート時にボイスがどう変わるかの節も加えてください。これは多くのボイスガイドが省く部分です。
19. 開発者向け引き継ぎメモ
私のデザインは次のとおりです:[コンポーネント、状態、動作を説明]。開発者向けの引き継ぎメモを書いてください。固定部分と可変部分、各ブレークポイントでのコンポーネントの動作、すべてのインタラクション状態、長い名前、画像の欠落、空のリストなど想定外の内容への対応を含めます。最後に、私の説明では答えられていない、開発者が尋ねそうな質問を列挙してください。
デザインでは、異なるプロジェクトで同じプロンプトを繰り返し使います。だからこそ、きちんと保存する価値があります。Chat Smithなら、ブリーフのテンプレート、講評プロンプト、引き継ぎチェックリストをワンクリックのテンプレートとして保存し、クライアント別にまとめ、製品チーム全体で共有できます。ブリーフの形式も常に統一されます。
さらに、複数のAIモデル(Claude、GPT、Gemini、DeepSeek、Grok)を並べて実行できます。これはデザインで実用的です。モデルごとに文体が明確に異なり、概念的に豊かなブリーフを書くモデルが、最も簡潔なボタンラベルを作るとは限りません。同じプロンプトを2つのモデルに送るのは数秒で済み、どちらの出力を採用するかも判断しやすくなります。
まずは、ファイル内で未完成のままになっているものに、プロンプト16「何か違う」の診断を使ってみてください。ここで紹介した中で、答えを出す前に質問してくれる唯一のプロンプトであり、実際の問題を見つける可能性が最も高いものです。
版面はできます、画像はできません。画像生成の仕組みがないため、挿絵や写真は描けません。できるのは、コードで組み立てるもの、つまり画面の骨組み、見た目の試作、触れる試作、着地ページ、資料の一式です。Anthropic のデザイン向けの仕組みを通して作ります。

プロジェクトを前に進めるために必要なものはすべて、すぐ手の届くところにあります。