【Claude Code 實戰】用 OpenSpec 規格驅動開發，Vibe Coding 也能完成複雜專案
本文目錄
最近收到的企業邀約中，除了有軟體部門想將 AI 導入開發工作流外，也有不少來自人力資源、執行業務部門的邀約。
而面對要客製化的課程，會先安排需求訪談。
開會過程中，有位客戶說的話讓我印象深刻，他說：
「我們企業的痛點，是開發系統的人不用系統；真正用系統的人不會開發，所以我們才想學 Vibe Coding。」
其實這個痛點是業界常態，以人力資源系統來舉例好了，雖然是工程師開發，但 HR 才是主要的使用者。
這導致不管前期規劃與設計有多麼詳盡，初步完成的產品在進入易用性測試後，還是會收到一大堆需求變更。
會有這樣的結果，並不是使用者很刁鑽；而是真正的問題，往往在使用後才會被發現；但這些並不是在前期設計，就能完全考慮到的。
所以有些企業想導入 Vibe Coding，目標是讓熟悉業務的人：
有能力設計出符合自己使用需求的產品，並希望完成的產品原型，未來能交給工程師做後續的優化與維護。
這個課程需求如果放在去年，我還真的不敢接；但最近 AI 成長的速度實在太快了。
今天跟大家介紹的 Claude Code，已經可以讓沒有任何程式基礎的人，在了解與 AI 對話的技巧後，生成出一套涵蓋前後端與資料庫的系統。
並透過與 OpenSpec 的搭配，讓 AI 幫忙撰寫專案文件，達成用規格驅動開發的目標；同時解決過去小白不知道如何撰寫規格，以及工程師不想寫文件的痛點。
在 Claude Code 與 OpenSpec 的幫助下，我們不僅能完成專案從 0 到 1 的建置，更可以做到從 1 到 100 的迭代。
完整的 Demo，可以觀看 YT 喔 👉
對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。
① 安裝 Claude 與 OpenSpec，初始化專案設定
安裝 Antigravity
今天這個教學，你可以使用自己熟悉的程式碼編輯器，不管是 VSCode、Cursor、Antigravity 都可以。
如果不知道使用哪一款，可以跟我一樣，使用 Google 最新推出的 AI 程式碼編輯器 Antigravity，登入 Google 帳號就能免費使用。
但這次，我們沒有要使用到編輯器內建的 AI 功能，使用他，只是為了方便檢視程式碼與規格文件的變更，並降低 Claude Code 的入門難度。
確認 Node.js 版本
因為今天分享的 OpenSpec 與實作的全端專案會使用到 Node.js。
所以，我們打開終端機輸入「node -v」，來確認電腦是否有完成安裝。
如果沒有顯示版號，而是出現沒有指令的錯誤訊息，就需要先去安裝 Node.js 才能執行後續步驟。
在安裝 Node.js 這塊，我建議大家透過 NVM 來安裝；因為 Node.js 有多個版本，而 NVM 這款工具可以幫你快速在不同版本間切換、更新。
如果你跟我一樣使用 Mac，執行下面的指令就可以安裝了：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash
但如果你是 Windows，就需要下載 exe 檔來安裝。
nvm 安裝完成後，要開啟新的終端機，然後輸入 nvm -v，確認有成功安裝。
接下來輸入 nvm install — lts 來安裝最新版本的 Node.js，安裝完畢後，輸入 node -v 便可檢視剛剛安裝的版本。
安裝 OpenSpec
在 Node.js 安裝完成後，我們要來安裝 OpenSpec，只要在終端機輸入指令，便可以完成全局安裝：
npm install -g @fission-ai/openspec@latest
透過這款工具，我們只要用白話的方式與 AI 對話，就能建立完善的規格，讓專案從零到一的過程更加完善。
而且日後擴增、修改功能時，不管人類還是 AI，都有對應的文件規格可以參考。
這可以盡量避免過去用 AI 寫程式時，相同功能重複被寫好幾次的痛點。
安裝 Claude Code
安裝好 OpenSpec 後，接下來要安裝 Claude Code。
你可選擇在終端機輸入指令安裝：
macOS, Linux, WSL:
```
curl -fsSL https://claude.ai/install.sh | bash
```
Windows PowerShell:
```
irm https://claude.ai/install.ps1 | iex
```
Windows CMD:
```
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd
```
但終端機對新手來說，用起來會比較有壓力，所以我更推薦在介面上操作；打開左側的 Extensions，搜尋 Claude Code 就能找到這個外掛。
點擊 Install 安裝完畢後，點擊 Open Claude 的按鈕，就可以打開他。
如果你過去使用過 Cursor 或是 Antigravity，其實操作上大同小異，就是有個對話視窗可以跟 AI 溝通。
但提醒大家，目前 Claude Code 只有付費版才能夠使用，你可以在對話框輸入「/login」來登入。
這邊我們選擇第一個，在網頁點擊授權後回到程式碼編輯器。
另外如果你使用免費版帳號，在登入時會出現這個提醒升級的畫面：
目前 Claude 的月費是每月 20 美金，如果看完今天的影片，覺得 Claude Code 很強大的話，可以考慮付費訂閱。
我認為「時間」才是最寶貴的資產；而「AI」可以幫助你奪回自己的時間。
在專案初始 OpenSpec
登入完成後，你可以在電腦建立一個專案用的空白資料夾，然後選擇 Explorer 用 Open Folder 的方式打開他。
由於這個專案要搭配 OpenSpec 輔助開發，所以要點擊 toggle panel 在終端機輸入：
openspec init
執行指令後，要點擊 Enter 進行初始化，這時問你使用哪些 AI 工具，你可以用「上下鍵」移動，並透過「空白鍵」做選擇。
他是可以多選的，但因為今天以 Claude 做示範，所以就只選 Claude Code。
完成後，就會在左側目錄下看到新增的資料夾，首先要介紹的是「.claude」的資料夾，這個裡面是存放驅動 OpenSpec 功能的 Agent Skills 技能包。
如果你在與 AI 對話的過程中，需求涉及專案的新增、修改、刪除等任務時，AI 會自動調用這些技能，不需要你特別去背指令，我覺得這才更符合 Vibe Coding 的開發流程。
如果你想更深入了解 Agent Skills，我過去有拍一隻影片分享安裝、使用、製作的技巧：https://youtu.be/xe00zJEtuMo
提醒一下大家，在指令不夠明確時，AI 可能不會觸發對應的 Skill，假如想強制驅動 openspec，可以在對話窗中輸入「/opsx」來操作。
目前預設只有提供 4 個指令，其實已經足以面對大多數的需求了。
如果你想要擴充指令的話，可以在終端機輸入
openspec config profile
此時會看到幾個選項：
1. Delivery 是指這些功能「裝在哪裡」
2. Workflows 則是這些功能「有哪些」
這邊我選擇「Delivery and workflows」示範給大家看：
1. Delivery 我選擇要同時安裝在 skills 跟 commands 中
2. 而 workflows 我就用空白鍵，把可以使用的都全選
完成後按下 Enter 就好，安裝好的 skills 跟 commands 會出現在資料夾底下：
如果你想知道每個 Skill 的具體功能，直接請 AI 解釋給你聽就好，這邊就直接貼提示詞，跟他說：
我想知道 openspec 目前安裝的 skill 用途
請使用表格呈現，用白話簡短描述
② 規格驅動開發，從零打造全端系統
安裝 Docker
根據過去經驗，最容易在環境設定上卡關的是「資料庫」，因為每個人電腦環境不同，所以要先安裝 Docker 這款工具。
你可以把 Docker 想成一個「標準化的容器」，把專案需要的環境通通打包在裡面，這樣不管你用 Mac 還是 Windows，打開就能跑，不用自己一個一個裝，也方便未來與其他人一起維護專案。
到官網根據自己的作業系統下載安裝後，就可以直接使用，不需要特別註冊、登入帳號。
在完成 Docker 安裝後，接下來，我們就能體驗 OpenSpec 加 Claude Code 的威力了。
過去的開發流程
今天的教學，我想以大部分上班族都會使用到的「出缺勤系統」作為範例。
在沒有 AI 輔助的年代，如果想完成這個系統，前期需要與 HR 部門開會釐清需求，然後請設計師根據需求完成每個頁面的流程示意圖。
過程中 PM 會把討論細節撰寫成需求規格，之後才會由工程師著手開發。
過去光是要做出能讓 HR 體驗的最小可行性系統（MVP），都至少要花一個月的時間。
但現在，前面的所有步驟，已經有機會讓沒有程式背景的 HR 自行完成。
大家不要急著留言說我妖言惑眾，看完示範後，就會知道這一切並不是誇飾。
Prompt 設計
完整提示詞如下：
請設計一個出缺勤管理系統，員工可以透過此系統打卡上下班
權限分成管理者與一般使用者，管理者可以修改、新增/刪除使用者
新增使用者時，會發送 Email 給予登入密碼
員工可透過系統請假、申請加班，申請假單需要簽核流程，並且有年假、補休申請，代理人制度
前端使用 React，後端使用 Express，資料庫用 Postgres
希望透過 Docker 啟動，並且要包含 Postgres Admin 網頁
這是初步需求，我們可以透過討論釐清細節後，參考 openspec 的 skill 執行
在提示詞中，我分成了 3 塊，分別是「專案目標、使用技術、細節討論」
- 專案目標：在專案目標這塊，我先大概說明自己的需求，一開始的描述有點模糊沒有關係，因為 AI 會在後續跟你釐清細節。
請設計一個出缺勤管理系統，員工可以透過此系統打卡上下班
權限分成管理者與一般使用者，管理者可以修改、新增/刪除使用者
新增使用者時，會發送 Email 給予登入密碼
員工可透過系統請假、申請加班，申請假單需要簽核流程，並且有年假、補休申請，代理人制度
- 使用技術：接下來則是描述使用技術，這個非常重要，如果希望專案完成原型後，可以由工程師團隊接手維護；一定要先詢問他們目前最擅長的「前端、後端、資料庫」是哪些，並且為了讓彼此環境一致、啟動更方便，所以我指定使用 Docker 來啟動。
前端使用 React，後端使用 Express，資料庫用 Postgres
希望透過 Docker 啟動專案，並且要包含 Postgres Admin 網頁
- 細節討論：最後則是提醒 AI 要與我們討論規格的細節，這樣可以釐清一開始沒說清楚的地方，最後要求他要參考 openspec 的 skill
這是初步需求，我們可以透過討論釐清細節後，參考 openspec 的 skill 執行
送出提示詞後，你可以看到 AI 會根據我們的需求提出問題，讓細節更加完善：
同時提醒一下大家，用 Plan Mode 的規劃會非常詳盡，如果大家想要加速體驗，可以在提示詞最後加上「以最小可行性方案來規劃」，否則執行下去跑半小時也是有可能的。
OpenSpec 撰寫專案文件
前面釐清完需求後，你會看到 AI 觸發 OpenSpec 的 Skills 做更細部的規劃：
- proposal.md：一開始會先建立 proposal，這個文件是用來確認目標是否正確、範圍是否合理。
- design.md：然後再進入技術規劃，design 文件就是在說明技術挑選的理由，以及專案可能會遇到的風險與處理方案。
- specs 資料夾：緊接著在 specs 資料夾底下，會根據功能區分資料夾，並分別建立說明細節的規格文件。
- task.md：在最後會設計一個執行任務的 task 文件，他是用來檢驗任務是否完成的列表，目前都是空的，等任務完成後才會打勾。
規格驅動開發（SDD）
確認以上規劃都符合預期後，說「開始實作」，AI 就會根據規劃開始撰寫程式了。
在等待一段時間後，AI 說他已經完成了初版，此時剛剛 Task 的任務列表已經全部打勾：
如果你不知道如何啟動專案，可以貼上下面的提示詞請 AI 幫忙啟動
幫我啟動專案，我想在 Local 開發前後端程式
只有 Postgres 跟 Postgres Admin 用 Docker 啟動
如果根目錄 README.md 沒有操作步驟，請協助補充
我個人建議第一次啟動可以請 AI 幫忙，因為處理較大型的專案時
AI 有很高的機率在第一版遇到一些零星錯誤，我們可以先讓他自我修正一下
初步驗證功能
啟動後就可以根據 AI 只是來確認功能是否符合預期。
首先我們可以正常打卡的，並且當打卡時間沒有在上班時間內時，會有遲到的訊息：
因為我們進來的權限是管理者，所以也可以進行使用者的新增、權限的設定：
再確認網頁內容可以順利瀏覽後，接著我們可以試著打開 Postgres Admin 網頁，看一下資料庫是否是否有順利寫入。
如果不知道這些資訊如何填寫，直接問 AI 就好了。
使用者的資訊會存放在 users 資料夾，這邊就能看到預設的 Admin 管理者帳號，以及剛剛新增的一般使用者：
接受此次變更
初步確認功能符合預期後，我們回到程式碼編輯器，可以跟他說
功能符合預期，進行歸檔
稍等一段時間後，你會發現原本空空的 specs 資料夾底下，出現專案對應的規格文件，而 archives 底下出現了歸檔的文件，並註明了對應的日期。
建立專案規則
在完成專案初步建立後，我們可以在 Claude 對話窗輸入「/init」，這個指令會掃描目前的專案結構，並在根目錄建立「CLAUDE.md」。
這份文件會在每次對話開始時自動載入，幫助 Claude 在未來開發過程中，能更了解這個專案的架構、技術、開發規則等資訊。
除了 Claude 的設定外，我們也可以幫 OpenSpec 建立規則，你可以在對話窗輸入這段提示詞：
Please read openspec/config.yaml and help me fill it out
with details about my project, tech stack, and conventions
這是請 AI 幫你填寫專案使用到的技術，以及需要遵守規則，目標是讓 OpenSpec 的 Skill 觸發時，有參考的慣例。
簡單來說，CLAUDE.md 是給「做事」用的，openspec/config.yaml 是給「規劃」用的。
③ 建立版本控制，根據需求迭代功能
在完成專案初版後，我強烈建議大家先建立版本控制，因為 Vibe Coding 時，你的每個指令都可能大幅調整專案程式。
但 AI 修改的結果未必是你要的，甚至有時會把正常的功能給改壞了。
為了把改壞的內容救回來，我會建議大家安裝 Git，這個程式碼版本控制工具，並註冊 GitHub 帳號來管理專案。
如果你是第一次接觸，我有專門錄一隻影片分享詳細的操作步驟！
設計 .gitignore
版本控制並不代表你需要把專案底下所有檔案都上傳，比如像「.env」這類有隱私資訊的檔案就不適合加入。
所以我們要建立「.gitignore」，把他從 Git 版控中移除；如果不確定專案有哪些檔案、資料夾要加入「.gitignore」，可以使用下面的提示詞：
請幫我設計專案的「.gitignore」
但「.claude、openspec」要加入版本控制
建立版本控制
完成前面 Git 的相關設定後，可以點擊左側的 Source Control，點擊 Initialize Repository 可以初始化專案。
接著點擊 Generate，AI 就會辨識我們更新的內容，來產生 commit 訊息；確認文字描述符合自己的預期後，點擊 commit，就會在自己的電腦記錄這個變更。
但如果想更新到雲端，你需要點擊 Publish Branch才會正式上傳喔！
如果專案尚未存在於 GitHub，會有彈窗出現，讓你輸入專案名稱，這邊我就用跟資料夾一樣的就好了。
如果你的專案沒打算對外公開原始碼，我建議選擇 Private 隱私模式，完成後，點擊 Open GitHub 去看看是否部署順利。
如果能看到專案的內容，就代表你成功上傳專案了！
迭代功能
其實不管 Vibe Coding 還是開發系統，最難的並不是 0 到 1，而是 1 到 100 的那段路。
不過有了 OpenSpec 的幫助，這一切會變得容易許多。
這邊我們開一個新對話窗來處理新任務，比如我們可能會有忘記打卡的情形發生，就可以跟 AI 說：
幫我設計忘打卡的處理方案，讓規則彈性一點，使用 OpenSpec
這樣 AI 就會開始著手設計，並根據 OpenSpec 的 SKill 建立對應的需求規格；稍等一段時間後，AI 就完成了前期的設計。
由於我們有加入 Git 做版本控制，所以可以在 Source Control 中，清楚看到 AI 撰寫的需求變更規格書。
再確認需求與自己的期待相符後，接下來的流程都是一樣的，直接跟他說「開始實作」就好。
驗證功能
等 AI 完成調整後，因為功能涉及後端與資料庫，所以我會建議大家跟 AI 說：
請協助確認資料庫變更是否執行，並幫我重新啟動後端程式
等 AI 執行完畢後，我們再去瀏覽網頁，這樣測試會比較準。
畫面中能看到補打卡的功能完成新增：
申請補打卡：
核准補打卡：
確認結果生效：
功能歸檔
確認沒問題後，回到程式碼編輯器，直接在與 AI 的對話窗說
幫我歸檔
稍等一段時間後，你就會看到 archive 裡面多了一個資料夾，裡面放的就是這次的變更。
另外專案的 specs 也有進行對應的調整，綠色是新增，黃色是變更的意思。
這邊也提醒大家，每做完一件事，記得保持 commit 的好習慣；這樣每個版本完成的功能會比較明確，而不是一堆功能全部混一起。
模擬測試資料
補充一個情境，不是所有變更，都會觸發 OpenSpec 的 Skill。
比如目前專案初始狀態下，只有一個 Admin 的帳號，這樣想測試多位使用者的不同情境，要自己手動慢慢加，很沒效率。
此時我們就可以請 AI 幫忙設計模擬資料，我就跟他說：
我想要根據權限建立多位使用者，來模擬不同情境
因為這個需求不會涉及到功能上的改變，所以不會觸發 OpenSpec 的 Skill
等 AI 完成後，我們可以到員工管理看一下，哇！真的建立了對應的員工資料：
這樣可以方便我們測試更加複雜的流程。
設定 Email SMTP
另外如果有功能卡住，不知道如何處理時，也可以先詢問 AI 如何設定。
比如新增員工時，會需要寄信通知，但如果環境變數沒有設定好，信件是不會發送的。
此時就可以詢問 AI：
我要如何設定環境變數，讓 email 可以順利寄出？
這邊他就說 Gmail 要開啟兩步驟驗證，我們就點擊對應的網址來進行設定。
設定完成後，因為我們有更新到「.env」環境檔，所以要重啟才會生效，你可以直接請 AI 幫忙：
幫我重啟後端
重啟完畢後，我們再新增一個使用者測試是否能收到信件：
如果你也跟著教學走到了這一步，先給自己拍拍手，然後別忘記幫文章點個讚。
你已經初步完成一個有資料庫的全端系統啦！
AI 正在改變企業決策
如果在幾個月前拍這個主題，我肯定會從 AI 完成的系統挑出很多安全性的漏洞。
但這次拍完教學後有點被嚇到，雖然還是遇到了許多功能上 Bug，但我已經無法在短時間找出系統漏洞了。
以往這類的出缺勤管理系統，企業都是要找特定廠商購買，並且支付年費來維護的；但 Vibe Coding 的出現，可能會導致企業做出不同的選擇。
不過提醒大家，目前只是完成系統的初版，如果接下來打算在團隊內開發協作，還需要設計合適的工作流。
我過去有拍一隻影片，分享如何解決版本控制與團隊協作的痛點：https://youtu.be/1VuLTQidbPM
另外如果你想要讓系統更穩定，還需要加入自動化測試，畢竟市場不會為爛產品買單：https://youtu.be/Rb0_LutRIaw
別忘記，不管 AI 有多強大，出事還是要人類來背鍋。
結語：AI 時代下每個人，正在經歷角色的轉變
其實我是懷抱沈重的心情發布這期影片的，因為今天介紹的 OpenSpec 與 Claude Code 給了我完全不同的開發體驗。
如果你是工程師，一定要嘗試看看這個工具組合；假使你沒有程式背景，建議跟著影片實作一遍。
其實早在幾個月前，我就想拍攝這個主題了。
但用相同的指令，當時 AI 完成的初版，連專案啟動都有問題。我需要來回溝通十幾次，才能勉強讓專案跑起來，但結果還是漏洞百出。
可是今天這期影片想必大家也都看到了，我們已經能用簡單的提示詞生成一個有資料庫、登入功能的前後端系統。
儘管中間遇到了一些小問題，目前版本也有許多細節要優化。
但光是這個版本，放在過去可是要一個專業團隊才有辦法完成。
也許這樣說會被很多人罵，但我還是想提醒大家，尤其是工程師。
過去，程式碼是個昂貴的產品，但不是程式碼本身貴，而是要產生出有意義的程式，需要大量的經驗、專業。
但 AI 的發展正在讓程式碼快速貶值，因為 AI 不僅寫程式很快，品質還越來越優秀。
不過今天這隻影片想傳遞的不是「工程師已死」，這類網路上爛大街的口號。
而是透過實際的範例告訴大家，在 AI 時代下的每個人，大家正在經歷角色的轉變。
工程師的重點不再是寫了多少行程式，而是去評估系統架構、審查程式碼合理性。
而 PM 與執行業務單位，也不再只是眼巴巴的等工程師開發，在 AI 的輔助下，他們已經可以嘗試加入開發。
這中間當然還有很多細節要磨合，我自己也還在摸索。
但有件事我可以肯定，現在的開發分工，跟過去相比已經不一樣了；而不久的將來，變化只會更快。
好的，今天的分享就到這邊，如果這篇文章對你有幫助，可以順手按個讚，並把文章分享給對 AI 主題感興趣的朋友們。
留言載入中…