バイブコーディングで使えるプロンプト集

バイブコーディングの成功は、プロンプトの質で決まります。

この記事では、実際に使えるプロンプトテンプレートを10個紹介します。コピペして、自分のプロジェクトに合わせてカスタマイズしてください。

プロンプトを書く3つのコツ

1. 具体的に書く

「アプリを作って」ではなく、「ToDoリストアプリを作って」と具体的に書きます。

2. 技術スタックを指定する

使いたい技術（Next.js、Supabase、Tailwind CSSなど）を明示します。指定しないと、AIが勝手に選んでしまいます。

3. 期待する出力形式を伝える

「コード全体を出力してください」「差分だけ教えてください」など、欲しい形式を伝えます。

プロンプトテンプレート10選

1. 新規アプリ作成プロンプト

以下の仕様でWebアプリを作成してください。

【アプリ概要】
{アプリの説明を1-2文で}

【機能要件】
- {機能1}
- {機能2}
- {機能3}

【技術スタック】
- フロントエンド: Next.js 14 (App Router) + TypeScript
- スタイリング: Tailwind CSS
- データベース: Supabase
- 認証: Supabase Auth

【デザイン要件】
- モダンでシンプルなUI
- レスポンシブ対応（モバイルファースト）
- ダークモード非対応

【その他】
- 日本語でコメントを書いてください
- エラーハンドリングを適切に行ってください

2. 機能追加プロンプト

既存のアプリに以下の機能を追加してください。

【追加したい機能】
{機能の詳細}

【現在のコード】
{該当するファイルのコードを貼り付け}

【要件】
- 既存のコードスタイルを維持
- 既存の機能を壊さない
- TypeScriptの型を適切に定義

差分のみ出力してください。

3. バグ修正プロンプト

以下のエラーを修正してください。

【エラーメッセージ】
{エラーメッセージをそのまま貼り付け}

【該当コード】
{エラーが発生しているファイルのコード}

【期待する動作】
{本来どう動いてほしいか}

【試したこと】
{すでに試した解決策があれば}

4. リファクタリングプロンプト

以下のコードをリファクタリングしてください。

【現在のコード】
{リファクタリングしたいコード}

【改善したい点】
- 可読性の向上
- 重複コードの削除
- パフォーマンスの改善

【制約】
- 既存の機能を維持
- 外部APIの呼び出し回数を増やさない

5. API実装プロンプト

以下の仕様でREST APIを実装してください。

【エンドポイント】
{HTTPメソッド} /api/{パス}

【リクエスト】
{リクエストボディの形式}

【レスポンス】
{レスポンスの形式}

【処理内容】
{何をするAPIか}

【技術スタック】
- Next.js API Routes
- Supabase（データベース）

【要件】
- エラーハンドリングを適切に行う
- 認証が必要な場合はミドルウェアで確認

6. データベース設計プロンプト

以下の要件でデータベーススキーマを設計してください。

【アプリ概要】
{何のアプリか}

【必要なデータ】
- {データ1}: {説明}
- {データ2}: {説明}
- {データ3}: {説明}

【リレーション】
- {テーブル1}と{テーブル2}は1対多

【出力形式】
- Supabase用のSQLマイグレーション
- TypeScriptの型定義

7. UI改善プロンプト

以下のコンポーネントのUIを改善してください。

【現在のコード】
{コンポーネントのコード}

【改善したい点】
- {具体的な改善点1}
- {具体的な改善点2}

【参考デザイン】
{参考にしたいサイトやスタイル}

【制約】
- Tailwind CSSのみ使用
- アニメーションは控えめに

8. テスト作成プロンプト

以下のコードに対するテストを作成してください。

【テスト対象のコード】
{テストしたいコード}

【テストフレームワーク】
Jest + React Testing Library

【テストしたい項目】
- 正常系: {期待する動作}
- 異常系: {エラー時の動作}

【出力形式】
テストファイル全体を出力してください。

9. パフォーマンス改善プロンプト

以下のコードのパフォーマンスを改善してください。

【現在のコード】
{パフォーマンスに問題があるコード}

【現在の問題】
- {具体的な問題: 例「ページ読み込みが遅い」}

【環境】
- Next.js 14
- Vercelにデプロイ

【確認したいこと】
- 不要な再レンダリングがないか
- データフェッチの最適化
- バンドルサイズの削減

10. デプロイ設定プロンプト

以下のプロジェクトをVercelにデプロイするための設定を教えてください。

【プロジェクト構成】
- Next.js 14 (App Router)
- Supabase（データベース・認証）
- 環境変数: {必要な環境変数のリスト}

【必要な設定】
- vercel.json
- 環境変数の設定方法
- ビルドコマンド

【注意点】
- ISRを使用している
- 画像最適化を使用している

プロンプトの改善方法

うまくいかないときのチェックリスト

プロンプトが曖昧ではないか？
- 「いい感じに」「適当に」は避ける
- 具体的な数値や条件を入れる
コンテキストが足りていないか？
- 既存のコードを貼り付けているか
- 使用技術を明示しているか
出力形式を指定しているか？
- 「差分のみ」「ファイル全体」など

プロンプトの改善例

改善前：

ログイン機能を追加して

改善後：

Next.js 14のApp Routerを使用したプロジェクトに、
Supabase Authを使ったログイン機能を追加してください。

【要件】
- メールアドレス + パスワードでログイン
- ログイン状態はクライアントサイドで管理
- ログイン後は/dashboardにリダイレクト

【必要なファイル】
- app/login/page.tsx
- components/LoginForm.tsx
- lib/supabase.ts（既存）

コード全体を出力してください。

まとめ

プロンプトの質がバイブコーディングの成功を左右します。

ポイント：

具体的に書く
技術スタックを指定する
期待する出力形式を伝える
うまくいかなければプロンプトを改善する

このテンプレートを参考に、自分のプロジェクトに合わせてカスタマイズしてください。

バイブコーディングプロンプト集｜コピペで使えるテンプレート10選