我用 AI 做了一個學習網站給我的孩子

我用 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 帶我們去了以前我們去不了的任何地方。

而這只是開始。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *