Github Spec Kit 遇到 GitHub Copilot CLI

原影片：GitHub Spec Kit 💖 GitHub Copilot CLI
中文版：

GitHub Copilot CLI 介紹

今天要談論的是 GitHub Spec Kit，搭配今天剛剛發布的全新工具 - GitHub Copilot CLI。這是一個新鮮出爐的寫程式 agent。如果你已經在使用 Claude Code、Gemini CLI 或 OpenAI Codex，現在你也可以使用 GitHub Copilot CLI 這個來自 GitHub 的原生工具。

多模型支援

GitHub Copilot CLI 是多模型的，你可以在預設的 Claude Sonnet 4 和 GPT-5 之間切換，這是一個真正可用的功能。

安裝方式

你可以前往 github.com/github/copilot-cli，向下捲動一點，你會看到 npm 安裝指令。複製它，在你的系統上執行，登入後就可以開始使用了。

使用體驗展示

精美的動畫效果

使用體驗非常令人愉快。看看這個動畫效果!每次啟動時看到這個動畫都讓人心情愉悅。

Spec Kit 專案初始化

我們要來建立一個新專案，叫做 copilot-term-test，因為我們正在使用終端機。

GitHub Copilot CLI 基於 GitHub Copilot 的標準慣例，所以我可以直接使用 copilot 選項並指定它。我選擇使用 PowerShell，因為這就是我們正在使用的。

指令改進

順便提一下，有個小改進:現在增強指令有專門的區塊。如果你在想「我是否需要執行所有這些指令才能成功?」答案是不用。clarify 和 analyze 實際上是輔助指令,你可以選擇使用。

專案設定

進入專案資料夾

cd copilot-term-test

我要關閉舊的 VS Code 視窗,然後開啟一個新的,這樣我就可以展示當 Copilot 迭代處理檔案時,你可以實際看到變更。

專案結構

我們有常見的結構:

• .github 和 prompts 資料夾
• specify 資料夾

如果你用過 Spec Kit,你就知道這是什麼。如果沒用過,可以觀看之前的影片,連結在說明欄位中。

啟動 Copilot

啟動參數

copilot --banner --allow-all-tools

• --banner:顯示精美的動畫
• --allow-all-tools:允許在不需要同意的情況下執行腳本 (危險模式)

這類似 VS Code 中的設定,但我選擇保留它。

信任資料夾

每次看到這個動畫都覺得很棒!我們需要信任這個資料夾。

指令系統

Slash 指令

和其他終端 CLI 一樣,我們支援 slash 指令。你可以輸入 / 然後看到一系列可用的指令。

/help

多來源指令支援

Copilot 一個很棒的特點是它能理解來自各種位置的指令。它不僅限於單一的 copilot-instructions.mmd 檔案。你可以從這些檔案讀取:

• agents.mmd
• claude.mmd
• gemini.mmd
• 任何包含 instructions.mmd 的檔案

這個慣例很實用,讓我能夠處理使用不同終端 agent 建立的專案,並且它們都能與 Copilot CLI 無縫整合。

自訂 Slash 指令解決方案

目前限制

Copilot CLI 目前還不支援自訂 slash 指令。這看起來可能是個限制因素,因為 Spec Kit 的核心不就是使用自訂 slash 指令嗎?你說得沒錯!

巧妙的解決方法

但這裡有個訣竅:我們可以引導 GitHub Copilot CLI 去理解如何使用這些 slash 指令。這很簡單,看我怎麼做:

我們將使用來自 .github/prompts 的 slash 指令

記住,slash 指令本質上就是自訂提示詞。如果我們去 VS Code 看 .github/prompts,我們有:

• analyze
• clarify
• constitution
• implement
• plan
• specify
• tasks

這些都是 slash 指令。

教導 Copilot

如果 Copilot CLI 還不支援 slash 指令,我們就告訴它這些是什麼。當然,如果你比我聰明,你可能會把這個編碼進 agents.md 或 copilot-instructions.mmd,這樣你就不用每次在新對話中都解釋一次。

看,它實際上正在執行腳本來理解我在這些資料夾中有什麼。它列出了目錄,看到了 analyze、clarify、constitution、problems、implement。它正在解析內容,內化它能做的事情,因為我們給了它提示。

提示的重要性

那個提示很重要。它告訴 Copilot 這些是我們在這個專案中要使用的 slash 指令。如果你打算重複使用,把它放進像 agents.md 這樣可重複使用的檔案會很有幫助。

Copilot 識別出了指令,提供了可用的 slash 指令清單。雖然它還不支援 slash 指令,但因為它解析了 prompts 資料夾,現在我們可以使用它們了。

Spec Kit 工作流程

第一步:Constitution

按照典型的 Spec Kit 方式,我們從 constitution 開始:

/constitution 靜態網頁應用程式，最少依賴套件

沒有提示或自動完成,沒有智慧感知告訴我 constitution 存在。他們正在研究這個功能,我被告知他們正在處理。

Constitution 建立過程

如果一切順利,它會處理 constitution 提示詞並建立 constitution。它正在查看正確的資料夾路徑、README、specified 範本。

Constitution 文件被載入後,它會解析內容。這裡要指出的重要一點是關於模型選擇,因為我提到 Copilot CLI 是多模型的。

Claude Sonnet 4 vs GPT-5

• Claude Sonnet 4:非常詳細,會告訴你它在做什麼。你可以清楚地看到狀態
• GPT-5:更加獨立,基本上是「讓我做這件事,相信我這正是你需要的」

對我們來說,我們使用預設設定的 Sonnet 4,以確保能看到正在發生的一切。我想看到這裡的詳細資訊,例如「建立 constitution MD 路徑已存在」、「找不到匹配」等。

它經歷了一個迴圈,這沒關係,可能會發生。它也會更新範本,因為這是 constitutional 更新指令的一部分,確保它們符合憲法要求。

檢視結果

讓我們看看實際發生了什麼。我們看到它正在查看範本、constitution 檢查區塊。我之前沒見過這些錯誤。

Windows 支援注意事項

對於 Windows 上的 Copilot CLI 支援,你可能會遇到一些以前沒見過的錯誤。這可能發生,因為這是預覽版軟體。

請讓團隊知道!你可以使用 /feedback 來開啟關於你所見問題的 issue。如果你在 Windows 上執行,特別是在 PowerShell 而不是 WSL 2 上,/feedback 是你的好朋友。團隊會相當頻繁地分類處理這些問題。

Constitution 完成

Constitution 現在已準備好指導所有未來的開發,但讓我們確認一下。我們去 VS Code 看看 specify 和 memory/constitution。有了!我們看到變更的內容:

• 最少依賴套件
• 靜態優先
• 漸進式增強
• 效能優先
• 無障礙和標準

它填充了範本,完成了工作。我非常喜歡它做了我要求的事。

第二步:Specify

建立規格

一個指令完成了,現在我們進行 /specify:

/specify 播客落地頁面，包含三個精選集數

如果一切順利,這應該會執行腳本。它改變了分支!它動態地顯示了 001-podcast-landing-page。它原本在 main 分支,現在使用 podcast-landing-page-1。

輔助腳本執行

它執行了我們的輔助程式 create-new-feature.ps1 (PowerShell 腳本)。這是個好跡象,它實際上遵循了 /specify 指令。

我超級開心!在自訂 slash 指令正式上線之前,這個技巧或解決方法就存在了,因為我實際上可以使用它。

不僅限於 Spec Kit

而且我們談論的是 Spec Kit,但這也適用於其他東西。如果你有自訂 slash 指令,不用擔心 Spec Kit。

檢視規格檔案

讓我們看看 VS Code。我們有 specs/podcast-landing-page,我們有規格檔。它建立了這個,很棒!

第三步:Clarify

Clarify 指令介紹

我在上一支影片中介紹的 clarify 指令允許 LLM 測驗你並給你選項。如果文件中有未充分指定或沒有額外背景的內容,它會測驗你並要求澄清。

在 VS Code 中,它會呈現表格,因為它給我選項 A、B、C、D,或我可以直接指定答案。讓我們看看 GitHub Copilot CLI 能否應對這個挑戰:

/clarify

Clarify 執行

我真的很好奇這會如何呈現。這是我第一次看到這個,所以可能會出問題,但我相信它。我認為體驗應該會很好。

它執行了腳本,很好!它正在尋找規格中的模糊之處,它正在查看規格檔案,這很好。

互動式問答

哇,看!它呈現了一個表格!

問題 1/2:「應該如何為落地頁面選擇三個精選集數?」

選項:

• A. 最新的三集
• B. 最受歡迎的三集 (依下載量)
• C. 人工策劃的精選集
• D. 隨機選擇

選 A。看起來只有兩個問題。這次問題不多,因為在上一支影片中記得有五個問題。現在只有兩個。我想我在提示方面做得更好了。好吧,這絕對不是因為這是個超級簡單的專案。

第二個問題

問題 2/2:「落地頁面上的訂閱連結應該包含哪些播客平台?」

選項:

• A. 僅主要平台 (Apple Podcasts、Spotify、Google Podcasts)
• B. 全面的平台清單 (包括較小的平台)
• C. 可設定的平台選擇

我想選 B。

記錄澄清內容

編輯 spec.md

完美!我們記錄了澄清內容。正在發生,事情正在進行!

檢視 Spec 更新

查看變更

我原本期待看到差異,但它還沒有顯示差異(像是新增的行、刪除的行),但沒關係。它給了我一個澄清內容的摘要。

讓我們看看。我們有規格檔。啊哈!就像我們預期的,它記錄了對話。日期有點不對 (今天不是今年的 1 月 27 日),但沒關係。它確實記錄了我們澄清的答案。

資料在這裡,我們記錄了功能需求的內容。很好,我們有需求了。

第四步:Plan

建立技術計畫

記住,我們鏈中的下一個指令是 plan,因為我們需要技術計畫:

/plan Next.js 靜態網站建置，無資料庫，無 ORM，只有假資料

Plan 輔助腳本

plan 步驟也有輔助腳本。我們看看它是否執行。執行了!它有個 setup plan,它執行了,可以運作。

現在它正在思考計畫需要做什麼。因為這是個較長的任務,我們讓它繼續思考。

Plan 完成

工作完成了。讓我們看 VS Code。我們看到一堆東西。我們有 plan.md,概述了許多關卡和架構,這很不錯。所有背景資訊都在這裡:快速入門、研究資料模型合約。這些是我們實際期待看到的內容。

移除測試

跳過測試

因為我想讓這個更快完成,我不想做測試。就像上一支影片一樣,我要跳過測試:

移除計畫和相關內容中所有關於測試的參考。我不想做測試。

因為我們快速迭代,這是個播客落地頁面,我們不需要為播客落地頁面寫測試。所以我們讓它移除測試相關的參考。

測試移除完成

我想我們現在狀態很好。沒有測試了,我們準備好處理任務了。

注意它實際上會突出顯示自訂 slash 指令。雖然還不支援自訂 slash 指令,但它會突出顯示它們,所以我們知道該做什麼。

第五步:Tasks

建立任務

/tasks

這是個令人愉快的體驗,我很喜歡。我們要執行 tasks 將其分解為個別任務,正如你們都非常熟悉的,這些只是 LLM 可以逐一執行的任務。

它也成功執行了腳本。所有輔助腳本,來自自訂 slash 指令的一切都在運作。這有多棒。

支援參數

而且,這些 slash 指令已經接受參數。記得我們執行整個 constitution 然後傳遞參數嗎?記得我們談到 /specify 然後概述我們要指定什麼嗎?這在今天就支援了。

我可以這樣做,它只是解釋整個背景,不會顯示其他 CLI 的漂亮 UI,但它能運作。這支影片證明了它實際上適用於你在 prompts 資料夾中為自己定義的自訂指令。

等待完成

我們要等待 tasks 完成。我們又回到等待狀態。老實說,這支影片大部分都在等待。

Tasks 完成

好了。我們有任務了,我們回到 VS Code。我們看看。我們有任務:

• 設定資料
• 類型
• 基礎
• 核心元件
• 頁面整合
• 優化和潤飾

看起來合理。

第六步:Analyze (可選)

Analyze 指令

但記住還有另一個可選指令我們也想在 GitHub Copilot CLI 中測試,那就是 /analyze。這是棘手的部分。

/analyze

它必須整合我們整理的所有背景資訊,才能真正分析我們可能未充分指定的內容,或可能與 constitution 衝突的內容。

CLI vs VS Code 的優勢

我真正喜歡在 CLI 中操作而不是在 VS Code 中操作的一點是:我有更多空間。我有更多空間看到正在發生的事情。

在 VS Code 中,它是右側的面板,我必須限制它,除非我展開面板然後開始隱藏程式碼。但在終端機中,我真正沉浸在這個體驗中。看看這個,我清楚地看到步驟。

如果我有大螢幕,而不是你在這支影片中看到的解析度模擬的小螢幕,那麼我可以看到一大堆正在發生的事情。我還是有點想念差異比對,但沒關係。

終端機工作流程

我喜歡在終端機中工作,然後使用 VS Code 或任何編輯器 (你可能使用 Zed、Sublime Text) 作為差異比對機制,實際取得檔案中可能發生的變化之間的差異。

就像我們在這裡做的:在終端機中操作,但然後去 VS Code 檢查實際產生了什麼。

Analyze 結果

看起來這裡沒有太多衝突。一切看起來都很好。我們有任務,有適當的涵蓋範圍,憲法合規性似乎沒問題。我們準備好實作了。

第七步:Implement

開始實作

現在是有趣的部分。我們看看它產生什麼以及如何運作。我們要觸發 /implement,讓 GitHub Copilot CLI 使用 Claude Sonnet 4 為我們建置我們急切等待的播客落地頁面。

/implement

我們最後一個取得結果的 slash 指令。來吧!現在讓我們等待實作。

實作過程

[等待中]

實作完成

它完成了工作。讓我們去終端機看看。

測試結果

檢查專案

實際發生了什麼?我很好奇。讓我們看看這個資料夾。我們有 package.json。所以我們執行 npm install 確保套件安裝並執行。

npm install

然後我們看看:

cat package.json

確認指令。我們可以執行:

npm run build

建置與執行

希望這能運作。[建置中]

接近了!

然後:

npm run dev

我們有網站 localhost:3000。

查看結果

讓我們看看這是否運作。

看!我們有播客落地頁面!就在那裡。它由某個叫 Sarah Johnson 的人主持,我不知道那是誰,但為他們感到高興。我們有連結。它產生了!

Copilot CLI 做得很棒,我認為,即使它不支援自訂 slash 指令。我們讓它運作了,很棒,我很喜歡。

再看一次動畫

只因為我太喜歡了:

copilot --banner

看看這個!我就是喜歡看這個動畫,太棒了!

總結

這就是我向你展示如何將 Spec Kit 與 GitHub Copilot CLI 一起使用。你今天就可以試用。

再次強調,前往 github.com/github/copilot-cli 並下載。在 Windows、macOS 和 Linux 上試用 CLI,並使用 /feedback 指令給我們回饋。

我很期待看到你建置的東西。下次見!