Suno AI 向けのプロンプトメーカー。ブラウザで動く静的 Web アプリです。
- 38カテゴリの音楽要素を組み合わせてプロンプトを自動生成
- 64テンプレート(プロンプト64種 + 歌詞構造15種)
- 重み付きラウンドロビンでカテゴリごとの出現割合を制御
- プロンプト生成(ランダム) / プロンプト生成(AI)(スライダー重みを反映)
- 履歴管理で過去のプロンプトを保存・呼び出し
- ダーク/ライトモード対応
- モバイル対応(レスポンシブデザイン)
- ツールチップでカテゴリ説明とサンプル候補を表示
- ラベルクリックで0%⇔100%切替
- AI機能(ternlight WASM)で自然言語から自動設定・セマンティック検索・AIプロンプト生成
- IndexedDB にタグ埋め込みベクトルをキャッシュ(初回構築後は高速起動)
「(AI) メインプロンプトから反映」で、メインプロンプトの意味に基づいてカテゴリの%を自動調整します。
例:
- 「お洒落なカフェで流れるチルい曲」→ カフェラウンジ系のカテゴリが自動設定
- 「激しいメタル」→ ヘヴィメタル系のカテゴリが自動設定
メインプロンプトとスライダー重みをもとに、セマンティック検索でタグを選び文字数上限内にプロンプトを組み立てます。スライダーがすべて0%のときは空のプロンプトを出力します。
各カテゴリの「🔍 候補を絞り込む」で、意味ベースの検索が可能です。
履歴タブで「🔍 履歴を検索」から、過去のプロンプトを意味ベースで検索できます。
設定(About)タブから IndexedDB のタグインデックスキャッシュを削除・再構築できます。data.js を更新したあとに実行するとよいです。
@ternlight/base(npm)+ Vite で WASM をバンドル- 全てクライアントサイド完結
- WASM 約 10MB(gzip 約 7MB)、初回はインデックス構築に時間がかかる場合あり
- WASM ロード失敗時はフォールバックモード(簡易類似度)に切り替え
- Chrome Translator API(138+、任意)で日本語入力の精度向上
38カテゴリ(詳細は src/data.js の CATEGORIES / PROMPT_DATA を参照)。主な例:
| カテゴリ | 項目数(目安) | 説明 |
|---|---|---|
| ジャンル | ~280 | 曲のスタイル分類 |
| スタイル | ~32 | 曲の雰囲気・表現 |
| ムード | ~30 | 曲の感情・気分 |
| 演奏記法 | ~150+ | 楽器の奏法・テクニック |
| LFO | ~250+ | 低周波発振による変調 |
| メジャー/マイナーコード | 110+ | 和音・進行 |
| 演歌(ボーカル) | 100 | 演歌系ボーカル表現 |
| 演歌(曲) | 100 | 伴奏・和声・編曲 |
| … | … | その他ジャンル・質感・季節テーマなど |
王道ポップス、バラード、シティポップ、メタル、K-Pop、ボカロ など
王道J-POP、アニメOP、EDM、Vocaloid、Lo-fi など
- HTML5 / CSS3 / JavaScript (ES modules)
- Vite 6(開発サーバー・本番ビルド)
- vite-plugin-wasm / top-level-await(ternlight WASM)
- Tailwind CSS(CDN版)+
public/styles.css - @ternlight/base(WebAssembly 埋め込み)
- IndexedDB(タグインデックスキャッシュ)
- データ:
src/data.jsに集約
suno-prompt-maker/
├── index.html # エントリ HTML(Vite が処理)
├── vite.config.js # Vite 設定(base: /suno-prompt-maker/)
├── package.json
├── public/
│ ├── styles.css # カスタム CSS
│ └── favicon.ico
├── src/
│ ├── main.js # エントリ(data → app → ai-init)
│ ├── app.js # メインロジック・UI
│ ├── data.js # カテゴリ・テンプレートデータ
│ ├── ai-init.js # AI 初期化・イベント
│ ├── ai-prompt-generator.js # AI プロンプト生成
│ ├── ternlight-engine.js # ternlight ラッパー
│ ├── tag-index.js # タグベクトルインデックス
│ ├── tag-index-db.js # IndexedDB キャッシュ
│ ├── semantic-search.js
│ ├── auto-setter.js
│ └── history-search.js
├── dist/ # ビルド成果物(gitignore)
├── deploy-ftp.sh.example # FTP デプロイテンプレート
└── README.md
- 開発方針: バイブコーディング時の事故防止指示書
npm install
npm run dev # http://localhost:3000 (開発)
npm run build # dist/ を生成
npm run preview # ビルド結果のプレビュー
npm run check # src/*.js の構文チェック本番と同じパスで試す場合は vite.config.js の base: '/suno-prompt-maker/' に合わせてプレビューします。
npm run devまたはビルド後のdist/をブラウザで開く- 「メインプロンプト」に追加の指示を入力(任意)
- 「(AI) メインプロンプトから反映」で自然言語から自動設定(任意)
- 「要素の割合」でカテゴリごとの出現率を調整
- 「プロンプト生成(ランダム)」または「プロンプト生成(AI)」をクリック
- 生成されたプロンプトをコピーして Suno に貼り付け
- ラベルクリック: 0% ⇔ 100% に切替
- テンプレート: クリックでコピー + 自動適用
- プリセット: ドロップダウンから雰囲気を選択
npm run build
# 認証情報(どちらか一方で可・deploy.env 推奨)
cp deploy.env.example deploy.env # FTP_* を記入(git にコミットしない)
# または cp deploy-ftp.sh.example deploy-ftp.sh を編集
./deploy-ftp.sh
./deploy-ftp.sh --dry-run # 確認のみFTP スクリプトは dist/ の内容をアップロードします。
認証情報をリポジトリにコミットしないこと(deploy-ftp.sh / deploy.env は .gitignore 済み。git add -f 禁止)。過去にパスワードが Git 履歴に含まれていた場合は FTP パスワードをローテーションしてください。詳細は docs/deploy-credentials.md。
src/data.js の2箇所を編集:
// 1. CATEGORIES に追加
newCategory: {
name: 'カテゴリ名',
label: 'スライダー表示名',
desc: '説明文',
dataKey: 'newCategory',
defaultWeight: 0,
},
// 2. PROMPT_DATA に配列追加
newCategory: ['item1', 'item2', ...],追加後は About タブの「タグインデックスキャッシュを再構築」を実行するか、ブラウザの IndexedDB をクリアしてください。
- Vite + WASM による ternlight 本格統合
- IndexedDB タグインデックスキャッシュ
- プロンプト生成(AI)(重み付き)・UI 改善(About、キャッシュ再構築、技術リンク)
- FTP デプロイを
dist/ベースに変更
- ternlight AI機能統合
- 自動セッティング・セマンティック検索・履歴検索
- 演歌カテゴリ追加 など
- 初期リリース
MIT License