プロンプトテンプレート

トークン、タイポグラフィ、コンポーネントをまとめたデザインシステムのプレゼンボード

このプロンプトは、指定した製品のデザインシステムを1枚にまとめたプレゼンボードを生成するためのものです。初期設定はモダンなSaaS分析プラットフォームです。盛り込むセクションとして、カラートークン、タイポグラフィのサンプル、アイコンのスタイル、ボタン、入力欄、データカード、グラフコンポーネント、余白の例を挙げ、極端に小さな文字、重なり合うカード、脈絡のないグラデーション、偽のブランドロゴは除外しています。作例では、ラベル付きのプライマリ・セマンティック・ニュートラルの色見本、タイプスケール、線画アイコンのセット、ボタンと入力欄の各状態、KPIカード、4種類のグラフ、余白のスケールが並んだ、すっきりとしたボードが生成されました。ビジュアルの方向性の提案、デザインレビューの導入、資料やケーススタディでスタイルガイドをひと目で見せる用途に使えます。

アスペクト比 16:9参照画像は不要です
画像ジェネレーターを開くすべてのテンプレートを見る
分析プラットフォーム向けのデザインシステムボード。色見本、タイプスケール、線画アイコン、ボタン、入力欄の状態、データカード、グラフ、余白が並んでいます
Nano Banana Pro で GPT Image 2 を使って作成した例です。入力内容や設定によって結果は変わります。

テンプレートのプロンプト

プロンプトを画像ジェネレーターにコピーし、角かっこ内の内容を自分のものに置き換えてください。

Create a design system presentation board for [a modern SaaS analytics platform]. Include color tokens, typography samples, icon style, buttons, input fields, data cards, chart components, and spacing examples. Style: clean professional Figma-like board, precise alignment, readable labels, and consistent component proportions. Restrictions: no unreadable tiny text, no overlapping cards, no random gradients, no fake brand logos, no inconsistent UI styles.

プロンプトのアイデア：github.com 元の投稿を見る

こんな用途に向いています

  • コンポーネントを作る前に、新製品のビジュアルの方向性を提案する
  • デザインシステムのドキュメントやケーススタディのカバー画像
  • エンジニアやプロダクトマネージャーとのデザインレビューの冒頭スライド
  • 2〜3案のスタイルの方向性を並べて比較する

プロンプトのコツ

  • 角かっこ内の製品を、銀行アプリや予約ツールなど、ご自身の製品に置き換えてください
  • すでに配色やフォント名が決まっていれば追加してください。指定がなければモデルが独自に選びます
  • 制約の行は残してください。レイアウトを整え、架空のロゴを抑える指示になります。生成後は結果を確認してください
  • ボード上の16進コードやサイズは提案として扱い、再利用する前に確認してください
  • グラフなど不要なセクションを削ると、残りのセクションに余裕が生まれます

関連テンプレート

植物とマグカップを置いた木製デスクの上のシルバーのノートパソコン。画面には統計カード、グラフ、テーブルのある明るいプロジェクトダッシュボード

日中の木製デスクに置いたノートパソコンのUI/UXモックアップ

ミニマルな木製デスクに置いたノートパソコンを写真のようにリアルに描くプロンプトです。画面にはサイドバー、グラフ、テーブルを備えたすっきりしたダッシュボードが映り、製品紹介やポートフォリオに使えます。

HELIX OPSという名前のデスクトップ運用ダッシュボード。暗いサイドバー、4枚のKPIカード、折れ線グラフ、ドーナツグラフ、棒グラフ、資産テーブル、アラート一覧があります

KPIカードとグラフを備えたデスクトップ向けSaaS運用ダッシュボードのモックアップ

サイドバー、フィルターバー、KPIカード、折れ線グラフ、データテーブル、アラートパネルを、スレートとコバルトブルーでまとめたデスクトップ分析ダッシュボードのモックアップ用プロンプトです。

パステル調のアファメーションカード12枚を格子状に並べた画像。葉と金色のラインの装飾、短い見出し、言葉を入れる仮の一文

自分の言葉を入れるスペース付き、印刷用アファメーションカードセット

柔らかな背景と装飾をあしらい、自分で入れる言葉のための空白エリアを残した、落ち着いた上質なアファメーションカードを格子状に並べるプロンプトです。