我用 AI 做了一個學習網站給我的孩子
起心動念:給孩子的一份禮物 https://learn.paulfun.net
事情的開始,其實很單純。
這陣子我用 AI 做了不少投影片。從專案管理、程式設計概念到各種知識主題,Claude
搭配我自己設計的 Skills,產出的品質讓我很驚艷。
某天晚上,看著電腦裡一堆做好的教學投影片,我突然想:
這些東西,能不能用某種方式分享給我的孩子?
不是要當老師,也不是要開課。只是想把自己覺得有趣的知識,用孩子能理解的方式傳下去。
於是,Mido Learning 的念頭就這樣冒出來了。

初試啼聲:Vibe Coding 的魔法
有了想法,接下來是技術問題。
我需要一個網站。可以上傳教材、可以讓人瀏覽、最好還要有會員系統。以前這種專案,光想就累
— 前端、後端、資料庫、部署、CI/CD⋯⋯每一塊都是坑。
但這次,我決定試試看完全用 AI 來開發。
我把規格訂好,讓 Claude 幫我寫 code。
技術棧?我搭配AI快速決定了:Next.js + .NET Minimal API + Firebase。
我原本以為最麻煩的會是 CI/CD 部署。結果 AI 搭配 GitHub CLI 和 GCP CLI,三兩下就把 GitHub
Actions 的 workflow 寫好了。Push 到 main,自動 build、自動部署到 Cloud Run。
整個過程比我想像中順太多。
這就是所謂的 Vibe Coding — 你描述你要什麼,AI
把程式碼生出來。你不用記住每個語法細節,只要知道你想做什麼就好。

除錯與減法:真正的挑戰
當然,事情不可能一路順風。
第一個坑是投影片相容問題。我做的投影片是純 HTML 的單檔格式,用 iframe
嵌入網站時,遇到各種 CSP、sandbox 權限的問題。AI 陪著我一個一個解決。
第二個坑,反而是「減法」。
AI 很會加東西。你說要一個功能,它會順便幫你想好十個延伸功能。但對一個個人專案來說,太多
功能就是負擔。
我花了不少時間在「砍掉不必要的東西」。
這也是 Vibe Coding 的重要心法:你要很清楚自己要什麼,也要很清楚自己不要什麼。
來來回回:幾十次部署
接下來是漫長的調整期。
改一個小 bug,push,等 GitHub Actions 跑完,上 Cloud Run 確認。發現另一個問題,再改,再
push。
來來回回,大概部署了幾十次。
但神奇的是,我一點都不覺得煩。
因為整個 CI/CD pipeline 是全自動的。我只要 git push,剩下的事情機器會處理。失敗了就看
log,修完再推。
這種「隨時可以部署」的安心感,是以前土法煉鋼時代完全沒有的體驗。

靈光一閃:網頁小遊戲
我把投影片上傳功能做完,看著網站覺得好像少了什麼。
然後我想到:
既然能上傳 HTML 投影片,那能不能上傳 HTML 小遊戲?
技術上沒有什麼不同。都是 HTML + CSS + JS,用 iframe 嵌入就好。
於是我請 AI 幫我做了一個圈圈叉叉的網頁遊戲,打包上傳。
成功了。
網站瞬間從「教學平台」變成「教學 +
遊戲平台」。小朋友可以看投影片學知識,也可以玩小遊戲放鬆一下。
這種「功能延伸」的彈性,其實是當初設計時沒想到的。但因為架構夠乾淨,加新功能幾乎沒有額
成本。

最後一哩:自訂網域
網站做好了,但網址是 Cloud Run 給的一長串亂碼。
我想把它接到自己的網域:learn.paulfun.net。
這種事以前要查一堆文件、設定 DNS、搞憑證。這次我直接問 AI 怎麼做,它一步一步帶著我操作
gcloud CLI,五分鐘搞定。
現在,打開 learn.paulfun.net,就是 Mido Learning。
一個爸爸用 AI 做給孩子的學習網站,正式上線了。

心得:AI 帶我們去了以前去不了的地方
回頭看這整段旅程,最大的感受是:
AI 真的太強了。
不是那種「哇好酷」的強。是那種「以前做不到的事,現在做得到了」的強。
以前,一個人要做這樣的專案,可能要花幾個月,還不一定能做完。現在,有 AI
陪著,從發想到上線,大概兩週。
而且這兩週裡,我學到的東西比以前自己摸索半年還多。
因為 AI 不只是幫你寫
code。它會解釋為什麼這樣寫、這樣設計的好處是什麼、有什麼潛在問題要注意。
它像是一個永遠有耐心的資深工程師,24 小時 on call。
這讓我想到一個以前不敢想的可能:
或許在這個時代,只要你有想法、願意學習,真的可以一個人做出以前需要一個團隊才能做的東西
AI 帶我們去了以前我們去不了的任何地方。
而這只是開始。