上一集以 YouTube 留言彙整工具為案例，讓大家了解在 AI 時代只要有需求，就算工具不常使用，甚至只有自己一個使用者，那也值得開發。

因為在 AI 的幫助下，開發的時間成本已經大幅下降。

但小工具因為功能單純，所以只要講清楚需求，AI 就能幫你搞定；但如果今天要設計一款公開給大家玩的遊戲，涵蓋註冊登入、遊戲商城、玩家排行榜等功能。

你會發現隨著功能增加，AI 的執行能力越來越差

請他改一個功能，結果另一個功能壞掉；開新的對話窗，就忘了過去的約定。

這是因為當系統功能變複雜後，如果缺乏規格文件，不管人還是 AI 都會「失憶」。

所以這篇文章要分享用「規格驅動開發（SDD）」的技巧，會透過 Spec-Kit 這個工具，幫大家把模糊的需求變成具體的規格。

並在每次功能迭代時，記錄為何要做這次的修改，這樣未來維護時，才知道當初的決策依據。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Claude Code × Spec-Kit 教學】用規格驅動開發全端專案，再搭配 MCP 部署到 Hostinger VPS | AI Agent | Vibe Coding | SDD

為了提升專案的趣味性，這次會帶大家實作常常在廣告上看到的「割草遊戲」。

除了設計前端網頁的遊戲機制外，還涵蓋了玩家的註冊、登入，以及排行榜與升級制度，這些需要後端與資料庫的功能。

① 開發環境設定

而在正式開工前，我會先帶大家確認電腦的開發環境是否準備就緒，接著安裝 Spec-Kit 完成專案的初始化。

② 透過 Spec-Kit 開發

然後我們就要透過 Spec-Kit 來設計規格文件，這邊也會分享製作遊戲能參考哪些資源，以此減少 AI 消耗 Token 的額度。

在確認規格符合自己的需求後，就可以讓 AI 幫我們完成遊戲的初版。

③ Git 版控與迭代功能

親自驗證遊戲基礎操作都沒問題後，我們要先加入 Git 做版本控制，並將專案同步到 GitHub 雲端保存。

接著再測試一些極端情境，比如手機畫面是否有破版；並在遊玩的過程中，思考哪些細節可以進行優化。

而這些我們變更的決策，也可以透過 Spec-Kit 來進行迭代。

④ 透過 Hostinger 部署上線

確認遊戲各方面都符合期待後，我們就能部署到線上環境了。

因為最終成品涵蓋前端、後端、資料庫，所以這次我們會使用到 VPS 虛擬主機。

第一次接觸也不用擔心，在安裝 Hostinger MCP 後，透過白話文便可讓 AI Agent 協助完成部署與後續版本迭代的任務。

⑤ 上線後的安全性考量

但專案上線才是考驗的開始。

比如我們提供了註冊與登入流程，但有設計忘記密碼與使用者管理的功能嗎？是否需要加上信箱驗證的設定？

以及目前後端 API 有做什麼防護設定嗎？

這些問題，都是當真實使用者進入後，會開始浮現的。

⑥ 總結與比較

在影片的最後，我會分享自己這一年來使用規格驅動開發的心得；並比較過去介紹的 OpenSpec 跟這次的 Spec-Kit 有什麼差別。

① 開發環境設定，安裝 Spec-Kit 建立專案

如果你是第一次接觸 AI Coding，可以先參考上一集影片來安裝開發環境。

這集使用 Claude Code 作為 AI Agent，需要升級到 Pro 才能使用；但如果你熟悉的是 Codex、Cursor 或 Antigravity，其實開發流程都是一樣的。

另外我們會使用到 Node.js 開發專案、Git 版本控制、GitHub 做雲端同步，並用 Docker 啟動資料庫容器。

環境檢查

這邊先打開你熟悉的程式碼編輯器，我用的是 Cursor，你想用 VS Code、Antigravity 也都可以

https://cursor.com/zh-Hant/download

開啟程式碼編輯器後，我們先打開終端機，貼上下面的指令，確認基礎環境都完成安裝

nvm -v; node -v; git -v; docker -v

如果版號都有顯示，就代表安裝完成

安裝 Python 與 uv

接下來要安裝 Python 與 uv，因為 Spec-Kit 的指令列工具是用 Python 寫的

首先在終端機輸入 python3 –version，要 3.11 以上，太舊或找不到就到官網裝最新版

https://www.python.org/downloads/

接著安裝 uv，它負責安裝與管理 Python 工具，如果你是 macOS 或 Linux 可以在終端機輸入：

curl -LsSf https://astral.sh/uv/install.sh | sh

如果你是 Windows 則可參考指令：

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

裝完開啟一個新的終端機，輸入 uv –version，出現版號就代表你成功嚕

安裝 Spec-Kit，建立專案

接著我們能透過 uv 來安裝 Spec-Kit

uv tool install specify-cli --from git+https://github.com/github/spec-kit.git

安裝完成後，你可以開啟一個存放專案的資料夾，輸入下面的指令來建立專案

specify init web-survivor --integration claude

其中 web-survivor 是專案名稱，而 integration 後面的 claude 則是我們指定的 AI Agent

完成後，我們要用 cd 指令進入這個專案資料夾，並透過程式碼編輯器打開它

cd web-survivor
cursor .

此時左側會看到兩個資料夾，「.claude」裡面儲存了 Spec-Kit 相關的 Agent Skill

裡面涵蓋了釐清需求、建立規則、撰寫程式的 SOP，如果你是第一次接觸 Agent Skill，我過去有專門做一期影片講解。

而下面的「.specify」則是存放規格流程需要的模板與腳本。

安裝 Chrome MCP

接著我們打開終端機，為了讓 AI 可以操作 Chrome 瀏覽器完成自動化測試，我們要先裝一個 MCP 外掛。

但安裝前要確認電腦有安裝 Chrome 瀏覽器，然後就可以在終端機貼上下面指令進行安裝：

claude mcp add chrome-devtools -s user -- npx -y chrome-devtools-mcp@latest

這邊因為我已經安裝過，所以他說這個工具已經存在了。

確認 MCP 與 Skill 安裝完成

完成後在終端機輸入「claude」，然後在對話輸入「/mcp」，就可以看到剛剛安裝的 chrome-devtools 連線成功。

按下 esc 離開後，接著輸入「/speckit」，可以看到相關的 Skill 都已經安裝完成。

下載 CC0（可商用）的美術與音效

但在撰寫規格前，先做一件很多人會忽略的事情，那就是給 AI 準備可以使用的素材，這能讓最終的成果有風格一致的美術效果。

這次我是從下面幾個網站準備素材的：

• Kenney：https://kenney.nl/

首先是 Kenney，點擊 Assets 後，你可以看到豐富的素材資源，這次遊戲的角色、怪物、武器都用它的。

有一點需要特別提醒，就是確認素材的授權為 CC0，這樣才可以放心的使用。

• OpenGameArt：https://opengameart.org/

而背景音樂，則可以在 OpenGameArt 選擇，你可以根據自己的喜好挑選素材。

如果不知道怎麼選，可以先回到程式碼編輯器，我有準備練習的參考資源，直接貼上我的指令，讓 AI 下載並分類整理：

請把下列素材下載到 assets/ 並解壓分類（sprites／particles／ui／audio），
完成後生成 ASSETS.md，記錄每包的名稱、來源頁、授權（皆為 CC0）：
- https://kenney.nl/media/pages/assets/tiny-dungeon/f8422efb44-1674742415/kenney_tiny-dungeon.zip
- https://kenney.nl/media/pages/assets/particle-pack/f8fe0f8cb8-1677578741/kenney_particle-pack.zip
- https://kenney.nl/media/pages/assets/ui-pack/f651646eab-1718203990/kenney_ui-pack.zip
- https://kenney.nl/media/pages/assets/impact-sounds/87b4ddecda-1677589768/kenney_impact-sounds.zip
- https://kenney.nl/media/pages/assets/interface-sounds/fa43c1dd4d-1677589452/kenney_interface-sounds.zip
- https://kenney.nl/media/pages/assets/rpg-audio/8e99002d76-1677590336/kenney_rpg-audio.zip
- https://opengameart.org/sites/default/files/5%20Action%20Chiptunes%20By%20Juhani%20Junkala.zip
- https://opengameart.org/sites/default/files/battleThemeA.mp3
只准使用上述來源，不得自行搜尋或下載其他素材。

這裡我將資源分成幾塊： sprites 是角色與場景圖塊 particles 則是武器效果的粒子貼圖 ui 是遊戲畫面的常見的操作按鈕 audio 很好理解，就是背景音樂和音效。

稍等一段時間後，AI 就將資源下載好了，有興趣的朋友可以在 ASSETS.md 的檔案中深入了解每個素材的用途。

提供撰寫遊戲的說明書

另外這次遊戲我採用 Phaser 4 作為開發框架，他在處理 2D 遊戲上有很棒的表現：

https://github.com/phaserjs/phaser

儘管我們可以讓 AI 自由開發，但指定明確的框架，並透過 Skill 告訴他框架如何使用，可以少走很多彎路。

這邊開啟一個新的終端機，貼上下面的指令，就能把 Phaser 的 Skill 搬到我們的專案中：

git clone --depth 1 --filter=blob:none --sparse \
  --branch v4.2.1 https://github.com/phaserjs/phaser.git phaser-tmp
git -C phaser-tmp sparse-checkout set skills
mkdir -p .claude/skills
cp -R phaser-tmp/skills/* .claude/skills/ && rm -rf phaser-tmp

完成後，在「.claude/skills」資料夾下就能看到剛剛新增的 phaser 技能。

② 用 Spec-Kit，建立全端網頁專案

在完成前置作業後，我們先回到與 Claude 的對話視窗，接下來要使用 Spec-Kit 來開發遊戲。

STEP 1：/speckit-constitution 建立專案規則

首先我們要建立這個專案要共同遵守的原則，設定好後，接下來的規格文件與執行計畫都會參考他

/speckit-constitution
1. 遊戲核心必須使用 Canvas/WebGL 遊戲框架，不得以 DOM 元素硬做遊戲。
2. 三層架構：前端遊戲、後端 API、資料庫；本機與部署皆以 docker-compose.yml 啟動。
3. 安全底線：密碼一律雜湊保存，不得明文或可逆加密；執行 API 必須通過身分驗證。
4. 所有設定透過環境變數管理；.env 永不進 git，必須提供 .env.example。
5. 美術與音效一律使用 assets/ 內預先放好的 CC0 素材，來源與授權記錄於 ASSETS.md。
6. 其餘未明定的細節，可在不牴觸上述原則下自行決策，但決策必須記錄於文件。

1. 第一條規則是先定下使用的技術，否則 AI 很可能用 DOM 元素硬做遊戲
2. 第二條則說明專案的架構，其中使用 docker-compose.yml 是為了讓專案在本機與部署時都能共用
3. 第三條是安全規範，確保使用者密碼的安全性，以及後端 API 存取要經過的驗證
4. 第四條也跟安全有關，因為「.env」這個環境變數會儲存很多機敏資訊，所以不能加入版控，但要提供一份 example 的參考值
5. 第五條是限定 AI 能使用的素材範圍，這樣能避免 AI 上網亂抓一些沒有授權的資源
6. 第六條是保留 AI 執行的彈性，但同時要求他決策要寫進文件讓我們參考

等 AI 執行完成後規則就被寫進 .specify/memory/constitution.md

打開檔案會發現，它會在我們提供的指令上補充許多細節；每條都會在底下補上存在的「理由」，並且在最後多出了 Governance 說明這個憲章的使用規範。

底部還有版本號與批准日期，日後要求 AI 調整這份專案規則時，版本號也會自我更新。

STEP 2：/speckit-specify 撰寫規格

在設定好專案規則後，下一步就可以讓 AI 開始撰寫規格，這一步我們要說明遊戲外型、使用規則、驗收標準：

/speckit-specify
建立一款名為「Web Survivor」的 2D 網頁肉鴿割草生存遊戲。
遊戲目標：
玩家在俯視角地圖中移動閃避，武器自動攻擊，面對不斷生成的怪物撐過 3 分鐘取得高分；
已登入玩家結算後回寫金幣、永久升級進度、個人最高分與排行榜。
核心規則（必須遵守）：
- 玩家只控制移動（WASD／方向鍵）；武器自動攻擊；怪物死亡掉落經驗與金幣。
- 3 種武器原型：直線投射、環繞近戰、範圍光環；每個最高 5 級，每次升級會有對應效益（速度、數量、範圍半徑），武器可同時持有；滿級武器不再出現在升級選項。
- 3 種敵人：普通、快速、坦克；生成數量與強度隨時間遞增。
- 經驗達標時暫停，出現 3 個隨機升級選項。
- 每局 3 分鐘，死亡或時間到進入結算；單局時長必須可由設定調整（供開發驗證）。
- 未登入可遊玩但不能提交成績；username 全站唯一（不分大小寫）；密碼不可明文保存。
- 金幣可購買永久升級（至少 3 種、各 5 級），下一局生效。
- 排行榜顯示前 100 名，每人只留個人最高分。
開放決策（實作時自行平衡，決策記錄於文件）：
- 武器命名與手感、傷害曲線、敵人血量成長、掉落率、磁吸範圍、永久升級的種類與價格。
- 視覺與音效回饋細節（受擊表現、撿取音、升級演出）。
美術與音效：
- 16×16 像素 dungeon 風；角色、怪物、武器、道具一律取自 assets/ 的 Kenney Tiny Dungeon；音效取自 assets/audio。
成功條件（驗收用）：
- 玩家可完成一局 3 分鐘遊戲；三種武器自動攻擊；升級三選一正常。
- 結算畫面顯示分數、擊殺數、金幣；登入玩家成績正確回寫；較低分不覆蓋最高分。
- 以既有名稱（含大小寫變體）註冊被拒；排行榜正確顯示前 100 名。
- 同屏 300 隻敵人維持流暢（30fps 目標）。

這個指令分成五段，一開始先說明我想做什麼類型的遊戲，讓 AI 對成品有基本的想像。

1. 「遊戲目標」講的是一局的流程，從開始玩、撐過時間、到結算把資料寫回去
2. 「核心規則」涵蓋了操作模式、遊戲機制，還有武器、敵人、升級規範，這些數字寫死，AI 才不會自由發揮
3. 「開放決策」則是把「手感、數值、價格、音效回饋」這類玩過才知道好不好的，交給 AI 提案
4. 「美術與音效」就是明確指定使用資源
5. 最後「成功條件」則是驗收清單，這樣 AI 完成後才有明確的標準

稍等一段時間，AI 會把初步的規格寫到「specs」資料夾底下，這邊你會看到資料夾開頭為「001」，這個數字會隨著功能迭代遞增。

打開「spec.md」後，就可以看到 Spec-Kit 根據不同使用情境撰寫了 User Story。

這份文件我建議大家花點時間看一遍，因為很多細節都是 AI 自己補充的，但是否符合期待，需要由你親自把關。

如果有想調整的部分，你可以直接編輯文件，又或者跟 AI 討論自己的想法來優化。

在這個階段調整，會比後續 AI 做出來不符預期大改更有性價比。

STEP 3：/speckit-clarify 釐清

如果你自己也看不出哪些有問題，那可以在對話窗輸入

/speckit-clarify

這個指令會讓 AI 主動逼問你，釐清規格中沒想清楚的地方；像這邊他就開始問問題了，你可以根據自己實際的需求回答。

回答後，AI 會自動把內容彙整到 spec.md 中。

其實這個來回對答的流程，也是在告訴大家「規格不可能一次就完善」，所以不要再被那些一行指令就生成完美系統的話術給騙了。

STEP 4：/speckit-plan 技術規劃

在釐清專案「要做什麼」之後，接下來就能進入到「怎麼做」的環節

如果你心中已經有明確的技術組合，可以跟我一樣在這個階段提供給 AI

當然，如果你沒有任何想法，也可以讓 AI 直接幫你規劃

/speckit-plan
技術限制：
- 前端：Vite + TypeScript + Phaser 4
- 後端：Node.js + Express + Prisma（含 migration）
- 資料庫：PostgreSQL
- 遊戲參考 Phaser skills 實作
- 防作弊：登入（JWT）後才可提交成績

像這邊我就明確要求前端要使用的網頁與遊戲框架，後端與資料庫的部分，則是使用我熟悉的工具。

另外遊戲實作這塊，我要求使用 Phaser skills，避免 AI 使用到舊版寫法，並且因為遊戲有設計排行榜，所以我特別要求必須登入後才能提交成績。

等專案技術規劃完畢後，你會看到他生成了許多文件，涵蓋技術脈絡、相關決策、資料流、API 設計與後續啟動與驗證的文件。

STEP 5：/speckit-tasks 與 /speckit-analyze

做到這一步，專案的規格文件已經非常詳細了，接下來只要輸入 /speckit-tasks，就能把複雜的計畫拆解成可執行的任務清單。

等 AI 完成後我們打開「tasks.md」可以看到每個任務有對應的依賴關係與驗收條件。

一開始前面的 Checkbox 都是空的，等 AI 實作完成後才會打勾。

另外如果你對目前的設計還不夠放心，可以執行 /speckit-analyze 做交叉檢查；他能協助確認規格(spec)、計畫(plan)、任務(task)三份文件是否存在矛盾，以及是否有漏掉的需求。

STEP 6：/speckit-implement 開始實作

另外提醒大家，與 AI 對話的內容越多，會對 Token 造成較多的消耗。

因為任務文件都已經建立完成了，所以我們可以先用 /clear 來開啟新對話窗。

然後輸入 /speckit-implement 讓 AI 根據 Task 開始實作；通常會執行 30 分鐘以上，所以送出指令後，大家可以去做其他的事情，不用一直守在螢幕前

這次 AI 總共執行了一個多小時才完成任務，如果不知道如何啟用系統可以問他：

系統如果還沒啟動，請幫我啟動
並給我對應網址

拿到網址後，你可以看到遊戲畫面就是我們提供的素材，走低像素風格，這邊我們操作遊戲來確認是否符合預期：

首先這個遊戲即使不登入也是可以直接遊玩的，並且打怪也都符合預期，吸收足夠的經驗後也能升級武器；並且除了背景音樂外，擊倒怪物或受傷時也有對應的音效。

等這局玩完後，接下來我們嘗試註冊帳號來玩一局；這邊我發現了一個問題，有部分的按鍵打下去沒有反應。

沒關係，我們先完成註冊的流程，確認是否還有其他的問題。

OK，大體上都符合預期，並且玩完這局後，可以看到我們是有進入排行榜的；並且金幣有保留，可以用來升級角色。

修復問題

接下來我們再回到與 Claude 的對話，請他協助修復我們遇到的問題，直接跟他說：

請解決註冊時部分按鍵無法使用

稍等一段時間，AI 就把問題解決了。他說是因為註冊時，表單會吃掉 WASD 與空白鍵導致，調整後就符合預期了。

修復完成後，先登出目前的帳號去重新註冊，以此來驗證問題有成功被修復，可以順利完成註冊流程。

③ Git 版本控制，Spec-Kit 迭代功能

在初步確認遊戲基礎功能符合需求後，我們要給這個專案加上版本控制，這邊會使用到 Git 這個工具。這樣就算 AI 未來把專案改壞了，我們都還有回頭路可以走。

建立第一個存檔點

這邊先請 AI 幫我們產生 commit，可以直接在對話中跟 AI 說

請根據變更設計 commit 訊息，並完成 commit

你可以把 commit 想像成遊戲的「存檔點」，每完成一個階段就存一次檔，就算後面打輸了，也能回到上一個存檔點重來。

畢竟 AI 修改程式碼的幅度很大，有時你只是請他調整一個小功能，他卻順手動了其他地方。

如果沒有存檔點，改壞就真的回不去了

另外也帶大家看一下「.gitignore」這個檔案：

前面跟大家說 Git 是版本控制工具，而 gitignore 的功能，就是用來存放不要加入版本控制的檔案。

像是填寫隱私資訊的環境變數、存放套件與建置產物的資料夾、日誌暫存檔這些都是不需要加入專案版本控制的。

推上 GitHub，為部署做準備

commit 完成後，我建議把專案推上 GitHub，除了多一份雲端備份，後面部署上線時也會用到。

點擊左側的「Source Control」，在左下方可以看到剛剛 commit 的訊息。

點擊「發布 Branch」便可建立 GitHub repository，如果想公開讓大家看，就選擇 public，但私人專案用 private 即可。

推送成功後，點擊「在 GitHub 上開啟」，看到專案的資料有上傳上去，就代表你成功嚕！

用 Spec-Kit 優化專案

有了存檔點後，我們就可以來繼續優化專案了，像這邊我就發現這款遊戲有以下問題：

1. 像切換到手機畫面時，除了畫面還是橫式的，還會無法操作
2. 另外現在的遊戲介面有點太簡約了，希望能變得更精緻一些
3. 考量到遊戲玩到一半可能會被其他事情打斷，設計一個暫停按鈕會更好
4. 還有武器升級時，希望有對應的武器圖片，這樣我們才知道自己選了什麼

因為上面這些想法屬於「需求變更」，所以跟先前修正錯誤時直接請 AI 處理不同。

我們要透過 Spec-Kit 來進行優化，有了變更文件後，日後回頭看，你會更清楚當初為什麼做出這些決策。

但因為過去我們已經跟 AI 聊了很多，所以要輸入 /clear 來清除對話，避免 AI 因為新舊需求混在一起，導致回覆品質下降。

另外也跟大家介紹 Agent Skill 不同的觸發方式，前面我們都是透過「/」指令的方式來觸發，其實我們也能透過被動的方式來觸發，像這邊我就直接跟 AI 說「使用 spec-kit 來優化下面功能」：

使用 spec-kit 優化下面的功能
- 畫面需考量手機排版，避免破版問題，手機打開預設為直式全螢幕
- 手機單手可玩，手指按下的位置就是搖桿原點，往哪滑就往哪走，畫面任何位置都能按
- 在遊戲設計一個暫停按鈕
- 主選單、遊戲中的資訊列、商店、結算畫面排版再精緻一點，icon 取自 assets/ui
- 升級時，每個選項要有對應的武器圖片，要與實際武器一致

但提醒一下大家，這種被動觸發的方式，如何使用 Skill 就會交由 AI 判斷

以這次的執行來說，他就是一口氣走完釐清規格、技術規劃、任務拆分、執行實作的流程。

如果想知道每個段落做了什麼，在 specs 資料夾底下有一個 002 開頭的資料夾，裡面就有設計的細節。

另外在 AI 完成大幅修改後，建議大家讓它重新啟動一下，避免系統還卡在舊版本，方式很簡單，直接跟他說：

重啟系統確認變更生效

驗收變更符合預期

重啟後，我們打開瀏覽器直接玩一局，先按 F12 切換成手機的顯示模式，可以看到主選單的排版有優化過。

開始遊戲後，確認可以單指操控，玩到一半也可以暫停，並且升級時有明確的介紹與武器圖片。

Commit & Push

接下來回到程式碼編輯器，先輸入/clear開啟一個新對話視窗，然後請 AI 幫我們把變更 commit 並更新到 GitHub：

請根據變更設計 commit 訊息，並完成 commit 與 push

等 AI 完成後，可以到 GitHub，確認都有更新上去：

如果教學看到了這邊，可以幫這篇文章拍拍手～

④ 安裝 Hostinger MCP，將專案部署上線

在自己電腦確認功能可以運行後，就可以準備部署上線了。

因為這次的專案涵蓋前端、後端、資料庫，所以會需要一台雲端伺服器；這邊我以 Hostinger 的 VPS 來做部署示範。

建立 VPS：方案、價格與優惠碼

進入 Hostinger 官網後，可以透過 Google 帳號註冊與登入

https://hostinger.com/deanlin

點擊左側的「VPS」，選擇「VPS Hosting」，進去後你會看到一張世界地圖，這是在選擇伺服器的位置，建議選擇延遲比較低的機房，這邊我就選擇 Malaysia。

然後他會詢問你要在機器上安裝什麼，這邊建議大家選擇「Ubuntu」這個作業系統，版本的部分，選擇最新的那個就好。

在存取 VPS 的方式上，你可以設定 root 權限管理者的密碼，又或者增加 SSH Key 來登入也是可以的。

而下一步，建議大家可以把 Malware scanner 這個保護 VPS 安全的功能打開；還有 Docker manager 也建議打開，這可以讓我們後續部署更加便利。

點擊下一步後，會介紹不同機器的方案；原則上機器的規格越好，價格就越高；另外價格也會隨著機器的租賃週期有所不同，週期越長價格越便宜。

如果輸入我的優惠碼「DEANLIN」，會再獲得 10% 的優惠。

安裝 Hostinger MCP

這個範例我以「KVM 2」來進行示範，在 VPS 建立完成後，我們要來安裝 Hostinger 的 MCP。

點擊左側的 API 後，先選擇自己目前使用的 AI Agent，這邊我以 Claude Code 作為示範。

因為要跟大家示範如何設定網域以及將專案部署到 VPS Hosting，所以只要把 Domain and DNS 還 VPS Hosting 打勾就好，我建議根據實際需求給予對應的權限，而非全部打勾。

下面就會給你設定 MCP 的 JSON 範例，這邊回到程式碼編輯器。

跟大家分享一個小技巧，只要點擊專案的名稱，貼上檔案的路徑就能直接前往，像這裡我就貼上 Claude 設定檔的路徑 ~/.claude.json

{
  "mcpServers": {
    "hostinger-domains": {
      "command": "npx",
      "args": ["--package=hostinger-api-mcp@latest", "hostinger-domains-mcp"],
      "env": { "HOSTINGER_API_TOKEN": "your-token-here" }
    },
    "hostinger-dns": {
      "command": "npx",
      "args": ["--package=hostinger-api-mcp@latest", "hostinger-dns-mcp"],
      "env": { "HOSTINGER_API_TOKEN": "your-token-here" }
    },
    "hostinger-vps": {
      "command": "npx",
      "args": ["--package=hostinger-api-mcp@latest", "hostinger-vps-mcp"],
      "env": { "HOSTINGER_API_TOKEN": "your-token-here" }
    }
  }
}

搜尋「mcpServers」，再貼上設定，這邊你會看到有一個需要設定 HOSTINGER_API_TOKEN 的部分。

我們回到 Hostinger 網站，點擊「Generate API token」，然後輸入 Token 名稱，下面是 Token 有效的期限，可以根據自己需求調整，這裡我使用默認的一個月。

生成完畢後，這個值一定要好好保存，並且不可以外洩，否則你的專案會有安全疑慮。

接著回到程式碼編輯器，貼上剛剛取得的 Token。

完成後，先開啟終端機，然後輸入「control + c」退出當前對話，接著輸入 claude 來重啟。

此時輸入「/mcp」，如果看到「hostinger」的「dns/domains/vps」就代表設定成功了。

我們可以先詢問他

列出 hostinger 的 vps 機器

這邊就可以看到他可以成功找到

下一步，就請他把專案部署到 Hostinger，我跟他說

幫我把專案部署到這台 Hostinger VPS，有前端、後端、資料庫等元件
我希望各自建立對應的 image，然後參考 Docker 設定來做部署

在部署這塊，AI 跟我們說他已經完成了部署，因為目前還沒有綁網域，所以先使用 IP 的方式瀏覽：

這邊我就直接開一局玩玩看，在基礎使用上都是沒有問題的；在過去，專案部署是一件很複雜的事情，而且每家雲端服務商的操作流程都不同。

但有了 MCP，AI 就可以直接操作外部工具，省去我們要熟悉工具的過程。

這邊我們先確認可以不登入遊玩，然後再來測試註冊帳號的流程是否正常，並且遊戲的商店以及排行榜功能都是符合預期的。

使用專屬網域

最後補充一點，雖然 IP 也能用，但如果給朋友遊玩時丟給他一串 IP，看起來真的很像詐騙集團。

特別是想經營個人品牌的朋友，我會建議大家去購買網域，這可以讓你的產品、服務更有專業感與可信度。

Hostinger 也有提供網域購買的服務，購買後還可以直接請 AI 幫你完成相關設定。

像我就直接跟他說：

我有購買[deanlin.tech]網址
想把目前的專案網址設定為[game.deanlin.tech]
幫我完成相關設定

稍等一段時間，AI 就幫我們搞定了，這樣網站看起來是不是就更有可信度了！

再次跟大家提醒，不管提示詞與規格文件多完善；系統都是需要在反覆迭代中修正的，有時沒有問題，可能只是使用的次數與人數不夠多而已。

結語：你不知道你不知道

OpenSpec VS Spec-Kit

在影片的最後，跟大家分享同為規格驅動開發的 OpenSpec，過去我有做一隻影片專門介紹，當時是以人力資源系統作為範例。

從體驗上來說，OpenSpec 可以在更短的步驟生成規格；而 Spec-Kit 對每個環節都有更詳盡的確認。

我認為沒有哪個比較好，但相對來說 OpenSpec 的規格人類讀起來比較舒服，而 Spec-Kit 生成的規格更像是給 AI 參考的。

規格詳細是好事，但當它大到一個程度時，人類的理解能力會大幅下降。我們只能抓重點讀，或是請 AI 幫忙摘要。

系統的隱患

回到今天的主題，儘管我們在 Spec-Kit 的幫助下，用白話文生成了全端系統的網頁遊戲，又透過 Hostinger MCP 完成部署作業。

但系統上線後才是考驗的開始，有一句話叫做「你不知道你不知道」。

這邊我從三個面向，盤點出這個系統目前存在的問題：

① 部署方式

首先，雖然我們用白話文就完成了部署，但你真的知道 AI 做了什麼事嗎？

因為這個 GitHub Repo 是 Private，所以 AI 在 Hostinger VPS 無法直接拉取；因此改用 rsync 這個指令，把電腦上的檔案直接同步到 VPS。

他的確完成任務了，但 AI 幫你把事情做完，跟用的是不是好的方案，這是兩件事。

因為部署上去的，是我電腦當下的狀態，而不是 GitHub 上的版本。

如果專案只有我自己維護倒也還好，但假使有多個人一起協作專案，那不就亂成一團了？

因此比較好的做法，應該是在 GitHub 幫這台機器設定一把 Deploy Key，讓它有專案的唯讀權限，能直接從 GitHub 拉程式碼。

再進一步，還能讓程式碼推送到特定 branch 時，自動觸發部署，不用人工登入機器操作。如果大家有興趣，未來再做一期專門介紹。

② 資料管理

再來聊聊資料，系統一上線，資料就是最重要的資產，這邊提出幾個問題讓大家思考：

1. 你知道怎麼進入資料庫管理介面，查看目前儲存的數據嗎？
2. 這個遊戲雖然可以註冊、登入，但在沒有會員管理系統的狀態下，你要如何得知目前的會員總數？
3. 目前系統沒有忘記密碼、信箱驗證的功能，因此使用者一旦忘記密碼，就只能再註冊一個帳號

這些都是設計上的缺失。

③ 公開網址後的風險

最後，再分享一個公開網址後可能會遇到的問題，講一個最直觀的，現在後端 API 沒有任何呼叫限制。

如果有人寫腳本瘋狂呼叫，伺服器的資源就會被這些惡意流量吃光，正常玩家反而連不上。

因此上線的系統，通常會加上 Rate Limit 的機制，限制使用者在一段時間內，最多只能呼叫多少次 API。

當然，系統要考量的問題遠遠不止這些，只是提出幾個點給大家參考。

AI 很強沒有錯，他可以輕鬆地做出產品原型；但想一路走到產品，你需要考量更多細節。

儘管 Spec-Kit 已經幫我們釐清許多模糊的需求了，但這並不代表全部面向都有考慮到。

就像前面提到的這些問題，如果沒拿出來講，大家會在第一時間想到嗎？

AI 能完善你提出的需求，但有更多問題在遇到之前你可能根本沒有想過。

這就是「你不知道你不知道」

畢竟規格和測試只能涵蓋你想到的部分，而出了事，AI 不會負責，但許多問題在親自驗證時，或許能提早發現與修復。

好的，今天的分享就到這邊，如果這個系列有給你啟發與幫助；別忘了按讚、訂閱，並把文章分享給需要的朋友。

相信很多人在面對繁瑣重複的工作時，腦袋可能會冒出一句話：「如果有工具可以幫我搞定就好了！」

這幾個月我收到許多 AI 輔助開發的企業內訓邀請；為了呈現最高品質的內容，我想把過去 YouTube 影片底下的留言彙整起來。

但問題來了，YouTube 並沒有匯出留言的功能

而我有些影片留言就有幾百則，如果手動整理，那是一個非常浩大且無趣的過程。

這就是我在日常工作遇到的痛點，我相信大家在自己的工作中，一定也有對應的痛點。

這邊再分享一個實際案例，前陣子我受邀到三軍總醫院分享 AI 輔助開發的經驗。

當時就以醫院的兩大痛點「月報製作」和「排班系統」當案例，現場向醫護人員展示 AI 的可能性，以及要注意的資安議題。

分享這些案例，是想讓大家了解，過去我們可能有想法，但因為沒有技術，因此只能等別人開發

但現在，只要想法與需求足夠明確，其實是有辦法在 AI 的輔助下，自己完成工具的。

但實際動手時，會遇到幾個問題。

首先，不管你選擇的 AI Agent 是 Claude Code、Codex 還是 Cursor；它們在執行任務時，時常會跳出一些操作權限的提醒，問你要同意還是拒絕。

假如你沒有相關技術背景，其實很難判斷該接受還是拒絕，而且閱讀這些資訊真的很花時間；要是不小心接受了 AI 的危險指令，電腦甚至有被清空磁碟或格式化的風險。

① 在隔離環境執行 Claude Code

所以我會先跟大家分享，如何用 Claude Code 搭配 Docker 建立一個可以放心讓 AI 執行的隔離環境；在這個環境中，AI 可以自動執行所有指令，不用擔心影響到自己的電腦。

② 設計好系統目標後，放手讓 AI Agent 執行

但在讓 AI 執行前，我們需要先告訴他明確的目標，以及驗收的標準。如果可以，最好再指定使用的技術，這樣得到的成品會更符合自己的預期。

③ 加入 Git 版本控制

而在 AI 製作完初版後，我們要先加入 Git 版本控制。因為 AI 修改程式碼的幅度很大，如果沒有版本控制，改壞就回不去了。

④ 透過 Hostinger 部署上線

另外如果你想把成果分享給朋友，或作為個人的作品集；我會分享透過 Hostinger 部署上線的步驟。

⑤ 上線後要考量的事

但上線只是考驗的開始，我也會分享系統上線後可能會遭遇的挑戰。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Claude Code 危險模式】怕 AI 搞壞電腦？用 Docker 隔離沙盒讓它火力全開，再用 Hostinger 部署上線 | AI Agent | Vibe Coding

① 在隔離環境執行 Claude Code

在正片開始前，我先說明會使用到的工具

Claude Code

首先你需要選一個 AI Agent，這隻影片的範例是 Claude Code；目前需要付費升級到 Pro 以上的版本才能使用。

如果你使用 macOS 或 Linux，可以在終端機透過下面指令安裝

curl -fsSL https://claude.ai/install.sh | bash

另外 Windows 可以參考下面的指令

irm https://claude.ai/install.ps1 | iex

Docker

接下來要安裝是 Docker，他可以幫我們建立隔離環境的「容器」

https://www.docker.com/products/docker-desktop/

如果你直接在電腦的終端機執行 Claude，AI 就有機會動到電腦裡的資料與設定；而 Docker 的作用，就是把 Claude 的執行環境限制在容器之內。

在這樣的狀態下，AI 執行起來會安全許多，因為他看不到容器外的資訊。

在官網上，你可以根據自己的作業系統選擇要安裝的版本。安裝完成後打開 Docker Desktop，不需要註冊，也不用登入帳號。

看到左下角有一個綠色的「Egine Running」，就代表 Docker 引擎已經在你的電腦背景跑起來了。

如果想更確定的話，可以在終端機輸入 docker -v 來確認

Node.js

再來因為今天示範的是網頁工具，所以我們需要安裝 Node.js，由於 Node.js 有許多版本，所以我們要透過 nvm 來安裝與管理。

如果你使用 macOS 或 Linux，可以在終端機透過下面指令安裝。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.7/install.sh | bash

而 Windows 可以到官網下載最新的「setup.exe」安裝程式。

https://github.com/coreybutler/nvm-windows/releases

安裝完成後，重新開啟終端機，並輸入 nvm -v 確認版本，接著再輸入 nvm install –lts 安裝最新版本的 Node.js，並輸入 node -v 確認有切換到最新版本。

安裝程式碼編輯器 IDE

接著我們要安裝一個程式碼編輯器（IDE），我這邊使用的是 Cursor，但如果你想用 VS Code 或 Antigravity 也都可以

安裝 Dev Containers 外掛

裝好 IDE 後，點擊左側的 Extensions，搜尋「Docker Dev Containers」，選第一個進行安裝即可。

安裝完成後，我們的程式碼編輯器就能直接在 Docker 容器裡面工作了。

下載練習用的專案

確認前面的工具都準備完成後，我們要透過 Git 來下載練習用的專案

https://git-scm.com/install/windows

如果你是第一次使用 Git，可以到官網根據自己的系統下載，安裝完成後輸入 git –version 確認版本。

另外輸入下面兩行，可以確認有沒有完成帳號的設定。

git config --global user.name
git config --global user.email

這些設定都完成後，就可以下載專案了，歡迎路過按個 Star，讓我知道自己的分享對大家有幫助：

https://github.com/deancourse/claude-code-docker-container

大家可以直接 Fork 我的 Repository 來體驗，Fork 完成後，點擊 Code，從裡面複製專案網址。

然後回到程式碼編輯器，點擊「Clone Repo」，貼上剛剛複製的網址來下載專案。

指定下載路徑，完成後點擊「開啟」，就可以跟著一起操作了。

專案簡介

這個專案我是參考 Claude Code 官方的範本修改的

我在它的基礎上，加上了前端網頁設計與 Git Commit 的 Skill，以及給 AI 參考的 CLAUDE.md，這份 CLAUDE.md 是參考 andrej-karpathy 的版本

在 IDE 啟動沙盒

在了解專案基礎架構後，輸入「F1」貼上 Dev Containers: Reopen in Container

這個指令會幫你下載容器所需的資源，第一次執行會比較久，啟動完成後，左下角就會顯示 Container Claude Code Sandbox。

這邊提醒一下大家，我在企業內訓時，有部分學員遇到啟動失敗的問題；通常把整個 IDE 關掉重啟就會成功，如果還是不行，可以把錯誤訊息貼到 Claude Code 進行分析。

確認 Claude Code 可以使用

接著我們打開終端機輸入 claude，第一次在這個容器操作時會需要登入；登入後，你會發現這是一個非常乾淨的 Claude。

在 /skills 的部分，你只會看到我預先放進去的技能

而 /permissions 這塊，完全是空白的

接著，我們來做一個測試，跟 AI 說：

幫我列出桌面有哪些檔案

如果是在自己電腦的終端機執行這個指令，AI 會列出桌面的檔案；但因為我們這裡是容器，所以你會看到 AI 跟你說他找不到。

因為他在容器裡面，而桌面這個資料夾，是在容器外面；做到這邊先給自己拍拍手，我們已經完成了隔離環境，接下來就能開啟無限制模式，讓 AI 大展身手

② 設定系統目標，讓 AI 火力全開

大膽執行危險模式

確認 AI 在容器內，碰不到容器外的資料後，我們先用 Control + C 關閉這個對話。

然後就可以用 claude –dangerously-skip-permissions 的方式啟動 Claude 了。

啟動時，Claude 會跳出警告，要選擇「Yes,I accept」才能繼續。

在這個模式下，AI 不會再詢問權限相關問題，可以火力全開。

定好目標讓 AI 執行

但正因為 AI 會火力全開，所以我們在設定執行目標時，越精確越好，否則 Token 額度會消耗得非常快。

比如今天要跟大家示範的是製作「YouTube 留言彙整工具」，假使我只給他這麼一句話當目標，最後的成果通常會不如預期。

根據我的經驗，需求至少要涵蓋 3 個要素：「使用情境、技術限制、驗證方式」

我想要建立一個 YouTube 留言彙整工具，需求如下：

【專案結構】
1. 放在目前 repo 的根目錄，不需建立子資料夾
2. 為了方便部署，package.json 必須在根目錄
3. 在 README.md 增加一節說明使用方式

【使用情境】
1. 輸入「播放清單」網址，彙整清單內所有影片的留言
2. 輸入「單支影片」網址，彙整該影片的留言
3. 輸入「頻道」網址，彙整頻道內影片的留言
4. 網址輸入欄可以共用，有輸入提示
5. 載入留言時，會有進度條，知道現在正在抓取哪支影片

【篩選條件】
- 可以設定搜尋的時間範圍（起訖日期）
- 可以設定關鍵字，只保留包含關鍵字的留言

【技術限制】
- 使用 Node.js 開發
- 不需透過 YouTube API 取得資料，參考 npm 既有套件（取得評論的）
- 匯出結果先呈現在網頁上，要有階層關係、影片縮圖，可下載成 Markdown（不同影片不同檔案）

【驗證方式】
請用下面三個真實網址，為所有情境撰寫測試：
- 播放清單：https://www.youtube.com/watch?v=2hbYCe_E5aU&list=PLWWZkn1dW3eAvSZfJv0-02q27JIsfbN2f
- 單支影片：https://www.youtube.com/watch?v=2hbYCe_E5aU
- 頻道：https://www.youtube.com/@dlcorner
測試必須包含以下驗收條件，低於門檻視為失敗：
① 播放清單：抓到的影片數量 ≥ 10 支
② 單支影片：留言總數 ≥ 400 則
③ 頻道：列出的影片數量 ≥ 40 支
④ 設定時間範圍後，結果中不得出現範圍外的留言
⑤ 設定關鍵字後，每一則留言都必須包含該關鍵字

完成後執行所有測試，如果有失敗的案例，
請修復後重新執行，最多嘗試 10 次；
最後回報每個情境實際抓到的影片數與留言總數。

【專案結構】為未來的部署做準備

首先在專案結構這塊，我要求他直接在 Repo 根目錄下開發，並要求 package.json 這個存放專案資訊的檔案要放在根目錄，方便未來部署。

如果沒有事先交代，AI 很可能會另外建一個子資料夾，把整個專案放在裡面，這會導致部署時需要再額外調整資料夾結構。

【使用情境】把模糊的想法變成明確的功能

在使用情境這塊，如果僅提供「幫我做一個 YouTube 留言彙整工具」這種模糊指令，那 AI 針對細節只能靠猜，所以我把實際的情境拆成「播放清單、單支影片、頻道」這三種。

因為這就是我實際會用到的場景，而篩選條件則是使用情境的延伸，目的是讓我更精準地獲得資訊。

【技術限制】決定成品長什麼樣子

至於技術限制，是在幫 AI 縮小工具的選擇範圍；這邊我指定使用 Node.js 開發，如果不指定，AI 可能會使用其他程式語言。

再來是「不透過 YouTube API」，因為官方 API 需要跑另一套流程，而我希望用現成的套件來處理就好。

最後匯出格式我也明確指定要使用網頁，並呈現階層關係與影片縮圖，而且要讓我能下載成 Markdown 格式方便後續使用。

【驗證方式】讓 AI 沒辦法自我感覺良好

最後則是驗證，AI 時常沒有完成任務，卻騙我們說他搞定了。

所以我給了三個真實網址，並設下具體的判斷規則，這些數據都是我頻道的真實資料。

當執行結果不符合這些規則時，AI 就會自動除錯。加入測試後，我們就能大幅減少手動驗證的成本。

最後三行：讓 AI 自己跑完「測試 → 修復」的迴圈

最後三行，我設計了一個測試迴圈。

因為我們是讓 AI 用放飛自我的模式執行，所以 Token 額度燒得很快。

尤其在他遇到無法解決的錯誤時，燒得最兇，所以我設定了一個嘗試次數上限，作為失敗時的停損點。

人工驗證

稍等一段時間，AI 回報他已經完成了任務，並且測試全數通過。

但做完跟做好是兩件事，這邊我跟大家簡單說明專案的架構。

先打開 package.json 這個檔案，裡面會有專案的名稱、描述、指令，以及使用到的套件。

然後開啟一個新的終端機，輸入 npm run start 來啟動專案：

你也可以直接請 AI 幫你啟動，但如果對專案架構有基礎認知會更好。

接著我們把網址複製下來貼到瀏覽器上，先驗證單支影片是否可以運作，點擊「開始驗證」後，工具就會開始幫我們彙整 YouTube 留言。

稍等一段時間就執行完畢了，你可以看到影片的縮圖，以及下方的留言階層；確認符合預期後，便可點擊「下載 Mardown」來看看呈現的結果是不是自己要的。

在驗證單隻影片符合需求後，就可以擴增測試範圍到「播放清單」與「頻道影片」。

儘管功能都符合預期，但有些細節是在擴增測試範圍後才會發現的，像是有多隻影片的狀態下，需要往下滑才能看到後面的影片留言，操作上並不直覺。

這個部分，我也會在後面的章節來做優化。

③ 加入 Git 版本控制，改壞還有回頭路

在確認基礎功能符合預期後，我們要給這個專案加上版本控制，這邊會使用到 Git 這個工具。

這樣就算 AI 未來把專案改壞了，我們都還有回頭路可以走。

建立第一個存檔點

這邊先請 AI 幫我們產生 commit，直接使用 Git Smart Commit 這個 Skill 即可。

/git-smart-commit

你可以把 commit 想像成遊戲的「存檔點」，每完成一個階段就存一次檔，就算後面打輸了，也能回到上一個存檔點重來。

畢竟 AI 修改程式碼的幅度很大，有時你只是請他調整一個小功能，他卻順手動了其他地方，如果沒有存檔點，改壞就真的回不去了。

推上 GitHub，為部署做準備

最後，我建議把專案推上 GitHub，除了多一份雲端備份，後面部署上線時也會用到。

點擊左側的「Source Control」，接著選擇「同步變更」，然後你就會看到錯誤訊息：

這是因為我們還在 Docker Container 環境裡面，你需要點擊左下角的「Container Claude Code Sandbox」，然後選擇「Reopen Folder Locally」用本機的資料夾開啟：

此時再點擊一次「同步變更」，就可以把資訊傳到 GitHub，接著來到 GitHub 頁面，看到專案的資料有上傳上去，就代表你成功嚕！

優化專案並同步更新

有了存檔點後，我們就可以來繼續優化專案了，像我覺得現在的網頁太素，影片一多操作起來要往下一直拉，不方便，就可以直接請 AI 使用前端技能幫我們優化一下：

/frontend-design
幫我美化頁面質感，希望撈取過程可以切換到不同影片的縮圖，讓我知道現在執行到哪一個，並且在上面有列表，我點擊哪個影片，就顯示對應的留言串

稍等一段時間，AI 就完成了優化，除了外型比先前的版本更好看外。

你會發現他撈取過程會切換到不同影片的縮圖，並且在上面有列表，我點擊哪個影片，就顯示對應的留言串，這樣子我們網頁的易用性就更好了。

如果想把這個版本更新上去，流程是一樣的，使用 Git Smart Commit 這個 Skill：

/git-smart-commit

然後選擇「Reopen Folder Locally」用本機的資料夾開啟，再把變更推送到 GitHub 就好。

④ 透過 Hostinger 將網站部署上線

這邊跟大家說明一下，如果專案是純前端的靜態網頁，我們可以透過 GitHub Pages 來做部署

但因為今天的範例專案有需要一台伺服器來運行，所以我用 Hostinger 來做示範：https://hostinger.com/deanlin10

進入官網後，可以透過 Google 帳號直接註冊登入，因為我們是網頁專案，所以點擊左側的「Websites」分頁。

這邊你會看到不同方案的價格，週期越長，價格會越便宜；如果你有輸入我的優惠碼「DEANLIN」，會再獲得 10% 的優惠。

如果體驗跟想像不符，官方也有 30 天退款保證，讓大家可以更放心地使用。

接著再回到部署的流程，我們在「Websites」下面選擇「Web Apps」，接著點擊「Add website」，選擇「Deploy Web App」。

如果你有購買 Domain，可以直接從這邊選擇，又或者使用「Use temporary domain」這種暫時性的網址。

然後你會看到一張世界地圖，這是在選擇伺服器的位置，建議選擇離延遲比較低的機房，這邊我就選擇 Malaysia。

接下來，你可以選擇上傳檔案，但因為我們的專案已經同步到 GitHub，所以選擇匯入指定的 GitHub Repository 即可。

在與自己的 GitHub 建立連線後，你可以直接貼上 GitHub 專案的網址，然後選擇 Deploy 即可。

中間會詢問你一些部署的參數，你可以根據實際需求調整。

這邊我採用默認值來部署，接著稍等一段時間，它就會顯示部署完畢！

我們可以點擊這個臨時網址來驗證功能，首先你可以看到至少網頁是有成功渲染出來的，並且可以抓到留言，切換影片留言也會跟著切換，Markdown 檔案也可以順利下載。

走到這一步真的太感動了，還沒幫影片按讚的朋友，可以順手按個讚！

⑤ 系統上線後，才是考驗的開始

在這個專案中，我們使用套件而非官方提供的 API 來抓資料，雖然也能達到相同目的，但是有代價的。

大量使用可能被封鎖

首先，如果這個工具是你個人使用，那通常不會有問題；但如果變成網頁開放讓大家使用，一旦使用人數多了，就容易被官方判定為「異常」，進而被封鎖。

網頁可能會改版

另外我們使用的套件是參考網頁結構來取得資訊的，這代表當 YouTube 改版後，如果套件沒有跟著更新，你的程式就抓不到東西了。

不是對錯，而是取捨

講到這邊，可能會有人說：「那直接走官方 API 不是更穩定？」

沒錯，官方 API 更穩定，如果要打造正式產品，我也推薦走官方的路。

但如果你期待的是把專案 Clone 下來就能直接跑，不需要那麼多複雜的步驟，那今天這個範例就夠用了。

在真實世界中，沒有最好的方案，只有當下最合適的選擇。

結語：即使使用者只有你，在 AI 時代也值得開發

最後想跟大家分享我自己在 AI Coding 上的心得。我的本職是軟體工程師，寫了十幾年的程式。

過去評估一個工具值不值得做，看的是需要花多少時間，以及有多少受眾。

但在 AI 時代，這個邏輯改變了

如果工具能用 AI 製作出來，即使受眾只有自己一個人，那也值得做。

就拿彙整 YouTube 留言這個案例來說；我不確定多少人有相同需求，但我知道純手動會把自己搞死。

在手寫程式碼的年代，這個專案至少要花一個週末才能完成；而我一年可能只跑個兩三次，不太可能為了它投入這麼多時間。

但有了 AI 輔助 Coding 後，大家也看到了，只要指令足夠明確，把任務交給 AI，你就可以轉頭做其他事了

時間成本也從「一個週末」，變成「泡一杯咖啡的時間」

很多過去被判斷不值得做的工具，或許現在都值得做了；但這件事有一個前提，你要能把需求講清楚、把驗證邏輯交代好。

因為 AI 做完，不代表他做好了

好的，今天的分享就到這邊，如果這個系列有給你啟發與幫助；別忘了按讚、訂閱，並把文章分享給需要的朋友。

但我在金融、醫療、行銷、電子、通訊等產業講了上百場內訓，發現大家就算已經在工作中使用 AI，還是會問：

• 「為什麼開新視窗後，AI 不記得我們過去的對話？」
• 「專案資訊散落在信箱、行事曆跟雲端硬碟，每次都要找好久。」
• 「我只是要 AI 彙整報表、生成簡報，結果每次格式都不一樣！」

產業不同、職位不同，卡住的地方卻幾乎一模一樣。

每件事都需要：「重新交代背景 → 來回複製貼上 → 反覆調整格式」

但這些明明是 AI 能接手的機械式工作，只是我們已經習慣了這樣用它。

那要怎麼跳出這個習慣？

分享一下我在內訓現場的做法。

課程開始前，我會先跟同學說：「如果發現今天的案例有可以優化的地方，請直接舉手告訴我；我知道怎麼用 AI，但你們才是產業的專家。」

真實世界裡，正確答案往往不只一種，更多時候我們是在做取捨。

但很多人用 AI，只想拿到「一個答案」。

拿到不符預期的結果，就覺得是 AI 不好用。

你大概也遇過這種長官，交代任務時丟下一句「幫我處理」就走了。

什麼細節都問不到的狀態下，你只能用猜的；但交出去的成果往往換來一句「這不是我要的」。

我們對 AI，常常就是那個長官：「產業、角色、能動用的資源都沒交代，卻期待它一次給出對的答案。」

所以我跟 AI 協作時，不會直接要答案，而是反過來：

「請它反問我缺什麼資訊 → 從不同面向給幾個版本 → 挑最接近的那個往下改」

需求一開始講不清楚沒關係，重點是每輪討論都離你的期待更近一點。

等你和 AI 討論出符合期待的成果，還可以更進一步。

還記得開頭那三個問題嗎？它們各自有解。

1️⃣ 開新視窗就失憶？

→ 依主題建立「Project」，專案背景、指令，交代一次就好。

2️⃣ 資料散落在信箱、行事曆、雲端？

→ 接上「Connector」，讓 AI 自己去讀 Gmail、Google Drive、Notion，不用再複製貼上。

3️⃣ 每次產出的格式都不一樣？

→ 把流程封裝成「Skill」，教會 AI 一次，它就永遠記得。

很多事 AI 做得到，只是我們沒想到可以這樣用。

我開設這堂線上課程的初衷，是希望能解決你的真實痛點、並打造適合自己的 AI 工作流。

把雜事交給 AI：先學會跟它對話、和它討論，再用 Project、Connector、Skill 打好地基，最後把電腦裡的文件也交給它彙整。

課程後半段，我還想帶你做過去要「工程師」才能做到的事。

就算第一次接觸程式，也能用 Claude Code 做出解決自己痛點的小工具。

並分享如何搭配 Git 來為每個進度建立「存檔點」，像打電動一樣，改壞了就讀檔重來。

也許有人會想，這些資源網路上不是都有嗎？

是的，都有。

現在外面有太多看起來很炫的 AI 示範，但如果你真的有嘗試過，你會發現實際能落地非常少。

那是因為，他們沒有從零開始、只講成果跟目標；但當你想實作時，很容易遇到問題、卡關。

我自己在 Medium 也寫了上百篇文章，拍了幾十部 YT 教學影片。

但文章和影片有個先天限制：「一次只能專注在單一主題」

它適合讓你快速認識一個工具，卻很難帶你把整套工作流從零建起來。

如果你也想把 AI 從「有在用」，變成一套真正融入工作的流程，這堂課會告訴你每一步該怎麼做。

線上課程正在籌備中，讓我更瞭解你的需求

填寫問卷領取折扣 👉https://lihi1.me/R678K

老實講，以現在工具發展的速度來看，就算我們拼盡全力學習，也不可能全部掌握。

而且就算掌握了工具的最新技巧，真的等於工作能力變強嗎？

如果換一套工具，過去學習的方法能辦法轉移過去嗎？

這堂課會以 Claude Code 作為主要示範工具。

但不管你平常使用的是 Cursor、Antigravity，還是 Codex，都可以跟著一起操作。

因為我設計這堂課，是以「完成專案」為目標，工具只是在實戰過程中自然掌握的能力。

工具應該讓大家學以致用，而不是靠大腦死記硬背。

我會著重分享 Rules / Commands / Agent Skills 的具體應用，因為這些技巧，在主流的 AI Agent 都有相似的概念。

也就是說，切換到新工具時你不用重新學一遍。

甚至可以透過 npx @dean9703111/dotagents建立不同工具之間的軟連結（symlinks），讓規則集中管理。

這樣只要修改一次，就能同步套用到不同工具中，讓維護更輕鬆。

面對生成式 AI 結果的不確定性，我們也不能只靠感覺驗收。

所以我會搭配 Lint 與 Unit Test，來確保專案基礎品質。

Lint 可以規範程式碼的 Coding Style，初步過濾冗贅、格式不一致，或不符合團隊規範的程式碼。

Unit Test 則能幫助我們在功能新增或修改時，確認是否影響既有邏輯，並在錯誤發生時更快定位問題。

當我們把 Lint 與 Unit Test 放進 Pre-Commit 與 CI/CD 流程，很多問題就能在進入主分支前被擋下來。

考量到大多數人不喜歡寫文件，或者不知道規格該如何撰寫，

所以我會帶大家了解如何用 OpenSpec 生成規格文件，讓 AI 執行的每一步都有明確方向。

它不僅幫你從 0 到 1 建立系統，更重要的是，這些文件讓後續每一次功能迭代都有依據。

在多人協作、長期維護、持續迭代的專案，文件不只是寫給人看的，也是 AI 理解專案的基礎。

每個人（團隊）在開發時都有一套工作流。

但當專案有時程壓力時，我們容易「先求有，再求好」，然後留下一堆技術債。

此時我們不妨反過來思考：

能不能把這些重複發生、又容易被省略的工作，設計成可以讓 AI 穩定執行的 Skills？

例如：

• Commit 訊息撰寫
• Pull Request 描述
• Unit Test 設計
• 分支命名規則
• 程式碼檢查流程

這樣就能讓我們把注意力放在驗收「結果」，而非消耗精神的「過程」。

在人人都能用一行指令生成系統的年代，「軟體工程」反而變得更加重要。

因為有好的地基，AI 才知道該照著什麼規格開發、用什麼標準驗收、依循什麼流程交付。

如果需求是模糊的，規格是破碎的，測試是缺席的，那 AI 生成得再快，也只會成為後續維護的負擔。

所以這堂課想帶給大家的，是如何把 AI 放進真實開發流程裡，建立一套穩定、可維護、能持續迭代的實務工作流，而不是停留在一次性的工具展示。

• 📌 專屬折扣碼: DEANONLY
• 👉 課程詳情: https://tibame.tw/Zmnts

因此我請他示範平常的用法。

他先打開 ChatGPT、把需求貼上去、等回覆、複製回 VS Code、跑起來報錯、再把錯誤訊息貼回去問。

來回操作四五次後，我跟他說：「或許不是 AI 幫不了你，是你還沒用到合適的工具。」

使用 AI Agent，讓 AI 直接幫你做事

我使用 AI 輔助開發 3 年了，前兩年也是這樣用的；只把它當成一個比較聰明的「問答機器人」，有問題就問，問完自己動手。

直到去年開始用 AI 程式碼編輯器，整個工作效率才明顯提升，兩者的差別在於：

• 網頁版 AI 是「你問、它答、你自己做」。
• AI Agent 是「你說需求、它直接改程式碼、跑測試、遇到錯誤自己修」。

內訓那天，我開場就直接 Demo 了一段 AI Agent 的開發流程。

過程中我注意到，那位工程師全神貫注地盯著螢幕。

結束後他跟我說：「我之前以為 AI 就是那樣了，完全不知道已經能做到這種程度。」

他不是個案，很多學員的反應都差不多 ──

他們不是不想用，而是「從來沒有」體驗過 AI Agent 的威力，所以一直停留在複製貼上的階段。

直接問 AI 就好，幹嘛學？

不過，光是換工具還不夠。

社群上常有人說「有問題直接問 AI 就好，幹嘛學？」

也許未來有一天，AI 真的無所不能，但至少現在，還遠遠不是。

過去 3 年來，我已經在 AI 工具上投入數千小時學習，直到現在也還在持續研究與嘗試。

因為使用 AI 真正困難的，從來不是工具本身；而是你知不知道怎麼把問題交給它、做完後該怎麼驗證、做錯了又該怎麼修正。

從「知道 AI 可以寫程式」到「真的把它用在工作上」，中間那條路，才是最多人卡住的地方。

把目標從「學習工具」改為「解決痛點」

後來我發現，與其一直追著新工具跑，不如回頭看看自己的工作流，到底是哪裡卡住。

AI 時代每天都有新工具、更強的模型。如果目標是「學會工具」，學完很快就忘了。

但如果出發點是「解決痛點」，你就會開始去想：

• 需求怎麼寫，才不會讓 AI 跑偏？
• 功能迭代後，怎麼確保專案不會壞掉？
• 重複踩到的坑，有沒有辦法系統性地避免？

過去我也針對這些主題，拍了許多 AI 寫程式的實戰教學。

但我發現對剛接觸 AI 寫程式的人來說，很難透過碎片化的資訊，把技術應用到實際專案。

用實戰完整理解，減少認知負擔

所以我開了這堂課。

把過去 3 年摸索出來的開發流程，整理成一門從零開始的全端實戰課程。

不只帶你認識工具，更帶你走完一輪真實的開發流程：從需求釐清、專案初始化、自動化測試，到版本控制和 Code Review。

會讓你看到 AI 可以在哪些環節介入，以及遇到問題時該怎麼處理。

如果你也想把 AI 從「有在用」變成「融入工作流」，這門課就是我想給你的答案。

👉 完整課綱: https://tibame.tw/Zmnts

📌 專屬折扣碼: DEANONLY

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

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

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

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

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

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

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

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

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

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

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

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

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

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Claude Code 實戰】一次搞懂 OpenSpec，讓專案每次迭代都有依據

① 安裝 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 帳號來管理專案。

如果你是第一次接觸，我有專門錄一隻影片分享詳細的操作步驟！

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/Rb0_LutRIaw

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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