Spec Kit - 跨世代的摸魚開發神器

# Spec Kit - 新世代的~~摸魚~~開發神器 By Chris --- ## 原形概念 - SDD 規格驅動開發（Spec-Driven Development, SDD）要求在寫程式之前，必須先清晰、詳盡地定義規格（Spec）。所有後續的開發工作，包括程式撰寫和測試，都必須遵循這些規則，確保最終交付的產品符合最初的定義。 --- ## Spec-kit Spec-kit 為 GitHub 開源的一套 SDD 工具。主要在解決傳統軟體開發中，需求文件與實際 coding 程式之間常發生脫節和不一致的問題。Spec-Kit 的核心概念是將「規格」提升為軟體開發流程的單一事實來源，並以此來驅動產品、設計、開發與協作的整個生命週期。 ---- ### 確保需求與最終產品一致性此為 Spec-kit 的核心價值，確保開發出來的產品能準確符合當初立下的需求規格。 ---- ### 提升跨職能協作效率 Spec-Kit 會以規格為基準，同時扮演 PM、UIUX、 developer和測試人員並提供了一個共同的、清晰的參考基礎，有效降低跨角色溝通的成本和誤解，提升團隊整體效率。 ---- ### 結構化 AI coding 協作由於 AI 助手有時可能產生理解偏差(非AI幻覺)或不符合專案標準的 code，Spec-Kit 通過其結構化的規格和「憲法」文件，引導並約束 AI 的行為。這使得 AI 能夠更準確地理解開發者的意圖，產出更高品質、更符合專案規範的程式。 ---- ### 輕量級工程管理框架對於希望導入SDD但又不想搞複雜管理系統的團隊，Spec-Kit 提供了一個輕量、以開發者為中心的工具，可以快速融入現有工作流程中，加速功能的迭代和交付。 --- ## 安裝uv工具兩種方式選擇 * Python安裝 `pip install uvtool` * Homebrew安裝 `brew install uv` 安裝完成確認可用 `uv --version` 查看版本 --- ## 安裝 Specify-cli 透過以下指令安裝 ```bash uv tool install specify-cli --from git+https://github.com/github/spec-kit.git ``` ---- 安裝完成確認可用 `specify version` 查看版本 ![image](https://hackmd.io/_uploads/HyjyCA9gWe.png) --- ## 初始化專案開啟terminal並切換到目錄資料夾透過以下指令進行初始化 ```bash specify init SDD-EX02 ``` ---- 初始化時會詢問要用哪個AI 助手 ![image](https://hackmd.io/_uploads/H1oVy1oeZx.png) ---- 接著詢問要用的 script type ![image](https://hackmd.io/_uploads/rkkglJog-e.png) ---- 設定完成會顯示 Project ready, 並且在專案夾內建立好隱藏設定 ![image](https://hackmd.io/_uploads/S1XExJoebg.png) ---- ![image](https://hackmd.io/_uploads/S1nwxyjxZg.png) ---- 也會貼心提醒下一步怎麼做 ![image](https://hackmd.io/_uploads/SkIAgJoeZe.png) --- ## 啟動 AI <img src="https://hackmd.io/_uploads/SJTumyilWg.png" width="80%" alt="圖片描述"> 在專案路徑呼叫你的 AI (非專案目錄會有error提醒) ![image](https://hackmd.io/_uploads/BkoCfyje-x.png) --- ## 執行 speckit 指令 ### 給予最高原則 ```bash /speckit.constitution 直接輸入你要給予的準則項目 ``` 範例：建立一個 Mininum Viable Product(MVP)架構專案，整體程式必須高品質且不要過度設計，一率使用正體中文, 任何 npm 安裝或 git commit 指令或是異動檔案的權限問題一率允許權限不要再發問 AI會以不可思議的速度執行, 並且給予相關的權限詢問 ---- ![image](https://hackmd.io/_uploads/rk1iKyogZe.png) ---- ### 說說你的需求 ```bash /speckit.specify 直接輸入你要給予的需求內容 ``` 範例: ``` /speckit.specify 1. 建立一個web app, 功能是圖片輪播牆 2. 主題是 fomula 1 每個車隊的車手 3. 輪播牆最左邊與最右邊各有一個上一張/下一張的按鈕, 點擊可以切換圖片 4. 若圖片是輪播牆的第一張, 若按下"上一張"按鈕可以切換到最後一張圖片 5. 輪播牆每五秒換一次圖片 6. 圖片來源從 fomula 1 官網取得, 專案不建立任何資料庫也不存放資料 ``` ---- 為了減少開發工時, 事先詢問 Gemini 調整後的範例: ``` /speckit.specify # Context 建立一個 F1 車手圖片輪播牆 (Carousel) 的單頁 Web App。 # Tech Stack - 使用單一 HTML 檔案 (包含 CSS/JS)。 - 使用 Vanilla JavaScript (不依賴外部框架)。 - 使用 Flexbox 或 Grid 進行置中佈局。 # Data Structure (Critical) - 在 JS 中建立一個 `const drivers` 陣列，包含至少 5 位現役 F1 車手 (如 Verstappen, Hamilton, Leclerc)。 - 陣列物件結構：`{ name: string, team: string, imageUrl: string }`。 - 圖片來源：請搜尋並使用 F1 官網或維基百科的公開圖片連結 (若無法取得直接連結，使用 Placehold.co 生成帶有車手名字的圖片代替，確保程式可運行)。 # Logic & Interaction 1. **State**: 追蹤 `currentIndex`。 2. **Navigation**: - 左右兩側設置按鈕, 名稱分別叫 Prev/Next。 - 實作「循環邏輯 (Circular Loop)」：在第一張按 Prev 跳至最後一張；在最後一張按 Next 跳至第一張。 3. **Auto-play**: 使用 `setInterval` 每 5000ms 自動觸發 Next 邏輯。滑鼠懸停 (hover) 時暫停計時，移開後恢復。 # UI Layout - 圖片顯示區域固定大小 (例如 800x600)，保持圖片比例 (object-fit: cover)。 - 車手名稱與車隊名稱顯示於圖片下方。 ``` ---- 若需求太模糊不明確, 助手會提問題此時就需要以下指令來釐清需求 ``` /speckit.clarify ``` spek-kit 會自動建立分支來進行後續動作 ![image](https://hackmd.io/_uploads/HyGfGYSbbx.png) ---- specify 完成後小助手就會建立 spec.md 與 requirements.md 到專案內, 以下為截取部分 spec ``` ### 使用者故事 2 - 手動導覽 (優先順序: P2) 作為一個使用者，我想要使用「上一張」和「下一張」按鈕來手動切換車手圖片，以便我可以按照自己的節奏瀏覽。 **為何此優先順序**: 提供使用者基本的互動控制，這是輪播功能的基本預期。 **獨立測試**: 使用者可以點擊「下一張」和「上一張」按鈕來循環瀏覽所有車手。 **驗收情境**: 1. **假設** 使用者在第一張圖片, **當** 點擊「下一張」按鈕, **則** 應顯示第二張圖片。 2. **假設** 使用者在最後一張圖片, **當** 點擊「下一張」按鈕, **則** 應循環顯示第一張圖片。 3. **假設** 使用者在第一張圖片, **當** 點擊「上一張」按鈕, **則** 應循環顯示最後一張圖片。 ``` ---- ### 技術選型透過指定技術讓助手遵循 ``` /speckit.plan 使用 html / Vanilla JavaScript / CSS 不依賴其他框架開發web app ``` ---- ### 這需求你有開單了嗎透過以下指令列下 task, 不必另外填 prompt 文字 ``` /speckit.tasks ``` ---- 開單結果 ![image](https://hackmd.io/_uploads/S14U7BEWbg.png) ---- ### 開工由於開工後 AI 仍有機會中斷並詢問存取權相關問題, 可透過以下指令避免開發中斷~~放心看電視去~~ ``` /speckit.implement 請實作上一輪對話中定義的 F1 車手輪播牆規格。 # 執行協議 (嚴格遵守) 1. **禁止中斷**：過程中請勿暫停詢問澄清、確認或等待審查。 2. **自主決策**：若遇到任何不明確的需求，請直接採用最佳標準技術慣例 (MVP 做法) 自行決定並繼續執行。 3. **連續執行**：請一次性生成所有必要的程式碼與檔案，直到任務完全完成。 ``` ---- 窩很抱歉, 還是有機會中斷 ![image](https://hackmd.io/_uploads/S1FilbjlZg.png) --- ## 專案結果不如預期 ### J個是?? ![image](https://hackmd.io/_uploads/BkoCY-og-l.png) ---- 規格有誤不精確, 調整一下需求再出發, 會再次建立新分支 ![image](https://hackmd.io/_uploads/SymvhZigWl.png) ---- 規格異動後, 再次執行以下指令 ``` /speckit.plan 使用 html / Vanilla JavaScript / CSS 不依賴其他框架開發web app ``` 以及重新調整 tasks ``` /speckit.tasks ``` 再次執行 `/speckit.implement` ---- 耗時 1 分鐘完成!! ![image](https://hackmd.io/_uploads/HJi10VNZ-x.png) --- ## 後續研究針對自動執行開發不中斷, 仍要找到相關指令 (很重要) * npm 套件安裝 * git 異動 * 檔案異動權限 ---

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.