學 Vibe Coding 的這一年，我把網站砍掉重練
本文原發表於《Vista 電子報》No.147（原文連結（另開新分頁））。
哈囉，你好！
這個週末，適逢連續假期。一早我打開 Claude Code，跟它說了一句話：我們來把 vista.tw 整個改版吧。
兩天下來，新版的網站已經上線了。從導覽列、首頁、課程中心、企業邀課頁到免費資源頁，連字型和配色都換過一輪，英文和日文版也一起整理。當然還有一些細節要慢慢修，但大方向已經到位。
本期的電子報，我想跟你聊聊這次改版。一方面是記錄我今年學 Vibe Coding（另開新分頁） 的一段心得，另一方面也想跟你介紹，新版的 vista.tw 可以怎麼用，讓它真正幫上你的忙。
今年，我從寫字的人變成動手的人
如果你讀過我前幾期的電子報，應該知道我今年花了不少時間在學 Vibe Coding。
簡單來說，Vibe Coding 就是用自然語言跟 AI 說清楚你想做什麼，讓它幫你寫程式，你負責看結果、判斷哪裡不對，再請它修改。對我這種寫了三十年字、從來不是工程師的人來說，這個轉變很大。過去想在網站上加一個功能，得找人、等排程、談預算；現在只要能把需求講清楚，當天就可以動手做出來。
vista.tw 就是最好的例子。這個網站的前身，是我從 2010 年左右開始寫的部落格，中間換過好幾次平臺，每次搬家都像在打掃一間舊倉庫。今年一月，我下定決心把用了多年的舊系統整個砍掉，自己用 Vibe Coding 的方式從頭蓋起，把幾千篇文章一篇篇搬進新家。
這一年邊做邊學的過程，後來也變成一本書。九月二日，我的第 21 本書《零基礎學 Vibe Coding：用 AI 做出網站、App 與工作自動化工具（另開新分頁）》由碁峯出版。這本書寫給從沒寫過一行程式、卻想自己動手做點什麼的朋友。書裡也拆解了 vista.tw 實際上是怎麼一步步部署上線的，你不需要懂每個技術細節，只要學會說清楚需求，接下來的事就可以交給 AI 和自動化流程。
網站很漂亮，但訪客找不到要的東西
講到這裡，你可能會好奇：今年二月才剛蓋好的網站，為什麼十月又要改版？
原因很實際。今年蓋好的 vista.tw，走的是文青雜誌風，版面很有質感，累積了五千多篇三種語言的文章，當作品牌門面是合格的。但這幾個月看下來，我發現一個問題：它很像一本雜誌，但未必能給讀者最想要的東西。
我去翻了 Google Search Console 的資料，結果有點尷尬。導覽列上「服務」「免費資源」「工作坊」「作品」這四個跟收入有關的頁面，近兩個多月從 Google 搜尋點進來的次數並沒有想像得多。
再仔細看，課程入口散落在三個不同的地方，訪客點進去之後，還要轉到另一個網站，再看一次銷售頁，才能真正報名。每多一層連結，就多一層摩擦，有興趣的人很可能在半路上就離開了。
文章寫得再多，如果讀者想找課程、想找免費資源、想邀我去上課的時候卻找不到入口，網站就只完成了一半的任務。
改版理念：從一本雜誌，變成一間門市
所以這次改版，我給自己定了一個很簡單的方向：讓訪客在最短的時間內，找到他想要的東西。
具體來說，有三個原則。
第一，分工清楚。vista.tw 是一個入口，所有的課程介紹、免費資源、邀課資訊都放在這裡；solo.tw（另開新分頁） 則退到後面當收銀臺，只負責報名、付款和學員專區。讀者不必再在兩個網站之間來回跳。
第二，按照需要重新安排路線。新版導覽列依照你跟我的關係深淺來排列：課程中心、免費資源、文章、企業邀課、關於。不管你是第一次來，還是已經讀了我好幾年文章的老朋友，都能很快找到下一步。
第三，一次只給一個主要動作。首頁第一屏只有一個主按鈕「看近期課程」，旁邊再放一個小看板，告訴你現在有哪些課開放報名、有哪些免費資源可以領取。我不想讓訪客一進門就面對十個按鈕，結果一個都沒按。
視覺方面，我也放棄了原本的雜誌風，改成比較明亮、圓潤的風格，標題換上圓體，用暖色紙張般的底色搭配黃色按鈕。看起來比較親切，也更像一個歡迎你走進來的地方。
一個週末改版，我學到的三件事
用 AI 改版確實很快，但兩天做下來，我也踩了幾個坑。嗯，從中挑三個來跟你分享。
一、簡報不等於網頁
這次的視覺靈感，來自我最近所設計的課程簡報（另開新分頁）。簡報上那些粗體大標、螢光筆標記、插畫貼紙，我自己很喜歡，就請 AI 把簡報封面的構圖搬到首頁上。
結果第一版上線之後，連我自己看了都搖頭。大片留白、人物圖很小、第一屏幾乎沒有資訊，看起來就是一張簡報封面。美則美矣，卻少了網站該有的樣子。
後來我請 AI 一次做三套不同方向的首頁樣稿，放在一起比較，最後選了新型的版本：左邊是標題、一句話介紹、主按鈕和幾個實績數字；右邊是「現在開放」的看板。這次的教訓是：視覺點子可以從簡報取得靈感，但網頁要讓人掃讀、要有清楚的資訊層次，構圖不能照搬。
二、AI 做得快，判斷還是要自己來
AI 可以在幾分鐘內改完一整頁，但哪一句話會讓讀者誤會，它不一定知道。
舉個例子，首頁原本有一區的標題寫著「從免費開始」，看起來很友善。可是我想了一下，讀者可能會以為我所有的課程都是免費的，於是改成「找到適合你的下一步」。
又像首屏的介紹文字，AI 一開始寫「我把無人公司的運作方法，整理成你馬上能用的課」。我把最後一個字改成「技能」，因為讀者要的是學會一件事，不是多上一堂課。還有配色，原本的飽和藍用在大區塊上，看久了很刺眼，我請它把藍色只留給連結和小點綴。
這些都是很小的修改，但每一個都需要有人站在讀者的位置設身處地想一下。AI 讓動手的速度變快了，判斷的責任卻還在我們自己身上。
三、真正慢的，是部署和檢查
改程式碼很快，等部署卻很慢。vista.tw 有幾千篇文章，完整建置一次大約要四十分鐘。如果推上去才發現有錯，就得再等一輪。
週六那天，我就遇過一次：改書頁網址的時候，AI 順手把圖片的路徑也改了，但圖檔沒有跟著搬，結果自動檢查擋下了整次部署。後來我學乖了，推上去之前，先在自己電腦上把幾支檢查程式跑一遍，確認沒問題再送出。
另外，我也順便處理了網站的速度。改版前，用手機在慢速網路下打開一篇有嵌入 YouTube 影片的長文，畫面要等十幾秒才完整出現；調整之後，一般文章大約兩秒，含影片的長文也縮短到五秒左右。這種改善讀者不一定會注意到，但每少等一秒，就少一個人按下返回鍵。
新版的 vista.tw，你可以這樣用
說了這麼多改版的過程，最重要的還是：這個網站可以怎麼幫上你？我整理了幾種常見的用法。
不知道從哪裡開始？先看首頁的四個起點
首頁中段有一區「你今天想解決哪件事？」，我把讀者最常見的需求分成四種：在寫論文、做研究；想穩定產出內容；想讓 AI 幫自己做事；替單位找講師。選一個最符合你需求的，就會直接帶你到對的課程或資源。
想上課？到課程中心看近期開課
課程中心會列出近期開放報名的公開班，每堂課都可以先在頁面上看課程精華、時間、地點和費用，再決定要不要報名。目前開放的有兩堂：10 月 31 日的第三期「AI 賦能學術研究與寫作實戰工作坊（另開新分頁）」，以及 11 月 14 日的第七期「AI 內容產製系統工作坊」，後者 10 月 31 日前報名可享早鳥價。如果時間不湊巧，也可以登記開課通知，下一場開課時我會第一時間通知你。
還在觀望？先拿免費資源
免費資源頁，目前有四份可以直接領取的工具：AI 內容產製系統藍圖、無人公司啟動包、研究誠信自檢 Prompt Pack，以及講師 AI 備課自我檢核清單。另外還有簡報庫，收錄我歷來課程與演講的簡報，多數都能公開瀏覽。
想找文章？用主題和搜尋
五千多篇文章，分成 AI 實戰應用、寫作、內容行銷、個人品牌、創業與獲利模式、生產力系統等主題，每個主題頁都把相關文章整理在一起。想找特定題目，也可以直接用站內搜尋。如果你喜歡讀書筆記，「劃線金句」頁收錄了我從書裡劃下的句子，很適合零碎時間翻一翻。
想邀我去上課？直接填表單
過去邀課都是寄 E-mail，來來回回確認需求很花時間。這次我設計了一個新的企業邀課頁，列出常見的講題、適合對象和過往合作單位，下方有一份表單，填好之後我會在三個工作天內回覆你。
讀了新書？到書站延伸學習
《零基礎學 Vibe Coding》也有自己的書站，可以免費試閱第一章和第四章全文，還有配套簡報和延伸文章。如果你已經買了書，讀者專區也整理在這裡。
動手的門檻，真的變低了
回頭看這兩天，最讓我感觸的，不是 AI 寫程式有多快，而是一個寫作者，竟然可以在一個週末裡，把自己經營了十幾年的網站從裡到外重新整理一遍。
換作幾年前，這樣的改版大概要找外包團隊、開好幾次會、等上好幾個月。現在我要做的事，跟寫文章其實很像：想清楚讀者需要什麼，把它說清楚，看結果，再一次次修改。
這也是我寫《零基礎學 Vibe Coding》最想傳達的事。你不需要先變成工程師，只要願意把腦子裡的想法講清楚，AI 就會陪你一步一步做出來。如果你也有一個一直想做、卻覺得自己不懂技術而遲遲沒動手的網站或小工具，這本書或許可以陪你跨出第一步。
最後，也想請你幫我一個忙：有空的時候逛逛新版的 vista.tw，如果發現哪裡怪怪的、哪裡找不到東西，或是有什麼你希望網站上能有的資源，歡迎直接回信告訴我。這個網站是為你們做的，你的意見，就是下一輪改版的方向。
我們下次見！
Vista
讀完，下一步
把內容做成一套系統
AI 內容產製系統工作坊
一份素材，自動產出六種格式
繼續讀：個人品牌打造指南動手試：Vibe Coding 選案器（另開新分頁）
