我用 Claude Code + Vercel 自己蓋了公司官網：一個非工程師講師的 vibe coding 實錄

前陣子一位人資跟我說：「AJ，你在網路上的資訊實在太混亂了，有沒有一個中央統一的地方，讓我們要邀約課程、跟主管報告時，可以更快了解你過去的授課與合作方式？」這句話，把這個被我壓了很久的 backlog，一夜之間推上了第一象限。

我不是工程師背景。大學唸的不是資工、職涯也沒寫過 production 等級的程式。但兩個月前我用 Claude Code 配 Vercel，從 0 蓋完了你正在讀這篇文章的整個網站——首頁、講師頁、服務介紹、預約洽詢、部落格、學員專區、管理後台、課程企劃書產生器、請款核銷頁，全部。這篇是我蓋網站的完整流程、選型、雷區與心得。

為什麼決定自己蓋

事情的真正起點，是一句來自 HR 的話。她跟我說，網路上關於我的資訊散落在臉書貼文、課程平台、活動主辦方的轉貼、舊版個人頁——當她想內部推薦我、或者想跟主管報告為什麼要找 AJ 來上課時，她沒有一個可以一次看完的中央窗口。「能不能有一個地方，把你做過的事、合作方式、可以聊的主題都放在那？」

這個請求對我來說是一記提醒。做官網這件事，在我心裡一直是經典的「重要但不緊急」——Eisenhower Matrix 的第二象限——壓在 backlog 已經很久很久，每次想到都覺得「該做」，但每次都被下一場課程、下一份提案、下一個 deadline 擠掉。HR 給了我一個明確、具體、可被想像的使用情境之後，這件事瞬間從第二象限被推到「重要且緊急」——我必須現在就做。

但問題來了：我不是工程師，我也不想變成工程師。我希望貫徹「不自己動手」的懶人策略——既然 AI 已經能寫程式、能除錯、能部署，那這整件事就應該交給 AI。我的角色不是寫 code，是決定要什麼、驗收能不能用。所以我決定：讓 Claude Code 完成整個開發加部署到網路上的全流程，我只負責對話、給方向、看結果。

跟 Claude 來回討論了一陣子之後，我們決定用 Vercel 當後端與部署平台——理由我會在下一節展開，但結論是：對一個不想養伺服器的非工程師，Vercel 是當下少數能讓「寫完就上線、上線就有 HTTPS、有 CDN、有 serverless function」的選擇。技術棧拍板之後，我開了一場 48 小時的黑客松，把日常工作清空，跟 Claude Code 連續 vibe coding 兩天。

我必須補一個背景：我出社會的第一份工作，是在趨勢科技擔任測試助理工程師，負責確認功能規格、評估黑箱與白箱程式碼安全性。所以「看 code、讀規格、判斷一段邏輯有沒有問題」這件事，對我來說是有一點熟悉、但已經不是天天工作會用到的記憶——足以讓我能看懂 Claude 寫了什麼、知道哪裡值得多問一句，但離「能自己從零寫」差得很遠。我預設這場黑客松頂多做個雛形，後續還要找朋友或外包接手收尾。

但結果出乎我預期——Claude 搭配 Vercel 幾乎把整個網站做完了。從首頁、講師簡介、服務介紹，到預約洽詢的表單與信件、部落格的 SEO 結構、學員專區的登入、管理後台的 CRUD、課程企劃書產生器、請款核銷——兩天時間能跑通的比例，遠遠超出我的預期。這篇文章就是把那 48 小時加上後續兩個月的優化過程，老實寫下來。

技術選型：少 setup、少維運、少坑

我不是工程師，選型只有一個原則——能不裝就不裝、能 serverless 就不要養伺服器。

層次	選擇	為什麼
前端	純 HTML + CSS + Vanilla JS	不用 React、不用 Next.js、不用打包。文章一個檔案就是一個 URL，SEO 與維護都簡單。
部署	vercel deploy --prod	一行 CLI 推上去就上線。Vercel 自動處理 CDN、TLS、Edge Cache。
後端 API	Vercel Serverless Functions（/api/*.js）	不用養伺服器。每個 API 是一個檔案，部署跟著前端一起上。
資料庫	Upstash Redis（Redis.fromEnv()）	按請求計費、零維運、HTTP API 適合 serverless。場次、提問、密碼 hash 全放這。
寄信	Resend（驗證 ahadigit.work domain）	洽詢表單 + 請款核銷單都用它。比起 SendGrid 設定快很多。
程式碼倉庫	GitHub Private Repo	Claude Code 寫的程式碼裡有預設密碼跟 secret 邏輯，絕對不能 public。

整套加起來每月固定成本不到台幣 1,000 元，比租一台 VPS 還便宜。

Claude Code 是我的工程合夥人

很多人以為 vibe coding 是「我跟 AI 講一句它寫一段」。實際上不是。

我跟 Claude Code 的工作流是這樣：

1. 我寫 spec（不是寫程式碼）。例如：「幫我加一個學員專區，密碼登入後可以看講義 iframe、線上問問題（其他學員可以按讚）、複製預設 prompt 庫。資料用 Redis 存。」
2. 它先反問我：「Q&A 要不要管理員後台審核？投票要不要防灌票？密碼是每場一組還是全站一組？」這時候我發現我自己其實沒想清楚。
3. 它寫 + 我看 diff。我不寫程式碼，但我看 diff 是不是符合我想要的邏輯。看不懂的問它「這段在做什麼？」
4. 跑、發現 bug、改。Resend 502、Edit tool 不認識全形括號、Vercel env var 沒設⋯所有坑都踩過一次。

Anthropic 的 Boris Cherny 在 Code with Claude 大會上講過一句我超喜歡：

「The default isn't 'I'm going to prompt Claude'—the default is now 'I'm going to have Claude prompt itself.'」
（不是『我來下 prompt』，而是『我讓 Claude 自己下 prompt』。）—— Boris Cherny, Anthropic

翻譯成我的版本：我不是寫 code 的人，我是給 Claude 派任務、看它回報、決定下一步的人。比較像 PM，不像工程師。

兩個月做了哪些事

從第一行 commit 到你現在讀這篇文章，差不多兩個月。中間的里程碑：

• Day 1：landing page（首頁 + 講師簡介）。幾小時搞定。
• Day 7：講師團隊頁（AJ + Calvin）、服務介紹、預約洽詢表單（接 Resend）。
• Day 14：學員專區（密碼登入 + Slido-like Q&A + Prompt library）、管理後台（HMAC token 認證、場次管理、提問管理）。
• Day 21：部落格（10 篇原創 + 9 篇影片重點）、課程企劃書產生器、請款核銷頁、課後 CTA（訂閱 YouTube 解鎖 PDF）。
• Day 56（上週）：用 16 個 Claude Code agent 平行重構整個部落格 19 篇文章，套用編輯標準。同時送 16 個任務、各自寫各自的，全部回報後我批次採用、commit、push、deploy。

第五個里程碑是最 vibe coding 的時刻——一個非工程師同時派 16 個工程合夥人去重寫 19 篇文章，一個下午做完。傳統外包流程這要兩週。

我學到的三件事

1. 不要怕 spec 沒寫好

Claude Code 比我自己更會發現需求遺漏。「未登入怎麼處理？」「資料怎麼儲存？」「密碼忘記怎麼辦？」這些它都會問——而且問得比我想得快。我把 spec 沒寫好的恐懼，外包給它。

2. 要會看 code，但不用會寫

我看 diff、看 logic 是不是符合我直覺。看不懂的問它「這段在幹嘛？為什麼這樣寫？」。兩個月下來我變成可以「閱讀」HTML/CSS/JavaScript 與 Node serverless 寫法的人——還是不會寫，但看得懂。

3. 學會 commit 跟 rollback

這是 AI coding 時代最重要的技能。寫壞了就 git revert，不要怕。每寫一個功能 commit 一次，commit message 用人話寫，未來看 git log 就像看自己的成長日記。

三個雷區（我都踩過）

1. 不要把密碼、API key 寫死在原始碼裡。我一開始把 ADMIN_PASSWORD 預設成「iamaj」，後來改用 Vercel 的環境變數覆蓋。原始碼裡可以留 fallback，但實際 production 一定走 env var。
2. 不要把 .env 推上 GitHub。.gitignore 一定要有它。一旦 leak，你要付出的代價是把整個 secret 重新輪替。
3. 不要寫到一半才想 SEO。og:image、JSON-LD、sitemap.xml、robots.txt、llms.txt——這些一開始就要想好。我前期沒做，後來補很痛。

結語：非工程師蓋網站的時代

我不會說每個老闆都該自己寫網站。但我會說——你至少該知道你的網站是怎麼跑的、要改一個字要花多久、加一個功能要花多少錢。否則你會永遠被自己看不懂的東西綁架。

Claude Code 不是寫程式工具，是你的工程合夥人。Vercel 不是部署平台，是你的 IT 部門。Upstash 跟 Resend 不是資料庫跟寄信服務，是你的後端團隊。

以前蓋一個公司網站要 30 萬。今天，蓋一個你自己看得懂的公司網站，成本是你願意花多少時間去學。

我選擇花這個時間。因為我知道——再過五年，分得出來「自己懂技術的老闆」與「永遠靠別人解釋」的老闆，會差很多。