用 AI 幫醫院辦 40 歲生日派對——我做了什麼好康的網站
各位好，我是那個在慈院公傳室、日夜與官網搏鬥的曾小P。 最近接了一個「不就是切個版嗎」的任務，從規格書到上線，整個專案在極短的時間內完成—— 沒錯，這就是 花蓮慈濟醫院建院 40 周年紀念網站 的誕生故事。
這到底是什麼東西？
簡單說：一個超豪華生日蛋糕網頁。
正式說：一個單頁式靜態紀念網站，完整呈現醫院從 1986 年開院到今天整整 40 年的歲月。 純 HTML5 / CSS3 / Vanilla JS，不靠框架、不靠 CDN、直接丟瀏覽器就能吃——跟泡麵一樣方便，但口感好太多。
網址： https://hlm.tzuchi.com.tw/ai_anniversary/
補充說明：目前40周年特刊編輯中，因此目前翻頁電子書和podcast內容暫時以35周年特刊為例。
先寫 SDD，再動手——這不是廢話，這是救命符
這個專案有一個我覺得做對了的決定：動工之前先寫軟體設計文件（SDD）。
一般人聽到「寫文件」就頭皮發麻，覺得那是大公司才需要的官僚流程。 但這次不一樣——在 AI 協助下，我用很短的時間就把整份 SDD 梳理清楚：
- 每個 Section 要呈現什麼？資料來源是什麼？
- RWD 三個斷點各自的行為？
- 哪些功能延遲初始化、哪些要做 Lazy Load？
- 無障礙規範要達到哪個程度？
全部白紙黑字寫清楚之後，再開始寫 HTML、CSS、JS。
結果是：幾乎沒有走回頭路。沒有「這個排版不對再砍掉重來」，沒有「手機版忘記考慮了」，每一個功能模組照著規格長出來，乾淨俐落。
SDD 不是負擔，SDD 是讓你在鍵盤上少走冤枉路的地圖。 特別是在 AI 協作開發的時代，一份清楚的規格書，同時也是你跟 AI 溝通的「共同語言」——說清楚要什麼，AI 才知道怎麼幫你做對。
網站有哪些區塊？（功能大公開）
1. 主視覺 Hero — 「四十載守護，初心如一」
一張全幅院景大圖，配上霸氣標語，深色漸層遮罩確保文字看得清楚。
（ai agent設計師說這叫「簡潔大氣」，我說這叫「把 position: absolute 和 linear-gradient 混在一起用」，殊途同歸。）
2. 四十年大事記 — 時間軸
1986、2006、2026，三個里程碑，左右交錯排列，捲動頁面時卡片優雅地飛進來。
IntersectionObserver 驅動的 .fade-up 動畫，不用 scroll event，主執行緒說謝謝你不打擾它。
3. 歲月留影 — 老照片帶
41 張 1983 到 1998 年的老照片，水平捲軸一路滑到底，CSS scroll-snap 讓每次滑動都像在翻老相簿一樣絲滑。
點一下照片會跳出燈箱全螢幕看，方向鍵切換、Esc 關閉，鍵盤玩家也照顧到了。
整理這 41 張照片的時候，我在心裡默默感謝當初那個幫照片命名的人，因為他用了一套非常規律的格式——如果沒有，我應該還在那邊
photo_1_final_v2_真的最終版.jpg。
4. 40 周年手冊 — 翻頁書
這是整個網站最帥的功能：用 DearFlip 做的互動式翻頁書，翻頁時有立體折疊效果，配上一段導讀音訊，整個體驗非常有儀式感。
為了不在頁面載入時就把 26MB 的 PDF 一口氣塞給院內網路，翻頁書採用「點了才初始化」的策略。手機版不顯示翻頁書，改成直接下載按鈕——畢竟在手機上翻 PDF 翻頁書，跟在公車上用筷子吃牛排一樣，理論上可行，實際上沒必要。
5. 歷年典藏特刊 — 卡片區
20、25、30、35 周年特刊，四張封面卡片整整齊齊，讓人感受到「我院辦周年是有傳統的」那種歷史重量。
用 NotebookLM 做 Podcast 摘要——意外地很好聽
網站做完之後，我做了一件有點好玩的事： 把整份 SDD 丟進 NotebookLM，請它幫我生成一段 語音 Podcast 摘要。
結果兩個 AI 主持人你一句我一句，用輕鬆的對話方式把整個專案的設計邏輯、技術選擇、RWD 策略講了一遍—— 聽起來還真的蠻像那麼一回事，比我自己用 PPT 簡報還清楚。
這件事給了我一個小小的啟發：文件寫得好，AI 就能幫你說清楚。 SDD 不只是給工程師看的，它可以變成 Podcast、變成簡報、變成給主管的一頁說明—— 只要源頭整理好，後續的溝通都省力得多。
技術細節（給喜歡看這段的人）
| 項目 | 做法 |
|---|---|
| 架構 | 純靜態，零框架，直接開 index.html |
| 圖片 | WebP 優先 + JPEG fallback，loading="lazy" |
| 動畫 | IntersectionObserver，不是 scroll event |
| 音訊 | preload="none"，不偷偷幫你預載 |
| RWD | 三個斷點：桌機 ≥1024px、平板、手機 |
| 無障礙 | ARIA label、鍵盤操作、prefers-reduced-motion 支援 |
開發心情 — 結語
坦白說，接到這個任務的時候，我以為「做個紀念網頁」就是把幾張圖排一排、加幾行文字就收工。
但因為事前有 SDD 打底、AI 協作開發，整個過程快得有點不真實—— 翻頁書、燈箱、時間軸動畫、RWD 三斷點，在極短的時間內全部到位。 以往這種規模的專案，光是來回修改排版就能吃掉好幾天，這次卻幾乎沒有走回頭路。
但有一個瞬間讓我覺得一切都值得——就是把 1983 年的老照片放進去，捲動時那個年份旗標緩緩飄出來的那一刻。
那棟建築在鏡頭裡看起來還很新，圍牆旁邊的樹還很矮。 40 年後那棵樹不知道長多高了，但醫院還在，還在守護著花蓮。
我只是一個寫前端的人，但那一秒鐘，感覺自己也參與了什麼重要的事情。
（然後我把 commit 推上去，關電腦，去吃宵夜了。）
如果你想看看網站長什麼樣子，或是想聊聊靜態網頁的各種奇技淫巧，歡迎找我！