プロンプトファイルでVSコードのAIをより良く使う

なぜプロンプトファイルが重要なのか

0:00でティムは、"プロンプトファイルをAIと一緒に使うことで、体験をまあまあから素晴らしいものに変えることができる"と言う。プロンプトファイルは、AIモデルに、どのように考え、どのように進み、どのようにユーザーのプロンプトに反応するかを指示します。 ティムは、これをマイクロソフトのバーク・ホランドの "Beast Mode "ファイルとリンクさせている。 これを使用することで、開発者は繰り返しの指示を減らし、ミスを減らし、VS Code内でより予測可能な生成コードを得ることができます。

ティムは、これを一種のプロンプト・エンジニアリングと位置づけています。再利用可能な指示セットを構築することで、後でチャット・ビューやアクティビティ・バーのAIツールキット・アイコンにクイック・ユーザ・プロンプトを入力するときに、AIはすでにあなたのコーディング・スタイルや好みのプロジェクト構造を知っているのです。

ティムの開発者リソース

ツールを紹介する前に、ティム（0:27）は、彼が提供する無料および有料のリソース（9つのフルコース、iamtimcorey.com上の10番目のコース、さらに開発者の質問に答えるポッドキャスト）について概説します。 彼は、これらは開発者のスキルを磨き、より良いワークフローを構築するためのものであることを強調しています。 これは、VS CodeのAIプロンプトファイルがなぜ重要なのかを説明するための舞台設定です。

VSコードでビーストモードを設定する

1:22から、TimはVS Codeのツールセクションに入ります。 彼はすでにBeast Modeをインストールし、"configure modes "で選択している。彼は、AI Toolkitビューを開き、モデルカタログからモデルをブラウズし、新しいカスタムモードを作成することができると説明しています。 この例では、Select Add Prompt をクリックし、"GitHub Chat Modes" というような名前をつけて、ファイルの内容を貼り付けます（1:34）。 これはカスタムシステムプロンプトを保存し、ワークスペースにいつでも準備できるようにします。

Timのセットアップでは、ローカルモデルやクラウドモデルを、独自のプロンプトビルダーの指示とどのように組み合わせることができるかを示しています。 すべてがVS Codeのルートフォルダまたは別の保存フォルダにきちんと収まるので、後で繰り返すのが簡単です。

実際のプロジェクトでAIを使用する

2:03から、TimはVS Codeワークスペースにホストされている実際のウェブサイトプロジェクトでAIを実演します。 彼は "Learning Paths "セクションのコードを開き、基本的にPython/Reactに裏打ちされたサイトであり、アプリのナビゲーションメニューを示しています。 彼は、ホバー時に小さなアニメーションを追加するために矢印アイコンを微調整したいと考えています（3:21）。

これは典型的な開発者のシナリオです。フロントエンドのコードがあり、AIエージェントにCSSを生成してもらいたい。 プロンプトファイルがすでに読み込まれているため、ユーザーのプロンプトは短く、AIが文脈を補います。

AIプロンプトの準備

3:38でTimはWindows Snipping Tool (Windows+Shift+S)を使って矢印を示すスクリーンショットをキャプチャしています（3:45）。 このビジュアルコンテキストは、AIに役立ちます。 そして、彼は4:43に自然なプロンプトを入力する：

ナビゲーションメニューのラーニングパスのセクションで、矢印を30度から水平に回転させてください。 以下は現在のスクリーンショットです。"

Timは、CSSをどこに置くかを後で正確に指定するかもしれないと書いていますが、彼はBeast Modeの機能をテストするために、次のプロンプトから始めます。

ビーストモードの計画

6:00でティムは、ビーストモードがワークフローの概要を説明していることを説明する：正しいセレクタを特定し、CSSクラスを追加し、ホバー効果を追加し、そしてテストと検証を行う。 さらに、CSSをルートの上にある正しいsite.cssファイルに配置しています（6:42）。 これは、プロンプトファイル内の定義済みのスキーマ、つまりスタイルの移動先に関する"ルール"が、AIの応答をどのように導くかを示しています。

ティムは、プロンプトファイルを使用することの"大きな意味"をこう呼んでいます。コンテキストを追加することで、毎回完全な説明を繰り返さなくても、AIがプロジェクト構造を知っているかのように操作できるようになります。

反復と洗練

ティムが6:54にサイトをチェックすると、生成されたコードは1つの矢印にしか影響せず、方向も間違っている。 彼は次に、7:29のプロンプトを改良して、ホバー効果を反転させ、すべての矢印に適用する。

8:49、彼はすべての矢印が一度に回転することに気づく。 そこで彼は、9:06に、ホバーされたアイテムにのみ効果を適用するようAIに指示する、別のユーザープロンプトを送信します。 ティムは9:38にこう述べている。 正しいことをするとは限りません。"

これは、チャットビュー内のプロンプトエンジニアリングの素晴らしい例です。 あなたは、AIがあなたが望む構造化された出力を生成するまで、プロンプトを編集し、繰り返し、保存します。 プロンプトファイルはすでにシステムプロンプトを供給しているため、新しい命令はそれぞれ小さな改良にすぎません。

最終結果

9:52までに、Timはアニメーションが矢印ごとに機能するようになったことを確認した：ホバーで回転、マウスオフでリセット。 彼は、明るいテーマに切り替えたり、暗いテーマに切り替えたり、色を変えたり、遷移を遅くしたり、好きなようにできると述べている（10:02）。 重要なのは、AIがSVG変換を理解し、彼のためにCSSを書いてくれたことだ（10:11）。

Timは10:30-11:20で、Beast Modeを拡張したり、独自のプロンプトビルダーファイルを作成したりして、ファイルのレイアウト方法やコードフォーマットの処理方法、Python関数の呼び出し方法などを定義できることを説明する。 そうすれば、日々のプロンプトはずっと短くなり、一貫した回答を得ることができます。

AIアウトプットのレビュー

11:50、ティムはAIの変更点を常に確認するよう警告する。 保護されたプロンプトファイルと優れたプラクティスを持っていても、AIが間違った場所にクラスを追加したり、必要な依存関係を壊したりする可能性があります。 彼の例では、AIは、ここにCSSクラスを追加し、ここにコードを1行追加するという、小さな、賢明な変更を加えただけであるが、開発者は、変更のログをチェックし、必要であれば改良すべきである。

ティムは最後に、気に入った翻訳結果ができたら、それを保存して再利用することができる、と述べて締めくくった。 これが、VS Code内でAIモデルとプロンプトファイルを使用することの本質です。つまり、反復可能で一貫性のあるワークフローによって、その場限りのプロンプトを信頼できるSDKのような体験に変えることができるのです。

ティム・コーリーのデモから得られるもの

動画にある Tim Corey のウォークスルーに従うと、Visual Studio Code 内で適切に設計されたプロンプト ファイルをどのように使用できるかがわかります：

• AIモデルに一貫した文脈を提供することで、プロンプトを短くすることができます。

• 生成されたコード、構造化された出力、およびフォーマットを自動的に処理します。

• ワークスペース、アクティビティバー、AIツールキットに統合することで、プロンプトを簡単に開き、テストし、改良することができます。

• モデルをブラウズし、ローカルモデルまたはクラウドを切り替え、プロンプトエンジニアリングルールをシームレスに適用できるようにします。

プロンプトファイルにルールを保存することで、AIに信頼できるエージェントスクリプトを与えることができ、同じ指示を繰り返すことなく、より高度な開発タスクに集中することができます。