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

Visual Studio Code 內的人工智慧不再僅僅是附加功能。 當您將 VS Code 的 AI 工具包視圖與精心編寫的提示檔案結合在一起時，可以將例行的開發任務轉化為更快速、更有架構的工作流程。 在他的影片"在 VS Code 中更好地使用 AI 與提示檔案"中，Tim Corey 精確展示瞭如何做到這一點，展示了在他自己網站程式碼庫中使用 AI 模型的實用例子。

在本文中，我們將跟隨 Tim 的解釋，強調 vscode AI 提示、提示工程實踐和聊天視圖如何結合在一起，以提供更多可靠、可重複的結果。

為何提示檔案重要

在 0:00 Tim 說道："使用提示檔案與 AI 可以將體驗從中等變得更好。"提示檔案告訴 AI 模型如何思考、如何進行以及如何回應使用者提示。 Tim 將這與 Microsoft 的 Burke Holland 的"野獸模式"檔案聯繫起來，這是一個大型系統提示，類似於模板。 透過使用這個，開發者可以減少重複的指令，減少錯誤，並在 VS Code 內獲得更可預測的生成程式碼。

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

Tim 的開發者資源

在展示工具前，Tim (0:27) 回顧了他提供的免費和付費資源——九個完整課程，第十個在 iamtimcorey.com 上，外加一個回答開發者問題的播客。 他強調這些是為了幫助開發者提高技能，構建更好的工作流程。 這為為何 VS Code AI 提示檔案重要奠定了基礎：它是現代實踐的一部分，用於改進日常編程任務。

在 VS Code 中設置野獸模式

在 1:22 Tim 進入了 VS Code 的工具區段。 他已經安裝並選擇了"配置模式"下的野獸模式。他解釋說，您可以打開 AI 工具包視圖，從模型目錄中瀏覽模型，並建立新的自定義模式。 在他的例子中，您可能會點選選擇新增提示，給它命名為"GitHub 聊天模式"，並在檔案內容中粘貼（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 的確切位置，但他首先使用此後續提示來測試野獸模式的功能。

野獸模式的計劃

在 6:00 Tim 解釋說，野獸模式勾畫了工作流程：識別正確的選擇器，新增 CSS 類別，新增懸停效果，然後測試和驗證。 它甚至將 CSS 放在 root 上方的正確 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 解釋說，您可以擴展野獸模式或建立您自己的提示建設者檔案來定義如何佈置檔案，如何處理程式碼格式，或如何調用 Python 函式。 然後您的日常提示可以短得多，仍然能產生一致的答案。

檢查 AI 輸出

在 11:50 Tim 警告要始終檢查 AI 的變更。 即使有受保護的提示檔案和良好做法，AI 仍然可能在錯誤的位置新增一個類別或打破您所需的依賴關係。 在他的範例中，AI 僅做了小的、合理的更改——在這裡新增了一個 CSS 類別，在那裡新增一行程式碼——但開發者仍應查看變更日誌並在必要時精煉。

Tim 總結說，一旦您喜歡的結果，您可以保存並重用。 這就是將 AI 模型和提示檔案用於 VS Code 的精髓：一個可重複、持續的工作流程，將臨時提示變成類似 SDK 的可靠體驗。

Tim Corey 演示的要點

遵循 Tim Corey 在 影片 中的演示，展示了在 Visual Studio Code 中一個設計良好的提示檔案如何：

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

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

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

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

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