# 【Claude Code 實戰】用 OpenSpec 規格驅動開發，Vibe Coding 也能完成複雜專案

- 作者：林鼎淵（Dean Lin）
- 網址：https://deanlin.net/blog/202603/claude-code-openspec/
- 發布：2026-03-12
- 主題：AI 實戰
- 系列：Claude Code 實戰
- 標籤：OpenSpec、Claude Code、Vibe Coding、SDD、Docker
- 摘要：最近收到的企業邀約中，除了有軟體部門想將 AI 導入開發工作流外，也有不少來自人力資源、執行業務部門的邀約。

最近收到的企業邀約中，除了有軟體部門想將 AI 導入開發工作流外，也有不少來自人力資源、執行業務部門的邀約。

而面對要客製化的課程，會先安排需求訪談。

開會過程中，有位客戶說的話讓我印象深刻，他說：

> 「我們企業的痛點，是開發系統的人不用系統；真正用系統的人不會開發，所以我們才想學 Vibe Coding。」

其實這個痛點是業界常態，以人力資源系統來舉例好了，**雖然是工程師開發，但 HR 才是主要的使用者。**

這導致**不管前期規劃與設計有多麼詳盡，初步完成的產品在進入易用性測試後，還是會收到一大堆需求變更。**

會有這樣的結果，並不是使用者很刁鑽；而是真正的問題，往往在使用後才會被發現；但這些並不是在前期設計，就能完全考慮到的。

所以有些企業想導入 Vibe Coding，目標是讓熟悉業務的人：

> 有能力設計出符合自己使用需求的產品，並希望完成的產品原型，未來能交給工程師做後續的優化與維護。

這個課程需求如果放在去年，我還真的不敢接；但最近 AI 成長的速度實在太快了。

今天跟大家介紹的 Claude Code，已經可以讓沒有任何程式基礎的人，在了解與 AI 對話的技巧後，生成出一套涵蓋前後端與資料庫的系統。

並透過與 OpenSpec 的搭配，讓 AI 幫忙撰寫專案文件，達成用規格驅動開發的目標；**同時解決過去小白不知道如何撰寫規格，以及工程師不想寫文件的痛點。**

> 在 Claude Code 與 OpenSpec 的幫助下，我們不僅能完成專案從 0 到 1 的建置，更可以做到從 1 到 100 的迭代。

> 完整的 Demo，可以觀看 YT 喔 👉
> 對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

[YouTube 影片：【Claude Code 實戰】一次搞懂 OpenSpec，讓專案每次迭代都有依據](https://www.youtube.com/watch?v=FeQv7mngg6Q)

## ① 安裝 Claude 與 OpenSpec，初始化專案設定

### 安裝 Antigravity

今天這個教學，你可以使用自己熟悉的程式碼編輯器，不管是 VSCode、Cursor、Antigravity 都可以。

如果不知道使用哪一款，可以跟我一樣，使用 Google 最新推出的 AI 程式碼編輯器 [Antigravity](https://antigravity.google)，登入 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 檔來安裝](https://github.com/coreybutler/nvm-windows/releases)。

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](https://code.claude.com/docs/zh-TW/overview)。

你可選擇在終端機輸入指令安裝：

```
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](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 ](https://www.docker.com/)這款工具。

你可以把 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 帳號來管理專案。**

> 如果你是第一次接觸，我有專門錄一隻影片分享詳細的操作步驟！
> [https://www.youtube.com/watch?v=5DEV_K0JauQ&t=836s](https://www.youtube.com/watch?v=5DEV_K0JauQ&t=836s)

### 設計 .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/1VuLTQidbPM)
> 另外如果你想要讓系統更穩定，還需要加入自動化測試，畢竟市場不會為爛產品買單：[https://youtu.be/Rb0_LutRIaw](https://youtu.be/Rb0_LutRIaw)

> 別忘記，不管 AI 有多強大，出事還是要人類來背鍋。

## 結語：AI 時代下每個人，正在經歷角色的轉變

其實我是懷抱沈重的心情發布這期影片的，因為今天介紹的 OpenSpec 與 Claude Code 給了我完全不同的開發體驗。

如果你是工程師，一定要嘗試看看這個工具組合；假使你沒有程式背景，建議跟著影片實作一遍。

其實早在幾個月前，我就想拍攝這個主題了。

但用相同的指令，當時 AI 完成的初版，連專案啟動都有問題。我需要來回溝通十幾次，才能勉強讓專案跑起來，但結果還是漏洞百出。

可是今天這期影片想必大家也都看到了，我們已經能用簡單的提示詞生成一個有資料庫、登入功能的前後端系統。

儘管中間遇到了一些小問題，目前版本也有許多細節要優化。

> 但光是這個版本，放在過去可是要一個專業團隊才有辦法完成。

也許這樣說會被很多人罵，但我還是想提醒大家，尤其是工程師。

過去，程式碼是個昂貴的產品，但不是程式碼本身貴，而是要產生出有意義的程式，需要大量的經驗、專業。

但 AI 的發展正在讓程式碼快速貶值，因為 AI 不僅寫程式很快，品質還越來越優秀。

不過今天這隻影片想傳遞的不是「工程師已死」，這類網路上爛大街的口號。

而是透過實際的範例告訴大家，在 AI 時代下的每個人，大家正在經歷角色的轉變。

> 工程師的重點不再是寫了多少行程式，而是去評估系統架構、審查程式碼合理性。

> 而 PM 與執行業務單位，也不再只是眼巴巴的等工程師開發，在 AI 的輔助下，他們已經可以嘗試加入開發。

這中間當然還有很多細節要磨合，我自己也還在摸索。

**但有件事我可以肯定，現在的開發分工，跟過去相比已經不一樣了；而不久的將來，變化只會更快。**

好的，今天的分享就到這邊，如果這篇文章對你有幫助，可以順手按個讚，並把文章分享給對 AI 主題感興趣的朋友們。

  [https://www.tenlong.com.tw/products/9786264142083](https://www.tenlong.com.tw/products/9786264142083)

---

關於作者：林鼎淵（Dean Lin），台灣的生成式 AI 企業內訓講師、外商資安公司軟體專家，也是生成式 AI 創新學院發起人。出版 7 本書（包含全台第一本 ChatGPT 應用專書），兩度獲得 iThome 鐵人賽佳作，累積上百場授課與顧問經驗。（https://deanlin.net/about/）
引用時請附上原文網址：https://deanlin.net/blog/202603/claude-code-openspec/