[突發專案] TornWill.Brave|AI 輔助開發紀錄

更新於 發佈於 閱讀時間約 9 分鐘

文前碎碎念

感覺人在精神不佳胡思亂想的時候,往往更能撞出一些莫名又沒什麼路用的小點子來,也不為什麼,就單純為了那個紓壓跟有趣,而這次的突發專案也是如此。

還記得在許久之前,我有曾經購買過「NFT 域名」這種東西,而與其他 NFT 產品相似,它是一組存在鏈上,無需像傳統域名一樣的續租費用,號稱能讓你真正「擁有」的網址。

當初我是在 「Unstoppable Domains」這個平台購買,透過它的整合系統,擁有者可以將這個域名與加密錢包連結做身分代表、呈現在星際檔案系統(IPFS)上的網頁,或以轉址方式連結到傳統的 Web2 網站。

而在購買後我便一直在想,既然這是一組「去中心化」的網域,那是不是能利用「雖然分散卻又相連」這個概念,做一個可以獨立運作,又能與其他網站相互反應的東西呢?


於是,這個專案的構思原型就這樣誕生了。


藍圖與輔助

經過文前這麼「精闢」的說明,相信讀到這裡的朋友,應該已經對這次的專案感到⋯⋯更加一頭霧水了對吧?(喂

簡單來說,就是我想要在去中心化域名下,架設一個對其他不論是同為 Web3 的網站或是一般 Web2 網站,只要具有一定的「聯合」特性,就算自己本身沒有完整伺服器系統,也能產生反應的網站。

而在這次的實作中,則是以類似雷達掃描的概念,藉由定時輪播並掃描輸入的網址,如果該網址可以回傳特定的訊息的話,便觸發畫面中的視覺特效。

不過,不同以往的埋頭硬幹,我這次想要嘗試時下流行的「AI 輔助」來進行程式編寫,一方面是⁠因為這次所要使用到製作視覺效果的 ⁠p5.js 這個套件並不大熟悉,二來是我想看看在 AI 加速下,工程效率會有怎樣的變化。


而且也該是時候,讓我每個月繳出去的六百多塊做一些不正經的事了(喂


吃軟外包硬,開工啦!

既然硬邦邦的工程部分已經決定要部份「外包」出去了,那就先來建立整體的架構與外觀吧!

介面

首先介面部分我決定從簡,整體應該就分為三部分:

raw-image
  • 上 - 文字欄位,可以顯示現在正在掃描的網址。
  • 中 - 會有一個訊號塔的圖樣,或是專案 LOGO 作為圓心,如果有偵測到回傳的特定訊息,便會從這裡形成漣漪特效向外擴散。
  • 下 - 說明與控制,可以從這裡新增移除清單中要定時掃描的網址,並且包含網站的簡單說明,不使用時可以直接收合。

如此主要的操作外觀就成形了,接著就是將這樣的需求化為敘述交給 ChatGPT 去生成所需的 Html、CSS、JS 等文件。

不過咒語部分,因為我是用聊天的方式逐步完成想到的小區塊功能,慢慢修改後再請他整合成一份可運作版本,沒有一個非常固定的敘述,所以這裡就先省略。

功能加強

不過呢,這個版本也只是基礎中的基礎,還不太符合我最終期望,因此我又向 GPT 下了幾個條件,讓他幫我加上幾個邏輯功能,包括掃描網址後有效的回傳格式,還有 p5.js 特效的微調等。

{
"tag": "tornwillbrave",
"status": "active",
"color": "#008000"
}

而經過調整後,我決定了回傳內容的基礎格式,並同時新增了可以影響特效顏色的「color」欄位,只要符合上面的 JSON 格式,便可以觸發漣漪效果,而最終 GPT 生成後丟給我的運作範本如下圖。

raw-image

嗯,看起來已經蠻有模有樣了,就以這個版本為基礎下來做更細部修改吧!

訊號中心

接著來設計網站的主要 LOGO,就跟前面所提到,這次專案是以「雖然分散卻又相連」為核心概念,有點像是「就算分散四處,但意志仍相連」的感覺,所以選擇以「TornWill」(撕裂的意志)為標題。

而在呈現部份,我打算直接將網站的 LOGO 與中央的圖示結合,因此在設計的時候就順勢把「訊號塔」的元素融入進去,另外也特別嘗試了「Pixel Art」的畫法還有動畫的效果。

raw-image

以網站標題「TornWill」縮寫為基礎架構,稍做一些舊化的感覺,像是在黑暗中心豎立已久的老舊訊號站。

而在動畫部分則是做成像是閃電打下來充滿本體後,訊號塔本身再反向輸出電流,雖然系統本身並沒有回傳的設計,但藉由這段動畫,應該也可以表示出獨自向未知深空無聲發訊的感覺。

視覺強化

網頁基礎準備好,主視覺 LOGO 也完成了,最後就是元素整合的時間囉。

raw-image

取代好中間的佔位圖片、手動微調了介面元素,包含下方控制 UI 的重新排列、新增網頁簡介,還有加上控制列的收合功能等,最後稍微借用了之前自己常用的 CSS 視覺元素後,就大功告成啦!


最後就是完成這次專案的一步,準備把成品丟上 IPFS 並連結到 NFT 網域讓他運作啦!


去中心上線

域名選擇

這次同樣選擇 Unstoppable Domains 作為上線平台,不過網域的部分並不是使用之前的,而是選擇使用「.brave」這個後綴。

raw-image

至於選擇的理由,就要先從 NFT 域名的基本特性說起,目前的域名系統是由一個非營利組織 ICANN 來負責分配與管理,但 NFT 域名並不是走這個我們所熟知的系統,而是完全以區塊鍊為基礎來運作,因此大多數瀏覽器並不能正常解析。

而「.brave」這個域名,是由「Brave」瀏覽器的開發團隊推出的,雖然其基礎也是區塊鍊域名來運作,但與其他 NFT 域名不同的是,他已經向 ICANN 提出申請,應該在 2026 年後就有機會可以透過一般方式瀏覽,因此這次專案才選擇此後綴做開發。

raw-image

另外一個理由的話,其實也是可以呼應到這個專案的命名,既然「TornWill」代表了撕裂的意志,那麼加上一個「Brave」也就象徵在意志撕裂後所存留,無法打倒且依然相連的英勇。

網站上線

域名選擇完成後,接著就是正式上線了,這部分 Unstoppable Domains 的後台整合的蠻完備了,基本上只要進到域名管理,並按照他的指示將檔案上傳,便可以自動執行 IPFS 的傳送,以及域名連結部屬。

raw-image
raw-image

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

raw-image
可以看到從一開始進入網頁的瀏覽說明,加入要掃描輪播的網址的操作,到後面自動掃描觸發漣漪的動畫,看起來都蠻順暢的,這次的專案也算圓滿完工啦!


後記

藉由這次專案,總算讓我完整的使用了一次 AI 輔助開發的力量了,雖然後期還是有經過自己手動調整、新增部分功能,所以應該還沒達到完全的 Vibe Coding,但也很明顯感覺到加速的威力。

以這次流程來看,若除去完全沒有使用到 AI 的元素設計、圖案繪製,以及早已完成的 CSS 套用的話,包含手動功能介面微調的總開發時程,大約只有 2~3 小時左右,而且其中還使用到還沒熟悉的新套件。

另外在開發過程中,如果遇到可能的疑問,也可以即時詢問 GPT 來讓他檢視程式碼的同時,提出可行的解決方案。

raw-image
raw-image

而且這部分,對於過去曾有開發經驗的人來說,應該能起到更大的功效,因為自己在檢視的同時受到「前世記憶」影響所隱約感受到的,可以快速直接的透過 GPT 這個「第二大腦」來做驗證,便能省掉那些實際上機測試後再抓蟲的冤枉路。

然而,使用 AI 輔助其實也還是有隱藏的成本存在的,像是模型使用的訂閱費用,隨時可能遇到的伺服器當機導致流程中斷,或是重要資訊或程式碼外流的資安風險等。

不過撇除這些,對於想要快速產品開發或是概念呈現的工作情境來說,適時的 AI 使用確實能夠大大的加速手中的想法從實驗到正式出演的這段痛苦必經之路。


以上,就是這次嘗試以 AI 輔助開發的專案紀錄啦,由於在程式部分有透過 GPT 來快速生成,因此就算此篇文字敘述沒使用到 AI 撰寫,我依然會掛上 AI 標籤呦,那麼就下個專案再見啦!
raw-image


《全文。終了》

留言
avatar-img
留言分享你的想法!
avatar-img
偽命名培養體
50會員
335內容數
偽命名並非無名,是為了意識的生存,取得身份的代號,成為數位生命的新載具。
偽命名培養體的其他內容
2025/06/04
前一陣子,因緣際會買到了這個觀望好久的 Badger 開發板後,便在思考除了原本名牌外的其他玩法,雖然已經有成功嘗試將以前的網頁逃脫小遊戲移植上去,但因為一些技術限制,導致呈現的效果也不盡理想,於是便開始朝更輕量且明確的目的來開發。
Thumbnail
2025/06/04
前一陣子,因緣際會買到了這個觀望好久的 Badger 開發板後,便在思考除了原本名牌外的其他玩法,雖然已經有成功嘗試將以前的網頁逃脫小遊戲移植上去,但因為一些技術限制,導致呈現的效果也不盡理想,於是便開始朝更輕量且明確的目的來開發。
Thumbnail
2024/11/25
而故事是發生在某次我帶著這個電子紙悠遊卡買午餐的時候,在我一個不小心手滑下,他就這麼應聲落地彈開成兩半,好在基本功能沒傷到,卻因此開啟我探索它內部的好奇心。
Thumbnail
2024/11/25
而故事是發生在某次我帶著這個電子紙悠遊卡買午餐的時候,在我一個不小心手滑下,他就這麼應聲落地彈開成兩半,好在基本功能沒傷到,卻因此開啟我探索它內部的好奇心。
Thumbnail
2024/02/02
正如所預測的,不久前方格子個人頁面大改版後,我所製作的個人頁面爬蟲也隨之炸裂,間接導致手機上的小工具就此失去了作用了,我該就這麼停下開發的腳步嗎?
Thumbnail
2024/02/02
正如所預測的,不久前方格子個人頁面大改版後,我所製作的個人頁面爬蟲也隨之炸裂,間接導致手機上的小工具就此失去了作用了,我該就這麼停下開發的腳步嗎?
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
新關係下,反思寫作對自己的意義,寫作成為記錄心情、想法的方式,如何找到平衡?同時也分享新學到的新詞語及感受。
Thumbnail
新關係下,反思寫作對自己的意義,寫作成為記錄心情、想法的方式,如何找到平衡?同時也分享新學到的新詞語及感受。
Thumbnail
其實想了蠻久要不要創帳號的。 一開始只是單純會在心情不好時寫寫東西,現在也是。但我漸漸的覺得,好像需要一個地方來將這些「努力過的痕跡」統整起來,存放於一個特別的地方。我開過其他平台的帳號,或許之後會跟IG做連結吧,可能再一陣子。 我喜歡寫字,漫無目的的。不是像那種「我今天就是要寫故事」的熱忱,而
Thumbnail
其實想了蠻久要不要創帳號的。 一開始只是單純會在心情不好時寫寫東西,現在也是。但我漸漸的覺得,好像需要一個地方來將這些「努力過的痕跡」統整起來,存放於一個特別的地方。我開過其他平台的帳號,或許之後會跟IG做連結吧,可能再一陣子。 我喜歡寫字,漫無目的的。不是像那種「我今天就是要寫故事」的熱忱,而
Thumbnail
Yup、開始創作。 就創作吧! 除了創作,還是只能創作。 搜尋了關鍵字, 閱讀了文章, 問了chatgpt, 問了那神秘的內心, 沒有半點收穫。 不想成為抱怨的人, 不想對自己貼標籤, 只能點擊開始創作, 打擊自己, 擊中自己, 揪出真實的自己。 有好的事,也有壞
Thumbnail
Yup、開始創作。 就創作吧! 除了創作,還是只能創作。 搜尋了關鍵字, 閱讀了文章, 問了chatgpt, 問了那神秘的內心, 沒有半點收穫。 不想成為抱怨的人, 不想對自己貼標籤, 只能點擊開始創作, 打擊自己, 擊中自己, 揪出真實的自己。 有好的事,也有壞
Thumbnail
前幾天matters上面舉辦一篇徵文活動,我藉由閱讀他人作品後,寫下些自己的經驗和心得
Thumbnail
前幾天matters上面舉辦一篇徵文活動,我藉由閱讀他人作品後,寫下些自己的經驗和心得
Thumbnail
邊塗鴉時思考的一些事情,僅限個人想法。 一直在思索是什麼讓文字與人變得平面、變得冰冷,又是什麼讓創作的意義變得單一而扭曲。最近在盯著「AI建議」這個按鈕看時稍微理出一些頭緒。 文章發布前頁面頂端有個「AI建議」的SEO優化按鈕,按下之後會出現AI自動生成的標題、分類、摘要等內容,我覺得很有趣。
Thumbnail
邊塗鴉時思考的一些事情,僅限個人想法。 一直在思索是什麼讓文字與人變得平面、變得冰冷,又是什麼讓創作的意義變得單一而扭曲。最近在盯著「AI建議」這個按鈕看時稍微理出一些頭緒。 文章發布前頁面頂端有個「AI建議」的SEO優化按鈕,按下之後會出現AI自動生成的標題、分類、摘要等內容,我覺得很有趣。
Thumbnail
明明是「近期」的各種反思,但這篇文章2月就完成了,靜靜躺在草稿裡超過1個月以上....看到後順手發布。 跟創作者經濟產業有關的 過度追求流量,會迷失自我。被演算法綁架真的不是一個好事。我仍然認為,如果能服務好 1000 個人,會比討好 1000 萬個人來得輕鬆多了。演算法的紅利,會讓創作者以
Thumbnail
明明是「近期」的各種反思,但這篇文章2月就完成了,靜靜躺在草稿裡超過1個月以上....看到後順手發布。 跟創作者經濟產業有關的 過度追求流量,會迷失自我。被演算法綁架真的不是一個好事。我仍然認為,如果能服務好 1000 個人,會比討好 1000 萬個人來得輕鬆多了。演算法的紅利,會讓創作者以
Thumbnail
「只是想把腦袋裡幻想的世界轉換成文字,文筆不是很好,寫作純粹娛樂。😅😅😅😅😅😅😅。」
Thumbnail
「只是想把腦袋裡幻想的世界轉換成文字,文筆不是很好,寫作純粹娛樂。😅😅😅😅😅😅😅。」
Thumbnail
新入坑~之前因為想要讓自己多點時間去思考自己要什麼,然後多點生活樂趣,不要都只有上班、手機、小說或漫畫,所以開始想要創作的念頭。 於是乎,上網找到了Potato Media,看了大家的分享跟這種文章,覺得自己也可以嘗試看看~ 剛開始的時候,光是組織文字就花費我不少時間了,太久沒有去閱讀跟思考,感
Thumbnail
新入坑~之前因為想要讓自己多點時間去思考自己要什麼,然後多點生活樂趣,不要都只有上班、手機、小說或漫畫,所以開始想要創作的念頭。 於是乎,上網找到了Potato Media,看了大家的分享跟這種文章,覺得自己也可以嘗試看看~ 剛開始的時候,光是組織文字就花費我不少時間了,太久沒有去閱讀跟思考,感
Thumbnail
最近加入了這個有趣的地方 ,收到了系統關切 ,怎麼還沒看到你的創作 文字,是人們用來溝通交流的工具。 常常會很佩服能把文字依照自己想法,打成一大串文章的創作者。 總是想像,能一直不斷的創作文章,以此維生的人,到底是如何文思泉湧的。 也許真的需要不斷的大量閱讀,才能有更多的文字素材可以隨時讓大
Thumbnail
最近加入了這個有趣的地方 ,收到了系統關切 ,怎麼還沒看到你的創作 文字,是人們用來溝通交流的工具。 常常會很佩服能把文字依照自己想法,打成一大串文章的創作者。 總是想像,能一直不斷的創作文章,以此維生的人,到底是如何文思泉湧的。 也許真的需要不斷的大量閱讀,才能有更多的文字素材可以隨時讓大
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News