Re:write，改寫你的人生！我用兩週實作了一個互動敘事網站

Re:write，你是人生這場遊戲的主角！

人生就像一場電腦遊戲，你一直握有掌控權

這是 Re:write 這個互動網頁想帶來的啟發。這篇文章將會拆解我是怎麼透過 AI 幫助，實作兩週就完成這個專案，若還沒有體驗過 Re:write，歡迎先去玩玩看！

起心動念

起初是看到一個 Instagram reel，內容在講人生就像遊戲一樣，大家都擁有掌控權，但是不知道 controller 就握在自己手裡。我對這篇 reel 很有共鳴，因為一直很想做一個運用 three.js 講故事的網頁，就決定動手了！

架構與發想過程

一開始畫了 wireframe，來思考甚麼時候斷句、甚麼時候當作一個 scene、甚麼時候會需要轉折、哪些地方是 highlight 等等。

但就算畫好畫面、腦海中有大概的方向，還是不確定在實作上能做到甚麼程度，所以決定要先做 spike：全部用 placeholder 去把會有甚麼圖層、文字會怎麼出現、角色會怎麼移動，還有轉場的特效會怎麼呈現都先做出來。

我想要的畫面是可以互動的 2.5D 視覺，滑鼠在上面移動會有視覺落差，並且角色會隨著滾輪滑動而移動，文字也會跟著角色和背景出現。在這階段主要是確認想要實現的畫面技術上可行。

就算 spike 證明技術上可實現，轉場的畫面也很重要，所以也做了一個轉場的 lab，套用 post-processing 的特效，去實驗這些特效在畫面上的實際效果如何。

正式實作

畫面的 spike 跟轉場的實驗都告一段落後，在正式開始量產內容之前，我先做了整備：把資料模型寫成規格，這樣後續增加場景只要照規格填表就好，不用一直重寫架構；並且訂下整個網站的座標軸，讓全部的故事線是一個 0~1 的進度值，所有場景、文字、動畫都掛在這個數字上，而且避免讓捲動的更新導致 React 重繪，讓效能不要崩潰。

整備完，接下來就要來面對素材了！對於素材我是最沒有把握的，因為想要走手繪風格，但又怕自己的畫畫能力不足以呈現夠好的畫面。動手設計了主角小幽靈的造型、定調了風格之後，就有點半放棄，覺得這樣產素材不知道要做到何年何月，但我發現 Claude Fable 竟然可以寫一支程式把圖算出來！

兩週完成實作的關鍵！我的素材是程式碼

Fable 先幫自己寫了一套手繪筆刷，並且幫每個場景都寫函式套用這些筆刷組合，所以我的素材不是圖檔，是程式碼，改圖不用重畫！

舉例來說，如果我要改主角的樣子，我只要下一個 prompt 像是：給幽靈加上小手，它改個幾行程式碼後重跑一次腳本，就能產出新的圖。這就是迭代速度的關鍵，如果素材是一張一張畫的，就絕對沒辦法這麼快完成。

而且那時候 Fable 剛出來，說只會開放幾天能用，所以我有天一次推了 54 個 commit，一天內把主要素材都產完了。做完之後才發現 Fable reset 了，根本可以慢慢來不用急…。

收尾

雖然一天內做完主要的素材，但後續的收尾工作其實也持續了一週左右。最花功夫的是手機：滑鼠滾輪的體驗在觸控螢幕上完全是另一回事，思考了一下後重新做了手勢按鈕和進度 UI，還要處理手機瀏覽器的自動播放限制，讓靜音模式下開了聲音後也可以聽到音效。

最後加上了 reduced-motion 支援，如果系統有設定「減少動態效果」的使用者，進來時背景動畫就會自動停用。到此這個專案就差不多告一段落了。

工作流程

這個專案如下：

1. 先想清楚要解決什麼（概念先行，而不是先挑效果）。
2. 投入之前就知道技術行不行，先 spike 確認技術狀況。
3. 把架構寫成規格，讓後面的內容能量產跟方便改動。
4. 收尾時做到手機、無障礙、瀏覽器限制等等考量。

AI 改變的是執行速度，但概念、故事、美術方向，還有上千個「感覺對不對」的決定，仍然得有人做。現在稀缺的不是把東西做出來的能力，是知道什麼值得做、以及分辨它是否有做對。

結論

Fable 讓我有機會把一個概念型專案快速落地，能生在這個技術奇異點的時代真的很有趣。但真正讓這個專案成立的，是把素材變成程式碼的那個決定，還有前面那些看起來很慢的 wireframe 和 spike。

希望這篇對你有一點啟發！

如果你正在想做一個互動敘事網站、品牌體驗的網頁，歡迎找我聊聊～