我把 800 多份資源，蓋成一座可以逛的島嶼
✍️ 本文轉貼自《Vista 電子報》No.152，原刊於 iamvista.substack.com（另開新分頁）。如果你喜歡這樣的內容，歡迎免費訂閱《Vista 電子報》（另開新分頁），每週第一手收到我的觀察與方法。
哈囉，你好！
這週一晚上十點多，我打開 Claude Code，跟它聊起一個在腦子裡轉了好一陣子的念頭：能不能把我這些年散落在各個網站上的東西，蓋成一座可以逛的島嶼？
到了隔天清晨，這座虛擬島嶼已經上線了。它叫做「Vista 的知識群島（另開新分頁）」，網址是 island.vista.tw（另開新分頁）。
本期電子報，我想跟你聊聊這座島是怎麼蓋起來的。一方面記錄 Vibe Coding 的又一次實戰，另一方面也想鼓勵你：如果你手邊也累積了一些作品、筆記或資源，或許也可以替它們蓋一個家。
先上島逛逛
建議你先點開 island.vista.tw（另開新分頁），花兩分鐘逛一下，再回來讀下面的內容，會比較有感覺。
打開之後，你會看到海面上浮著九座低多邊形的小島。可以用滑鼠拖曳旋轉、用滾輪縮放；手機上用手指滑動、雙指縮放也行。右上角有一個「入夜」的按鈕，按下去，整片海會變成深藍色的夜空。
你不需要註冊，也不用先留 E-mail，打開就能逛唷！
一上岸，碼頭上的 Vista 小人兒會跟你打招呼，問你今天想逛逛什麼。選項只有四個：找論文的幫手、想把 AI 帶進教室、想讓工作輕鬆一點，或者先隨便看看。選好之後，點一座島，Vista 就會走在前面，帶你過橋走過去。
九座島各有各的主題：
-
研究燈塔島：一共七層，從塔基的研究生活、定題、找文獻與讀文獻，一路往上爬到燈室的上臺、口試與投稿。研究生卡在哪一關，就往那一層找。
-
講堂島：收著我在 slides.vista.tw（另開新分頁） 公開的課程與演講簡報，有興趣的朋友可以翻閱。
-
工具小鎮：lab.vista.tw（另開新分頁） 上的 AI 小工具，大多可以直接打開來用。
-
文字港：寫作心法與檢查工具，適合想把文章寫得更好的朋友。
-
著作棧橋：從 1995 年出版的第一本書走到今年，每塊木板是一本書。
-
金句海灘：我讀書時劃下的句子，裝在一個個漂流瓶裡，隨手撿起來讀。
-
觀星臺、遠方諸島，以及大家上岸的 Vista 碼頭。
加起來，島上收了 800 多份資源。其中金句海灘有 479 則金句，研究燈塔島有 236 份論文資源，其他則是工具、簡報、書與手冊。
逛的時候，看到喜歡的東西，可以按「收進行囊」。逛完之後，替你的行囊星座取一個名字，夜空就會亮起來，每樣收進來的東西都變成一顆星。最後，你可以把清單複製下來、下載，或寄到自己的信箱，也可以把星座做成一張分享卡，傳給朋友。
為什麼要蓋一座島？
講到這裡，你可能會好奇：已經有 vista.tw 主站了，為什麼還要再做一個網站？
原因很簡單。這些年我寫了很多東西，也做了很多東西，但它們散落在十幾個網站上：文章在 vista.tw，論文資源在 researcher.tw（另開新分頁），小工具在 lab.vista.tw（另開新分頁），簡報在 deck.vista.tw（另開新分頁），還有好幾本手冊放在不同的銷售頁。對我來說，每一樣東西都知道放在哪；對第一次來的朋友來說，卻像走進一座沒有地圖的倉庫。
前陣子，我看到有朋友把自己的作品整理成一座可以逛的小島，覺得很可愛，也很有啟發。不過我也想多做幾件事：
第一，不會一眼就看完。所以，這些島嶼是會持續成長的。
第二，逛完要能帶走東西。我希望訪客離開的時候不是只覺得「好可愛」，而是手上真的多了幾份用得到的資源。行囊和寄到信箱的功能，就是為了這件事設計的。
第三，下次來要看得到變化。島嶼會記得你的星座；我寫了新文章、做了新工具，島上也會自己多出新的漂流瓶和新的燈。
這三點，後來都變成了設計文件裡的第一章。
一個晚上，我是怎麼蓋起來的
很多人聽到 3D 網站，第一個反應是：這不是要很懂程式的工程師才做得出來嗎？
老實說，換作兩年前，我連想都不敢想。這次從開工到上線，我做的事情，其實跟寫一篇長文很像。我把過程整理成五個步驟，你可以參考看看。
一、先盤點，再動手
蓋島之前，我先請 AI 幫我把各個網站的資源盤點一遍：哪些是免費的、哪些要留 E-mail、哪些是付費的、哪些已經停售。
這一步很重要。盤點完我才發現，研究生的資源最豐富，老師的資源相對少，上班族的資源則分散在好幾個網站上。這直接影響了島要怎麼分區、哪座島先開放。另外，已經停售的商品、需要密碼的頁面和學員專區，也在這一步就決定不放上島。
二、說清楚「不要什麼」
我跟 AI 討論設計時，花最多時間講的，反而是不想要的東西。
比方說，我不希望訪客一上岸，就被劈頭問「你卡在哪裡？」那種感覺像在看診，不太禮貌。所以碼頭上的 Vista 虛擬人物只跟訪客寒暄，問你今天想逛什麼；比較深入的問題，要等你走進燈塔或工坊，才在那個情境裡問。
我也不希望訪客帶走東西之前，先被要求留下 E-mail。所以行囊清單可以直接複製、下載，寄信只是選項之一。
這些「不要」寫進設計文件之後，AI 每做一個決定，都可以回頭對照。這比只說「幫我做一個好看的網站」有用太多了。
三、先做小樣本，看過再蓋
我沒有一開始就叫 AI 蓋整座群島，而是先請它做一座可以拖曳旋轉的小島，含白天和夜晚兩種狀態。我看過、覺得方向對了，才繼續往下做。
原本的構想是紙雕立體書的質感，像一本攤開的書，地形是一層層紙片疊出來的。後來實際做出來之後，我又改成現在這種低多邊形的玩具風。如果一開始就蓋完九座島才發現風格要換，那就要重來一大段。先做小樣，就是用最小的成本，確認方向是對的。
四、讓 AI 寫程式，我負責判斷
程式的部分，交給 Claude Code。它用的是 three.js 這套網頁 3D 繪圖工具，再搭配 Vite 建置、部署到 Cloudflare Pages。這些名詞你不需要強記，我自己也不是每個細節都懂。
我花時間的地方，是一直站在訪客的位置去試。例如分享頁原本不能捲動、已經收進行囊的按鈕顏色太深看不清楚、著作棧橋上有兩本書的出版年份寫錯，這些都是我一邊逛一邊發現，再請 AI 修正的。從開工到天亮，這個專案一共累積了三十多次修改紀錄，大部分都是在調整這種細節。
島上的資源數字，我也來回確認了幾次。一開始寫的是「近 800 份」，實際算過之後是 814 份，最後改成比較準確的「800 多份」。AI 很會做事，但數字對不對、話會不會讓人誤會，還是要自己把關。
五、上線之後，讓它自己長大
島嶼蓋好了，我最不想做的事，就是每次寫了新文章，還得手動跑去島上補一個漂流瓶。
所以我請 AI 設定了一個每週排程：每週一清晨五點，電腦會自動去抓 vista.tw、researcher.tw、writers.tw、builder.tw 的最新文章，以及 lab.vista.tw 的新工具，重新建置、測試，再部署上線。任何一步出錯就停下來，不會把壞掉的版本推上去。
也就是說，這座島嶼會跟著我的寫作歷程一起長大。當你下個月再次造訪，應該會看到一些這次還沒有的東西。
換你動手做做看
說了這麼多，我最想跟你說的是：這件事，你也做得到。
你不一定要立刻學我蓋一座 3D 群島。如果你是老師，可以把歷年的教材整理成一個按單元分類的資源中心；如果你是研究生，可以把讀過的文獻做成一張可以篩選的地圖；如果你經營社群，可以把散在各平臺的好文章，收成一個屬於自己的作品集。
重點不在技術，而在於你願不願意先把手上有什麼、想讓誰看見、希望對方帶走什麼，想清楚、說清楚。
如果你不知道怎麼開口，可以試試這樣跟 AI 說：
我是一位（你的身分），這些年累積了（你的作品或資源，例如：五十篇文章、三份簡報、十個常用的工具）。我想做一個網頁，讓（你的讀者）可以很快找到對他有用的東西，並且把喜歡的收藏起來帶走。請先不要寫程式，先問我五個問題，幫我把需求釐清，再提出兩種不同的設計方向讓我挑選。
請注意最後那一句：先問問題、先給方向，不要急著寫程式。這是我做每一個專案都會用的開場，它會逼你把模糊的想法講清楚，也讓 AI 不會一開始就跑錯方向。
做出第一版之後，就開始一邊用、一邊改。第一版醜沒關係，我的群島一開始也是先做出一座小島，才慢慢長成九座。
對了，我看到阿亮老師也提供了【造島程式】網站生成器（另開新分頁），有興趣的朋友也可試試！
想有系統地學，可以從這本書開始
如果你看完覺得心動，卻不知道從哪裡起步，我想推薦我的新書《零基礎學 Vibe Coding：用 AI 做出網站、App 與工作自動化工具（另開新分頁）》。
這是我的第 21 本書，今年九月甫由碁峯出版，寫給從沒寫過一行程式、卻想自己動手做點什麼的朋友。書裡從怎麼跟 AI 說清楚需求開始，一路帶你做出網站、App 和工作自動化工具，最後部署上線。這次蓋島用到的觀念，像是先講清楚需求、先做小樣再擴大、讓 AI 寫程式而自己負責判斷，書裡都有完整的說明和練習。
你不需要先變成工程師。只要願意把腦子裡的想法講清楚，AI 就會陪你一步一步做出來。
如果想先試讀，目前可以在網站上免費讀第一章和第四章全文，還有配套簡報和延伸文章：vista.tw/books/vibe-coding
最後，請你幫我一個忙
這座島嶼剛蓋好，一定還有很多不完美的地方。如果你逛的時候發現哪裡卡住、哪裡看不懂，或是希望島上多一些什麼資源，歡迎直接回信告訴我。
也歡迎你逛完之後，轉分享給更多朋友！同時，也歡迎把你的星座分享卡傳給我看看，我很好奇大家會替自己的星座取什麼名字。
如果你也動手做了自己的小島、資源頁或作品集，更要讓我知道。說不定，下一期電子報就會介紹你的作品。
我們下次見！
Vista
📮 本文轉貼自《Vista 電子報》No.152，原文請見 iamvista.substack.com/p/vista-no152-800（另開新分頁）。如果你喜歡這樣的內容，歡迎免費訂閱《Vista 電子報》（另開新分頁），每週收到一封有用的信。
讀完，下一步
把內容做成一套系統
AI 內容產製系統工作坊
一份素材，自動產出六種格式
繼續讀：AI 實戰應用指南動手試：Vibe Coding 選案器（另開新分頁）
