在VS Code中更好地使用AI與提示文件

為什麼提示文件很重要

在0:00，Tim說："使用提示文件與AI配合使用可以將體驗從一般變為卓越。"提示文件告訴AI模型如何思考、如何執行以及如何回應使用者提示。 Tim將此與Microsoft的Burke Holland的"Beast Mode" 文件聯繫起來，這是一個大型系統提示，類似於模板。 通過使用這個，開發者可以減少重複的指令，減少錯誤，並在VS Code中獲得更多可預測的生成代碼。

Tim將其框定為一種提示工程：您正在構建可重複使用的指令集，以便當您稍後在聊天視圖或活動列上的AI工具組圖標中輸入快速使用者提示時，AI已經知道您的編碼風格和偏好的項目結構。

Tim的開發者資源

在展示工具之前，Tim（0:27） 重溫了他提供的免費和付費資源——九個完整的課程，第十個在iamtimcorey.com，以及一個回答開發者問題的播客。 他強調這些資源旨在幫助開發者提升技能，建立更好的工作流程。 這為為什麼VS Code AI提示文件很重要鋪平了道路：這是改進日常編碼任務的現代實踐的一部分。

在VS Code中設置Beast Mode

在1:22，Tim進入VS Code的工具部分。 他已經在"配置模式"下安裝並選擇了Beast Mode。他解釋您可以打開AI工具組視圖，瀏覽模型目錄中的模型，並創建新的自定義模式。 在他的例子中，您可以點擊選擇添加提示，給它一個名字，比如"GitHub Chat Modes"，然後粘貼文件的內容（1:34）。 這樣您就可以隨時在您的工作區中使用您的自定義系統提示。

Tim的設置顯示了如何將本地模型或雲模型與您自己的提示構建器指令結合。 一切整齊地放在您的VS Code根文件夾或其他儲存的文件夾中，使其日後更易於重複使用。

在實際專案中使用AI

從2:03開始，Tim演示了在他的VS Code工作區託管的實際網站專案中使用AI。 他打開了"學習路徑"部分的代碼—本質上是一個Python/React支持的網站—並顯示了應用程序導航菜單。 他希望調整箭頭圖標以在懸停時添加小動畫（3:21）。

這是典型的開發者場景：您有一些前端代碼，您希望AI代理為您生成CSS，而不是手動編寫每個細節。 有了預先載入的提示文件，您的使用者提示可以很短，而AI會填寫上下文。

準備AI提示

在3:38，Tim使用Windows截圖工具（Windows+Shift+S）截取了一個顯示箭頭的屏幕截圖（3:45）。 這種視覺上下文有助於AI。 然後他在4:43鍵入了一個自然提示：

"在我的導航菜單的學習路徑部分中，將箭頭從30°旋轉到水平，當鼠標懸停時，再返回鼠標移出時。" 這是當前看起來的樣式的截圖。"

Tim指出，他可能稍後會具體說明將CSS放置在何處，但他從這個後續提示開始測試Beast Mode的功能。

Beast Mode的計劃

在6:00，Tim解釋說Beast Mode概述了一個工作流程：識別正確的選擇器，添加CSS類，添加懸停效果，然後測試和驗證。 它甚至將CSS放置在正確的site.css文件中，位於根目錄上方（6:42）。 這表明預定架構在你的提示文件中的作用——關於樣式去向的"規則"——引導AI的響應。

Tim稱之為使用提示文件的"大事件"：它增加了上下文，讓AI可以像了解您的專案結構一樣操作，而不必每次都重複完整的描述。

迭代和改進

當Tim在6:54檢查網站時，生成的代碼只影響了一個箭頭並且朝錯誤的方向。 然後他在7:29重新調整提示以翻轉懸停效果並應用於所有箭頭。

在8:49，他注意到現在所有箭頭同時旋轉。 因此他在9:06發送了另一個使用者提示，告訴AI僅將效果應用於懸停的項目。 Tim在9:38評論說："您必須調整AI。 它並不總是做對。"

這是一個關於在聊天視圖中進行提示工程的絕佳例子。 您編輯、重複和保存您的提示，直到AI產生您想要的結構化輸出。 由於提示文件已經提供了系統提示，每個新指令只是小幅調整。

最終結果

到了9:52，Tim確認現在動畫按箭頭工作：懸停時旋轉，鼠標移出時重置。 他指出您可能會切換到淺色主題或切換到深色主題，改變顏色，減速過渡 —— 隨您喜好（10:02）。 關鍵在於AI找出SVG變換並為他編寫CSS（10:11）。

Tim在10:30-11:20解釋說，您可以擴展Beast Mode或創建您自己的提示構建器文件來定義如何布局文件、希望如何處理代碼格式化或如何調用Python函數。 然後您的日常提示可以短得多，仍然能夠產出一致的回答。

檢查AI輸出

在11:50，Tim警告要檢查AI的更改。 即使有受保護的提示文件和良好的實踐，AI也可能會在錯誤的位置添加類或中斷所需的依賴項。 在他的例子中，這個AI只做了小而合理的變更 —— 添加了一個CSS類這裡，添加了一行代碼那裡 —— 但開發者仍應檢查更改日誌，必要時進行改進。

Tim最後指出，一旦您得到喜歡的結果，就可以保存並重複使用。 這就是在VS Code中使用AI模型和提示文件的精髓：一種可重複、一致的工作流程，將臨時提示轉變為類似SDK的可靠體驗。

來自Tim Corey的示範的收穫

按照Tim Corey在影片中walkthrough，顯示了一個精心設計的提示文件在Visual Studio Code中如何能夠：

• 向AI模型提供一致的上下文，讓您的提示可以更短。

• 自動處理生成的代碼、結構化輸出和格式化。

• 整合到您的工作區、活動欄和AI工具組中，以便您可以輕鬆打開、測試和改進提示。

• 允許您瀏覽模型，在本地模型或雲之間切換，並無縫地應用您的提示工程規則。

通過將您的規則儲存在提示文件中，您為AI提供了可靠的代理程式腳本，以便您專注於更高層次的開發任務，而不是重複相同的指令。