久違的撿起了筆撰寫文章，搭上這次 GPT-6 新模型的浪潮，我冒出頭來搞點事了！
我現在網站的這個前端設計就是新的主題，這個全新的介面只花了5個小時左右就做出來了！
我覺得這個新主題介面，比過往任何一個我的個人網站主題都讓我更滿意。 不然為什麼會改新的主題
不過如果有時間的話，我會選擇手刻，可能因為覺得這是自己想做的作品，應當自己純手工吧。但這次考量到時間的緊湊，我想短期內做好上線，加上我相信就算沒有AI，我自己也有足夠的能力做出來，只是時間問題，那這次就讓AI代工看看吧，讓我感受一下新一代的AI浪潮。
前言
前幾天我在Thread看到一個留言：
AI 時代來臨，AI 的蓬勃發展讓更多 INTP、ENTP 人格展露頭角，最近很多創業家或者富豪榜 Top 前幾都有 INTP 跟 ENTP 的蹤影。
看到這句話，然後伴隨著 GPT 新出的 GPT-6 Astra 的模型來臨，加上號稱不會軟體的育兒媽媽都能寫出動畫等級的網站。
身為一個ENTP，我整個就是
喔？真的嗎？咱 NTP 要出頭天了嗎？ 唉唷，讓我也來試試看。
要知道近2-3年讓 AI 代工寫程式的風潮蓬勃發展，但我本人始終堅持自己純手工寫程式，或者片段詢問AI，就是因為我內心還是質疑AI寫程式的品質。
或者我本人還是享受這種一步一步把東西寫出來，或者刪程式的快感
之所以會是 NTP 的大時代來臨，我猜應該是因為這個 MBTI 的人格類型有著最奇耙、腦洞最大的 Ne 八維居於功能排名前兩位，強烈的好奇心跟想像力再加上 AI 代工，可以把各種奇耙點子落地。
你，準備好了嗎！！！
動機
最大的核心還是有沒有美感這件事 (燦笑)
身為一個後端起家的軟體工程師，「腦袋有畫面，卻不知道怎麼把畫面具體化」一直是我做前端時最大的痛點。
內心充滿滿滿火熱想創造各種美麗、炫砲的前端設計，網站永遠就是只想得到幾個分頁：首頁、關於我、作品集、聯絡我跟作品集。腦袋各種風格什麼宇宙星光、月影感性、暗黑理性風格在腦袋都跑了一大圈，實際上操作Figma時，也還是只拉出幾個正方形跟圓形。
雖然深知只要字型用的好、毛玻璃使用得當還有排版跟色彩調整的好，美感就出來的，但腦袋還是沒有任何的畫面。
我能說 GPT 簡直救贖了我的心靈 ...，好我們停止這種高度吹捧的行為
其實這篇文章是在2026/6月左右創立，當時的文章標題叫做「侘寂(Wabi-Sabi)：新的網頁主題發布！請 Claude AI 幫我設計新的網站主題」，當時我使用 Claude 設計了網站新的主題的UI介面，還是Claude直接產出HTML跟CSS，最後我請Claude片段幫我寫成Next.js程式，好像還是用了一週左右的時間才做好，主題名稱稱為 侘寂(Wabi-Sabi)。
在還沒改侘寂(Wabi-Sabi)主題前，我還是沿用我2022年自己設計的網站，某次點開我的個人網站時，發現
天啊我的網站怎麼這麼醜。
所以引發我想改朝換代的心情，當時聽說 Claude 設計 UI 很強大，所以也就搭上那個風潮實踐了上一個網站主題 - 侘寂(Wabi-Sabi)
連結只是當時 Claude 幫我出的樣板網站，但是整體的排版跟色調就是我上一版真實在使用的主題。
當時的身心靈處在一長段相對低潮的狀態，是一個正在療傷跟緩慢療癒的時刻，我的內心更想處在像是深山寺廟裡的情境，所以網站的設計想參考像是清水寺那樣的風格，更偏向內斂、靜態、簡約的日式網站設計，有機會再將上一版的主題釋出一個Demo發上來。
而至於為什麼又想改成目前這版的設計，除了搭上最新的 Astra 模型以外，我當時也覺得 侘寂(Wabi-Sabi) 的設計好像過於簡約、日式跟單調，沒辦法充分展現出我是一個有能力的軟體工程師，還有展現出我的靈魂。
還有就是，我某天改履歷，準備找新工作時，我打開了眾 Side-projects，然後我突然備感
為什麼我做的 Side-projects 看起來這麼像大學專案？
於是，也刺激我開啟了這次改版的動機。
所以這個網站的演化史大致上就是這樣
- 2015 以前 使用 FC2 跟 Aemba 部落格服務
- 2016 改用 Blogger
- 2017 轉戰 Wordpress - @Mina's Life travel
- 2019 使用 Hugo 框架架站 - 使用 Hugo 主題 Hugo Future Imperfect
- 2022 自學前端框架並首次挑戰自己操刀設計網站 - Own Influence
- 2025 用 Next.js 重構網站
- 2026/4 請 Claude 設計新主題 - 侘寂(Wabi-Sabi)
- 2026/9 和 GPT 合作做出現在的網站主題 -
Digital Field Journal(也就是你現在看到的)
前置作業
網站的靈魂
我認為最重要的是 Idea, Idea, Idea !!!
你想透過這個網站呈現什麼風格、想透過這個網站表達跟傳遞什麼訊息，核心的靈魂跟概念是什麼。
腦袋有沒有大致上希望這個網站呈現的風格、給人的感覺、大致上的排版。
- 網站想傳達的核心理念、概念
- 你想讓讀者看到什麼、感受到什麼風格
- 你有什麼內容要擺、你希望怎麼呈現這些內容
設計很多次個人網站感受到設計前必須先想好這個網站的核心理念跟靈魂，不然其實後續會不知道方向是什麼，越做越模糊，等到覺得迷路時，又得回歸最初衷，也就是這個網站想要呈現跟表達什麼。
但因為我的網站內容已經是好幾年累積下來的，所以自然很清晰的有我的作品、我過往撰寫的文章為主體。我在上一版本或者前面版本的主題最大的問題，其實就是我想呈現太多內容，因為當時我就是很沒自信所以想讓大家知道我很厲害，但反而呈現了太多很不必要的內容。
在這次的版本一次做改變。
而對 GPT 下的 Prompt 是這樣的範例：
我有一個個人網站，已經有主題了。 [link] 但是我現在想要開發新的網站主題，我現在的想法是 桌面網頁版，想擺一張橫幅的照片，可能是我在國外拿著手機自拍（但是照片是別人拍我拿著手機自拍的照片，背後可能是美麗的風景像是馬特洪峰、富士山，或者我坐在冰河列車上看著窗外的圖片，而手機版就是直立照片。
然後右上角 Navbar 只要簡單的
首頁 / 文章 / 履歷主頁內容就是 Header、About、Portfolio、Blog posts、Contact。 然後圖片固定住，內容上下滑。 整體感覺可以使用有點模糊、毛玻璃以及白色字的設計。 帶出那種清冷、抽離、世外桃源感，但是照片又會給人一種明亮活潑感。
將目前的需求、想要網站呈現的風格、我擁有什麼內容跟各種細節補充勁量講的精準清楚一點。
接著請 GPT 產出 Mockup 設計，可能是 HTML 或者程式，但他這次產出了 Mockup 圖檔給我，而我最驚訝的就是只有圖檔，Astra還是做得出來，而且跟Mockup高度相似。
這是 GPT 產出的範例圖，我實際也是提供這個給Codex改我的程式：
多和 GPT 討論細節，可以的話針對每個頁面或者頁面細節盡量產出設計。
部署空間 與 Teckstack
通常 GPT 或者 Claude 產出的會是自帶 CSS 的 HTML 檔案，沒接觸過軟體領域的人可能不知道人如果想讓別人看到網站，是需要將網站放到一個空間、或者架起伺服器運作，稱作部署服務、部署空間。
不然 Thread 上就不會有一堆 localhost:8080 的笑話了
所以需要先想好網站要部署在哪裡，個人網站跟作品集的話，最簡單就是選擇Github Page，在困難一點就放在 Vercel, Heroku 或者相似的服務。需求複雜需要自己架設伺服器或雲端服務的話，就要自己研究了。
再來就是選擇使用什麼程式語言或者框架進行製作，根據你的商業 / 業務需求來去選擇相對應的程式語言。個人網站、部落格最簡單應該就是像是Jamstack服務，一站式活動頁面也可以使用React.js、Vue.js之類的，我最早是使用Hugo架站，後來想學前端框架，所以使用了Next.js、React.js進行重構。
當然如果網站不複雜，不太需要維護/新增而外內容，那純手工 HTML/CSS/JS也可以。
當然可能也有我孤陋寡聞，有其他更適合的程式語言也說不定。
如何開工做出網站？
當和 GPT 討論出結果，並請 GPT 發出 Mockup (可能是HTML檔案，也可能就是一張圖呈現網站樣子)，就可以開始動工。
我使用的是 VSCode + 外掛 Extensions Codex ，搭配付費的 GPT Plus 最新模型 GPT-6 Astra 來實作網站。
實作步驟：
- 列出實作規劃
- 逐步實作功能
- 收尾調整
＊在正式製作之前，還想提醒記得使用Git，並在逐步實作功能的每個步驟之中使用Git存檔上傳。
Promt 的內容，因為我的話比較多，所以內容長這樣：
我的專案路徑、目前專案的狀態、細節需要的點、貼出新設計的 Mockup (上傳圖)、詢問Codex打算如何修改？
我的專案路徑在 /projects/test-site/，我的這個專案之前設計的一個主題，目前舊主題擁有大量的程式碼，我已經幫 /page.js 這個檔案裡寫好功能架構，內容都在/components 裡，你可以照著這個功能架構施工。 我已經附檔貼上GPT幫我設計的 Mockup，內容有 Sidebar，順序是 Hero、 ToC、About,... 等等。 我已經施工好一部分，接下來的區塊想請你幫我完成。
我特別不知道滑動到第三跟第四區塊時要怎麼轉場，以及目前字體跟顏色沿用大量舊有的Style，想請你幫我找出適合且符合 Mockup 的字型。 你列出一下修改計劃。
接著 Astra 就會列出幾點計劃，像是
第一，ToC＋首頁基礎樣式: 完成四格的編號、縮圖、簡介、箭頭與區塊跳轉；統一左右留白、字體與細分隔線。以這區微調藍灰色玻璃背景。
第二，01 / About: 做出微傾斜相框、手寫照片註記、中間介紹、右側興趣清單；調整三欄比例，替換 Sample。
...以此類推
然後照著規劃請他施工就可以，途中每施工好一個區塊就檢查一下，然後可以請他微調整。
＊建議每一個分頁或者一段落後開新的對話重新改，聽說對話太長他會去讀過往的歷史紀錄，然後吃掉更多 Token，等到Token使用完畢就得在等待幾個小時才能繼續。
如果大量改程式的話，一定會遇到短時間用量抵達，需要等待每五個小時會重置，我的頻率大概是一小時～兩小時左右，就用完預定的 Token 用量。
所以這個網站實際度過的時間其實是一天多左右，但總共下Promt改程式的過程大概4-5小時左右，絕大部分都是在等用量限制度過，當然其他時間也沒閒著，我自己可以調整的小功能，我也會先做。
除了途中每次修改功能完成後要檢查以外，最後完成後也要好好的把網站測試一遍，整理跟列出你覺得不滿意還需要修改的地方，讓 Astra 再統一幫你調整並收尾。
這次體驗到Codex Astra，最厲害的是先前設計時 GPT 並沒有幫我設計 Mobile 的響應式版本，但是 Astra 就像通靈一樣，直接就在施工電腦網頁版時，把Mobile的部分直接完成了。
還有我的內容不完全像是 mockup 呈現，我還有自己加上一些額外的內容跟設計，這邊 Astra 在施工時也能通靈理解我想要呈現的內容，一併做好。
關於我這次的網站設計
- 更視覺化的網站風格，更貼合本人的個性，展現出作為一個個人品牌網站的該有的設計樣貌
哈哈自己說 - 將網站內容簡約精緻化
- 目錄 Table of Content 設計
- 少少的程式碼造就華麗的成果
比起過往的幾個主題，我認為這次的設計更能呈現出專業的個人品牌風格，我將出國旅遊的照片在首頁大橫幅呈現，並精簡了以往多餘的內容呈現，像是以往把「關於我」跟「作品集」散落在其他分頁，我將他們統一擺在首頁，把焦點聚焦在「我的創作」跟「我撰寫的部落格文章」，還有附上「我的履歷」。
這麼一來讀者從進入這個網站就能看到我想透過這個網站呈現的整體氛圍，帶到關於我描述「我是什麼人、這個網站在做什麼」，接著列出我的創作專案跟我過往探索這個世界跟鑽研各種知識的研究筆記(部落格文章)，最後則是有興趣聯絡我，以及履歷。
呈現的是一個好奇心重、愛好探險、比較 Bright 的鮮明特色，這樣的一個人設加上網站內容類似於我在探索旅途中的創造與筆記手札形成了一個有整體概念的個人網站與品牌風格。
對比以往我因為很沒自信，所以會把網站填越多內容，那種深怕大家不知道我做了很多、我會很多的行為。
而在此次的設計我最滿意的也就是我打破了那個「部落格」的制式感，把原先擁有「關於」、「作品集」、「聯絡我」等不同的分頁內容做精簡，統一精簡內容擺在首頁作為關鍵元素，打破了一個網站制式化的設計，呈現簡約、明亮又有呼吸感的美感`。
還有就是考量到我的文章都是長文，雖然在上一版 侘寂(Wabi-Sabi) 主題就有實作，但這次請GPT設計的更精美的目錄 Table of Content 設計，使讀者可以清楚明白自己閱讀進度，還有透過直接點擊標題看想看的內容。
這次的改版讓我很驚艷的是，我上一版主題用 Claude 幫我寫一半的程式，外觀看起來內斂、安靜、簡約跟精緻，版面看起來相對比較單調，結果背後的程式碼非常的大量，在執行 npm run build 產出靜態網站時，居然產出了 2GB 的內容，每次我要將他部署到 Github Page 都要等很久。
而這次的主題頁面看起來比上一版更 Fancy 更 Bright，但這次在實作時，我反而刪掉大量的程式碼，沒有想到只需要少少的程式碼便能 built 出這樣更驚艷的網站風格，而在部署產出靜態網站時，居然也只需要130MB，瞬間部署快了超多(當然其中大部分都是照片，而且是我沒有用到的照片素材，我捨不得刪)。
程式碼的部分大幅刪減，然後 npm run build 產出的靜態網站，改版後居然從 2.31GB 下降到 130MB。
後來 Debug 後，發現應該是之前剛學習寫 Next.js 時，其寫法會無意間在單頁HTML文章又帶入其他300多篇文章的內容，且每一篇文章都會載入所有的文章內容，所以 1 篇文章裡有其他300多篇的內容大約加總 6MB，我的網站有300多篇文章 * 等於同樣的內容重複了300多次 = 2.2GB 左右的壯觀資料量。
還好有改新版網站，不然我都不知道我無意造成的這個 Bug 還會隱藏多久XD。
學到了什麼
這次的設計讓我感受到，在AI的時代下，更重要的可能是
- 點子跟產品概念
- UX設計師，或者使用者面向的相關技術
- 測試跟自動化測試
- 具備核心知識的軟體工程師
什麼東西是好的？
我們到底要做什麼？
AI 給出的東西哪些該留、哪些該刪？
它真的能用嗎？有沒有 bug？responsive 對不對？SEO 正不正常？production 是否真的工作？
我仍然覺得一個作品最不可缺少的是網站的靈魂，作者想透過這個作品展示什麼、表達什麼。
我認為任何一個軟體無論是網站還是App也可以被作為是一種藝術傳達概念。
我曾看過討論有人也提到，就算 AI 能夠設計跟時做出各種炫砲、優美的網站設計，可是最重要的還是點子，即是你想透過這個作品表達什麼 或者 他能怎麼幫助人 的產品核心概念，不然 AI 做出來的就會是四不像模糊的產品。
產品的核心概念、呈現的風格、背後深層的意義、是要解決什麼問題。產品的流程、內容，如何引導使用者、使用者需要什麼、能夠解決使用者什麼問題，總總，也就是做產品的幾個核心關鍵點。
在AI協助下，仍然會做出某些 Bug 點，還是需要工程師去檢查，還有需多其他的部分是目前 AI 做不太到的，需要工程師的工作。
再來就是 AI 寫出的程式碼，Code Review 也就很重要，總不想看起來功能完善，然後之後運行一陣子後爆掉卻不知道是哪一行程式造成的。
同時也很需要 QA/SDET 工程師的測試，雖然 AI 會負責一部分的測試，但在討論的時候 GPT 也有跟我說，畢竟是人使用的產品，很多時候「主觀感受」剩餘一切，既然實作的部分 AI 可以包辦，那使用者畢竟是真人，真實面向的操作就需要由測試工程師來執行測試產品。
相信在強大的 Astra 模型釋出，再加上未來有更強的模型會問世，大家都能做出更多優美跟炫砲的網站，我不知道在未來「做產品」、「做網站」、「做App」這件事變得很簡單甚至開始產出大量網頁跟App的混亂狀態時，世界會變得怎麼樣。
我們從知識缺乏的時代走向知識過剩的現代，人類的大腦跟身體還是古老的設計，但科技與技術已經造就這個世代的步調過於快速，超出人體所能負荷的範圍，但是在各種媒體跟企業家各種大肆宣揚某個AI模型、電子、半導體趕著進步跟問世，不確定快到一個極致，大家會不會轉過來追求 慢 跟 空間。
AI 讓我們做得越來越快，但我最後做出的網站，反而比以前更慢、更空、更安靜。
也許科技越快，我們真正需要學習的，反而不是如何塞進更多東西，而是知道什麼值得留下。
我們拭目以待。
