v0 に効果的なプロンプトを作成するテクニックは、lovable などの他の AI プログラミング ツールにも適用されるはずです。 コアフレームワーク：3つの主要な入力 広範囲にわたるテストの結果、v0 チームは、最適な提案語にはすべて次の 3 つの部分が含まれていることを発見しました。 1. 製品表面 具体的に何をする必要があるのでしょうか? 2. ユースケース（使用状況） 誰が、いつ、どんな問題を解決するのでしょうか? 3. 制約と嗜好 どうすればいいですか？また、制限事項は何ですか？ テンプレートは次のようになります。 [特定のコンポーネント、データ、または関数]を作成します。 誰のために？ [どのようなシナリオ]では、 何の目標を達成するために。 制約: - プラットフォーム/デバイス - ビジュアルスタイル - レイアウト要件 パート 1: 製品の表面 「ダッシュボードを作成する」とだけ言うのではなく、ダッシュボードの中身を明確に説明します。 例えば： ダッシュボードの表示: - 上位5人の営業担当者の名前と業績 - チームのパフォーマンスと目標の進捗状況バー - セールスファネル（リード → 認定 → デモンストレーション → 成約） - 過去 6 か月間のパフォーマンス トレンド チャートが具体的であればあるほど、v0 が推測を誤ったり、使用されない機能を多数作成したりする可能性が低くなります。 パート 2: ユースケース これは最も見落とされやすい部分ですが、最も大きな影響を与えます。 次の質問について考えてみましょう。 - 誰が使っているんですか？ - いつ使うのですか? - どのような決断をすべきでしょうか? - どのくらいの時間がありますか? ダッシュボードの例をもう一度見てみましょう。 営業マネージャー（テクノロジーを理解していない）が朝の会議中にこれを使用しました。 オフィスの大型モニターで見る パフォーマンスが低い人をすぐに特定し、ついでにその良いパフォーマンスを称賛しましょう。 違いがわかりますか？ 同じダッシュボードでも、営業マネージャーの朝の会議用とデータアナリストの詳細な分析用ではまったく異なるデザインになる場合があります。 前者では重要なポイントを一目で確認する必要があり、後者では詳細なフィルタリングとドリルダウン機能が必要です。 Vercel チームは比較テストを実施しました。 使用例が指定されていないバージョン: - 検索機能は偽物です（単なるボックスです）。 - ショッピングカートをクリックできない - 携帯電話で見ると乱雑です ユースケースが説明されているバージョン: - 検索とショッピングカートの両方が利用可能です。 - 携帯電話と完全に互換性があります - クイックプレビューとカテゴリフィルタリングも自動的に追加されました。 生成に26秒余分にかかりましたが、その後の修正を1～2回繰り返す手間が省けました。結果的には、実際には速かったと言えるでしょう。 パート3：制約 含む： - スタイルの好み - 機器の想定 - レイアウトの期待 - 配色 - 応答性の高い要件 例えば： プロフェッショナルでありながらフレンドリーな雰囲気。 カード スタイルのレイアウトにより、明確な階層が提供されます。 色のスキーム: 緑は通常、黄色は警告、赤は緊急を示します。 主に大画面で使用されます。 本物の SaaS 製品のように感じられるはずです。 v0 のデフォルト設定はすでに優れていますが、特定の制約によってさらに優れたものとなり、コードもより簡潔になります。 実際のテストの比較 Vercel チームは、各セットで 1 つの変数のみを変更して、3 セットの比較テストを実施しました。 テスト1: 使用シナリオの影響 ぼやけたバージョン: 「電子商取引ウェブサイトを作成するには、商品のリスト、フィルタリング、ショッピング機能が必要です。」 クリアバージョン: ファッションECサイトは25～35歳の若者をターゲットにしており、彼らは主に通勤中にスマートフォンでサイトを閲覧しています。注文する前に、複数の商品を素早く比較検討します。 スクロール可能な画像、商品名、価格、説明、サイズと色の選択、カートに追加ボタンを含む製品ページを作成します。 上部には戻るボタンとショッピングカートアイコンのみを配置。すっきりと洗練された印象です。 結果：鮮明なバージョンは1回目の試行で正しく作成できました。ぼやけたバージョンはさらに1～2回の修正が必要です。 テスト2：製品表面への衝撃 より曖昧なバージョン: 「ユーザー プロファイル ページを作成します。」 クリアバージョン: 「アバター、ニックネーム、ユーザー名、メール、経歴、登録時間、アクティビティ統計 (投稿数、コメント数、フォロワー数)、最近のアクティビティ リスト (タイムスタンプ付き)、編集ボタンと設定ボタンを表示するユーザー プロフィール ページを作成します。」 テスト3: 制約の影響 基本バージョン: 「カスタマー サービス チケット ダッシュボードを作成します。保留中のチケット、応答時間、カスタマー サービスのパフォーマンス、最近のアクティビティを表示します。」 詳細版: カスタマーサービスチケットダッシュボードを作成します。保留中のチケット、応答時間、カスタマーサービスのパフォーマンス、最近のアクティビティを表示します。 モバイルファースト（マネージャーは現場にいるときに携帯電話を使用してコンテンツを表示します）。 コントラストの高い明るい色のテーマ。 色のスキーム: 赤は緊急 (24 時間以上)、黄色は中程度、緑は正常を示します。 最大3列のレイアウト。読み込み状態を含める必要があります。 主な違い: 基本バージョンは「モバイル フォンでのみ表示可能」(デスクトップ レイアウトは小さくなります) ですが、詳細バージョンはまさに「モバイル ファースト」です。 その後の反復 生成後に改善する方法は 2 つあります。 1. プロンプト語を書き続けます。 機能の追加や構造の変更など、機能の変更に適しています。 2. デザインモード：デザインモードをクリックし、要素を直接選択して調整します。色、間隔、フォントなどの視覚的な詳細を素早く変更するのに適しています。 覚えておいてください: ロジックと構造にはキューワードを使用し、視覚的な調整にはデザイン パターンを使用します。 最後に、完全な例を示します。 次の情報を表示する顧客サービス ダッシュボードを作成します。 - 保留中の作業指示の数 - 平均応答時間 - 作業指示書は優先度別に分類されます（高/中/低） - 顧客サービスパフォーマンスリスト（現在の作業負荷を表示） - 最近のチケットアクティビティフロー カスタマー サービス スーパーバイザー (5 ～ 10 人のカスタマー サービス担当者を管理) は、巡回中に携帯電話を使用して状況を監視し、カスタマー サービスの過負荷を防ぎ、応答時間の目標が満たされるようにします。 30 分ごとにチェックして、過負荷になっているカスタマー サービス スタッフを特定し、他のタスクに再割り当てします。 制約: - モバイルファースト、明るい色のテーマ、高コントラスト - 優先度による配色: 緊急の場合は赤、中の場合は黄色、通常の場合は緑。 - 顧客サービスのステータスインジケーター (ビジー/対応可能) を表示します。 - モバイルデバイスでは最大2列 結論は 適切なプロンプト = より良い結果 + より速いスピード。 次回v0を使うときは、もっと詳しく書いてみてください。誰を対象とし、なぜ必要なのか、そしてどのように使うのかを明確に記述しましょう。 -- 元の記事はコメント欄にあります。
スレッドを読み込み中
X から元のツイートを取得し、読みやすいビューを準備しています。
通常は数秒で完了しますので、お待ちください。