搭飛機太無聊，開發者用「vibe coding」打造出托爾金《魔戒》的互動式中土地圖

一名開發者在橫越美國的班機上，趁著美國航空提供的免費機上 Wi-Fi，用 AI 輔助程式設計的方式，把《魔戒》與《哈比人》世界的地理資訊做成了一張全功能互動地圖，並公開發布在網路上。這件事在知名科技論壇 Hacker News 上迅速引發熱烈討論，截至發稿時已累積逾兩百則留言回應。

從經濟艙座位誕生的中土地圖

這個專案由開發者 Fraser Marlow 製作，作品名稱為「Middle-earth Interactive Map」，目前部署於 Google Firebase 的靜態網站服務，網址為 https://middle-earth-interactive-map.web.app/，任何人都可以免費瀏覽使用。

Marlow 在文章中描述，他長期奔波於美國東西兩岸，在機上有大量的空閒時間。他利用美國航空提供的免費 Wi-Fi，以「vibe coding」的方式，與大型語言模型反覆對話，逐步把整個專案建立起來。他也坦言，AI 對托爾金作品的了解程度令他驚艷：「LLM 對托爾金著作的了解量相當可觀，能夠深入挖掘許多細節，讓這個過程非常有趣。」

互動式地圖功能一覽

打開地圖後，使用者可以在一張高解析度的中土世界全圖上自由縮放與拖曳瀏覽。地圖的互動功能相當豐富，主要包括以下幾個面向：

旅程路線追蹤：可疊加顯示多位主要角色的旅行路線，包含魔戒遠征隊全體成員（佛羅多、亞拉岡、波羅莫、梅里與皮膚、甘道夫、咕魯）、以及哈比人之旅的比爾博路線，路線以彩色虛線繪製，視覺上一目了然。

事件標記系統：地圖上分類標記了來自《精靈寶鑽》（Silmarillion）、《哈比人》、《魔戒》三部曲（魔戒現身、雙城奇謀、王者再臨）以及附錄的重要地點與事件，共涵蓋超過百個標記點，點選後可查看事件說明與相關人物。

時間軸頁面：另有一個獨立的 Timeline（時間軸）頁面，以時序方式列出整個傳說年代記的事件，並可點選直接飛往地圖上對應的位置。

距離測量工具：開啟「Measure distance」功能後，在地圖上點選任意兩點，即可換算出兩地之間的英里與里格（leagues）距離。

衛星視圖：地圖另提供一個概念性的「衛星視圖」（Satellite view），由 Stable Diffusion 的 img2img（圖像轉圖像）功能生成，雖然目前效果仍屬粗略，例如海洋呈現出過於乾燥的視覺效果，但已引起不少網友的興趣與討論。

技術架構：地圖圖磚與 Leaflet.js

這張地圖的運作原理，其實和你平常用 Google 地圖的方式非常相似。當你在 Google 地圖上拉近鏡頭，畫面不會整張重新載入，而是會依照你看的區域，即時拼出一小塊一小塊的圖片，這種技術叫做「地圖圖磚」。Marlow 在這個專案中也採用了同樣的做法：他先把一張巨大的中土世界全圖，預先切割成數百張小方塊圖片，並依照不同的縮放程度分別準備好對應的版本。這樣一來，無論你拉近看魔多火山口的細節，還是拉遠看整個中土的輪廓，地圖都能快速回應，不會因為載入一整張超大圖片而卡頓。

呈現這些圖磚的框架，是一套叫做 Leaflet.js 的開源函式庫。你可以把它想成是製作互動地圖的「樂高底板」，它處理所有拖曳、縮放、標記點擊等互動邏輯，開發者只需要把圖片素材和資料填進去就好。這套工具被廣泛用於各種網路地圖應用，算是業界相當成熟的選擇。

至於概念性的「衛星視圖」，Marlow 則是借助了 AI 圖像生成工具 Stable Diffusion，讓它根據原始地圖去推測「如果從衛星角度看中土會是什麼樣子」，再自動生成對應的圖片。目前成果仍很粗糙，海洋看起來像沙漠，部分山脈的質感也不夠自然，但這個方向本身已引起不少網友的興趣。整個專案的程式碼已完整公開於 GitHub（https://github.com/frasermarlow/middle-earth-map），有興趣的開發者可以自行參考或延伸。

旅程路徑的平滑化處理

另外，地圖上的旅程路線並非直線折線，而是透過 Catmull-Rom spline 插值算法生成的平滑曲線。程式碼中設有距離門檻，僅在相鄰兩點距離超過一定像素時才啟動插值，避免在近距離點之間產生不自然的曲線迴圈。這個細節讓地圖上的旅程路徑更貼近手繪風格，視覺上更加自然。

論壇上的熱烈討論

這個專案發布後，在 Hacker News 上引發多個方向的討論。

有網友指出，目前地圖使用的是第三紀元（Third Age）的版本，這對於標注第一紀元的精靈寶鑽事件來說，在地理上存在一定的誤差，因為第一紀元結束後，貝勒爾蘭（Beleriand）地區已沉入大海，根本無法在現有地圖上定位。Marlow 也坦承這是一個限制，並表示若能找到合適的原始素材，不排除未來製作分紀元的版本。

部分托爾金考據派指出了幾處地標位置的誤差，例如西力斯昂哥（Cirith Ungol，即《王者再臨》中佛羅多被囚禁之處）與日落之窗（Henneth Annûn，法拉墨的藏身地）的座標標記偏北偏東，與書中描述不符。Marlow 表示已記錄下來，將陸續修正。

另有一些網友對「vibe coding」方式的使用帶著複雜的情感。有人認為，原本以為開發者是懷抱對托爾金的熱情、親自鑽研每一處細節，但得知是 AI 生成後，那份感覺稍微打了折扣。Marlow 的回應是：「我完全理解。但實際上，我建造這張地圖正是為了親自探索托爾金的傳說年代記，因為我對它深深著迷。這是我分享所學的方式，整個過程我也學到了很多。」

什麼是 Vibe Coding？

「Vibe coding」這個詞由 OpenAI 共同創辦人、前特斯拉 AI 主管 Andrej Karpathy 於 2025 年 2 月創造，意指開發者以自然語言描述需求，讓大型語言模型自動生成程式碼，並且不深入閱讀或理解所有生成的程式碼細節，而是透過測試結果與後續提示來引導修改方向。這個詞在同年 3 月被《韋氏大辭典》收錄為「俚語與流行用語」，並獲《柯林斯英語辭典》選為 2025 年度詞彙。

Marlow 的這個專案展示了 vibe coding 在個人興趣專案上的優勢所在，它讓一個熱愛托爾金的普通人，得以在搭機的零碎時間裡，把腦海中的想像具體化成一個對所有書迷都有實用價值的工具，而不需要從零開始學習地圖開發的全套技術。