幫你的網頁加點特效

這場已經結束。錄影、簡報與講義都在雲端資料夾，免費，不用留資料。簡報和講義也可以直接打開：簡報 PDF、講義 PDF。

錄影切成 6 段可以單獨看，共約 52 分鐘：開場與二合一、個人網站的樣子與 vCard、開車逛我的個人網站、同樣三句話再做七個、為什麼要找參考、收尾與從零實測。

講義有完整的三句咒語（把網址或資料換成你的就能用）、找到參考之後要先查的三件事、做好之後自己玩一圈要檢查什麼，還有 7 個用同樣三句話做出來的個人網站。另外補了現場講到的兩件事：為什麼一定要先找參考，以及做出來跟原作太像怎麼辦。

想做個人網站，可以先找一個喜歡的。我在特效蒐集站看到 Bruno Simon 的 3D 作品集：開一台車，在島上逛他的作品。原始碼是公開的，我請 AI 拿它當底，換成我的作品、repo、角色和 catime 的貓。

這晚分享了什麼

• 找參考：想像中的效果，先讓 AI 去找有沒有人做過、放在 GitHub Pages 上。
• 講要改什麼：想參考哪一個、哪些地方要改，講得口語就好。
• 給資料：要放上去的東西由你給，AI 才不會自己編。
• 玩一圈：AI 說做好了之後，我自己開車逛，抓到了哪些問題。

想自己動手做，電腦上要先準備好：一個能操作專案的 AI agent（Claude Code、Codex 或 Antigravity 擇一）、Node.js 22 版、Git，以及 GitHub 帳號；有裝 GitHub CLI 的話，agent 可以自己幫你建 repo、開網站。大部分參考網站都要先用 Node.js 建置才能跑，所以這幾樣最好先裝好。錄影都在雲端資料夾，可以邊看邊做。

做出來的個人網站在這（電腦開比較好玩，手機也能玩）：drive-folio-2025。

特效蒐集站公開在這，新增了 37 個開源個人網站，每個都附 Demo、原始碼與授權：web-effects-collector。