画面の前に、
デザインの意図を。
画面名・利用者・目的などを入力すると、「無難なAI生成UI」を避け、デザイン思想を先に言語化させてから実装させるWeb画面モック作成プロンプトを組み立てます。
0
プロンプトの文字数
作る画面
必須
は空欄だと、AIが仮定を置いて進めます
画面名
必須
文書検索
案件管理
問い合わせ履歴
利用者
必須
誰が、どんな状況で使うか
画面の目的
必須
この画面で何を達成するか
必要な項目
任意
入力欄・表示項目
必要な操作
任意
表示したいデータ
任意
空欄なら架空データを作成
デザインの方向
空欄ならAI側が提案します
特に重視したいこと
任意
一覧性・速さ
信頼感
情報量
参考にしたい雰囲気
任意
台帳
紙面
計器盤
避けたいデザイン
任意
出力の条件
プロンプト本文の構成を切り替えます
実装前の提示
プロンプト 18章
コードの前にデザイン設計を提示させる
Concept/Intent/配色/タイポ/レイアウト/Signature Detail/避ける要素
完成後の自己批評
プロンプト 19章
完成後に自己批評させ、「普通」なら再設計させる
対象AI
指定なし
ChatGPT
Claude
Gemini
Cursor/Claude Code などのコーディングAI
保存ファイル名
任意
プロンプトをコピー
サンプルを入力
入力をクリア