---
title: "我用 Claude Code + Vercel 自己蓋了公司官網：一個非工程師講師的 vibe coding 實錄"
description: "一位 HR 跟我說「AJ，你在網路上的資訊太混亂了」——這句話把「做官網」從重要但不緊急推進到第一象限。我貫徹懶人策略，讓 Claude Code 搭 Vercel 跑了一場 48 小時黑客松，結果整個網站幾乎自己長出來。這是一個非工程師講師的真實流程、選型、雷區與心得。"
author: "莊哲昀（AJ）"
tag: "Vibe Coding 實錄"
date: 2026-05-24
updated: 2026-05-25
canonical: https://www.ahadigit.work/blog/building-ahadigit-claude-code-vercel
source: "html"
---

# 我用 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 萬。今天，**蓋一個你自己看得懂的公司網站**，成本是你願意花多少時間去學。

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

> 那個數位的 AI 內訓會帶你的非工程師員工，從 0 開始用 Claude Code、Cursor、Codex 寫工具。我們不教你變成工程師，**我們教你怎麼跟工程合夥人對話**。[歡迎預約諮詢](https://www.ahadigit.work/contact)。