テック技報最新号へ →
デザイン

画像生成で「デザインシステムボード」を作るプロンプト（テーマだけ差し替える）

中央にスマホのモック、周りにヒーロー・配色・文字・カード・ボタンなどを並べた、Figmaのショーケース風ボードを1枚で生成する。テーマを差し替えるだけで使い回せる。

@mmmiyama_D · 投稿 2026-04-21
#画像生成#AIデザイン#プロンプト#デザインシステム

どんな問題を解決するか / いつ使うか

新しいサービスやサイトのトンマナ案を、短時間で見える形にしたいとき。コーディング前のスタイル決め（コードより先に画像生成でデザインモックを作る。最初にスタイル案を4つ出させて選ぶ）の材料に。

やり方

以下の [THEME] を差し替えて使う（@mmmiyama_D のプロンプト）：

Create a premium design system board for a fictional Japanese web design studio based on this theme

[THEME] 遊び心のある北欧テイストのデザイン、ミヤマ クリエイティブ

One large smartphone mockup must be placed at the exact center as the main visual.
Arrange desktop UI and design system modules around the phone.
Include hero section, palette, typography, cards, buttons, inputs, icons, chips, and footer.
Make it a polished Figma showcase board with rounded panels, clean spacing, elegant whitespace, modern Japanese taste, and readable Japanese labels.
Do not make it a numbered spec sheet or plain grid.

Aspect ratio 4:5

ポイント：

  • 「主役（中央のスマホ）」「周りに並べる要素の一覧」「仕上がりの雰囲気」「避ける形（番号付きの仕様書や単純なグリッドにしない）」「比率」を分けて書いている。
  • 同じ作者はイラスト用のプロンプトも配布している（プロンプト本文はリンク先）。

注意点・対応状況

  • 画像内の数値・ラベルは正確とは限らない。採用する場合は値をDESIGN.mdに書き起こす。

出典

X の元の投稿を開く