第一次 Vibe Coding：用 AI 建一個部落格的記錄

爲何開始思考 Vibe Coding

網路上有非常多關於 Vibe Coding 的作品，有經驗老道的工程師 Vibe 出來的大系統、但更多的是無開發經驗的「小白」生成出能改善本身工作 workflow 的「工具」。

我不禁思考，身爲最「菜」的 Intern 工程師，又該如何「面對」亦或者是「駕馭」Vibe Coding？

我的第一次嘗試：建這個部落格

對我而言「想」是最沒意義的一件事，若不開始，則永遠都在原地踏步。而公司專案拿來「嘗試」也有點太大膽，自己的 side project 也捨不得。既如此那就搭建一個已經是非常大的輪子——「部落格」。

目標

既然選擇了部落格，那目標也就非常簡單了：一個有良好 SEO、載入速度夠快的網站，並且部署到我既有的伺服器上。

工具

第一個工具，當然選擇了聲量最高的 Claude Code，搭配一直以來在用的 Gemini 網頁對話，且 Gemini 只局限使用「快速」模式。考量點為若 Claude Code 能獨當一面，就能把 Gemini 的訂閲退掉了 😄

整個過程我做了什麼 vs AI 做了什麼

我在前期跟 Gemini 快速討論出了網站的九個功能及技術棧後，產生了一份需求 MD 檔案。爾後開始跟 Claude Code 根據這份需求檔案生成出了更完整的技術棧及部署架構。

Claude Code 後續就根據我的「指揮」開始建立專案，將整個網站搭建起來了。我並無過多的干預，只有在顏色及版面上當起了「慣老闆」。

過程中的觀察

Vibe Coding 現階段可以產出一個完全可以 work 的 project 了，但這個 project 中勢必還是會藏有很多小問題。

例如這個部落格根本不需要 About 頁面，但是 Claude Code 直到接到我的指令前並不會去移除它（或許這也是一種基於安全的考量）。Claude Code 也在 UI 設計上不夠具有人性，或者是所謂的「過度理想化」，無論是默認我會為每篇文章配置封面圖片，或者 header 中只有一個「文章」按鈕。

哪些地方 AI 很厲害

AI 在小範圍的程式架構中可以保持非常 clean 的 code，且 debug 的速度也比人類快非常多，畢竟人類的 context 真的比較小～

知識庫也非常深厚，例如本部落格採用的 Astro 框架是我以前從來沒用過的，但用 AI 撰寫竟然兩小時就處理好了，遇到的「雷區」也非常快就發現且處理好。

哪些地方還是需要你介入

我認為最主要還是 UI/UX 的部分。人類的操作方式永遠都不會是「正常來說」的操作，而是一些很不合理的做法，而這部分是 AI 難以理解的。排版、顏色這種主觀的事情我想只是「調校」成我的口味，無法說 AI 的就不好。

溝通方式很重要

溝通的本質其實對我而言就是 Prompt。本次能很順利地完成，我認為是因為在一開始就明確了「自己的需求」，並且在整個專案開始前就確定了「技術棧」，才沒有發生悲劇。我本身也有開發經驗，懂得跟 AI 一起安排規劃合理的工序，故可以說就是 step by step。

Vibe Coding 的本質

我認為 Vibe Coding 的本質終究還是「寫 code」，只是你的 output 不是 code，而是 prompt。

結語

回到最初的問題：身為最菜的 Intern，該如何面對 Vibe Coding？

我的答案是先有自己的判斷，再交給 AI 執行。

Vibe Coding 不會讓你突然變強，但它會讓你的想法更快落地。對有經驗的工程師來說，它是加速器；對新人來說，它更像是一面鏡子——你對需求想得越清楚，AI 給你的就越好，你對技術越了解，你就越知道 AI 哪裡出問題了。

Gemini 的訂閱，我還沒退。