1. はじめに ― “AI はプロンプトで化ける”
v0.dev（以下 v0）も Bolt も、入力されたプロンプトがすべての出力品質を決めるツールです。曖昧な指示では「惜しい UI」や「動かないコード」を量産しますが、適切なプロンプトなら数行で MVP が立ち上がることも珍しくありません。公式でも “明確で段階的なプロンプトが最重要” と繰り返し述べられています。
2. プロンプト設計・共通 5 原則
| # | 原則 | 具体策 |
|---|---|---|
| 1 | 目的 > 背景 > 制約の順に書く | 「社内勤怠アプリを Next.js 14 + Supabase で作る。60 行以内、i18n なし」 |
| 2 | ライブラリ・バージョンを明示 | 例: “React 18 / Tailwind CSS v3 / shadcn/ui 使用” |
| 3 | パーツに分割 | 大枠 → コンポーネント → スタイル → データ結合 の4段階で生成 |
| 4 | 期待しないことを除外 | 「Redux は不要」「CSS Modules には触れない」 |
| 5 | 逐次改善を宣言 | “この後で細部を微調整するので大枠だけ返答して” |
3. v0.dev 向けプロンプト集
Tips
v0 には “UI Generation Block” や “LinearProcessFlow” など内部 DSL があり、タグ付きで指示すると再現性が高まります。
生成コードは React + Tailwind + shadcn/ui がデフォルト。変更したい場合は必ずバージョン付きで宣言しましょう。
3-1. レイアウトをパーツごとに作らせる
#1 まずレイアウト
Next.js 14 / React 18 / Tailwind v3
「サイドバー＋トップナビ＋メインコンテンツ」の 3 カラムだけ生成。
データ取得ロジック・API 呼び出しは含めない。
続けて:
#2 カード UI のみ
先程のメインコンテンツ枠に入れる「社内掲示板カード」を作成。
・タイトル、作成者、いいね数を props で受け取る
・shadcn/ui の <Card> を使用
3-2. バージョン固定テンプレ
UI を生成する前提:
- React 18.2
- Next.js 14 (App Router)
- shadcn/ui 1.6.0
- Tailwind CSS 3.4
これと矛盾する依存追加は禁止。
3-3. データ層モックと分離
バックエンドはまだ無いので、fetch の代わりに
`await new Promise(r => setTimeout(r, 300))` でダミーを返す
モックデータは utils/mock.ts に分離
3-4. 既存コードを「書き換えずに追加」
サイドバーの色だけ #121212 に変更。
それ以外の CSS・JSX を一切変更しない。
4. Bolt 向けプロンプト集
ポイント
Bolt は “ターゲットファイル指定” や.bolt/promptによる永続カスタム指示が強力です。プロジェクト全体ではなく特定ファイル/クラス/行だけを狙うとトークン消費も抑えられます。
4-1. ファイルを絞る
対象: src/components/Sidebar.tsx のみ
内容: Tailwind クラスを daisyUI に置換。
他のファイルはロック中なので触れないこと。
4-2. バージョン & フレームワーク固定
Remix v2 + Chakra UI v3 + Node 18 を前提に修正。
他フレームワークは提案・追加しない。
4-3. 変更禁止領域を宣言
// ⛔️ LOCK: do-not-edit-start
...protected code...
// ⛔️ LOCK: do-not-edit-end
上記のロック区間は絶対に変更しないで。
4-4. プロンプトエンハンサーと batch 指示
Prompt Enhancer を ON。
以下を 1 回で実行:
1. 全コンポーネントに <Tooltip> を追加
2. 色設定を Tailwind slate 800 基調へ
3. デバッグモードを false にセット
4-5. .bolt/prompt によるベースライン
.bolt/prompt:
Always prefer atomic CSS.
Use async/await, avoid .then chains.
Japanese comments only.
これですべてのチャット指示に自動で適用されます。
5. 逆算プロンプト（リファクタ & QA）
| 目的 | プロンプト例 |
|---|---|
| コードクリーンアップ | 「src 配下を走査し、同一用途のユーティリティを utils/ に統合。副作用が出る場合は差分レビューを生成」 |
| QA テスト追加 | 「/features/auth 直下のファイルだけに Playwright e2e テスト雛形を作成し、CI に統合」 |
6. “バージョン指定＋パーツ分割” チートシート
目的 : 何を作るか1文で
技術スタック & バージョン: React18 + Next14 + Tailwind3
段階 : #1 Layout #2 Components #3 Logic #4 Polish
制約 : ○○は禁止、××は必須
アウトプット形式 : コードのみ / MDX / diff
7. まとめ
- v0 は “生成対象を小さく分けて順番に依頼” が鉄則
- Bolt は “対象ファイルをピンポイント指定 &
.bolt/promptで常設ルール化” が近道 - 両ツールとも バージョンとライブラリを明記すると破綻しにくい
- 不要な操作をあえて書かない or 禁止することで “余計な差分” を防げる
この記事のテンプレをコピペして、あなたのプロジェクト名・フレームワーク・UI ライブラリに差し替えれば、v0 や Bolt の生成結果が一段階アップします。ぜひ手元で試してみてください！
コメント