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

Josh-avatar-img
發佈於AI
更新 發佈閱讀 7 分鐘
raw-image

在理解了 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的沙龍
7會員
84內容數
分享知識
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
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
AI 的故事今天從三個不同場景展開:OpenAI 聯手甲骨文與軟銀,在美國推動史上最大 AI 資料中心計畫;台灣基隆學生在 AI 素養爭霸賽中脫穎而出,展現未來新生代的創意與實力;廣達電腦則分享 AI 寫程式的實戰經驗,顯示工程師不但沒被取代,反而因 AI 而更有效率
Thumbnail
AI 的故事今天從三個不同場景展開:OpenAI 聯手甲骨文與軟銀,在美國推動史上最大 AI 資料中心計畫;台灣基隆學生在 AI 素養爭霸賽中脫穎而出,展現未來新生代的創意與實力;廣達電腦則分享 AI 寫程式的實戰經驗,顯示工程師不但沒被取代,反而因 AI 而更有效率
Thumbnail
獨立遊戲開發者Serpens Spirit Studio分享使用AI輔助創作的經驗,透過ChatGPT將照片轉換成像素風格的YT直播縮圖,探討AI如何縮短開發時間、降低美術成本,並分享直播互動與支持方式。
Thumbnail
獨立遊戲開發者Serpens Spirit Studio分享使用AI輔助創作的經驗,透過ChatGPT將照片轉換成像素風格的YT直播縮圖,探討AI如何縮短開發時間、降低美術成本,並分享直播互動與支持方式。
Thumbnail
感覺人在精神不佳胡思亂想的時候,往往更能撞出一些莫名又沒什麼路用的小點子來,也不為什麼,就單純為了那個紓壓跟有趣,而這次的突發專案也是如此。 還記得在許久之前,我有曾經購買過「NFT 域名」這種東西,而與其他 NFT 產品相似,它是一組存在鏈上,無需像傳統域名一樣的續租費用,號稱能讓
Thumbnail
感覺人在精神不佳胡思亂想的時候,往往更能撞出一些莫名又沒什麼路用的小點子來,也不為什麼,就單純為了那個紓壓跟有趣,而這次的突發專案也是如此。 還記得在許久之前,我有曾經購買過「NFT 域名」這種東西,而與其他 NFT 產品相似,它是一組存在鏈上,無需像傳統域名一樣的續租費用,號稱能讓
Thumbnail
2025 GAI 開發者年會重點條列,包含多家企業導入AI應用的實例,涵蓋金融業、製造業、供應鏈、廣告業等,探討AI開發工具、技術趨勢、企業導入AI的挑戰,以及近期新興技術MCP協定結合AI應用的發展。
Thumbnail
2025 GAI 開發者年會重點條列,包含多家企業導入AI應用的實例,涵蓋金融業、製造業、供應鏈、廣告業等,探討AI開發工具、技術趨勢、企業導入AI的挑戰,以及近期新興技術MCP協定結合AI應用的發展。
Thumbnail
Claude最近(2025年2月24日)出了新的3.7Sonnet被譽為目前最智能的模型,特別是在編程和開發領域展現出卓越的能力。 所以最近訂閱了Claude,聽說他能夠讓不會寫程式的人透過AI-assisted development的方法完成,而且需要修改的地方最少,所以試著來玩玩看。
Thumbnail
Claude最近(2025年2月24日)出了新的3.7Sonnet被譽為目前最智能的模型,特別是在編程和開發領域展現出卓越的能力。 所以最近訂閱了Claude,聽說他能夠讓不會寫程式的人透過AI-assisted development的方法完成,而且需要修改的地方最少,所以試著來玩玩看。
Thumbnail
今天要分享,我用什麼視角來看待眾多 AI 工具,讓自己保持享受的心情,而不是焦慮。身為資深 iOS 工程師,有沒有什麼既有的技能,可以幫助我們評估 AI 表現的好壞?這篇文章提供我自己的思考方式,也許能給你一個新的切入點。
Thumbnail
今天要分享,我用什麼視角來看待眾多 AI 工具,讓自己保持享受的心情,而不是焦慮。身為資深 iOS 工程師,有沒有什麼既有的技能,可以幫助我們評估 AI 表現的好壞?這篇文章提供我自己的思考方式,也許能給你一個新的切入點。
Thumbnail
想用 VSCode 或 Cursor 開發 iOS 專案?這篇文章教你如何安裝必要插件(如 Swift 官方套件與 SweetPad)、打造 Xcode 以外的 iOS 開發環境。也整理了幾篇好文與資源,幫助你快速上手與進階使用。
Thumbnail
想用 VSCode 或 Cursor 開發 iOS 專案?這篇文章教你如何安裝必要插件(如 Swift 官方套件與 SweetPad)、打造 Xcode 以外的 iOS 開發環境。也整理了幾篇好文與資源,幫助你快速上手與進階使用。
Thumbnail
你信任 AI 嗎?多數資深工程師一開始可能不會。這篇文章從實際開發情境出發,探討為何我會逐漸信任 Cursor。從隱私考量、習慣、能力比較,到「像人類工程師一樣合作」,分享自己的觀察。
Thumbnail
你信任 AI 嗎?多數資深工程師一開始可能不會。這篇文章從實際開發情境出發,探討為何我會逐漸信任 Cursor。從隱私考量、習慣、能力比較,到「像人類工程師一樣合作」,分享自己的觀察。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News