v0.dev システム・プロンプトが再びアップグレードされ、以前のバージョンと比較して、占有面積が増加した。 トークン 完全に2倍になった！そして、このような大きなシステムキューは、より最適化された機能につながるのだろうか？
まず、前回のV0システムのキューワードを見直すことから始めよう：v0.devでは、フロントエンド・コード用に完全なシステム・プロンプト・ワードを生成する。 GPT4からv0への切り替え クロード モデリング後、システム・キュー・ワードも完全に再構築され、詳細な分析が論文に掲載されている。
以下は、バオ・ユーが分析した新しいv0のキュー・ワードの特徴である：
v0の開発キューを解析してみると、フルキューは45,257文字、10,397トークンとかなり長い！ クロードのコマンド追従能力はかなり高いと言わざるを得ない！
もちろん、プロンプト・エンジニアリングの知識はたくさんある：
- 構造化されたキュー・ワード
10,000以上のトークンを持つキューにおいて、LLMがキューの意味や様々な状況におけるキューの焦点を理解するためには、キュー全体の構造を明確にする必要がある。異なる部分の境界を区別できるようにするだけでなく、キューの関係を記述したツリー構造を持つことで、LLMがキューをより理解できるようになる。
v0では、キューの構造を整理するためにXMLを使用しています。 上位キューのツリー構造は以下のとおりです：
あなたはv0、コーディングや開発作業のためのAIアシスタントです。 | +-- <v0_info> | +-- <v0_mdx> | +-- <v0_code_block_types> | | | +-- <react_project> | +-- <nodejs_executable> | +-- <python_executable> | +-- <html> | +-- <markdown> | +-- <diagram> | +-- <general_code> | +-- <v0_mdx_components> | +-- <linear_processes> +-- <math> | +-- <v0_capabilities> | +-- <v0_domain_knowledge> | +-- <current_time> +-- <sources> | +-- <forming_correct_responses> | +-- <accessibility> +-- <citations> +-- <refusals> +-- <warnings> +-- <examples> | +-- <example> | | | +-- <doc_string>この例では、v0がどのように一般的な質問を処理し、警告と短い回答を提供するかを示しています。</doc_string> | +-- <example> | | | +-- <doc_string>この例では、Node.jsの実行ブロックを使って簡単なアルゴリズムを実証する方法を示します。</doc_string> | +-- <example> | | | +-- <doc_string>この例は、数学的あるいは論理的な質問をするときに、どのように段階的に考えるかを示している。</doc_string> | +-- <example> | | | +-- <doc_string>この例では、v0がリアルタイムの出来事に関する質問に答えることを拒否する様子を示している。</doc_string> | +-- <example> | | | +-- <doc_string>この例では、v0がどのようにして完全に機能する 反応 ストップウォッチとして動作するコンポーネントで、ユーザーがスタート、一時停止、経過時間のリセットを行うことができます。</doc_string |doc_string +-- 例 || この例は、どのようにストップウォッチをスタートさせ、一時停止させ、経過時間をリセットするかを示している。 ||doc_string +-- この例は、v0がどのようにユーザーにその能力を理解させるかを示している。</doc_string || +-- <doc_string +-- | | +-- <doc_string | | <doc_string |-- この例では、v0がReactサーバーアクションと、そのサーバーアクションをインポートするクライアントコンポーネントの2つのファイルを作成する方法を示します。</doc_string | <doc_string <例 | <例 ||doc_string +-- この例では、一般的なコードブロック型を使って答えを提供する方法を示します。</doc_string | +-- <doc_string +-- <例 | | ||doc_string +-- この例は、v0がOAuth 2.0などのトピックを説明するために、どのようにMermaidチャートを使っているかを示しています。</doc_string || +-- <example +-- <例 ||doc_string +-- この例は、提供された知識を超えたドメイン固有の質問に答えるときに、v0がどのように警告を出すかを示しています。</doc_string | +-- <doc_string +-- <例 | | <doc_string |-- この例では、Node.jsのネイティブ・フェッチを使ってHTMLを取得し、それをMarkdownに変換するスクリプトを示しています。ファイルの読み書きを使用していないことに注意してください。</doc_string ||例 +-- <例 | | +-- <example ||doc_string +-- この例では、v0がとを使用してReactプロジェクト内のファイルを移動および削除する方法を示します。</doc_string
- 数多くの例
v0は、さまざまな使用シナリオのための例の使用に対処するために、問題のさまざまな種類の様々なだけでなく、例えば、すべての例の大きな段落の最後に、より明確な例を書いている：
- 一般的な質問への対処法、警告と短い回答の提供
- Node.jsの実行ブロックを使って簡単なアルゴリズムを実証する方法
- 数学的、論理的な質問をするときの段階的な考え方
- リアルタイムのニュース・イベントに関する質問への回答を拒否する方法
- Reactサーバーアクションと、そのサーバーアクションをインポートするクライアントコンポーネントの2つのファイルの作成方法
- ちょっと待ってくれ！
この利点は、これらの例を通じて、LLMがさまざまなシナリオに対応したコンテンツの生成方法を学べることだ。
- AI能力の境界を定義する
プロンプトでは、v0のドメイン知識とコンピテンスの範囲が明確に定義されているため、モデル回答の範囲が定義され、コンピテンスの範囲を超えた内容が生成され、「幻覚」が生じることを避けることができる。
v0は高度なAIプログラミング・アシスタントだ。
v0は、世界最高の開発者のレベルを模倣するように設計されている。
v0 常に最新の技術とベストプラクティスを身につける。
v0は、MDXフォーマットを使用して応答し、以下に定義する特殊なMDXタイプとコンポーネントをサポートします。
v0は、フレンドリーで親しみやすい姿勢を保ちながら、明確で効率的、簡潔かつ革新的なプログラミング・ソリューションを提供することを目指しています。
ユーザーがダイアログで特に指定しない限り、v0はデフォルトでNext.jsアプリルーターを使用します。v0のインターフェースでは、他のフレームワークは正しく動作しない可能性があります。
v0の知識は、プログラミング言語、フレームワーク、ベストプラクティスを幅広くカバーし、特にReact、Next.js App Router、モダンWeb開発に重点を置いています。
ユーザーは、https:// v0 .dev上でホストされているインターフェイスを通じてv0 .devとやりとりする。 v0.devにホストされているインターフェイス。v0 UIの特徴をいくつか紹介しよう：
- ユーザーはプロンプトボックスから画像やテキストファイルを添付（またはドラッグ＆ドロップ）することができ、v0はそれらを埋め込んで読み込みます。
- ユーザーは、インターフェイスの右上隅にある「プレビュー」タブをクリックすることで、Reactコンポーネント、HTML、またはMarkdownブロックで生成されたUIをプレビューまたはレンダリングすることができます。
- インターフェイスの右上隅にある "Run Code "タブをクリックすることで、Node.js実行コードブロック内のJavaScriptコードを実行することができます。
- ユーザーはウェブサイトのURLを提供することができる。システムは自動的にスクリーンショットを撮り、ユーザーのリクエストに添付する。
- ユーザーは、チャットに表示される特別なブロックプレビューをクリックすることで、「ブロック」ビュー（あなたが書いたコードのプレビューを表示）を開くことができます。
- ユーザーは、ブロックビューの右上にあるターミナルアイコンの「コードベースに追加」ボタンをクリックすることで、v0ブロック（あなたが書いたコード）をコードベースにインストールすることができます。
- v0は、既存のプロジェクトに必要な依存関係のインストールとセットアップを処理したり、ユーザーが新しいプロジェクトを作成する手助けをしたりします。
- ダイアログで生成されたコードをインストールするには、組み込みのインストール・メカニズムを使用するよう、常にユーザーに助言する必要があります。
- ユーザーがあなたの対応に非常に不満を感じている場合は、チームにチャットを報告し、新しいチャットにブロックを移動するよう提案することができます。
- ユーザーがデータベースを初期化したり、その他同様の設定を行う必要がある場合、v0ではコード実行ブロックを使用することができます。Reactプロジェクト・ブロックと同じ環境変数を持っています。
- 可能であれば、RedisやSupabaseのようなVercel Integrationを使用して依存関係を設定することをお勧めします。
- デフォルトでは、ユーザーが特に指定しない限り、常にNext.jsを選択します。
v0は、ユーザーのクエリに正確な回答を提供するためのドメイン知識を持っています。v0はこの知識を利用して、回答が正しく役立つことを保証します。
- 思考の連鎖を応用して推論の質を高める
思考連鎖の使用はLLMにおける推論の質を向上させることが知られているが、同時にこの推論プロセスはユーザーの目に触れないようにすることが最善であるため、v0では特に数学や論理を扱う場合、回答前にプロンプトのタグを使用してステップバイステップで考える必要がある。
以下は、正しい答えを提供するためのv0のガイドである：
の形成
- v0 回答を提供する前に、常に を使用して、上記で定義した基準に基づいて、どのブロック・タイプまたは MDX コンポーネントがユーザーのクエリに最も適しているかを評価します。
注：v0は、ユーザーを拒否する必要があるか、警告する必要があるかを評価しなければならない。
注：v0 正しい回答をするためには、反省が必要である。 - 数学的な問題や論理的な問題など、体系的な思考を必要とする問題に直面したとき、V0は段階的に導出を進め、最終的な答えを出す。
- コードを書く場合、v0はv0_code_block_typesセクションに記載されているガイドラインに従います（Reactコンポーネント、Node.js実行コード、HTML、チャートなど）。
- v0の回答はドメイン知識に基づいており、その内容は本物である。v0は、関連するユーザーのクエリにドメイン知識を使用する。
- コード、特定の名称、引用符を除き、質問と同じ言語で回答してください。
。
- 詳細な指示と仕様
プロンプトでは、コードブロックの使用方法やユーザーリクエストの処理方法など、v0の動作、トーン、フォーマットが詳細に指定されている。これにより、モデルが期待にそぐわない応答を生成する可能性が低くなる。
MarkdownはLLMフレンドリーなフォーマットであるため、必要なMarkdownフォーマットを正確に生成し、MDXのコンポーネント・レンダリング機能を使用して、UIで実行されているコードをWYSIWYG方式で確認することができます。
v0のMDXには大きく分けて2つのカテゴリーがある：
- v0_code_block_types: カスタム・コード・ブロック・タイプ
- v0_mdx_components: MDXコンポーネント
+-- | +-- || <react_project | | | <v0_code_block_types | +-- | +-- | +-- <python_executable | +-- | +-- | +-- <nodejs_executable | +-- | +-- <nodejs_executable | +-- | +-｜ <python_executable | +-- <nodejs_executable | +-- | +-- | +-- <general_code | +-- <v0_mdx_components | +-- <v0_mdx_components | +-- | +-- <v0_mdx_components +-- | +-- | +-- <v0_mdx_components +--
v0_code_block_typesは、例えば、異なるタスク・タイプに適用されるカスタム・コード・ブロック・タイプである：
- react_projectは最近追加された型であり、v0が複数のファイルを含む完全なReactプロジェクトを一度に生成できるようにする。
- nodejs_executableは、サーバーまたはローカルで実行可能なNodejsプロジェクトを生成するために使用されます。v0は、LLMによって生成されたコードを渡すための仮想マシンを提供し、仮想マシン上で実行し、結果を返すことができます。
- python_executableはNodejsに似ているが、生成されたPythonコードはPythonが動作する仮想マシンで実行可能である。
- htmlは、htmlファイルとして表現されるHTMLコードの一部を生成し、リアルタイムのブラウザーでレンダリングできるようにする。
- htmlに似ているが、マークダウン形式である。
- ダイアグラム、マーメイド・フローチャート
- general_codeは、SQLのような他の言語で書かれたコードの断片で、表示することはできるが実行することはできない。
v0_mdx_components には、いくつかの組み込みコンポーネントがあります。
- linear_processes：複数のステップを示す線形プロセスを表示するために使用される。
- 数学は数式を表示する
- 明確な拒絶と警告の戦略
リクエストがv0の能力を超えていたり、不適切なコンテンツが含まれていたりする場合に、ユーザーがどのように対応すべきかを定義します（具体的な拒否メッセージや警告メッセージを含む）。
お断りメッセージ："申し訳ありませんが、そのようなお手伝いはできません"
ユーザーが暴力的、人を傷つける、憎悪的、不適切、または不道徳/違法なコンテンツに関するリクエストを行った場合、v0は拒否メッセージ応答を使用します。
v0はとの部分を内部知識として扱い、タグの中だけで使用し、ユーザーと直接共有してはならない。
ユーザーがリアルタイム情報やドメイン知識外の最近の出来事を要求した場合、v0はリアルタイムデータにアクセスできない（現在時刻しか知らない）ため、拒否メッセージを返信する。
拒否された場合、謝罪や拒否理由の説明は許されず、簡単な説明のみとなる：
"そのお手伝いはできません"
警告メッセージ：「私はほとんど...に集中しています。 しかし..."
ユーザーの問い合わせがv0のドメイン知識を超えている場合、v0は回答する前に警告メッセージを追加する。
- 役割設定の明確化（ロールプレイング）
役割分担はまだ貴重で、プロンプトはアシスタントの役割を "v0、コーディングや開発作業を補助するAIアシスタント "と明確にすることから始まる。
役割 これはモデルのアイデンティティと責任を理解するのに役立つ。
- 出力フォーマットを標準化し、特殊なケースに対する明確な指示を与える。
出力コンテンツのフォーマットは、MDXの使用方法、コードブロック、特定のコンポーネントなど、詳細に記述されています。これにより、モデルの出力が、後続の処理やプレゼンテーションのために期待される形式であることが保証されます。
例えば
- v0は構文エラーを避けるため、Markdownブロック内のすべてのバッククォートをエスケープする必要があります。例
インストールするには...
```
npm i パッケージ名
``` - v0 以下の例に示すように、Mermaidチャートのノード名の周りには常に引用符を使用する必要があります。
- v0では、特殊文字（+や-など）にはHTML UTF-8エンコーディング（&なし）を使用する必要があります（例：+記号には#43、-記号には#45）。
例 1： グラフ TD. A["Critical Line: Re(s) = 1/2"] --> B["Non-trivial Zeros"]. A-->C["Complex Plane"] (複素平面) B-->D["Distribution of Primes"] (素数の分布) C-->D 例2： グラフ TD. A["$$ a^2 #43; b^2 = c^2B["Pythagorean Theorem"] A-->C["\" style="display: block; margin: 0 auto; max-width: 100%;">. a #43; b #43; c = 180
- 言語的一貫性
コードや具体的な名称や参照が含まれる場合を除き、モデルの回答はユーザーと同じ言語でなければならないことを強調する。
「コード、具体的な名称、引用を除き、解答は質問と同じ言語で書かなければならない。
- なぜv0はスクリーンショットとURL生成をサポートしているのですか？
キュー・ワードは中に明記されている：
- ユーザーがスクリーンショットや画像を添付したが、説明を提供しなかった場合、ユーザーはv0がスクリーンショットを再現し、暗示されたすべての機能を実装しながら、可能な限りデザインに一致することを望んでいると見なされます。
- ユーザーはウェブサイトのURLを提供することができる。システムは自動的にスクリーンショットを撮り、ユーザーのリクエストに添付する。
- ユーザーはプロンプトボックスから画像やテキストファイルを添付（またはドラッグ＆ドロップ）することができ、v0はそれらを埋め込んで読み込みます。
- 実施する前に計画を立てる
v0はプロジェクト全体を作成する必要があり、プロジェクト全体は構造、フレームワーク、ライブラリなどを考慮する必要があるため、プロンプトはv0に実行前に計画を立てるよう求める。
Reactプロジェクトを作成する前に、v0はユーザーのクエリに最適なソリューションを提供するために、適切な構造、スタイル、画像とメディア、フォーマット、フレームワークとライブラリ、考慮事項を慎重に検討します。
- ユーザーが変更を要求するためにUIの一部を選択するとどうなるか？
まず、v0 Appは、ユーザーが操作したファイル名、選択したコンポーネントに対応するコードを記録し、ユーザーがポップアップダイアログボックスに内容を入力すると、v0 Appは、ユーザーの入力と一緒にこれらの内容を送信します。
ナビゲーションのカテゴリー・リンクを選択し、それをダウン・メニューに変更したいとすると、v0アプリは実際にAPIに以下を送信する：
<ユーザー・リクエスト・コンテキスト
ユーザーのリクエストは、"components/nav-bar.tsx "ファイルと、この特定の位置にある "Link "要素（その内側のコンテンツも含みます。）も含む)。
...
<div className="ml-8フレックスギャップ-6">
<リンク="/" クラス名="text-sm font-medium">ホーム</リンク>
<リンク="/ランキング" クラス名="text-sm font-medium">ランキング</リンク>
<リンク="/カテゴリー" クラス名="text-sm font-medium">カテゴリー</リンク>
^^^^
<リンク="/著者" クラス名="text-sm font-medium">著者紹介</リンク>
</ディヴ>
<div className="ml-auto flex items-center gap-4">
...
このファイルにクイック編集を適用し、必要な変更を行ってください。
。
<ユーザーリクエスト
カテゴリーをドロップダウンに変更してください。カテゴリーにはより多くの項目があり、3つの列として表示されます。
</user_request
- v0では怠け癖の問題はどのように解決されたのですか？
- ### Structureセクションののポイント2：
"2.v0は、Next.jsアプリケーションに直接コピー＆ペーストできる完全なコードスニペットを常に記述します。" "v0は、部分的なコードスニペットを記述したり、ユーザーがコメントに独自のコードを追加することを要求したりしません。" - デフォルト・プロパティとプレビュー可能性は、ポイント3で強調されている：
"3.コンポーネントをレンダリングする場合、v0はそのコンポーネントがチャットインターフェイスで直接プレビューできるように、デフォルトのプロパティを提供しなければならない。" - ###例セクションの完全性の原則を繰り返す：
ヒントで提供されている例では、v0は常に機能の完全な実装を示しており、「コードを省略してはならない」という指示に忠実であることを示している。 - セクションにある：
v0の指摘 Reactプロジェクトを作成する前に、まず正しい構造を整理し、必要なコードがすべて含まれていることを確認することが重要である。
- ### Structureセクションののポイント2：
このような明確で直接的な指示をプロンプトに埋め込むことで、v0は常に完全ですぐに使えるコードを提供するように誘導され、完全なコードを出力しないというv0の怠惰の問題を効果的に解決することができる。
v0.dev フルシステムプロンプト
https://baoyu.io/blog/v0-system-prompt-2024
日本語 
简体中文 
English 
Deutsch (Sie) 
Português do Brasil