DigiBoardのソフトウェアから開発用プロンプトを抽出した|画像生成と会話するAIの魅力と可能性
https://note.com/chat_gpt777/n/n2ee78030f230?app_launch=false
今日作ったDigiBoardというソフトウェアの全コード(Webブラウザで該当ページを起動しておいて、右クリックして「ページのソースを表示」してCtrl+a(全選択)でコピーして)、Google AI Studioに貼り付けて、このソフトウェアを開発するにはどんなプロンプトがあれば最適なソフトウェアを作ることが出来るか、プロンプトを作成してと依頼した。下記のプロンプトを作成してくれた。これをAI(ChatGPTやClaude)に入力すればソフトウェアを作成してくれるはず。ChatGPTを使ってソフトウェアを作ってみた。原型は希望通りですが、細かいところは注文を付けたい。これを改良していくと気にいったものが出来ると思う。
最初はアバウトな言葉(ふつう使う言葉)でプロンプトを書きながら、試行錯誤したソフトウェア、完成したものを分析してプロンプトを作成して貰った。さて結果はどうなるかな?
DigiBoard
https://pasopia.velvet.jp/2026/soft/index011.html
ソフトウェア開発用プロンプト
以下の内容をコピーして、AI(ChatGPTやClaude)に送信してください。
【依頼内容】
PC、タブレット、スマートフォンで動作する、高機能なデジタルホワイトボード・アプリケーション「Boogie board風DigiBoard」を、単一のHTMLファイル(HTML/CSS/JavaScript完結)で作成してください。
【デザインの方向性】
テーマ: 電子メモパッド(Boogie Board)風のダークモード。
背景色: 非常に暗い紺色(#12122a)または黒(#111)。
アクセントカラー: ネオン系(グリーン:#44ee88、レッド:#e94560、ブルー:#3498db)。
UI: 上部にツールバーを配置。スマホではボタンが自動で折り返されるレスポンシブデザイン。
キャンバス: 画面の残りの領域をすべて使い、デバイスのサイズに合わせて自動リサイズされること。
【必須機能リスト】
描画ツール:
フリーハンド描画(ペンモード)。
蛍光ペン(半透明で重なりが見える設定)。
消しゴム(描いた線を消去)。
図形描画(直線、四角、円、矢印)。
オブジェクト操作(選択モード):
描いた線や図形、テキスト、画像を個別に選択・移動・リサイズ・削除できること。
テキスト・画像機能:
任意の場所をクリックしてテキストを追加し、後から編集可能にする。
外部画像ファイルを読み込み、キャンバス上に配置・リサイズできる。
管理機能:
元に戻す(Undo): 直前の操作を取り消す。
クリア: キャンバスをすべて消去。
PNG保存: 現在の状態を画像としてダウンロード。
JSONエクスポート/インポート: 編集状態をデータとして保存し、後で再開できる。
表示操作:
ピンチイン・アウト(またはホイール)によるズーム機能。
座標表示(X, Y)。



