如何用 Vibe coding 打造個人網站 (2026 最新)

前言

寫一個自己的網站是我一直想做的事。可惜工作之後就因為各種事導致拖延症發作ORZ。加上平常工作也用不到純軟的東西，網頁的東西也快忘了差不多了。 然而最近因為 vibe coding興起，讓寫程式變成幾乎零門檻，在不需要額外花時間回去複習前後端的情況下，終於可以把寫個人網站的心願完成了。也因此決定紀錄一下當成第一篇文章，順便做個教學🎊

環境選擇

要開始vibe coding前，首先需要決定要用什麼IDE。IDE就是你的開發環境，用來編輯程式的工具。有了IDE之後，還要決定你想用哪一個AI模型來幫你寫程式

目前主流的vibe coding IDE，通常都是以月費的形式收費，並且可以選擇主流的模型如Claude Opus, Sonnet, OpenAI 的codex等

而IDE又可以分成裝在自己電腦上的，以及跑在瀏覽器上的，以下簡單列出兩種差異

IDE類型	優點	缺點	例子
本地端	不限於網頁開發、可自由設定想要的開發環境	環境建立較為麻煩	Cursor, Windsurf, Antigravity
網頁版	不需設定環境，打開即可開始寫	只能開發網頁，較不適合開發手機app或其他程式	Bolt.new, Lovable

bolt.new (https://bolt.new/) 是一個建立在瀏覽器上的全自動環境開發工具。從建立環境、IDE設定、套件安裝甚至到部署，都能在瀏覽器上讓AI幫你輕鬆做完，對於新手非常友好。因此本篇就以bolt.new 來作為示範。

bolt.new 收費方式

bolt.new 有以下幾種收費方式

方案	價格	Tokens	說明
Free	$0	每日 300K / 每月 1M	適合簡單網頁
Pro	$25(最低)	每月 10M	可加購token
Teams	$30每人每月	10M/每人每月	適合需要團隊者，同樣也可加購token

雖然有免費版的，但個人認為除非是超級簡單的網頁，不然還是建議最好購買 $25 的方案。我自己使用免費版時，只下了一個指令，竟然連第一版網頁都生不出來就達到每日 token上限了😅 只好乖乖付錢了💸

不過$25的pro 方案對於基本的網站應該也非常夠用了，以這個網站為例，甚至都還沒用到一半的token就做到現在這樣了。想當初沒有 vibe coding的時候請人做一個這種網站可能都要上千甚至上萬，相較之下還是非常划算的。

開始建構

其實打開網頁，在對話框就可以開始下prompt讓AI幫你做網站了。對話框下面可以也選擇要使用哪一種模型。大家可以把想做什麼網站，以及有什麼素材圖片，全部上傳上去。 例如：我想寫一個餐廳網站，要有多國語言，以及菜單種類和各項菜品的介紹。以下是餐廳的介紹以及菜品的圖片…

如果還是對於怎麼下指令沒什麼方向，這裡提供兩種想法

第一種可以使用上圖右邊紅框中的plan mode，在這個模式下，下完指令後AI不會馬上開始寫程式。而是會先擬出一份大綱，來回討論幾次之後，等你覺得產生的大綱大致符合你的需求後．才會開始產生程式碼。

第二種方式是跟平常自己常用的語言模型如ChatGPT, Gemini等討論如何在bolt.new上下指令，這樣的額外好處是這些平常用的語言模型也可以根據你平時的清況給出更適合你的建議。

頁面展示

下完指令之後就會跳轉到 project 頁面。當AI產生好程式碼之後，會自動在右側顯示預覽(preview)

透過上方紅框的工具列則可以切換預覽、程式碼、以及後端資料庫設定

順利的話，跟AI來回對話幾次，就可以產生出自己想要的網站囉

嗯… 好像還真的沒什麼特別要說的XD

切換到程式碼頁面之後，也可以自己編輯程式，編輯完成之後按Ctrl+S存檔後就會自動更新了 值得注意的是 bolt.new 在這個AI 介面，提供的編輯環境比較簡單，有些語法highlight是沒有支援的

只要點這個 “Open in StackBliz” ，就可以在另一個編輯器打開囉

在stackBliz 的頁面一樣可以編輯程式以及看到網頁預覽，只是無法使用AI 寫程式。在這裡編輯好之後，可以再點擊 “Open In Bolt.new|AI” ，就可以回到剛才有AI的頁面了。

如何部署

什麼是部署？ 簡單來說就是把你的網站放上公開的網址，讓大家都可以看。以往還要自己註冊Netify, Vercel 並且上傳網站等等，在bolt.new 也是一鍵就可以做完的，很方便吧！

點擊左上角 “Publish” -> “Publish” ，左邊的對話欄就會出現你的公開網址，這樣就可以把你的網址傳給別人囉

Publish之後，也可以修改自己想要的網站名稱，不過結尾的網域都固定會是 bolt.host

心得

目前使用下來的感想，Vibe coding真的大大縮短了網頁開發的時間！這個網站也是和gemini討論後，再到bolt.new只用幾次指令就產生出來的。

如果看完本篇文章對於寫網頁有興趣的話，趕快打開 bolt.new 開始行動吧！