「prompt builder」の作り方
今回は作る過程について、紹介します。
アマゾンのAIコーディングツール「kiro」を使用します。
これにどんな物を作りたいかを入れて、「要件定義書」と「設計書」を作ってもらいます。
Claudeだけでもできますが、「kiro」を使うとこの辺かちょっと簡単になります。
「kiro」に以下を投げて、「要件定義書」と「設計書」を作成してもらいます。
画像生成用のプロンプトを組み合わせでいろいろ作成できるようにするためのアプリを作成したいと考えています。
他にも必要祖いう名機能や、足りていない仕様などアドバイスをしてください
想定の使い方
場所、人物、行動、オブジェクト、文字、プロンプト集の中から組み合わせて、画像生成に使用するプロンプトを構築してプロンプトを作成します。
カテゴリーは、自分で設定できた方が使い勝手がいいと思うので、カテゴリーは自分で設定して増やせるようにして、その中から自由に選択してプロンプトを作成
必要な機能
・分類別にプロンプトを管理できる
・プロンプトを日本語と英語両方を保持できる
・必要な時にプロンプトを組み合わせてクリップボードに入れられる
・プロンプトの追加、編集、削除ができる
・カテゴリーの追加削除ができる
以上のように、ざっくりとやりたい事や、必要な機能を箇条書きで書きます。
すると、次のような結構ちゃんと「要件定義書」と「設計書」ができあがります。
「要件定義書」と「設計書」を見て、問題があるようなら更にここでやりとりをして、修正をしていきます。
ここで完成形をイメージしておく事が大事です。
また、ターゲットWindows用なのか、WEBアプリなのか等、ターゲットも指定しておくと、開発言語やライブラリなども適切な物をお勧めしてくれます。
もし、そこも希望がある場合は最初の条件に入れておくとスムーズに進みます。
このアプリケーションには以下の技術的要件があります：
デスクトップアプリケーション（クリップボードアクセスが必要）
ローカルデータストレージ
日本語・英語対応のUI
ドラッグ&ドロップによる直感的な操作
技術スタックとして、以下を検討します：
フロントエンド技術:
Electron + React/Vue - クロスプラットフォーム対応、豊富なUIライブラリ
Tauri + React/Vue - 軽量、セキュア、Rustベース
Flutter Desktop - 単一コードベース、優れたUI
データストレージ:
SQLite - 軽量、ローカル、リレーショナル
IndexedDB - ブラウザベース、NoSQL
JSON ファイル - シンプル、可読性高い
推奨技術スタック:
Electron + React + SQLite を選択
理由: 豊富な開発リソース、クリップボードAPI対応、ローカルDB統合が容易
こん感じで、技術的な提案もしてもらえます。
他のパターンを検討したい場合、ここでAIとやりとりしても良いですが、ここで別のAIに相談する手もあります。
現在のAIはそこまで万能では無いので状況に応じて他を利用しても良いかと思います。
新品価格 |  |
ここまでできたら、アマゾンに課金してこのまま作ってもらってもいいのですが、私はClaudeに課金しているので、実装はClaudeさんに行ってもらいます。
作成してもらった、「要件定義書」と「設計書」をClaude codeに読み込ませて、作成まで行ってもらいます。
Claude codeへの指示は、具体的に以下の感じになります。
プロンプト管理アプリを作成します。
以下の要件定義書と設計書に基づいて作成を開始してください。
要件定義書
requirements.md
設計書
design.md
このように、指示を出します。
するとClaude codeは、必要な機能を仕様書に基づいて順番に実装します。ビルドまで行ってほぼ完成まで自動で持って行きます。
ビルドエラーが出てもエラーメッセージを解析して、修正してから再ビルドまで行ってくれます。
Windowsで動く実行ファイルまで作成してくれました。
で、動かしてみると、いきなりエラーダイアログは出ましたが、エラー内容を伝えて修正依頼を出せば修正してくれます。
ここまで自動で進むのはホントに凄いですよね。
 | 新品価格 |
ちなみにGoogleのgeminiにも同じ物を投げましたが、途中で止まってしまったので、そっ閉じしました・・・。
止まったというのは正確では無くて、何かの待ち状態に入って（こちらの入力を待っている訳では無い）そのまま進まない感じです。
詳しく調べれば、原因が分かったかもしれませんが、同時に実行してClaude Codeは動いてしまったので、あえて調べる気になりませんでした。
geminiにも得意な事とかあるので、コード生成においてはClaudeレベルまで達していないといった所感です。
Suntory サントリー 天然水 特製レモンスカッシュ 炭酸 500ml×24本 新品価格 |  |
以下が実際に完成した時のClaud codeのメッセージです。
プロンプト管理アプリの作成完了
画像生成用プロンプト管理アプリの作成が完了しました。以下の機能が実装されています：
🎯 実装済み機能
- ✅ プロンプトの追加・編集・削除
- ✅ カテゴリー別プロンプト管理
- ✅ 日本語・英語両対応
- ✅ プロンプト組み合わせ機能
- ✅ クリップボードへの自動コピー
- ✅ 検索機能
- ✅ SQLiteデータベースによるデータ永続化
- ✅ モダンなUI（Ant Design + Tailwind CSS）
🛠️ 技術仕様
- Frontend: React 18 + TypeScript
- Desktop: Electron
- 状態管理: Zustand
- データベース: SQLite3 + better-sqlite3
- UI: Ant Design + Tailwind CSS
- ビルドツール: Vite
📁 プロジェクト構造
prompt-builder-app_Claude/
├── src/
│ ├── main/ # Electronメインプロセス
│ ├── renderer/ # Reactアプリケーション
│ ├── components/ # UIコンポーネント
│ ├── services/ # データベースサービス
│ ├── stores/ # 状態管理
│ └── types/ # TypeScript型定義
├── assets/ # アイコン等のアセット
└── dist/ # ビルド済みファイル
🚀 使用方法
開発モード起動
npm run dev
プロダクションビルド
npm run build
実行可能ファイル作成
npm run dist
アプリケーションは正常にビルドでき、開発サーバーも起動確認済みです。要件定義書と設計書に基づいて、すべての主要機
能が実装されています。
ここから、デザインとか使い勝手に関しての修正を依頼していって、完成といった感じです。
バージョンが初期公開段階で「Ver0.1.13」なんですが、初期バージョンが「Ver0.1.0」だったので、13回更新している感じです。
最初はバックアップも付いてなかったし、カテゴリー削除ボタンでざっくりプロンプトごと削除されたり、荒削りな部分が多々あったので、その辺を少しずつ修正していった感じです。
大枠の設計ができていたからこそ、その辺も早かったと言えると思います。
伊藤園 おーいお茶 ピュアグリーン 600ml×24本 緑茶 ペットボトル 新品価格 |  |
完成品は前に書いた記事からダウンロードできるので、興味のある方はダウンロードして試してみてください。
ais
総括といった感じですが、普通にvibecodingを行うよりも、今回のようにちゃんと詰めてから作成した方が、結果的にできあがりまでのコストは安いなと感じました。
特に、コード生成はやりとりが多いほどトークンを消費すると使用上限に達して一時的に使えなくなります。（プランにもよりますが使用トークン数で制限がある）
なので、できるだけトークンを節約して作れた方が良いので、効果は絶大でした。
普通のソフト開発も入念に仕様書を作り込んだ方が手戻りや仕様漏れからの手戻りの発生リスクが軽減できるので、事前準備が大切って結構当たり前な結論になりました。
それでも、感覚的にプログラムを組んで完成まで持って行けるのは、AIが進化したおかげなので、なんか考え深いですね。
