這陣子花了很多心血打造的個人專案，不知不覺已經膨脹到整整 21 個子網頁了！ 想發文跟大家聊聊：現在透過 AI 開發網頁到底有什麼好處？以我這個吸血鬼維基百科網站為例，最直觀的優點就是「省下極高的外包與時間成本」。 但我也想藉此分享一個開發觀念：工具再厲害，開發者本身也必須要有自己的想法和系統架構。如果腦袋裡沒有清楚的邏輯骨架與研究深度，AI 充其量也只能吐出一堆零散、跑不動的程式碼碎片。從整個網站的需求定義、資料建模到功能串聯，方向盤始終要在開發者自己手裡。 全站內容非常龐大，這裡只挑幾個最有前端技術含金量與話題性的亮點跟大家分享： 1. 跨界數據視覺化：不只整合 Chart.js，還手刻了 CSS 動態能量條，把各大吸血鬼的戰鬥力天花板、普及率與知名度做成儀表板；甚至跨界拿來分析「糯米 vs 白米」的物理化學差異，以及「殭屍修煉升階解鎖異能」的技能樹！ 2. 純 JS 互動與主題切換：全站用原生 JavaScript（Vanilla JS）手刻功能，除了能透過按鈕無縫展開/隱藏其他 20 幾個子網頁的導覽清單外，某些頁面還實作了「主題顏色切換」功能，讓讀者可以自由切換不同風格的視覺主題與介面配色。 3. 文學演變脈絡流程圖：親手設計了結構化流程圖，梳理「英國哥德文學（如《德古拉》）→ 吸血鬼與教會對立設定 → 現代遊戲/動畫獵人體系」的演進史，講清楚羅馬公教為何會成為大眾文化中標誌性的對立陣營。 4. 實用性前端工具：針對《暮光之城》作者給的英制身高，親手寫了即時公英制換算器，一鍵解決閱讀時的尺寸轉換痛點。 5. 原作深度冷知識：完整爬梳世界觀，科普很多人容易搞混的奎魯特「變形者」與隨滿月狂暴的真正狼人「月之子」究竟差在哪裡。 另外，裡面有個子網頁「借鬼諷今」，用吸血鬼題材直球剖析了現實中宗教體制的腐敗、盲目、聖戰與排他性。我也在裡面明確表達了我完全不相信「驅魔」這件事，並希望大家面對現實、破除迷信。 在這個民主自由的時代，每個人都有表達自己觀點與追求理性真相的權利，我說出自己對驅魔和宗教迷信的看法合情合理。雖然某些玻璃心的虔誠信徒看了可能會不太開心、甚至想避雷，但如果你跟我一樣是崇尚科學的唯物主義者，相信那個頁面絕對會讓你大呼過癮！ 大家平常寫 side project 也會這樣瘋狂擴充功能嗎？歡迎交流前端或奇幻設定！ 參考連結如下：