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

上一集以 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 不會負責，但許多問題在親自驗證時，或許能提早發現與修復。

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