文前碎碎念
感覺人在精神不佳胡思亂想的時候,往往更能撞出一些莫名又沒什麼路用的小點子來,也不為什麼,就單純為了那個紓壓跟有趣,而這次的突發專案也是如此。
還記得在許久之前,我有曾經購買過「NFT 域名」這種東西,而與其他 NFT 產品相似,它是一組存在鏈上,無需像傳統域名一樣的續租費用,號稱能讓你真正「擁有」的網址。
當初我是在 「Unstoppable Domains」這個平台購買,透過它的整合系統,擁有者可以將這個域名與加密錢包連結做身分代表、呈現在星際檔案系統(IPFS)上的網頁,或以轉址方式連結到傳統的 Web2 網站。而在購買後我便一直在想,既然這是一組「去中心化」的網域,那是不是能利用「雖然分散卻又相連」這個概念,做一個可以獨立運作,又能與其他網站相互反應的東西呢?
於是,這個專案的構思原型就這樣誕生了。
藍圖與輔助
經過文前這麼「精闢」的說明,相信讀到這裡的朋友,應該已經對這次的專案感到⋯⋯更加一頭霧水了對吧?(喂
簡單來說,就是我想要在去中心化域名下,架設一個對其他不論是同為 Web3 的網站或是一般 Web2 網站,只要具有一定的「聯合」特性,就算自己本身沒有完整伺服器系統,也能產生反應的網站。
而在這次的實作中,則是以類似雷達掃描的概念,藉由定時輪播並掃描輸入的網址,如果該網址可以回傳特定的訊息的話,便觸發畫面中的視覺特效。
不過,不同以往的埋頭硬幹,我這次想要嘗試時下流行的「AI 輔助」來進行程式編寫,一方面是因為這次所要使用到製作視覺效果的 p5.js 這個套件並不大熟悉,二來是我想看看在 AI 加速下,工程效率會有怎樣的變化。
而且也該是時候,讓我每個月繳出去的六百多塊做一些不正經的事了(喂
吃軟外包硬,開工啦!
既然硬邦邦的工程部分已經決定要部份「外包」出去了,那就先來建立整體的架構與外觀吧!
介面
首先介面部分我決定從簡,整體應該就分為三部分:

- 上 - 文字欄位,可以顯示現在正在掃描的網址。
- 中 - 會有一個訊號塔的圖樣,或是專案 LOGO 作為圓心,如果有偵測到回傳的特定訊息,便會從這裡形成漣漪特效向外擴散。
- 下 - 說明與控制,可以從這裡新增移除清單中要定時掃描的網址,並且包含網站的簡單說明,不使用時可以直接收合。
如此主要的操作外觀就成形了,接著就是將這樣的需求化為敘述交給 ChatGPT 去生成所需的 Html、CSS、JS 等文件。
不過咒語部分,因為我是用聊天的方式逐步完成想到的小區塊功能,慢慢修改後再請他整合成一份可運作版本,沒有一個非常固定的敘述,所以這裡就先省略。
功能加強
不過呢,這個版本也只是基礎中的基礎,還不太符合我最終期望,因此我又向 GPT 下了幾個條件,讓他幫我加上幾個邏輯功能,包括掃描網址後有效的回傳格式,還有 p5.js 特效的微調等。
{
"tag": "tornwillbrave",
"status": "active",
"color": "#008000"
}
而經過調整後,我決定了回傳內容的基礎格式,並同時新增了可以影響特效顏色的「color」欄位,只要符合上面的 JSON 格式,便可以觸發漣漪效果,而最終 GPT 生成後丟給我的運作範本如下圖。

嗯,看起來已經蠻有模有樣了,就以這個版本為基礎下來做更細部修改吧!
訊號中心
接著來設計網站的主要 LOGO,就跟前面所提到,這次專案是以「雖然分散卻又相連」為核心概念,有點像是「就算分散四處,但意志仍相連」的感覺,所以選擇以「TornWill」(撕裂的意志)為標題。
而在呈現部份,我打算直接將網站的 LOGO 與中央的圖示結合,因此在設計的時候就順勢把「訊號塔」的元素融入進去,另外也特別嘗試了「Pixel Art」的畫法還有動畫的效果。

以網站標題「TornWill」縮寫為基礎架構,稍做一些舊化的感覺,像是在黑暗中心豎立已久的老舊訊號站。
而在動畫部分則是做成像是閃電打下來充滿本體後,訊號塔本身再反向輸出電流,雖然系統本身並沒有回傳的設計,但藉由這段動畫,應該也可以表示出獨自向未知深空無聲發訊的感覺。
視覺強化
網頁基礎準備好,主視覺 LOGO 也完成了,最後就是元素整合的時間囉。

取代好中間的佔位圖片、手動微調了介面元素,包含下方控制 UI 的重新排列、新增網頁簡介,還有加上控制列的收合功能等,最後稍微借用了之前自己常用的 CSS 視覺元素後,就大功告成啦!
最後就是完成這次專案的一步,準備把成品丟上 IPFS 並連結到 NFT 網域讓他運作啦!
去中心上線
域名選擇
這次同樣選擇 Unstoppable Domains 作為上線平台,不過網域的部分並不是使用之前的,而是選擇使用「.brave」這個後綴。

至於選擇的理由,就要先從 NFT 域名的基本特性說起,目前的域名系統是由一個非營利組織 ICANN 來負責分配與管理,但 NFT 域名並不是走這個我們所熟知的系統,而是完全以區塊鍊為基礎來運作,因此大多數瀏覽器並不能正常解析。
而「.brave」這個域名,是由「Brave」瀏覽器的開發團隊推出的,雖然其基礎也是區塊鍊域名來運作,但與其他 NFT 域名不同的是,他已經向 ICANN 提出申請,應該在 2026 年後就有機會可以透過一般方式瀏覽,因此這次專案才選擇此後綴做開發。

另外一個理由的話,其實也是可以呼應到這個專案的命名,既然「TornWill」代表了撕裂的意志,那麼加上一個「Brave」也就象徵在意志撕裂後所存留,無法打倒且依然相連的英勇。
網站上線
域名選擇完成後,接著就是正式上線了,這部分 Unstoppable Domains 的後台整合的蠻完備了,基本上只要進到域名管理,並按照他的指示將檔案上傳,便可以自動執行 IPFS 的傳送,以及域名連結部屬。


最後來實際看一下成果吧,雖然正常瀏覽器沒有安裝外掛的話無法直接透過「tornwill.brave」來連線,但其實複製 IPFS 位置還是可以連上的。

可以看到從一開始進入網頁的瀏覽說明,加入要掃描輪播的網址的操作,到後面自動掃描觸發漣漪的動畫,看起來都蠻順暢的,這次的專案也算圓滿完工啦!
後記
藉由這次專案,總算讓我完整的使用了一次 AI 輔助開發的力量了,雖然後期還是有經過自己手動調整、新增部分功能,所以應該還沒達到完全的 Vibe Coding,但也很明顯感覺到加速的威力。
以這次流程來看,若除去完全沒有使用到 AI 的元素設計、圖案繪製,以及早已完成的 CSS 套用的話,包含手動功能介面微調的總開發時程,大約只有 2~3 小時左右,而且其中還使用到還沒熟悉的新套件。
另外在開發過程中,如果遇到可能的疑問,也可以即時詢問 GPT 來讓他檢視程式碼的同時,提出可行的解決方案。


而且這部分,對於過去曾有開發經驗的人來說,應該能起到更大的功效,因為自己在檢視的同時受到「前世記憶」影響所隱約感受到的,可以快速直接的透過 GPT 這個「第二大腦」來做驗證,便能省掉那些實際上機測試後再抓蟲的冤枉路。
然而,使用 AI 輔助其實也還是有隱藏的成本存在的,像是模型使用的訂閱費用,隨時可能遇到的伺服器當機導致流程中斷,或是重要資訊或程式碼外流的資安風險等。
不過撇除這些,對於想要快速產品開發或是概念呈現的工作情境來說,適時的 AI 使用確實能夠大大的加速手中的想法從實驗到正式出演的這段痛苦必經之路。
以上,就是這次嘗試以 AI 輔助開發的專案紀錄啦,由於在程式部分有透過 GPT 來快速生成,因此就算此篇文字敘述沒使用到 AI 撰寫,我依然會掛上 AI 標籤呦,那麼就下個專案再見啦!

《全文。終了》