實戰教學:在 AI 終端機完美結合 OpenSpec 與 Superpowers 開發工作流

Josh-avatar-img
發佈於AI
更新 發佈閱讀 7 分鐘
vocus|新世代的創作平台

在理解了 OpenSpec(負責規格)與 Superpowers(負責紀律)的完美分工後,許多開發者會問:「那在實際的終端機(CLI)環境中,我到底該怎麼下指令?」

目前市面上支援代理(Agentic)能力的 AI 終端機工具眾多(例如 Claude Code、Cursor 的終端模式,或是各類 CLI 工具)。只要你的環境中已經安裝並啟動了這兩套框架,就可以透過「標準 Shell 指令」、「OpenSpec 專屬指令(以 / 開頭)」以及「自然語言指令」的混合使用,來推動整個專案。

以下我們以**「為網站新增深色模式(Dark Mode)」**為例,帶你走過這五個關鍵階段的實際操作對話。

準備工作:初始化專案

在開始任何新功能之前,請先確保你的專案根目錄已經初始化了 OpenSpec。請在終端機輸入:

openspec init

階段一:需求釐清與規格制定 (Clarify & Define)

在這個階段,我們的目標是把模糊的想法,轉化為結構化的 OpenSpec 規格文件。

1. 啟動腦力激盪 直接用自然語言告訴 AI 你的想法,這會自動觸發 Superpowers 的 brainstorming(腦力激盪)技能:

你: 我想要在網站的頁尾 (footer) 新增一個「深色模式」的切換開關。能不能幫我 brainstorm 一下需求和設計方案? AI: 沒問題!在開始前我們需要釐清幾個細節:1. 使用者選擇的狀態要存在 LocalStorage 嗎? 2. 預設要跟隨作業系統的顏色設定嗎? 3. 專案目前的 CSS 變數架構是如何管理的?...

(請與 AI 進行問答,直到雙方對實作細節達成共識)

2. 建立新功能資料夾 共識達成後,使用 OpenSpec 指令建立該功能的專屬資料夾:

你: /opsx:new add-dark-mode AI: 已為您建立 openspec/changes/add-dark-mode/ 目錄。

3. 快速生成規格文件 接著,請 AI 將剛剛的討論結果固化成標準文件:

你: /opsx:ff AI: 正在根據對話紀錄生成文件... ✓ 生成 proposal.md ✓ 生成 specs/ (具體需求場景) ✓ 生成 design.md (技術設計方案) ✓ 生成 tasks.md (高階實作清單)


階段二:建立隔離的開發環境 (Isolate Environment)

為了確保主分支(Main branch)的乾淨與安全,我們需要建立獨立的工作區。請觸發 Superpowers 的 using-git-worktrees 技能:

你: 規格文件都準備好了。請幫我建立一個隔離的 Git Worktree 來開發這個功能,並確保測試環境是乾淨的。 AI: 正在建立獨立的開發分支 feat/add-dark-mode 與 Worktree... 正在執行基礎測試... 基準線確認為綠燈,環境已隔離完畢。


階段三:任務拆解與細化 (Deconstruct Tasks)

OpenSpec 產生的 tasks.md 通常是高階任務,我們需要呼叫 Superpowers 的 writing-plans 技能,將其拆解得更細碎。

你: 請讀取 openspec/changes/add-dark-mode/tasks.md。請使用你的計畫技能,將這些大任務拆解成非常小的「微型任務」(每個約 2-5 分鐘可完成),以便我們後續進行嚴格的 TDD 開發。 AI: 沒問題,已將計畫細化為:1. 在 theme.css 中定義深色 CSS 變數。 2. 建立 ThemeToggle.test.tsx 測試空殼。 3. 實作切換按鈕邏輯...等 8 個微型步驟。


階段四:紀律化的程式碼實作 (Disciplined Implementation)

這是整個流程中最關鍵的一步,也是極致發揮效能的秘訣:上下文衛生(Context Hygiene)。 為了防止 AI 被前面長篇大論的腦力激盪干擾,請先清空你的終端機對話紀錄

1. 清空紀錄並重新載入規格 執行你習慣的清空畫面指令(如 /clear 或重啟 Session),然後輸入:

你: 請詳細閱讀 openspec/changes/add-dark-mode/ 目錄下的 design.md 以及你剛剛拆解的微型計畫清單。我們接下來將完全以這些文件為依據進行開發。

2. 開始 TDD 循環 指示 AI 啟動實作,觸發 test-driven-development 技能:

你: 開始執行微型計畫的第一項任務。請嚴格遵守 TDD (Red-Green-Refactor) 流程:先寫一個會失敗的測試,再寫實作碼讓它通過。 AI: 收到。正在建立 ThemeToggle.test.tsx 測試檔... AI: 執行測試... 🔴 失敗 (Red)。 AI: 正在實作 ThemeToggle.tsx 核心邏輯... AI: 再次執行測試... 🟢 通過 (Green)。正在檢查是否需要重構...

(AI 會持續這個循環,直到回報所有微型任務皆已完成)


階段五:審查與收尾 (Review & Finalize)

1. 程式碼審查 完成實作後,請 AI 進行自我驗收:

你: 所有任務看來都完成了。請執行 Code Review,嚴格檢查目前的實作是否完全符合 openspec/changes/add-dark-mode/specs/ 中的需求定義。 AI: 正在比對規格與程式碼... 審查完畢,所有需求場景皆已滿足,無重大缺失。

2. 合併與清理 觸發 finishing-a-development-branch 技能來收尾:

你: 審查沒問題。請結束這個開發分支,將代碼合併回主分支,並清理 Worktree。 AI: 已成功合併至 main 分支,Worktree 已刪除並回到主目錄。

3. 規格歸檔 最後,將這次的開發文件歸檔,更新專案的全域狀態:

你: /opsx:archive AI: 已將 add-dark-mode 歸檔至 openspec/changes/archive/。專案全域規格已更新完成。

恭喜!透過這套指令流程,你不僅完成了一個新功能,還留下了一份完美的規格文件與高測試覆蓋率的程式碼,同時讓 AI 的記憶保持在最乾淨、最高效的狀態!

留言
avatar-img
Josh的沙龍
15會員
119內容數
分享知識
Josh的沙龍的其他內容
2026/02/25
OpenSpec 負責規格驅動,Superpowers 專注工程紀律。本文解析如何將兩大 AI 開發工具完美結合,涵蓋需求釐清、任務拆解到 TDD 實踐,帶您打造出高效率、零幻覺的極致自動化開發工作流。
Thumbnail
2026/02/25
OpenSpec 負責規格驅動,Superpowers 專注工程紀律。本文解析如何將兩大 AI 開發工具完美結合,涵蓋需求釐清、任務拆解到 TDD 實踐,帶您打造出高效率、零幻覺的極致自動化開發工作流。
Thumbnail
2026/01/22
使用 Claude Code 時遇到 API Error 400?這通常是「思考模式」格式驗證失敗所致。本文分析錯誤成因並提供修復建議,同時詳細教學在 Linux 環境下切換 Claude 模型的三種實用方法,助你快速排除障礙。
Thumbnail
2026/01/22
使用 Claude Code 時遇到 API Error 400?這通常是「思考模式」格式驗證失敗所致。本文分析錯誤成因並提供修復建議,同時詳細教學在 Linux 環境下切換 Claude 模型的三種實用方法,助你快速排除障礙。
Thumbnail
2026/01/20
教你如何在 Windows 11 利用 WSL2 打造 Linux 開發環境,並一步步安裝 Node.js 與 OpenAI Codex CLI,讓你的終端機也能擁有 AI 輔助編程的強大火力。
Thumbnail
2026/01/20
教你如何在 Windows 11 利用 WSL2 打造 Linux 開發環境,並一步步安裝 Node.js 與 OpenAI Codex CLI,讓你的終端機也能擁有 AI 輔助編程的強大火力。
Thumbnail
看更多
你可能也想看
Thumbnail
今天要分享,我用什麼視角來看待眾多 AI 工具,讓自己保持享受的心情,而不是焦慮。身為資深 iOS 工程師,有沒有什麼既有的技能,可以幫助我們評估 AI 表現的好壞?這篇文章提供我自己的思考方式,也許能給你一個新的切入點。
Thumbnail
今天要分享,我用什麼視角來看待眾多 AI 工具,讓自己保持享受的心情,而不是焦慮。身為資深 iOS 工程師,有沒有什麼既有的技能,可以幫助我們評估 AI 表現的好壞?這篇文章提供我自己的思考方式,也許能給你一個新的切入點。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
Claude最近(2025年2月24日)出了新的3.7Sonnet被譽為目前最智能的模型,特別是在編程和開發領域展現出卓越的能力。 所以最近訂閱了Claude,聽說他能夠讓不會寫程式的人透過AI-assisted development的方法完成,而且需要修改的地方最少,所以試著來玩玩看。
Thumbnail
Claude最近(2025年2月24日)出了新的3.7Sonnet被譽為目前最智能的模型,特別是在編程和開發領域展現出卓越的能力。 所以最近訂閱了Claude,聽說他能夠讓不會寫程式的人透過AI-assisted development的方法完成,而且需要修改的地方最少,所以試著來玩玩看。
Thumbnail
2025 GAI 開發者年會重點條列,包含多家企業導入AI應用的實例,涵蓋金融業、製造業、供應鏈、廣告業等,探討AI開發工具、技術趨勢、企業導入AI的挑戰,以及近期新興技術MCP協定結合AI應用的發展。
Thumbnail
2025 GAI 開發者年會重點條列,包含多家企業導入AI應用的實例,涵蓋金融業、製造業、供應鏈、廣告業等,探討AI開發工具、技術趨勢、企業導入AI的挑戰,以及近期新興技術MCP協定結合AI應用的發展。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
感覺人在精神不佳胡思亂想的時候,往往更能撞出一些莫名又沒什麼路用的小點子來,也不為什麼,就單純為了那個紓壓跟有趣,而這次的突發專案也是如此。 還記得在許久之前,我有曾經購買過「NFT 域名」這種東西,而與其他 NFT 產品相似,它是一組存在鏈上,無需像傳統域名一樣的續租費用,號稱能讓
Thumbnail
感覺人在精神不佳胡思亂想的時候,往往更能撞出一些莫名又沒什麼路用的小點子來,也不為什麼,就單純為了那個紓壓跟有趣,而這次的突發專案也是如此。 還記得在許久之前,我有曾經購買過「NFT 域名」這種東西,而與其他 NFT 產品相似,它是一組存在鏈上,無需像傳統域名一樣的續租費用,號稱能讓
Thumbnail
想用 VSCode 或 Cursor 開發 iOS 專案?這篇文章教你如何安裝必要插件(如 Swift 官方套件與 SweetPad)、打造 Xcode 以外的 iOS 開發環境。也整理了幾篇好文與資源,幫助你快速上手與進階使用。
Thumbnail
想用 VSCode 或 Cursor 開發 iOS 專案?這篇文章教你如何安裝必要插件(如 Swift 官方套件與 SweetPad)、打造 Xcode 以外的 iOS 開發環境。也整理了幾篇好文與資源,幫助你快速上手與進階使用。
Thumbnail
AI 的故事今天從三個不同場景展開:OpenAI 聯手甲骨文與軟銀,在美國推動史上最大 AI 資料中心計畫;台灣基隆學生在 AI 素養爭霸賽中脫穎而出,展現未來新生代的創意與實力;廣達電腦則分享 AI 寫程式的實戰經驗,顯示工程師不但沒被取代,反而因 AI 而更有效率
Thumbnail
AI 的故事今天從三個不同場景展開:OpenAI 聯手甲骨文與軟銀,在美國推動史上最大 AI 資料中心計畫;台灣基隆學生在 AI 素養爭霸賽中脫穎而出,展現未來新生代的創意與實力;廣達電腦則分享 AI 寫程式的實戰經驗,顯示工程師不但沒被取代,反而因 AI 而更有效率
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
獨立遊戲開發者Serpens Spirit Studio分享使用AI輔助創作的經驗,透過ChatGPT將照片轉換成像素風格的YT直播縮圖,探討AI如何縮短開發時間、降低美術成本,並分享直播互動與支持方式。
Thumbnail
獨立遊戲開發者Serpens Spirit Studio分享使用AI輔助創作的經驗,透過ChatGPT將照片轉換成像素風格的YT直播縮圖,探討AI如何縮短開發時間、降低美術成本,並分享直播互動與支持方式。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
你信任 AI 嗎?多數資深工程師一開始可能不會。這篇文章從實際開發情境出發,探討為何我會逐漸信任 Cursor。從隱私考量、習慣、能力比較,到「像人類工程師一樣合作」,分享自己的觀察。
Thumbnail
你信任 AI 嗎?多數資深工程師一開始可能不會。這篇文章從實際開發情境出發,探討為何我會逐漸信任 Cursor。從隱私考量、習慣、能力比較,到「像人類工程師一樣合作」,分享自己的觀察。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News