# 快速上手 Vibe Coding

> 10 分鐘做出你的第一個網頁應用並部署上線



你好，我是程式員魚皮，前騰訊全端開發，全網 200 萬粉的 [AI 編程博主](https://space.bilibili.com/12890453)，也是 [AI 導航](https://ai.codefather.cn) 和 [編程導航](https://www.codefather.cn) 等 10+ 自研產品的創造者。

在上一篇文章中，我們聊了 Vibe Coding 的理念和思維方式。現在，是時候動手實踐了！

這篇文章，我會手把手帶你在 10 分鐘內做出你的第一個網頁應用，並且把它部署到網際網路上，讓全世界的人都能訪問。

是的，你沒聽錯，不需要你有任何編程基礎，只要你會打字、會上網，就能跟著做。



## 一、準備工作

在開始之前，我們需要做一些簡單的準備。別擔心，這些都很簡單，5 分鐘就能搞定。

需要準備的東西：

1. 一台能上網的電腦（Windows、Mac 都可以）
2. 一個瀏覽器（Chrome、Edge、Safari 都行）
3. 一個 AI 工具帳號（我們用 Bolt.new，免費的）
4. 一個 GitHub 帳號（用來部署，也是免費的）

就這些，不需要安裝任何編程軟體，不需要學任何程式碼，一切都在瀏覽器裡完成。

💡 什麼是 GitHub？

[GitHub](https://github.com/) 是目前最主流的、免費的程式碼開源託管平台 ，可以理解為一個儲存和管理程式碼的 “網盤”。所有用戶或團隊都可以把自己的程式碼上傳到 GitHub 進行共享和維護、從 GitHub 下載程式碼等。開發者們可以從 GitHub 上白票程式碼，進行學習或引用。

如果你對 GitHub 感興趣，可以看 [魚皮的保姆級 GitHub 學習路線](https://www.codefather.cn/course/1789189862986850306/section/1789190804671012866) 免費學習。



### 如何選擇 AI 工具？

對於完全零基礎的新手，我強烈推薦從 Bolt.new 開始。它完全在線，不需要安裝任何軟體，打開瀏覽器就能用。而且最棒的是，你寫完程式碼立刻就能看到效果，做完後一鍵發布到網上，完全零門檻。還有免費額度，夠新手練習了。

等你熟練了，再去學習 Cursor 這樣的專業工具也不遲。

注意，如果你的網路無法訪問 Bolt.new，也可以嘗試 [美團 NoCode](https://nocode.cn/) 或者 [百度秒噠](https://www.miaoda.cn/)，都是類似的 AI 應用生成平台。



### 註冊 Bolt.new

1）打開瀏覽器，訪問：https://bolt.new

2）點擊右上角的 "Sign in" 按鈕

3）可以選擇用 Google 帳號 / GitHub 帳號 / 郵箱密碼登錄（推薦用 GitHub，後面部署會用到）

登錄成功後，準備工作就完成了。接下來你就可以在對話框中輸入需求來生成項目了。

![](https://pic.yupi.icu/1/image-20260104140815455.png)



## 二、選擇你的第一個項目

第一個項目很重要，它直接決定了你的學習體驗。我建議選擇一個簡單但完整的項目，最好有實際用處，能看到效果。

根據我的經驗，下面這幾個項目比較適合新手，都是能輕鬆完成的。

1）個人名片網頁：展示你的名字、頭像、自我介紹和聯繫方式，簡潔美觀。適合想快速體驗成就感的朋友。

2）待辦事項應用：一個簡單的任務管理工具（俗稱 Todo List），可以添加任務、標記完成、刪除任務。適合想做點兒實用工具的朋友。

3）倒計時網頁：可以設置目標日期（比如考試、生日），實時顯示剩餘天數，有漂亮的視覺效果。適合想做點有創意的東西的朋友。

在這篇教程中，我會以經典的 **待辦事項應用** 為例，因為它功能完整、實用性強，而且能讓你體驗到完整的開發流程。如果你想做其他項目也完全沒問題，步驟是一樣的，只需要把需求描述換成你想要的就行。



## 三、和 AI 對話生成程式碼

好了，現在開始最激動人心的部分 —— 和 AI 對話，讓它幫你生成程式碼。


### 第 1 輪對話：描述基本需求

在 Bolt.new 的聊天框裡，輸入以下內容（你可以直接複製）：

```
請幫我做一個待辦事項應用網頁，要求：

1. 功能需求：
   - 可以輸入任務內容並添加到列表
   - 每個任務前面有個複選框，點擊可以標記完成
   - 已完成的任務顯示刪除線
   - 每個任務後面有刪除按鈕
   - 顯示已完成和未完成的任務數量

2. 界面要求：
   - 簡潔現代的設計風格
   - 使用清新的藍色調
   - 圓角按鈕和輸入框
   - 適當的陰影效果
   - 響應式設計，手機上也能正常使用

3. 技術要求：
   - 使用 HTML + CSS + JavaScript
   - 數據保存在瀏覽器本地存儲，刷新頁面不會丟失
```

你還可以選擇大模型、使用計劃模式、添加附件、增強提示詞等等，但是我建議剛開始不用關注這些，直接點擊發送，然後等待 AI 的回應即可。

![](https://pic.yupi.icu/1/image-20260104141314370.png)




### AI 在做什麼？

發送後，你會看到 Bolt.new 開始工作。

AI 理解了你的需求，然後創建項目文件結構，再自動生成網頁程式碼，整個過程大約需要 2 分鐘。

![](https://pic.yupi.icu/1/image-20260104141512389.png)

程式碼生成完成後，右側會自動顯示預覽效果。你會看到一個輸入框、一個添加按鈕、任務列表區域。

試著在輸入框裡輸入 "跟魚皮學習 Vibe Coding"，然後點擊添加按鈕，看看效果。

![](https://pic.yupi.icu/1/image-20260104141637255.png)




### 第 2 輪對話：優化細節

看到初版效果後，你可能會想調整一些細節。比如：

```
很好！但我想做一些調整：

1. 輸入框的佔位符文字改成 "今天要做什麼？"
2. 添加按鈕改成 "➕ 添加任務"
3. 標題改成 "我的待辦清單"，並加個可愛的圖標
4. 背景色改成漸變色，從淺藍到淺紫
5. 添加一個 "清空已完成" 的按鈕
```

還可以開啟可視化修改功能，選中你想要修改的元素，哪裡不爽點哪裡~

![](https://pic.yupi.icu/1/image-20260104141819294.png)

AI 會根據你的要求修改程式碼，很快你就能看到新效果。

![](https://pic.yupi.icu/1/image-20260104142026165.png)




### 第 3 輪對話：添加新功能

如果你想添加更多功能，繼續和 AI 對話：

```
再加幾個功能：

1. 任務可以設置優先級（高、中、低），用不同顏色標識
2. 可以編輯已添加的任務
3. 添加一個 "全部清空" 按鈕，並要求確認
4. 任務列表為空時，顯示一個友好的提示
```

AI 會繼續幫你實現這些功能。

![](https://pic.yupi.icu/1/image-20260104142238907.png)




### 對話技巧

在和 AI 對話時，記住這幾點：

1. 需求要具體：不要說 “做得好看一點”，要說 “背景改成藍色漸變，按鈕加圓角”
2. 一次不要改太多：每次提 1~5 個要求就夠了，改完看效果再繼續
3. 遇到問題直接說：如果有 bug 或者效果不對，直接告訴 AI “XX 這裡有問題”
4. 可以要求解釋：不懂的地方，可以問 “這段程式碼是做什麼的？”



## 四、驗證效果

現在，你的待辦事項應用已經做好了。讓我們測試一下各個功能：

1）在輸入框輸入 "跟魚皮學習 Vibe Coding"，點擊添加按鈕，任務出現在列表中

2）點擊任務前的複選框，任務文字顯示刪除線；點擊刪除按鈕，任務從列表中消失。

最後點擊預覽窗口上方的設備圖標，看看在手機和不同螢幕上的效果。

![](https://pic.yupi.icu/1/image-20260104142538383.png)

如果發現某個功能無法正常使用，不要慌。把問題詳細描述給 AI，比如 "我點擊刪除按鈕後，任務沒有被刪除"，AI 會幫你修復 Bug，然後重新測試就好了。

這就是 Vibe Coding 的魅力 —— 遇到問題，AI 幫你解決！



## 五、部署上線

做完了應用，現在讓我們把它發布到網際網路上，讓全世界的人都能訪問！

### 快速部署（推薦）

Bolt.new 提供了最簡單的部署方式，只需要點擊右上角的 "Publish" 按鈕，點擊發布：

![](https://pic.yupi.icu/1/image-20260104142853639.png)

然後稍等片刻，就能在聊天框中看到發布後的可訪問地址了：

![](https://pic.yupi.icu/1/image-20260104142912318.png)

部署成功後，你應該能在任何瀏覽器訪問你的應用，或者把地址分享給朋友讓他們也能訪問。

恭喜，你的第一個網頁應用已經上線了，就這麼簡單！🎉

💡 如果你覺得這個地址比較醜，Bolt.new 還支持自定義域名，但是僅高級版可用，我覺得沒必要。



### 擴展知識 - 手動部署

魚皮分享過多種快速部署上線項目的視頻教程：

- [Vercel 項目部署教程](https://www.bilibili.com/video/BV1TV4y1j76t)
- [雲端編輯器 + Vercel + 對象存儲 + 內網穿透 4 種方式部署](https://www.bilibili.com/video/BV1UZ4y197i1)
- [Nginx + 寶塔 2 種方式部署個人博客](https://www.bilibili.com/video/BV1rU4y1J785)
- [WordPress 搭建個人博客](https://www.bilibili.com/video/BV14q4y1R7XM)
- [4 種主流前後端項目部署](https://www.codefather.cn/course/1790943469757837313/section/1791075571845345281?contentType=video&tabKey=videoList)

此外，魚皮在 [編程導航](https://codefather.cn/) 帶大家做過 20 多套項目了，幾乎每種部署方式都給大家講解過，如果你想成為一名專業的程式員，建議學習一下。

- [AI 零程式碼應用生成平台項目](https://www.codefather.cn/course/1948291549923344386)：1Panel 面板 + Nginx 前端 + Java 後端（jar 包）
- [程式碼生成器共享平台項目](https://www.codefather.cn/course/1790980795074654209)：寶塔面板 + Nginx 前端 + Java 項目管理器（jar 包）後端部署
- [AI 答題應用平台項目](https://www.code-nav.cn/course/1790274408835506178)： Vercel 前端 + Docker 後端 + 雲託管 Serverless 平台部署
- [AI 超級智能體項目](https://www.codefather.cn/course/1915010091721236482)：Docker 前端 + Docker 後端 + 雲託管 Serverless 平台部署
- [OJ 在線判題項目](https://www.codefather.cn/course/1790980707917017089)：Docker Compose 後端微服務部署

基本上學會這幾種部署方式，能夠應對絕大多數部署需求了。



## 六、理解你做的東西

做完了項目，讓我們花幾分鐘理解一下你做的東西，這樣能幫你日後做出更好的項目。




### 項目結構

首先，你要知道網頁應用的基礎是 "前端三件套"：

- HTML（結構）：定義了頁面有哪些元素，比如輸入框、按鈕、任務列表、統計信息。
- CSS（樣式）：定義了頁面長什麼樣，包括顏色、字體、大小、佈局和間距、動畫效果。
- JavaScript（功能）：定義了頁面怎麼工作，包括添加任務、標記完成、刪除任務、本地存儲的邏輯。

不過，在這個項目中，AI 選擇了使用 **React** 這個現代化的前端開發框架來幫你實現功能。React 是目前最流行的前端框架之一，它讓開發更高效、程式碼更容易維護。

所以你會在項目文件中看到 `.tsx` 後綴的文件，這些就是 React 組件文件。但本質上，它們最終還是會被轉換成瀏覽器能理解的 HTML、CSS 和 JavaScript。

![](https://pic.yupi.icu/1/image-20260104162356144.png)

沒事，現在不理解也完全沒關係。如果對前端開發感興趣的同學，可以看 [魚皮最新的保姆級前端學習路線](https://www.codefather.cn/course/1789189862986850306/section/1789190394078011393) 快速入門。




### 核心功能解析（可跳過）

讓我們看看幾個關鍵功能是怎麼實現的：

1）添加任務：當你點擊 "添加任務" 按鈕時，程式會先獲取輸入框裡的文字，然後創建一個新的任務對象，把任務添加到列表裡，同時保存到本地存儲，最後清空輸入框並刷新頁面顯示。整個過程就像你在紙上寫下一個待辦事項，然後把它貼到牆上一樣自然。

2）標記完成：當你點擊複選框時，程式會找到對應的任務，修改它的完成狀態，更新本地存儲，然後更新頁面顯示（給任務文字加上刪除線），同時更新統計數字。就像你用筆在紙上的任務上劃了一道線。

3）本地存儲

你可能會好奇，為什麼刷新頁面任務還在？

這是因為數據保存在瀏覽器的本地存儲（localStorage）裡。每次你修改任務，程式都會把最新的數據保存到 localStorage；當你重新打開頁面時，程式會從 localStorage 讀取之前保存的數據。這樣即使關閉瀏覽器，數據也不會丟失。就像你把待辦清單寫在了一個不會丟的小本子上。

![](https://pic.yupi.icu/1/theoryofworksoftware%E5%A4%A7.jpeg)



### 向 AI 請教

如果你想深入理解某個部分，可以直接問 AI：

```
請解釋一下本地存儲是怎麼工作的？
```

或者：

```
這段程式碼是做什麼的？
[貼上程式碼]
```

AI 會用通俗易懂的語言給你解釋。



## 七、嘗試修改和優化

現在你已經有了一個實用的小軟體，讓我們嘗試一些修改和優化，加深理解。

你可以試試：

- 改變顏色主題（"把應用改成粉色主題，溫柔可愛的感覺"）
- 修改文字（"把所有文字改成英文版本"）
- 調整佈局（"把統計信息移到頁面底部，並居中顯示"）

或者添加新功能，比如：

- 任務搜索（"添加一個搜索框，可以搜索任務內容"）
- 任務分類（"添加分類功能，可以給任務添加標籤"）
- 導出功能（"添加一個按鈕，可以把所有任務導出為文本文件"）

還可以優化用戶體驗，讓應用更好用：

- 添加快捷鍵（"按回車鍵可以快速添加任務"）
- 添加動畫（"添加任務時有一個淡入動畫，刪除任務時有一個滑出動畫"）
- 空狀態優化（"當沒有任務時，顯示一個可愛的插圖和鼓勵文字"）。

如果你覺得簡單，可以嘗試添加：

- 截止日期功能
- 任務提醒功能
- 支持拖拽排序
- 添加深色模式切換
- 支持多個任務列表

每次想添加新功能，就和 AI 說 "我想添加 [功能描述]，應該怎麼做？"，AI 會幫你實現。



## 寫在最後

恭喜，你已經完成了 Vibe Coding 的第一次實戰。

你剛才做的事情，在幾年前需要幾個月的學習才能完成。但在今天，你只用了 10 分鐘！這就是 Vibe Coding 的力量。

通過這個項目，你學會了如何清晰地向 AI 描述需求、通過多輪對話不斷優化項目、遇到問題如何跟 AI 協作解決，還學會了如何把項目發布到網際網路。雖然你沒有寫程式碼，但你已經理解了網頁應用的基本結構、用戶交互的實現方式、數據存儲的基本概念。

更重要的是，你建立了 Vibe Coding 的思維方式：**關注 "要做什麼" 而不是 "怎麼做"**，先做出來再不斷優化，在做項目中學習而不是先學再做，把 AI 當作編程夥伴而不是工具。

這只是開始，隨著你做的項目越來越多，你會發現你的需求表達能力越來越強、對技術的理解越來越深、能做的東西越來越複雜、創造力得到了真正的釋放。

記住我在第一篇文章裡說的：**在 AI 時代，創造力比技術更重要，想法比實現更重要，迭代比完美更重要。**



### 下一步建議

接下來，建議你再做 2 ~ 3 個類似難度的項目來鞏固練習，比如個人名片網頁、倒計時應用、簡單計算器、天氣查詢工具。

實踐是最好的老師，只有真正動手做，你才能真正理解 Vibe Coding 的魅力。

當你熟練了 Bolt.new 平台和簡單項目的開發後，可以直接繼續學習本教程的後續內容：

- 【進階選學】編程工具