C#とAI

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

Tim Corey

13 分 20 秒

Visual Studio Codeの人工知能は、もはや単なるアドオンではありません。 VS CodeのAI Toolkitビューと注意深く書かれたプロンプトファイルを組み合わせると、日常的な開発作業をより速く、より構造化されたワークフローに変えることができます。彼のビデオ"Better Use AI in VS Code with Prompt Files"で、ティム・コーリーは、自身のサイトのコードベース内でAIモデルを使用する実践的な例を示しながら、どのようにこれを行うかを具体的に示しています。

この記事では、ティムの説明に従って、vscodeの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のような体験に変えることができるのです。