L Leg · Vibe Coding 讀書會
2026 · Issue 04 / Vol. 01
AI 讀書會 · No.01 2026 / 04 / 27

Vibe
Coding. 把英文(中文)當程式語言,讓 AI 把你的想法做成網站

這是一份給超級新手的入門指引。 你不必先會 JavaScript、不用懂 React,更不必背語法。

接下來的一個小時,我會帶你看 — 一個普通人,如何在一個月內用 AI 做出 24 件作品;以及你今晚下班後,如何安裝好工具、寫下第一段「氛圍程式碼」。

01

What is Vibe Coding什麼是氛圍編程

Origin · 2025/02
Andrej Karpathy

There's a new kind of coding I call vibe coding, where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.

Andrej Karpathy · OpenAI 共同創辦人 · 2025

Vibe coding 是 2025 年 2 月由 OpenAI 共同創辦人 Andrej Karpathy 提出的新名詞。 意思很白話:你不再一行一行寫程式,而是用「自然語言」描述想要的成果,由 AI 把它寫出來。

Karpathy 說:「最熱門的新程式語言,是英文。」 — 對我們來說,是中文。你只要會打字,就能寫程式。

在 vibe coding 的世界裡,工程師的角色從打字員變成導演:你提需求、看結果、給回饋;AI 負責讀錯誤、改 bug、補功能。程式碼當然還在,只是它不再是你必須親手雕琢的東西。

2026 年的今天,Karpathy 自己也說 vibe coding 過時了 — 但不是因為它失敗,而是因為它變成了專業開發者的預設工作流。對新手而言,它仍是一道最低的門檻。

2025
Coined
由 Karpathy 在 X 平台首次提出
Languages
中文、英文、台語都可以
10×
Speed
想法到上線只要幾小時
0
Background
不需任何程式基礎
02

Why Now為什麼是現在

Use cases
For everyone

把「我想要⋯」變成可以用的東西From an idea, to a real working tool — in one evening.

過去做一個網站/工具,要學前後端、租主機、寫 API。現在,你只要描述需求,工具就會誕生。
我這個月做的 24 個作品 — 從健身追蹤、薩提爾自我覺察、台股看盤到電商網站 — 全部是這樣完成的。

A

解決自己的問題Scratch your own itch

每月被銀行帳單轟炸?做一個自動聚合的記帳工具。想戒掉 IG?做一個自我提醒的網站。AI 讓「自製工具」變得便宜。

B

把企劃變成 DemoPitch with prototypes

不再用 PPT 講想法。用一個能點擊、能體驗的網站 — 主管、合作夥伴、贊助方一秒就懂。

C

學新東西最快的路Learn by building

讀 10 本書,不如做一個專案。Vibe coding 把學習成本壓到極低 — 你會在做的過程中,自然學會邏輯、結構、設計。

D

副業 / SaaS 雛型Side-projects, faster

從點子到上線只要一個週末。失敗成本接近零,但成功的話 — 一個小工具就可能養活自己。

E

給家人 / 社群的小禮物Gifts for community

幫媽媽做一個食譜網站,幫公益團體做一個淨灘紀錄平台 — 都是用這套方法做出來的。

F

提升職場戰力Level up at work

會跟 AI 對話的人,不會被 AI 取代。把這套技能帶進你的工作裡,自動化重複任務、做數據儀表板。

03

Three Tools, One Goal三大主流 AI 編程工具一覽

Compared
2026/04 · 最新

2026 年 vibe coding 的三巨頭分別由 GoogleAnthropicOpenAI 三家提出。三者背後是三種不同的世界觀 — 但目的都一樣:讓 AI 替你寫程式。這個月,我三個都用過了。先看簡介、再看比較表。

UPDATED · 2026/04/27
這個 April 真是熱鬧 — Claude Opus 4.7(4/16)、GPT-5.5(4/24)兩個前沿模型相隔 8 天上線。Antigravity 跟 Codex 都還有免費版可以玩 — 額度被砍但還活著。下表特別把免費版額度與刷新窗口都列出來,新手先用免費版練手感即可。

Google · 2025/11
Antigravity
桌面 IDE。內建 Gemini 3、瀏覽器、Agent 任務指揮中心。畫面豐富,新手最容易上手。
Anthropic · 2025/02
Claude Code
命令列工具(CLI)。輕、快、深。最適合已經有專案、要做正式產品的人。
OpenAI · 2025/04
Codex
CLI + 網頁 + macOS App。和 ChatGPT 訂閱共享額度,多 agent 平行作業。
AntigravityGoogle · IDE Claude CodeAnthropic · CLI CodexOpenAI · CLI / Web / App
推出日期 2025 / 11(隨 Gemini 3 同步) 2024 / 08(早期 CLI) 2025 / 04(CLI 開源版)
最新版本 v1.20.5(2026 / 04) Opus 4.7 GA(2026 / 04 / 16) GPT-5.5(2026 / 04 / 24)
主力模型 Gemini 3.1 Pro
(也可切 Claude / GPT-OSS)
Claude Opus 4.7 + Sonnet 4.6 GPT-5.5(最新)+ GPT-5.3-Codex-Spark
SWE-Bench 表現 ~76.2%(Gemini 3 Pro) ~80.9%(Opus 4.5 起;4.7 再 +13% 編碼) GPT-5.5 在 Codex 內超越 GPT-5.4
產品形態 桌面 IDE,VS Code 內核 命令列(Win 需 Git Bash) CLI + 網頁 + macOS App(Feb 2026)
免費版 ✓ 有(個人版 $0) ✗ 沒有
Claude Code 須訂閱 Pro 才能用
✓ 有(限時促銷,可能取消)
免費版額度 20 個 agent 任務 / 天
Tab 自動補全 無上限
可用 Gemini 3.1 / Claude / GPT-OSS
—(不適用)
新 API 用戶可拿 $5 試用點,可跑幾小時 Sonnet
~5–10 個任務 / 5 小時
(依伺服器負載浮動)
ChatGPT Free / Go 帳號就能用
免費版刷新窗口 每日 20 上限
週循環
(過去是 5 小時 / 250 任務,
2025/12 砍到 20,2026/03 改為週循環)
5 小時滾動視窗
入門訂閱 Google AI Pro $20/月
(含 Antigravity Pro 額度 + 內建點數)
Claude Pro $20/月
(含 Claude Code 完整使用)
ChatGPT Plus $20/月
(含 Codex 完整使用)
頂級方案 Ultra $249.99
點數加購 $25 / 2,500 點
Max 5× $100 / Max 20× $200 Pro $100$200
5/31 前 Pro $200 限時 25× Plus
付費版額度刷新 AI 信用點數制(3 月新上路,金額不透明,社群抗議中) 5 小時滾動 + 每週上限
Pro 約 44k tok / 5h
5 小時視窗,依方案倍率
Plus 1× → Pro 20×(25× 限時)
內建瀏覽器 ✓ Browser Subagent — AI 可看畫面、點按鈕、抓 console 需自行打開 Chrome 需自行打開 Chrome
多 Agent 平行 ✓ Mission Control 視覺化派工 透過 git worktree + 多 session ✓ 雲端 agent + CLI 同時跑
沙箱 / 安全 IDE 內 review-driven 模式 Namespace 隔離 + 預設網路阻擋 Linux kernel 級沙箱(三者最嚴)
獨家亮點 Artifacts 合約:執行前你先核准計畫 /ultrareview 多 agent 程式審查;4.7 預設 xhigh 思考 跟 ChatGPT 訂閱共用額度,不需多花錢
學習曲線 最低視覺化、純 GUI、按鈕點點點 需熟悉終端機指令 需熟悉終端機指令
最適合誰 完全新手 · 想看畫面、邊寫邊預覽 已有專案 · 要做正式 production ChatGPT 訂戶 · 想多開平行任務
我的個人推薦 第一個裝 · 免費玩起 練手感最快 主力工具 做完整專案 補位 · 限時免費 趁早試
完全沒裝過 IDE 的人
先裝 Antigravity

免費版每天 20 任務夠新手玩一週的小專案。有畫面、自帶瀏覽器、Gemini 3.1 直接用。下載完 10 分鐘內就能看到 AI 寫的網頁跑起來,信心建立 +1。

想做正式產品的人
主力用 Claude Code

沒免費版、$20/月起跳,但命令列簡單、改大型專案時最穩定。我這個月後段所有 production 級的網站(含這份簡報)都靠它。

已經有 ChatGPT 帳號
順手再試 Codex

連免費 ChatGPT 帳號都能用(限時促銷)— 5 小時可派 5–10 個任務。強在「雲端平行」,可同時派 3 個 agent 做不同檔案。

04

Install · Antigravity安裝 Google Antigravity

Tool 01/03
Free · Gemini 3
Recommended

由 Google 推出的
agent-first
程式編輯器。

Antigravity 在 2025 年 11 月隨 Gemini 3 一起發表。它不是傳統的程式編輯器 — 它是一個「代理優先(agent-first)」的開發環境,內建瀏覽器、Agent Manager(任務指揮中心),讓 AI 自己幫你開檔案、執行命令、看網頁、抓 bug。

對新手最大的好處:有 Gemini 3.1、上手 10 分鐘、看得到畫面

  • Version
    v1.20.5(2026 / 04)· Gemini 3.1 Pro
  • OS
    Mac · Windows · Linux 皆可
  • RAM
    建議 8GB 以上
  • Account
    個人 Gmail(Workspace 帳號不支援)
  • Free
    20 任務 / 天(週循環)+ Tab 補全無上限
  • Paid
    AI Pro $20/月(含內建點數)· 點數加購 $25/2500 點
01

到官網下載安裝包

打開瀏覽器到官方網站 antigravity.google,點下載按鈕。系統會自動偵測你的作業系統(Windows / Mac / Linux)給對應的安裝檔。

02

執行安裝程式

Windows 雙擊 .exe、Mac 把圖示拖進 Applications 即可。整個過程不到 10 分鐘。

提醒:Windows 第一次開啟可能會出現「未知發行者」警告,按「仍要執行」即可。
03

用 Gmail 登入

第一次啟動會請你登入 Google 帳號。記得用個人 Gmail,公司 / 學校 Workspace 帳號目前還不支援。

04

認識 Agent Manager

登入後進到主畫面,最重要的就是 Agent Manager(左側面板)。把它想成「AI 任務指揮中心」 — 你寫一句話,它就會派代理去寫程式、跑測試、開瀏覽器。

建議從「Agent-assisted(人機協作)」模式開始:AI 會在每一步問你要不要繼續,比 Autopilot 安全。

05

裝上 Browser Extension(必裝)

第一次叫 AI 開網頁時,會跳出 Setup 按鈕 — 它會帶你到 Chrome 商店安裝官方擴充。裝好後,AI 就能自己開頁面、點按鈕、看畫面、讀 console。對網頁開發是必備。

狀態燈:綠色 ✓ 連線中 / 黃色 ⚠ 待設定 / 紅色 ✗ 未連線
06

第一句 Prompt:請它做一個小東西

建議的「Hello World」是:「請幫我做一個簡單的待辦事項網頁,深色背景,能新增、刪除、勾選完成」。等個 30 秒,你就會看到一個能用的網頁誕生。

幫我用 HTML 做一個簡約黑底的 Todo App,能新增、刪除、打勾
05

Install · Claude Code安裝 Claude Code(命令列利器)

Tool 02/03
CLI · Anthropic
Power tool

對話
操作整個
專案資料夾。

Claude Code 是 Anthropic 推出的「終端機版 AI 工程師」。它跑在你的命令列裡,能讀懂你整個專案、自己開檔案、改程式、跑測試。比 Antigravity 更輕、更快,特別適合你已經有專案、想做大改造時。

我這個月做的後段作品 — 含這個簡報網站 — 大部分是用 Claude Code 完成的。4/16 上線的 Opus 4.7 編碼能力比 4.6 再強 13%,並新增 /ultrareview 多 agent 程式審查指令。

  • Model
    Claude Opus 4.7 GA · 2026/04/16 起
  • OS
    Mac · Linux 原生 / Windows 需 Git Bash
  • Account
    Claude.ai 付費版(Pro / Max / Team)
  • Free
    無免費版 · 新 API 用戶可拿 $5 試用點(夠玩幾小時 Sonnet)
  • Paid
    Pro $20 / Max $100 / Max $200 — 5h 滾動 + 週上限
01

確認你有 Claude.ai 付費帳號

Claude Code 需要 Claude Pro / Max / Teams / Enterprise 任一種訂閱。免費帳號目前不支援。

02

Windows 用戶 — 先裝 Git for Windows

Claude Code 在 Windows 需要 Git Bash 才能執行。如果還沒裝,直接到 git-scm.com 下載最新版,全部按下一步即可。

03

執行一行安裝指令(不需要管理員)

打開 PowerShell(不需要「以系統管理員身分執行」),貼上下面這行指令再按 Enter。安裝程式會自動下載、設好 PATH,全程約一分鐘。

irm https://claude.ai/install.ps1 | iex
Mac / Linux: curl -fsSL https://claude.ai/install.sh | bash
04

第一次啟動 — 輸入 claude

關掉再重開 PowerShell,輸入 claude 按 Enter。第一次會請你選主題色、登入 Claude 帳號。

claude
05

cd 進你的專案,開始對話

把命令列切到你想做的專案資料夾,再輸入 claude。它會讀整個資料夾,然後你就可以用中文跟它聊:「幫我把首頁改成深色模式」、「這個 bug 為什麼會出現?」。

cd C:\Users\你\Desktop\我的專案 && claude
06

學會三個必殺指令

/help — 看所有指令
/clear — 清空對話(避免脈絡污染)
/init — 讓它幫你寫一份專案說明(CLAUDE.md),之後它會記得你的專案。

進階:建立 CLAUDE.md 寫下「這個專案的規則」,以後 Claude 每次都會自動讀,省下你重複交代的力氣。
06

Install · Codex安裝 OpenAI Codex(CLI / 網頁 / App)

Tool 03/03
OpenAI · GPT-5.3-Codex
Bundled

已經訂 ChatGPT?
那你已經有
Codex。

Codex 是 OpenAI 在 2025/04 推出的程式 agent。2026/04/24 剛上線的 GPT-5.5 是目前 Codex 推薦的主力模型 — 比 GPT-5.4 更聰明、用更少 token,特別擅長文件、試算表、簡報這類「商務 → 程式」的轉換工作。三種介面任你挑:命令列、網頁版 agent、macOS 桌面 App(Feb 2026 推出)。

限時促銷中:連免費 ChatGPT 帳號也能用 Codex(5 小時約 5–10 個任務,依負載浮動)— 不一定能持續,建議盡早試。

  • Model
    GPT-5.5 · 2026/04/24 起為 Codex 主力
  • OS
    Mac · Linux · Windows(CLI 全平台支援)
  • Account
    ChatGPT 任一帳號(含 Free / Go 限時免費)
  • Free
    Free / Go:5–10 任務 / 5 小時(限時,可能取消)
  • Paid
    Plus $20 / Pro $100 或 $200(額度倍率提升)
  • Sandbox
    Linux kernel 級沙箱,三者中最安全
01

用任何 ChatGPT 帳號都行(免費也可)

Codex 額度直接綁在 ChatGPT 帳號。各方案都可用:
Free / Go:限時促銷免費版,5 小時約 5–10 任務
Plus $20:基線額度。
Pro $100 / $200:5–20× Plus,重度開發者用。

沒帳號的人 — 先免費註冊一個 ChatGPT 帳號就能玩。額度雖然少,但練手很夠。

02

用 npm 安裝 CLI(一行搞定)

需要先有 Node.js(沒裝先到 nodejs.org 下載)。然後在終端機跑:

npm install -g @openai/codex
Mac 用 Homebrew: brew install codex 也可以。
03

第一次啟動 · 用 ChatGPT 帳號登入

輸入 codex。第一次會打開瀏覽器叫你登入 ChatGPT — 登入後就直接綁好了,不用 API Key

codex
04

cd 進專案資料夾,開始對話

跟 Claude Code 一樣 — 切到專案資料夾,再輸入 codex。介面是一個交互式對話框,可用中文。

cd C:\Users\你\Desktop\我的專案 && codex
05

學會 /status 看剩餘額度

在 codex 對話中輸入 /status,可以看到目前 5 小時 / 每週的剩餘額度。額度用完會告訴你下次重置時間,或可加購信用點數。

/status
06

玩玩網頁版 / macOS App

除了 CLI,Codex 還有:
chatgpt.com/codex — 雲端 agent,可在瀏覽器派任務、不佔本機資源。
macOS App — 多視窗管理多個 agent,UI 更友善。
適合「多任務平行作業」 — 例如 agent A 改前端、agent B 改後端。

07

Recommended Extensions必裝 / 強烈推薦的擴充

Battle-tested
For Antigravity / VS Code

Antigravity 與 VS Code 共用同一套擴充市集。這幾個是我這個月實戰下來,每個專案幾乎都會裝的工具。

Must Have · Browser

Antigravity Browser Extension

讓 AI 真的能「看到」你的網頁、點按鈕、讀 console。沒裝這個,AI 是瞎子。

@google/antigravity-browser
Must Have · Git

GitLens

顯示每行程式碼是誰/什麼時候改的。Vibe coding 改太多次時的救命浮木。

eamodio.gitlens
Must Have · Lang

Chinese (Traditional) 語言包

整個介面變繁體中文。新手第一個該裝的,降低學習成本。

ms-ceintl.vscode-language-pack-zh-hant
Highly · Format

Prettier

存檔自動把程式碼排整齊,AI 寫的東西馬上變得乾淨。

esbenp.prettier-vscode
Highly · Color

Live Server

右鍵 HTML → Open with Live Server,秒開預覽,存檔自動刷新。

ritwickdey.liveserver
Highly · Editor

Error Lens

把錯誤訊息直接畫在程式碼旁邊。再也不用瞇著眼找紅色波浪線。

usernamehw.errorlens
Nice · Visual

Material Icon Theme

把資料夾跟檔案配上漂亮圖示,讀專案結構快一倍。

pkief.material-icon-theme
Nice · Color

Color Highlight

把 #e8623d 這種 hex 直接著色顯示在編輯器裡。改顏色超快。

naumovs.color-highlight
Nice · Web

Tailwind CSS IntelliSense

如果 AI 用 Tailwind(很常見)寫前端,這個會給你補字、預覽顏色。

bradlc.vscode-tailwindcss
08

Prompt 心法把想法寫成 AI 聽得懂的指令

Field-tested · 24 sites
From real projects
i.

把 AI 當「實習生」對話

不要說「做一個記帳 App」,要像對新人交辦:誰用、要解決什麼問題、長什麼樣子、有什麼限制。資訊越具體,產出越貼近你想要的。

❌ 做一個記帳 App
✓ 我老婆每天記 5 筆消費,希望手機開瀏覽器就能用,黑底、大按鈕、不要登入,資料存在瀏覽器就好。
ii.

分階段,不要一口氣Iterate, don't dump.

先要「能跑的雛形」,再加細節。一次塞 20 個需求,AI 容易做歪。建議節奏:骨架 → 樣式 → 互動 → 邊角案例

第一版只要能新增 / 刪除 / 列表三個功能。
我看過確認方向對,再說下一步。
iii.

給範例 / 給「不要」Show, don't tell.

貼一張畫面截圖、貼一個你喜歡的網站連結、列出「不要哪些風格」。AI 看得到具象的東西時,準度會跳一個級距。

我要的風格像 Linear 官網,但更暖一點、用米色。
不要紫色漸層、不要圓角太大、不要 emoji。
iv.

每次失敗都是「素材」

AI 寫錯了、樣式跑掉了 — 不要只說「改一下」,把錯誤訊息/截圖貼回去。它有 90% 的機率自己看出問題。

這是執行後 console 跳的錯誤:
Uncaught TypeError: Cannot read properties of undefined.
請找出原因並修。
v.

事先寫好 「規則檔」

在專案根目錄放一份 CLAUDE.md / .agentrules,寫下「這個專案的口味」 — 用什麼框架、不用什麼套件、命名規則、語言(繁中)。AI 每次會自動讀。

所有 UI 文字使用繁體中文。
不要用 React、不要用 jQuery,純 HTML + CSS + Vanilla JS。
所有顏色定義在 CSS 變數,主色 #e8623d。
vi.

Git 是你的安全帶Commit early, commit often.

每完成一個小功能就 commit 一次。AI 改壞東西時,一句 git checkout . 就能回到上一個能跑的狀態。沒 Git 之前,別讓 AI 大改。

在你開始重構前,幫我先 commit 一版「v1 ok」當還原點。
09

Try Tonight五個今晚就能複製貼上的 Antigravity 提示詞

Copy & paste
30 min · live result

這些提示詞我都實際跑過 — 把整段複製貼到 Antigravity 的 Agent Manager,按 Enter,等 30 秒到 3 分鐘,你就能得到一個能用的網站。

兩種風格   綠框 = 對話版(口語、一句話),橘框 = 規格版(細節列清楚)。兩種都會 work,只是控制力不同。建議:第一次先用對話版看 AI 怎麼接話,再用規格版微調出你要的細節。

★ 入門 5 分鐘 單檔 HTML

個人番茄鐘Pomodoro Timer

最容易看到成果的開場 — 不需要任何後端,純前端,一個檔案就跑。

欸 幫我做個番茄鐘網頁啦,要漂亮一點,黑底,能開始暫停重置,時間到要叫我。單檔就好。
幫我做一個簡約的番茄鐘網頁,單一 HTML 檔。
1. 25 分鐘工作 / 5 分鐘休息,自動切換循環
2. 大大的圓形倒數環,背景米黃色(#f4ece0)、字用深炭色
3. 三顆大按鈕:開始 / 暫停 / 重置(圓角、有 hover 效果)
4. 結束時:① 瀏覽器 alert ② 標題閃爍 ③ 用 Web Audio API 發 beep 聲
5. 顯示「今天完成了 X 顆番茄」,存 localStorage
6. 不要任何套件,純 HTML + CSS + Vanilla JS
你會看到
  • 一個 timer.html,雙擊就跑
  • 大圓圈倒數環動畫(會由滿變空)
  • 三顆按鈕:開始 / 暫停 / 重置
  • 結束時跳通知 + 嗶嗶聲
  • 顯示「今日完成 X 顆」累計

適合誰:每個人。當作驗證 Antigravity 安裝成功的「Hello World」最合適。

★ 入門 3 分鐘 單檔 HTML

QR Code 生成器QR Code Maker

日常超實用 — 開會分享網址、印海報、做招牌。3 分鐘就能上線,獲得感最強。

做個 QR code 產生器網頁,輸入網址直接顯示 QR,可下載 PNG。
你會看到
  • 輸入框 + 即時生成 QR code(打字就變)
  • 「下載 PNG」按鈕
  • 「複製到剪貼簿」按鈕(bonus)
  • 用 qrcode.js 或 canvas API(AI 會自己選)

適合誰:常常需要分享連結的人 — 講師、業務、餐廳老闆。也很適合給長輩用。

★ 入門 10 分鐘 localStorage + Chart

每日心情打卡Daily Mood Journal

自我覺察小工具 — 30 天後會看到自己的情緒曲線,比 IG 動態更真實。

做個每天記心情的網頁,五個 emoji 選一個,可以加一句話備註,看得到 30 天的紀錄。
幫我做「每日心情打卡」單頁網頁。
1. 主畫面大字:「今天感覺如何?」+ 5 顆 emoji 大按鈕:😄 😊 😐 😔 😢
2. 點選後顯示備註輸入框,按「儲存」
3. 下方兩個視覺化:
 • 折線圖:過去 30 天分數變化(😄=5、😊=4...😢=1)
 • 日曆熱力圖:類似 GitHub contribution graph,色彩越深心情越好
4. 同一天可重複打卡(覆蓋上一筆)
5. 資料存 localStorage,可匯出 JSON 備份
6. 配色:暖米黃背景 + 柔和粉紫,溫柔風,圓角設計
7. 純單檔 HTML,圖表可用 Chart.js CDN
你會看到
  • 每天打開就想點一下的小儀式感
  • 30 天折線圖 — 看出你哪一週特別 down
  • 日曆熱力圖 — 像 GitHub 種草地
  • 備份 / 還原 JSON 按鈕

適合誰:正在做心理諮商或想自我覺察的人。簡單但會養成習慣。

★ 入門 10 分鐘 localStorage

家庭食譜本Family Recipe Book

給媽媽 / 太太的小禮物。資料存瀏覽器,不需註冊、不需後端,最低成本的「貼心」。

幫我做家裡食譜的網頁,可以加菜名、食材、步驟,配色溫暖一點,給媽媽看得到大字。
幫我做一個家庭食譜記錄網頁。
1. 可新增食譜:菜名、食材清單、做法步驟、備註欄、菜系標籤(家常/節慶/快煮)
2. 主頁列表卡片式顯示,可依菜系篩選
3. 點進詳細頁:照片區(先放 placeholder)+ 食材 checklist + 步驟
4. 可編輯、可刪除(刪除前要確認)
5. 資料存 localStorage
6. 配色暖橘色為主(#e8623d),字體用襯線體,給長輩用按鈕要大(min 48px)
7. RWD 手機優先 — 廚房裡會手機開
8. 純 HTML / CSS / Vanilla JS
你會看到
  • 列表 + 詳細頁的雙頁面結構
  • 可加菜系標籤分類(春節菜、便當菜...)
  • 食材 checklist 可勾起來追蹤購物
  • 整個 UI 字大、按鈕大,給長輩用

適合誰:家裡媽媽、太太愛做菜的人。上傳到 GitHub Pages,全家都能用同一份。

★ 入門 10 分鐘 Canvas 動畫

家事輪盤Chore Wheel

和另一半 / 室友吵「誰洗碗」時的救星。轉一下,認命。順便練 Canvas 動畫。

做個轉盤抽籤,可自己加項目,按按鈕會旋轉減速停下來,告訴我抽到哪一個。
幫我做「家事輪盤」單頁網頁。
1. 上方輸入框:可動態新增 / 刪除家事項目(預設:洗碗、倒垃圾、拖地、洗衣服、買菜、丟貓砂)
2. 中間用 Canvas 畫一個大轉盤,扇形依項目數均分,每個扇形不同顏色
3. 中央有指針(向上)
4. 「抽!」按鈕:輪盤旋轉 3 秒、緩動減速(easing)、停下後對應的項目跳出來
5. 旋轉時播放 beep 聲(Web Audio API)
6. 結果用大字顯示「今天你負責:洗碗 🧽」
7. 配色:粉紅 + 米白,可愛風,按鈕有圓角
8. 純單檔,無外部套件
你會看到
  • 真的會旋轉的轉盤(Canvas 畫的)
  • 緩動減速 — 像真實輪盤的物理感
  • 可隨時加減項目(不會弄亂分配)
  • 音效讓抽籤更有儀式感

適合誰:同居者、家庭、辦公室抽便當、抽報告主題都好用。

★★ 中等 15 分鐘 表單 + 後端

婚禮 / 聚會 RSVPWedding RSVP Page

取代 Google Form。用自己的網址寄給賓客,氣勢馬上不一樣 — 而且後台你能看到誰來、誰不來。

幫朋友做個婚禮 RSVP 頁面,有日期地點,能填出席人數和素食需求,資料存 Firebase 我能看到。
幫我做一個婚禮 RSVP 網頁。
【賓客頁】
1. 首屏:大照片區(先 placeholder)、新人姓名、婚禮日期、地點、Google Maps 嵌入
2. RSVP 表單:姓名、出席人數、是否素食(單選)、給新人的祝福(textarea)
3. 提交後跳出感謝動畫 + 加入行事曆按鈕
【後台頁】
4. 用 ?admin=secret 開啟(簡單參數密碼),列表顯示所有 RSVP
5. 統計:出席總人數、素食人數、未回覆人數
6. 可下載 CSV
【技術】
7. 用 Firebase Firestore,請一步步教我怎麼建專案、複製 config
8. 設計:典雅、米色為主、襯線字(Cormorant Garamond),手機優先
9. 字體用 Google Fonts,繁中用思源宋體
你會看到
  • 賓客手機掃 QR 進入專屬頁面(很有面子)
  • 表單資料即時收到 Firebase
  • 後台統計:誰來、誰素食、有多少人
  • 下載 CSV 給婚禮顧問安排桌位
  • 下次有聚會、生日、員工旅遊都能套用

適合誰:要結婚的、辦同學會的、辦小型活動的。一次做好,下次改文案就能再用。

★★ 中等 15 分鐘 API 串接

今日天氣 + 穿搭建議Weather + Outfit Page

第一次串 API 的好練習 — 用免費的 Open-Meteo 開放氣象 API,不需 API Key。

幫我做一個「今日天氣穿搭網頁」。
1. 用 Open-Meteo 免費 API(不用 key),自動偵測使用者位置(geolocation)
2. 顯示:當下溫度、體感溫度、降雨機率、紫外線指數、未來 6 小時逐時預報
3. 根據溫度給穿搭建議:
 • > 28°C:短袖短褲、防曬、別忘水
 • 18~28°C:薄長袖、外套放包包
 • 10~18°C:薄毛衣、外套必備
 • < 10°C:厚外套、圍巾、毛帽
4. 降雨機率 > 50% 顯示「☔ 帶傘」提醒
5. 紫外線 > 7 顯示「🔥 防曬」提醒
6. 視覺:圓角卡片、米色背景、深綠重點色,柔和插畫風
7. 純單檔 HTML,無外部套件
你會看到
  • 瀏覽器跳「允許定位」 — 准了之後自動抓你的城市
  • 大字顯示溫度 + 條件 + 穿搭建議
  • 下方 6 小時逐時預報
  • 學會:geolocation API、fetch API、條件判斷

適合誰:每天出門選衣服很糾結的人、機車族、家有小孩要穿衣的家長。

★★ 中等 20 分鐘 Notification API

寵物用藥追蹤Pet Medication Tracker

家有老貓老狗才知道 — 早晚用藥、不同種類,腦容量會爆。讓網頁幫你記。

幫我做一個給寵物主人的用藥追蹤網頁,給愛貓人士用。
【設定頁】
1. 可新增多隻寵物:名字、種類(貓 / 狗 / 兔...)、頭像 emoji(自選)
2. 每隻寵物可加多種藥:藥名、頻率(一天 X 次 / 隔 Y 天)、時段(早 / 午 / 晚 / 睡前)、份量
【主畫面】
3. 預設顯示「今天還沒吃」的所有藥,吃完點打勾
4. 打勾自動記錄時間、可看 7 / 30 天歷史
5. 接近用藥時間(前 30 分鐘)瀏覽器跳通知 — 用 Notification API,需用戶同意
6. 多隻寵物用上方 tab 切換
【技術 / 設計】
7. 純單檔 HTML,資料存 localStorage
8. 設計:圓角卡片、淡綠色為主,按鈕大顆給長輩用
9. 寵物頭像用 emoji,每隻可選不同
10. 給我一份「醫療紀錄報表」可以印出來給獸醫看
你會看到
  • 多寵物切換 tab
  • 「今天還沒吃」的清單(吃完打勾)
  • 用藥前 30 分鐘跳通知(需同意瀏覽器通知)
  • 可印出「過去 30 天用藥報表」給獸醫看
  • 學會:Notification API、定時器、複雜資料結構

適合誰:有老寵物、寵物多病的飼主。也適合改成「家人用藥追蹤」給爸媽用。

★★ 中等 20 分鐘 多區塊 + RWD

個人一頁式作品集One-page Portfolio

最實用的下一步 — 把你做的東西展示出來,求職、自介、加好友都用得到。

做一頁式作品集網站,深色底,介紹我自己 + 作品 + 聯絡方式,要看起來不像 AI 做的。
幫我做一頁式個人作品集網站。
1. 區塊順序:Hero(大標題 + 一句自介)→ About(含一張大頭貼)→ Skills(技能 tag cloud)→ Works(3 欄卡片)→ Contact
2. 風格:深色底(#0e0e10)+ 暖米白字 + 一個顯眼重點色(柿橘 #e8623d)
3. 字體:英文用 Fraunces 或 Cormorant 襯線字(顯示更精緻);中文用思源宋體
4. Hero 區大標用斜體 italic 重點色
5. 滾動時各區塊有淡入動畫(IntersectionObserver)
6. RWD:手機 3 欄變 1 欄,標題縮放
7. 微互動:卡片 hover 微浮起 + 跟隨滑鼠的光暈
8. 內容先放假資料,我之後改
9. 不用 React 框架,純 HTML + CSS + Vanilla JS
你會看到
  • 5 區塊單頁網站(Hero / About / Skills / Works / Contact)
  • 滾動淡入動畫
  • RWD 手機版自動調整
  • 可直接 push 到 GitHub Pages 或 Cloudflare Pages,30 分鐘就有公開連結

適合誰:找工作、自由接案、想留個個人 landing page 的人。

★★★ 進階 30 分鐘 後端 + 即時

朋友間的小留言板Friend Guestbook

第一次體驗「真正的後端」 — 大家從不同地方看到同一份資料。AI 會帶你開 Firebase 專案。

幫我做一個朋友圈共用的留言板。
【功能】
1. 任何人開頁面就能看到所有留言(不需登入)
2. 留言欄位:暱稱、訊息、心情(emoji 5 選 1:😊 🥺 😍 🤔 🎉)
3. 即時更新(onSnapshot),有人留言其他人馬上看到
4. 按時間倒序、最多 100 筆
5. 簡單敏感字過濾(屎、髒話),檢測到顯示「請文明留言」
【視覺】
6. 像實體便條紙:米黃 / 粉藍 / 薄荷綠卡片隨機輪流
7. 每張紙隨機微旋轉 -3° ~ 3°
8. 上方有一塊膠帶質感裝飾
9. 整體像便條紙公告牆
【教學】
10. 我完全沒用過 Firebase,請從「申請 Google 帳號 → 建 Firebase 專案 → 啟用 Firestore → 複製 config 給你」一步步教
11. 上線後告訴我怎麼部署到 Firebase Hosting,得到一個 yourname.web.app 的網址
你會看到
  • 真的有「後端」的網站 — 留言會傳到雲端
  • 多裝置即時同步(手機、電腦同時打開都看得到新訊息)
  • 便條紙風 UI — 比典型留言板有溫度
  • 學會:Firebase Console 操作、Firestore 概念、即時資料庫
  • 上線後拿到 yourname.web.app 的免費網址

適合誰:已經做完 1-9 任一個、想突破的人。第一次串雲端服務。

Bonus · 元提示 當下 萬用模板

萬用「先聊聊」開場The "Talk-First" Opener

當你還沒想清楚要做什麼時,先用這個提示詞讓 AI 反問你 — 比直接下單好十倍。這是我這個月最常用的招式。

我想做一個關於「[填你想做的主題]」的小工具,但還沒想清楚規格。
先別寫程式,先反問我 5 個關鍵問題:
1. 誰要用?年齡 / 場景
2. 解決什麼具體問題?最痛的那個是什麼?
3. 必須有的 3 個功能(MVP)?
4. 視覺風格 / 配色 / 我喜歡的網站範例?
5. 部署到哪裡?(GitHub Pages? Vercel? Firebase? 還是不知道)
我回答完,請給我一份 「最小可行版本」實作計畫 — 包含檔案結構、預估時間、第一步該寫什麼。
計畫我確認 OK,再開始寫程式。
為什麼好用
  • 讓 AI 變成你的 PM,逼你把模糊的「我想做⋯」變具體
  • 避免 AI 瞎寫一通、跑歪方向
  • 強迫你先決定「最簡版」是什麼 — 不會做到一半失焦
  • 計畫 OK 才動手,避免改十次 commit 都不滿意

適合誰:每一次當你說「欸我想做個 OO」但又說不清的時候。當作上面所有 prompt 的「前置動作」。

10

Field Notes心得:一個月、24 個專案、教我的事

178 commits · 13 repos
2026/03/12 → 2026/04/27
24sites
作品總數
178commits
Git 記錄
46days
總期程
9stacks
不同技術棧
12apis
第三方整合

2026 年 3 月 12 日,我做了健身追蹤的第一個 commit。今天是 4 月 27 日,第 24 個作品上線。中間 46 天,平均兩天就有一個能跑的網站誕生。聽起來很多,但細看 git log 會發現:產出是叢集式的 — 4 月初一個爆發、4 月底另一個爆發 — 不是每天平均產出。這跟人一致:靈感來時做很多,沒靈感就沉澱。

24 個專案橫跨健身、財務、心理、命理、電商、公益、台股、職場寫作。我不是某個領域的專家,我是個「找問題的人」。Vibe coding 給了我一個能力 — 把生活裡每個「啊真希望有人做」的時刻,變成自己動手。每個專案都對應一個真實的限制:台灣 27 家銀行的帳單格式各異 → MyFinance;薩提爾諮商太貴 → 薩提爾的房間;家裡甜點店要訂單管理 → 朵菲玩甜點。

技術棧跟著問題走,不跟著潮流走

看我的作品列表,會發現沒有「一個我最愛的框架」。台股看盤要快、要 zero dependency → 純 Canvas + Cloudflare Workers;電商需要後台 → Express + Render;做 AI 的薩提爾室需要狀態 → Next.js + Anthropic + Firebase;個人小工具就是 Vanilla HTML + GitHub Pages。

這跟很多新手會卡住的地方相反 — 大家容易先選技術,再找問題。順序顛倒了。先看你要解決什麼,再讓 AI 推薦最簡單的方案。AI 反而會幫你避開「過度工程」 — 一個三十行 HTML 就能解決的問題,它不會推你用 React。

從第一天就「上線」,不要永遠在 localhost

24 個專案裡,有 19 個有公開網址、5 個 WIP。沒有一個是只在我電腦上跑的。這不是炫耀 — 而是因為「上線」會逼你面對真實:CORS、API key、響應式、行動裝置、部署設定。每一個都是「locallhost 不會教你的事」。

我用了 6 個不同的部署平台:GitHub Pages(9 個)、Firebase(4 個)、Vercel(3 個)、Render(2 個)、Cloudflare Workers(1 個)、Chrome Extension(1 個)。每個都是 AI 帶我設定的 — 我自己不會記那麼多 CLI 指令。但跑過一次後,下次就快了。

「複製一份再改」是最被低估的技巧

我桌面有兩個資料夾:fitness-trackerfitness-tracker - 複製。後者就是我直接 ctrl+C ctrl+V 整份複製,然後叫 AI 改成 v2。聽起來很笨,但這是最安全的實驗方式 — 原版照樣跑,新版隨便玩。

Git branch 是同樣概念的「正規版」。但對新手而言,「資料夾複製一份」更直觀、更不會出錯。AI 不會抗議你「沒用 branch」。等到你做了第三個複製,自然會想要 git。

AI 寫的程式,是「半成品」不是「完成品」

24 個專案裡,沒有一個是 AI 第一次寫出來就能用的。我累積 178 個 commit,平均每個有 git 的專案 13 個 — 那 13 次都是「跑了 → 哪裡不對 → 再請 AI 改」。

新手最常犯的錯誤:跑一次失敗就放棄,覺得「AI 不行」。真正的 vibe coding 不是「下指令拿成品」,是「跟 AI 兩個人一起改 13 次」。把錯誤訊息貼回去、把畫面截圖貼回去、把 console 內容貼回去 — 這就是工作流。Claude Code 比 Antigravity 在這件事上更順:因為它能直接讀整個資料夾、自己跑指令。

三個工具,三種人格

用過三大工具後,我自己的習慣是 — Antigravity 用來「探索」(畫面豐富、易看效果,適合腦中還模糊時);Claude Code 用來「深耕」(已經有專案、要做正式產品);Codex 用來「平行」(同時多任務時派多個 agent 處理)。

三者不是「選一個」,而是「分時段用」。在 vibe coding 的世界裡,工具便宜、切換成本低 — 同一個專案用兩個工具來回對照,反而會讓你看到 AI 不同的「視角」,找到最好的解法。

給超級新手的一句話

你不需要先學會什麼。回到家,打開 Antigravity,跟它說「我想做一個 [填你今晚最想做的東西]」。 三十分鐘後,你會擁有人生第一個自己做的網站。再三十分鐘後,你會發現第一版有 bug — 然後你會自己學會怎麼修。 一個月後,回頭看這份簡報,你也會有一份自己的 24 件作品清單。

11

Portfolio這個月,我做出的 24 件作品

Live · 2026/04
24 sites · 1 month
★ Featured · AI 工具
Live
薩提爾的房間 Satir Room
以薩提爾冰山理論為骨架的 AI 自我覺察對話工具,具備危機關鍵字偵測與速率限制。Next.js + Anthropic + Firebase。
Next.jsTypeScriptAnthropicFirebase
Visit ↗ Vercel
AI 工具
Live
天機 AI 面相 TianJi AI
宣稱準確度 99% 的 AI 面相儀表板,整合臉部辨識分析。
HTMLface-api.js
Visit ↗ GitHub Pages
AI 工具
Live
敬啟者 Jing Qi Zhe
內嵌 Gmail 側邊欄的台灣職場繁中商務寫作助手,8 組情境 × 4 種語氣一鍵生成。
Manifest V3Gemini APIChrome Ext
Chrome Ext Manifest V3
AI 工具
Live
剪筆 JianBi JianBi
一鍵把長內容剪成台灣繁中貼文(Threads / X / LINE / IG)。
Next.jsTypeScriptGemini API
Visit ↗ Vercel
★ Featured · 生活 / 商務
Live
六脈 LIUMAI LIUMAI Taiwan Stock AI
台股即時看盤 + 六維 AI 分析戰情艙。K 線/五檔/法人/AI 操作訊號,純前端 Canvas 零套件依賴,部署在 Cloudflare Workers。
Vanilla JSCanvasTWSE MISFinMindCF Workers
Visit ↗ CF Workers
生活 / 商務
Live
MyFinance 信用卡帳單 MyFinance
聚合台灣 27 家以上銀行 Email 信用卡帳單的個人理財系統。讀取 Gmail 信件解析消費,自動分類。
PythonFirebaseGmail API
Personal use Firebase
生活 / 商務
Live
朵菲玩甜點 Duffy Have Fun
Next.js + Supabase 打造的小型蛋糕訂購電商,含後台管理。
Next.jsTypeScriptSupabaseTailwind
Visit ↗ Vercel
生活 / 商務
Live
雞米花 gimi whisper
台南花藝工作室完整電商,前台購物車/結帳/訂單 + 後台 CMS。
Node.jsExpressVanilla JS
Visit ↗ Render
生活 / 商務
Live
YEBUDA 首爾選品 YEBUDA Seoul Korea
正韓東大門服飾選品電商,前台 + 後台 CMS + 儀表板,串綠界金流。
Node.jsExpressECPay
Visit ↗ Render
生活 / 商務
Live
健身追蹤 Fitness Tracker
健身紀錄儀表板,內建抽獎系統,整合 Google Sheets 與 LINE Bot。
HTMLApps ScriptLINE Bot
Visit ↗ GitHub Pages
生活 / 商務
Live
健身追蹤 v2 Fitness Tracker (new)
健身追蹤改版實驗,介面更精簡。
JavaScript
Visit ↗ GitHub Pages
生活 / 商務
Live
SmartLedger 記帳 SmartLedger
輕量、無登入、開瀏覽器就能用的記帳工具。
JavaScript
Visit ↗ GitHub Pages
生活 / 商務
Live
高雄行程 2026 Kaohsiung Trip
2026 高雄行程規劃單頁,含地圖與時段表。
HTML
Visit ↗ GitHub Pages
生活 / 商務
Live
限量樣品系統 Limit Sample System
限量樣品申請 / 管理介面,內部使用。
JavaScript
Visit ↗ GitHub Pages
★ Featured · 公益 / 社會
Live
野海拾誌 WildShore Log
台灣 55 個淨灘據點的 ICC 紀錄平台,即時地圖視覺化與廢棄物統計。Vanilla JS + Leaflet + Chart.js + Firestore。
Vanilla JSLeafletChart.jsFirestore
Visit ↗ non-profit
公益 / 社會
Live
嘉義博物館尋寶 Chiayi Museum Hunt
嘉義博物館互動尋寶網頁,給親子家庭使用。
JavaScript
Visit ↗ GitHub Pages
命理 / 紫微
Live
iztro 紫微斗數 iztro Docs
輕量級紫微斗數排盤函式庫的官方文件(多國語系)。
TypeScriptVitePress
Visit ↗ docs.iztro.com
命理 / 紫微
Live
Zway 紫微工具 Zway
使用 iztro 函式庫製作的紫微斗數排盤工具。
Viteiztro
Visit ↗ GitHub Pages
提案 / 頁面
Live
荒野高雄 2026 SOW Kaohsiung Proposal
整合 2025 愛海、生物多樣性、2026 棲地三份 PPT 的企業永續合作提案網頁。
HTMLCSS
Visit ↗ GitHub Pages
開發中
WIP
AI 密室官網 AI Midsir
AI 密室官方網站,使用 Astro 框架開發中。
AstroJavaScript
Coming soon Astro
開發中
WIP
嘉義博物館官網 Chiayi Museum
嘉義博物館官網(Firebase Hosting 建置中)。
Firebase
Internal preview Firebase
開發中
WIP
薩提爾 Firebase 鏡像 Satir Room (FB)
薩提爾房間 Firebase 備援版本,主站在 Vercel。
Firebase
Mirror site Firebase
開發中
WIP
表單分析系統 Form Analysis
整合 Notion / Google Drive / OpenAI 的表單分析應用,已配置 Vercel。
ReactExpressMongoDBNotion API
Configuring private
開發中
WIP
荒野台南分會官網 SOW Tainan
荒野保護協會台南分會官方網站,目前為本地開發階段。
HTMLExpressMongoDB
Local dev private

— Above are the public works only —

實際還有更多內部 / 私人的工具沒有列在這裡。
想看更完整的開發過程,現場找 Leg 聊聊。

— Final Chapter · Now it's your turn —

下一個 vibe coder,
就是

你不需要先學會什麼。
回到家、打開 Antigravity,跟它聊一個你想做的小東西 — 食譜筆記、家庭相簿、寵物日誌都好。
明天上班前,你會擁有人生第一個自己做的網站。