【Gemini 2.5 Pro】Excelの設計書からHTMLを作成するプロンプト

仕事をどうにか効率化できないかとあれこれ模索したプロンプトのご紹介です。（※自己流です）

さすがに自業務の設計書は世に出せず、出力結果はお見せできないので結果はご自身でご確認ください…

目的
前提
1. 画面設計書のExcelファイルをPDF変換したファイル1
2. 画面設計書内の画面レイアウト図のキャプチャ（スクリーンショット）
プロンプト
作成にあたり参考にしたサイト

目的

・Excelの画面設計書からモックを作成し、画面の操作感を確認したい

・詳細設計中のため、関連機能を設計・開発するメンバーとの事前の認識合わせに使いたい　

前提

インプットとしてGeminiに提示したものは以下です。モデルはGemini 2.5 Proを使用。

画面設計書のExcelファイルをPDF変換したファイル1

　所属組織では一般的な画面設計書に加え機能仕様が記載されているものを画面設計書としています。
　一般的な画面設計書のみの場合、機能仕様の設計書も渡してあげた方が良い結果が得られそうです

画面設計書内の画面レイアウト図のキャプチャ（スクリーンショット）

　設計書のPDFのみだとレイアウトの認識精度が甘いようで、微妙に項目が抜けているモックが作られてしまいました。PDFに加えて渡してあげるとその点が補えました。

プロンプト

以下をDeepL等で英訳してから渡していました。

あなたは一流のエンジニアです。
添付の設計書および画面レイアウトの画像を詳細に分析し、超一流のUI/UXデザイナーとエンジニアが協力して作成したような画面のモックをHTMLで作成し、**プレビュー**してください。
**画面は添付画像に可能な限り準拠（不足箇所がある場合、推測し補完）**するようにし、ポップアップも作成してください。情報設計とビジュアルデザイン（美しさ）の両面で最高水準を目指します。
各画面要素の近くに、本設計書の機能およびそれに関連する機能を開発するエンジニアがどのような点を考慮して開発すべきかが理解できるような内容をチップで表示してください。
具体的には以下です。
・どのDBを参照/操作するか
・DBの取得値によってどのような分岐があるか
・どのような入力/出力を想定しているか
#要望
・チップは視覚的に見やすい形で表示してください。チップは表示時に画面にはみ出さないよう表示方法は調整してください
・チップ内のテーブル/カラム名は日本語で記載してください
・不明点や不備は指摘してください
#注意点
(設計書特有の注意箇所を書いていました。）

モックを作成するとともに、関連機能を設計開発するメンバー用のチップを表示してもらうようにしました。具体的な内容は必要に応じてカスタマイズいただけるとよいかと。

プレビューはGeminiのCanvasでプレビューをしてほしくて強調しています。
また、絶対とすると逆に出力結果が良くなかったので、画面は可能な限り準拠してもらいました。

あくまでも自己流なのでもっといいやり方があると思います。