# Spectra：給 OpenSpec 的圖形介面 > Spectra 提供了 OpenSpec 的全新圖形介面，顯著改善了工作流的靈活性與使用體驗。新版 1.0 解決了先前版本中的限制，允許用戶根據需求隨時調整進度，同時即時更新任務狀態，並引入了更聰明的文件依賴管理系統，讓整個開發過程更加高效。 Published: 2026-02-03 URL: https://kaochenlong.com/spectra-with-openspec --- 之前寫過一篇關於 [OpenSpec](/openspec) 的介紹，當時 OpenSpec 還是 0.x 版，指令就那三個，還滿容易上手的，不過用起來有些地方總覺得卡卡的。例如 `proposal.md` 寫完之後就被鎖在那個階段，想回頭改點東西得放棄進度重來，或是繞過 OpenSpec 的指令直接開編輯器改檔案。又或是任務做到一半，想看看目前做到哪裡或是有哪些還沒做完，結果發現 `tasks.md` 根本沒更新...但整體來說還是個不錯的工具。 最近 OpenSpec 更新的 1.0 版看起來是把這些我有點在意的問題都處理掉了，而且整個架構重新寫過，從原本的「照著固定流程走」變成「你想怎麼走都行」。這篇文章先來介紹一下 1.0 版改了哪些地方，順便介紹一個我寫的小工具 Spectra，讓 OpenSpec 用起來更簡單、更直覺...我是不知道其它人有沒有覺得好用，但至少我自己是用得很開心！ ## OpenSpec 1.0 的改變 ### 工作流不再是一直線 在 0.x 版的時候，工作流是線性的，例如先執行 `/openspec:proposal` 撰寫提案，在這個當下會建立 `proposal.md`、`spec.md` 以及 `tasks.md` 這幾個檔案，看情況可能還會有 `design.md`。接著執行 `/openspec:apply` 開始實作，做完之後最後再執行 `/openspec:archive` 進行歸檔。這三個階段是鎖定的，意思是進了 apply 階段後 OpenSpec 沒有提供指令可以讓我們回頭修改 proposal 並重新規劃，除非自己開編輯器或是把整個提案砍掉再來一次。 1.0 版把這個設計打掉重練，新版的指令多了好幾個，而且全部都變成 `/opsx` 開頭的指令。雖然指令看起來變多了，但重點是這些指令沒有順序限制，想什麼時候用就什麼時候用。 介紹幾個 1.0 版的新指令： - `/opsx:explore`：可以在寫提案之前先跟 AI 聊聊想法，不用馬上產出文件。不過這個指令我不太常用，因為我會先用其它更好用的 Skills（例如我在[這篇文章](/ai-superpowers-skills)裡介紹到的 Superpowers），甚至光是 Claude Code 的 Plan Mode 就直接討論，等討論差不多之後再用 `/opsx:new` 來建立提案。 - `/opsx:continue`：根據文件的相依性，顯示目前可以建立哪些檔案，執行一次建立一個，可重複執行來逐步完成所有文件。 - `/opsx:ff`：快轉前進（Fast Forward）。跟 `/opsx:continue` 不同，這個指令可以一口氣把所有需要的文件都生出來，適合沒有耐心慢慢等的人，例如我。 其它像是 `/opsx:new` 就是之前的 `/openspec:proposal`，只是改了個名字，而 `/opsx:apply` 跟 `/opsx:archive` 光看名字就大概猜的出來用途。 1.0 版聽起來好像只是多了幾個新指令，但背後的設計哲學不太一樣，之前是「你在哪個階段，就只能做那個階段的事」，現在是「系統幫你追蹤狀態，你想做什麼就做什麼」。 ### 任務進度即時更新 對我來說，這可能是我覺得最實用的改進 ♥ 以前的 `tasks.md` 的進度更新是由 AI 自己決定，看它心情好壞而決定要不要更新。AI 在 apply 階段收到的是靜態的指令，意思是每次當執行 `/openspec:apply` 時，AI 收到的提示詞都是固定的，不會先去查詢目前 `tasks.md` 裡已經完成哪些任務（或是還沒做）。AI 只知道「喂！去做任務」，但不一定知道當前的進度狀態，所以有可能會做完一個任務就打一個勾，或是做到一半才想起來要更新進度，也可能根本忘記要打勾這回事。結果就是進度顯示經常不準確，有時候任務明明做完了，`tasks.md` 裡面的進度看起來都還沒做，我還得再回頭問 AI 說做完沒。 1.0 版不一樣，每次執行 `/opsx:apply` 指令的時候會先去讀 `tasks.md` 的內容，算一下目前完成了幾個、還剩幾個，然後才開始做事。做完一個任務就打個勾，下次 apply 時又會重新計算進度，所以看起來就會比較準確： ```markdown - [x] 建立資料模型 - [x] 實作 API 端點 - [ ] 寫前端介面 - [ ] 加入錯誤處理 ``` 這如果搭配我等一下要介紹的圖形介面軟體，看起來會更明顯，會真的看到它一個一個打勾。系統會告訴我們 5 個任務已經完成 3 個，還剩 2 個，完成度直接從 Markdown 檔案就能推導出來。這個設計很聰明，因為 `tasks.md` 本來就是我們可以編輯的檔案，現在它同時也是進度追蹤的來源。 ### 文件相依性的自動管理 在 OpenSpec 裡，`proposal.md`、`spec.md`、`design.md`、`tasks.md` 這些文件的建立是有先後順序的，例如 `spec.md` 要等 `proposal.md` 寫完才能開始，`tasks.md` 又要等 `spec.md` 和 `design.md` 都完成才能產出。 之前的 `/openspec:proposal` 指令會一次把所有文件都產出來，沒辦法選擇「先寫 proposal 看一下，確認沒問題再繼續」這種一步一步的做法。1.0 版之後會把這些文件的相依性建成一個 DAG（Directed Acyclic Graph，有向無環圖），然後用拓撲排序來追蹤狀態...這些名詞不懂也沒關係，反正它就是可以幫我們算出「下一個可以做的是什麼」。如果你用 `/opsx:continue` 一步一步做，系統會告訴你現在可以建立哪些檔案；如果你用 `/opsx:ff`，系統會按照正確的順序一次把所有檔案都生出來。 補個不重要的冷知識，DAG 的結構在 Git 裡面也有用到，Git 的 commit 歷史就是一個 DAG，每個 commit 指向它的 parent，形成一個有方向但不會繞回來的圖。OpenSpec 用同樣的概念來管理檔案的相依性，proposal 是根節點，specs 和 design 都依賴它，tasks 又依賴 specs 和 design。這樣的結構讓系統能自動判斷哪些工件已經準備好可以建立，哪些還在等待依賴完成。啊，扯遠了，對 Git 有興趣的話，歡迎收看[《為你自己學 Git》](https://gitbook.tw)。 這個改變讓 OpenSpec 的工作流變得簡單，我們不用記住「現在應該做什麼」，系統會幫我們處理這件事，在執行 AI 執行 `/opsx:new` 的時候應該有感受到明顯的差異。 ### Slash Commands 變成 Skills 這算是個比較大的改動，但也合理。 1.0 版把原本的 Slash Commands 改成 Skills 系統，以前每個 AI 工具都有自己的配置格式，Claude Code 用 `CLAUDE.md`，Cursor 用 `.cursorrules`，維護起來有點麻煩。現在統一放在專案的 `.claude/skills/` 目錄裡（或是各 AI Agent 或編輯器對應的位置）。 目前 OpenSpec 支援的二十幾個 AI 工具都能自動讀取並使用這些 Skills，不用再為每個工具維護一份設定，這也是為什麼最近 Skills 會爆紅的原因。想了解什麼是 Skills 的話，可參閱我之前寫的「[Claude Code Skills：讓 AI 變身專業工匠](/claude-code-skills)」文章。 這個改變讓跨 AI 工具變得更簡單。同一個專案裡，有人用 Claude Code，有人用 Cursor，有人用 Windsurf，大家都能載入相同的 Skills。 ### 專案配置集中管理 以前專案設定是放在 `openspec/project.md`，用 Markdown 格式寫專案的技術棧、架構或程式碼撰寫慣例或偏好這些東西。問題是這個檔案只是放在那裡，AI 要不要讀完全看它心情，不像 `CLAUDE.md` 這種一啟動 Claude Code 就會主動拿來看的機制。 1.0 版改成用 `openspec/config.yaml` 做專案級設定。當 AI 執行 `/opsx:new` 或 `/opsx:continue` 時，會呼叫 OpenSpec 的 CLI 指令取得下一步該做什麼，這時候 `config.yaml` 的內容會一起被帶進去，所以 AI 一定會看到。 這不只對 AI Agent 有用，對對團隊協作也很好用，新人 clone 專案之後，不用再問「這個專案用什麼設定」，看 `config.yaml` 就知道了。 更多關於 1.0 版的更新內容，可參閱 [OpenSpec 的 GitHub](https://github.com/Fission-AI/OpenSpec)介紹。 ## Spectra：給 OpenSpec 的圖形介面 前面寫那麼多，其實這篇文章的目的是要介紹我自己最近做的小玩具。 在用 OpenSpec 一段時間之後，我發現雖然它很好用，但純文字操作有時候有點麻煩。specs 目錄裡有幾十個檔案，changes 裡面又有好幾個進行中的變更，要找某個特定的規格或任務，得在檔案之間跳來跳去。 我是個用終端機十幾年的老人，如果我都會覺得有點麻煩的話，就更不用想把 OpenSpec 推給新手了。是的，你沒看錯，我就是要把它給 Vibe Coder！（一看就知道我在備課了吧） 所以我花了一個週末的時間跟 AI 一起寫了一個圖形介面的桌面版應用程式：Spectra 一開始我只打算做個 Viewer，讓使用者可以用圖形介面瀏覽 specs、changes 這些東西。但後來想想，既然都做了 GUI 了，乾脆把一些常用的功能也加進去，讓使用者（包括我自己）不用一直切換回終端機敲打指令。 既然 Spectra 是 OpenSpec 的 Viewer，不用說這整個開發流程就是套用 SDD 的開發方法，一塊一塊拼出來的。 ### 規格與變更瀏覽 用圖形介面瀏覽 specs、changes、archive 這些內容。點進一個變更，可以看到它的 proposal、spec、design、tasks，每個檔案都會顯示最後修改時間。Delta spec 會自動解析，統計這次變更新增、修改、移除了多少需求，圖形化介面總是看起來比較直覺。 <img src="/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzA1NSwicHVyIjoiYmxvYl9pZCJ9fQ==--5787e006a32247a677f37fa0d4209fe7d77fdef5/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbMTI4MCwxMDI0XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--84d8884f224e8330b83a950151768b773558b857/spectra-1.png" width="100%"> ### 全文搜尋 我用 SQLite 建立搜尋索引，這會比搜尋所有的 `.md` 檔的內容來的有效率。搜尋結果會顯示行號和上下文，支援模糊搜尋，不用再開終端機下 `grep` 指令。 ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzA1NywicHVyIjoiYmxvYl9pZCJ9fQ==--93807d3a28872d2d4089adab993b024da45f4634/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbMTI4MCwxMDI0XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--84d8884f224e8330b83a950151768b773558b857/spectra-search.png) ### 任務追蹤 這是我覺得滿實用的功能之一（自以為），Spectra 會解析 `tasks.md` 裡面的核取方塊，顯示成一個可以勾選的清單。打勾之後會直接更新檔案，這樣就不用手動去編輯 Markdown。而且還有支援拖放排序調整優先順序，頁面上還會顯示進度（像是 3/5 這樣）。我這人很懶，所以還做了一次全部標記成已完成或重置進度的功能。 ### 即時檔案監視 當 AI 或是我們自己在編輯器裡改了 `openspec` 目錄的檔案，Spectra 會自動偵測到變更，馬上重新載入內容。不用手動重新整理，改完就能看到結果。 ### AI 工具管理 所有 OpenSpec 支援的 AI 工具也都支援（例如 Claude Code、Cursor、Windsurf 等等）。可以在 Spectra 裡面用圖形介面設定要用哪些工具，它會幫你生成對應的配置檔案和目錄結構。 ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzA2MSwicHVyIjoiYmxvYl9pZCJ9fQ==--68c6e4708be5a139d66c1a4a2d96e88ea2db4add/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbMTI4MCwxMDI0XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--84d8884f224e8330b83a950151768b773558b857/spectra-agents.png) ### 主題與語言 我是個喜歡漂亮介面的人，所以也給 Spectra 支援主題切換，總共有 6 種主題 x 2 種配色方案，還有繁體中文和英文兩種語言可以選擇。 ### 其他功能 - 備份/還原：可以把 `openspec/` 目錄匯出成 ZIP 檔案，之後也可以匯入還原。 - CLI 命令：安裝後可以在終端機用 `spectra .` 快速開啟目前目錄的專案，這一看就知道我要用的。 - 自動更新：會定期檢查新版本，有更新的話會提示下載。 - 最近專案：側邊欄會顯示最近開啟的專案，可以加星星，方便快速切換 ### 備忘功能 最後的最後，這個備忘功能是我自己加上去的，這跟 OpenSpec 無關。因為很多時候我在開發過程中會突然想到一些點子或是待辦事項，想記下來但又不想放在專案裡面，怕弄亂了規格文件。所以我就做了一個簡單的備忘錄功能，讓我可以隨時記錄一些零碎的想法，等有空檔再把它變成提案或是任務。 ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzA1OSwicHVyIjoiYmxvYl9pZCJ9fQ==--79cae87015270c1210ed390171bb2faceef02779/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbMTI4MCwxMDI0XX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--84d8884f224e8330b83a950151768b773558b857/spectra-todos.png) 這跟 OpenSpec 的 `tasks.md` 沒關係，這應該是我在這個 App 裡最常用的功能。 下載連結：<https://spectra.5xcamp.us/> ## 小結 OpenSpec 1.0 的核心改變是把工作流從「照著固定流程走」變成「系統幫你追蹤狀態，你想怎麼做都行」。任務進度即時更新以及檔案依賴自動管理，這些改進讓它變得更有彈性，也更符合實際開發的節奏。 Spectra 則是給不想純文字操作的人一個選擇。有時候用圖形介面看東西就是比較直覺，特別是專案規模變大、文件變多的時候。兩個工具搭配著用，管理規格文件會輕鬆不少。 如果 Spectra 有什麼使用上的問題，都歡迎留言讓我知道，或是[在 GitHub 上開 issue 給我](https://github.com/kaochenlong/spectra-app/issues) ♥