yupi-translate-app[bot]
16 KiB
Vibe Coding 個人工具開發
你好，我是魚皮。
在上一篇文章中，我們學習了完整的 5 步開發流程。現在，是時候把這套流程真正用起來了！
這篇文章，我會帶你做 5 個實用的個人工具專案：個人作品集網站、待辦事項應用（進階版）、Markdown 筆記應用、番茄鐘計時器、天氣查詢應用。
需要先說明的是，本節教程更多的是做一個思路和專案開發流程的指導，目的是引導大家學會使用 Vibe Coding 開發專案的方法，需要大家自行動手實踐。如果你需要更完整的 Vibe Coding 圖文和視頻教程，可以看看魚皮的原創專案實戰部分。
下面這些專案都是我精心挑選的，實用性強，做出來真的能用，不是玩具。難度適中，適合新手練手，不會太難也不會太簡單。技術上涵蓋了前端、資料儲存、API 呼叫等常見場景，完成基礎版後還可以繼續新增新功能。更重要的是，這些專案都可以放到你的作品集裡，向別人展示你的能力。
每個專案我都會提供完整的開發指南，包括需求分析、技術選型、開發步驟和擴展思路。你可以根據自己的興趣選擇專案，不需要按順序完成。
一、專案實戰 - 個人作品集網站
個人作品集網站是展示你能力的最好方式。無論你是找工作、接私活，還是在社群媒體上分享你的作品，一個漂亮的作品集網站都能給你加分。而且，這個專案本身就是你的第一個作品，可以放到作品集裡展示，是不是很有意思？
這個網站要包含幾個部分：個人介紹（姓名、頭像、簡介、聯絡方式）、技能展示（你會哪些技術）、專案展示（你做過的專案，包括截圖、描述、連結）。介面要做響應式設計，在手機和電腦上都能正常顯示。
技術選型上，我們使用 React + TypeScript + Vite 作為前端框架，Tailwind CSS 來寫樣式，最後部署到 Vercel 上線。這套技術棧很現代，也是目前最流行的前端開發方案。
開發步驟
1）需求研究
開發任何專案前，都要先做需求研究。你可以去看看別人的作品集網站是什麼樣的，比如在網上搜尋 "developer portfolio examples"，找找靈感。記錄下你喜歡的設計風格和功能，這些都可以作為你的參考。
2）寫 PRD 文件
有了靈感後，就要寫 PRD 文件了。建立一個 PRD.md 文件，明確你要展示哪些內容。下面是一個參考範例：
# 個人作品集網站 PRD
## 核心功能
1. 首頁：大標題 + 簡介 + 頭像
2. 關於我：詳細介紹 + 技能列表
3. 專案展示：專案卡片列表，每個卡片包含專案名稱、專案截圖、簡短描述、技術棧、專案連結
4. 聯絡方式：郵箱、GitHub、社群媒體連結
## 設計要求
- 簡潔現代的設計風格
- 深色主題
- 流暢的滾動動畫
- 行動端適配
這個文件不需要寫得很複雜，把核心功能和設計要求說清楚就行。
3）寫技術設計文件
接下來寫技術設計文件 TECH_DESIGN.md。在這裡確定具體的技術方案：
# 技術設計
## 技術棧
- React + TypeScript + Vite
- Tailwind CSS
- React Router（如果需要多頁面）
- Framer Motion（動畫效果）
## 專案結構
src/
components/
Header.tsx
Hero.tsx
About.tsx
Projects.tsx
Contact.tsx
Footer.tsx
data/
projects.ts
skills.ts
App.tsx
main.tsx
## 資料管理
- 專案資料和技能資料儲存在 TypeScript 文件中
- 使用陣列儲存，方便後續新增和修改
這個文件的作用是讓 AI 知道你要用什麼技術，專案結構是什麼樣的。
4）寫 AGENTS.md 文件
然後建立 AGENTS.md 文件，告訴 AI 開發規範：
# 個人作品集網站開發指令
## 專案概述
使用 React + TypeScript + Tailwind CSS 開發的個人作品集網站。
## 開發規範
- 使用函數式元件 + Hooks
- 使用 Tailwind CSS 編寫樣式
- 元件要可複用
- 程式碼要有註釋
## 設計要求
- 深色主題（背景 #0a0a0a，文字 #ffffff）
- 使用漸變色作為強調色
- 新增平滑的滾動動畫
- 確保行動端適配
## 注意事項
- 保持設計簡潔，不要過度設計
- 效能優化：圖片使用懶加載
- 確保所有連結可點擊
這個文件是給 AI 的開發規範，讓它知道程式碼要怎麼寫，設計要什麼風格。
5）開始開發
有了這三個文件，就可以開始開發了。打開 Cursor 等 AI 程式碼編輯器，開始和 AI 對話。
第一個提示詞是初始化專案：
請根據 PRD.md、TECH_DESIGN.md 和 AGENTS.md 的要求，初始化一個 React + TypeScript + Vite 專案，並安裝 Tailwind CSS。
這個提示詞很簡單，但包含了所有必要的資訊。AI 會讀取這三個文件，然後按照要求建立專案結構，安裝依賴，配置 Tailwind CSS。
然後逐步實現每個元件。比如建立 Hero 元件：
建立 Hero 元件，包含大標題、簡介和頭像。使用 Tailwind CSS 實現深色主題和漸變色效果。
這個提示詞告訴 AI 要建立什麼元件，包含哪些內容，用什麼技術實現。AI 會產生完整的元件程式碼。
接著建立 Projects 元件：
建立 Projects 元件，展示專案列表。每個專案卡片包含截圖、標題、描述和技術棧標籤。
就這樣一步一步，完成整個網站。每完成一個元件，就在瀏覽器中預覽一下效果，確保符合預期。
6）部署上線
開發完成後，就可以部署上線了。部署的流程很簡單：
- 把程式碼推送到 GitHub
- 登入 Vercel，匯入 GitHub 倉庫
- 點擊部署，等待完成
- 獲得你的網站連結
Vercel 會自動檢測你的專案類型，配置建構命令，非常智慧。部署完成後，你就有了一個可以存取的網站連結，可以分享給別人看。
擴展思路
基礎版完成後，你還可以繼續擴展功能。比如新增部落格功能，寫文章分享你的學習經驗；新增深色/淺色主題切換，讓使用者可以選擇喜歡的主題；支援多語言，吸引國際使用者；新增存取統計，了解網站存取情況；甚至可以加個留言板功能，讓訪客可以給你留言。
二、專案實戰 - 待辦事項應用（進階版）
完成了作品集網站後，讓我們來做一個功能更複雜的專案。在快速上手部分，我們做過一個簡單的待辦事項應用，只有最基本的新增和刪除功能。現在，讓我們做一個功能更強大的版本，學習如何處理更複雜的業務邏輯。
這個進階版的功能要豐富得多。新增待辦事項時，除了標題，還可以設定描述、截止日期、優先級、分類。檢視列表時，支援按分類、優先級、狀態篩選，還有搜尋功能可以快速找到特定的待辦事項。當然也支援編輯和刪除。資料用 LocalStorage 儲存，重新整理頁面不會遺失。另外還有統計功能，顯示完成率、待辦數量等。
技術選型上，前端用 React + TypeScript + Vite，狀態管理用 Zustand（一個輕量級的狀態管理庫，比 Redux 簡單很多），樣式用 Tailwind CSS，日期處理用 date-fns，資料儲存用 LocalStorage。
開發步驟
1）定義資料模型
開發的第一步是定義資料模型。你需要明確待辦事項包含哪些欄位：id（唯一標識）、title（標題）、description（描述）、category（分類）、priority（優先級：低、中、高）、dueDate（截止日期）、completed（是否完成）、createdAt（建立時間）。把這些欄位定義清楚，後面的開發就會很順暢。
2）按功能模組開發
然後按功能模組來開發。建議的順序是：先實現資料儲存層，封裝 LocalStorage 的讀寫操作；再實現狀態管理，用 Zustand 建立全域 store；然後實現新增功能；接著實現列表展示和篩選；最後實現搜尋和統計。這樣循序漸進，每完成一個模組就測試一下，確保正常工作。
和 AI 對話時，可以這樣說：
建立 Todo 資料模型和 LocalStorage 工具函數。
AI 會幫你定義資料結構和封裝儲存操作。這個提示詞雖然簡單，但 AI 知道要做什麼，因為它會參考你的 PRD 和技術設計文件。
然後說：
使用 Zustand 建立全域狀態管理，包括新增、刪除、更新、篩選等方法。
AI 會建立一個完整的 store，包含所有需要的方法。Zustand 是一個很輕量的狀態管理庫，比 Redux 簡單很多，但功能足夠強大。
接著說：
建立 AddTodo 元件，包含表單輸入和驗證。
AI 會實現新增功能的介面和邏輯，包括輸入框、下拉選擇、日期選擇器等。每完成一個功能，就測試一下，確保正常工作。
關鍵技術點
這個專案有幾個關鍵的技術點需要注意。首先是狀態管理，因為功能比較多，用 Zustand 來管理全域狀態會方便很多。你可以讓 AI 幫你建立一個 store，包含新增、刪除、更新、篩選等方法。
篩選功能要支援多條件篩選，比如同時按分類和優先級篩選。搜尋功能要支援模糊搜尋，在標題和描述中查找關鍵詞。這些邏輯都可以讓 AI 幫你實現，你只需要告訴它具體的需求就行。
擴展思路
基礎版完成後，還可以繼續擴展。比如新增標籤功能，讓待辦事項可以打多個標籤；支援子任務，一個大任務可以分解成多個小任務；新增提醒功能，到期前自動提醒；支援資料匯出為 CSV；甚至可以用 Firebase 實現雲端同步。
三、專案實戰 - Markdown 筆記應用
掌握了狀態管理和資料篩選後，我們來學習如何處理文字編輯和即時預覽。Markdown 是程式設計師最常用的文件格式，做一個 Markdown 筆記應用可以讓你學習如何處理文字編輯、即時預覽等功能。
這個專案要實現一個完整的 Markdown 筆記應用。使用者可以建立筆記，輸入標題和內容。介面採用左右分欄，左側是編輯器，右側即時預覽渲染後的效果。左側還要顯示筆記列表，支援搜尋。資料儲存在 LocalStorage，支援刪除筆記。程式碼區塊要有語法高亮，這樣看起來更專業。
技術選型上，前端用 React + TypeScript + Vite，Markdown 解析用 react-markdown，程式碼高亮用 react-syntax-highlighter，樣式用 Tailwind CSS，資料儲存用 LocalStorage。
開發步驟
1）實現基礎佈局
開發的第一步是實現基礎佈局，建立左右分欄的佈局，左側是編輯器，右側是預覽區。這個佈局用 Tailwind CSS 的 Flex 或 Grid 很容易實現。
可以這樣告訴 AI：
建立左右分欄佈局，左側是 Markdown 編輯器（大文字框），右側是預覽區。使用 Tailwind CSS 實現響應式佈局。
AI 會建立一個美觀的分欄佈局，在電腦上是左右分欄，在手機上會自動變成上下佈局。
2）整合 Markdown 解析
然後整合 Markdown 解析。使用 react-markdown 這個庫，可以很方便地將 Markdown 文字轉換為 HTML。你只需要把文字傳給這個元件，它就會自動渲染。
告訴 AI：
使用 react-markdown 將 Markdown 文字轉換為 HTML，在預覽區顯示渲染後的效果。
這個提示詞很簡潔，但 AI 知道要做什麼。它會安裝 react-markdown 庫，匯入元件，然後在預覽區使用。
3）實現即時預覽
接下來實現即時預覽。這個功能的關鍵是監聽編輯器的輸入變化，即時更新預覽區。當使用者在左側編輯時，右側要同步顯示渲染後的效果。
告訴 AI：
監聽編輯器的輸入變化，即時更新預覽區。使用者在左側編輯時，右側同步顯示 Markdown 渲染後的效果。
這個功能用 React 的狀態管理很容易實現。AI 會把編輯器的內容儲存在 state 中，然後傳給預覽元件，每次內容變化都會自動更新預覽。
4）新增程式碼高亮
程式碼高亮也很重要，讓程式碼區塊看起來更專業。告訴 AI：
配置 react-syntax-highlighter，讓程式碼區塊支援語法高亮。支援多種程式語言，比如 JavaScript、Python、Java 等。
AI 會配置 react-syntax-highlighter，當 Markdown 中有程式碼區塊時，會用語法高亮來渲染，不同的語法元素會顯示不同的顏色。
5）新增筆記管理功能
最後新增筆記管理功能。告訴 AI：
實現筆記管理功能：
- 左側新增筆記列表，顯示所有筆記的標題
- 點擊筆記可以切換到該筆記
- 支援建立新筆記、刪除筆記
- 支援搜尋筆記（按標題搜尋）
- 資料儲存在 LocalStorage
這個提示詞包含了所有的功能要求，AI 會一次性實現所有功能。
關鍵技術點
這個專案的關鍵是實現 Markdown 的即時預覽。當使用者在左側編輯時，右側要即時顯示渲染後的效果。這個功能用 react-markdown 庫可以很容易實現。
程式碼高亮也很重要，可以讓 AI 幫你配置 react-syntax-highlighter，支援多種程式語言的語法高亮。為了更好的使用者體驗，可以讓 AI 新增一些優化，比如 Tab 鍵插入空格而不是切換焦點，支援 Ctrl+B 加粗等快捷鍵，自動儲存草稿等。
擴展思路
基礎版完成後，可以繼續擴展功能。比如支援圖片上傳，讓筆記可以插入圖片；新增目錄導航，自動產生文章大綱；支援匯出為 PDF，方便分享；新增主題切換，提供多種編輯器主題；支援多種 Markdown 風格，比如 GitHub 風格、標準風格等。
四、專案實戰 - 番茄鐘計時器
前面的專案都是資料展示和管理，現在讓我們做一個涉及定時器和通知的專案。番茄工作法是一種流行的時間管理方法，做一個番茄鐘應用可以讓你學習如何處理定時器、通知等功能。
番茄工作法的原理是工作 25 分鐘，休息 5 分鐘，這樣循環進行。這個應用要實現倒計時功能，支援開始、暫停、重置。使用者可以自訂工作和休息的時長。時間到了要發出通知提醒，還可以播放提示音。另外還要有統計功能，記錄完成的番茄鐘數量，幫助使用者了解自己的工作效率。
技術選型上，前端用 React + TypeScript + Vite，樣式用 Tailwind CSS，通知用瀏覽器自帶的 Notification API，資料儲存用 LocalStorage。
開發步驟
1）實現倒計時邏輯
開發的核心是實現倒計時邏輯。告訴 AI：
實現番茄鐘倒計時功能：
- 預設工作 25 分鐘，休息 5 分鐘
- 支援開始、暫停、重置
- 時間格式顯示為 MM:SS
- 倒計時結束時觸發提醒
這個提示詞清楚地說明了要實現什麼功能。AI 會用 JavaScript 的 setInterval 來實現倒計時，每秒減 1，到 0 時觸發提醒。
2）實現通知功能
然後實現通知功能。瀏覽器的 Notification API 可以傳送系統通知，但需要先請求使用者權限。告訴 AI：
實現瀏覽器通知功能：
- 頁面載入時請求通知權限
- 倒計時結束時傳送通知
- 通知標題是"番茄鐘"，內容是"時間到了，該休息了！"
這個提示詞說明了通知的觸發時機和內容。AI 會先檢查瀏覽器是否支援通知，然後請求權限，最後在時間到了的時候傳送通知。
3）新增音效
還可以新增音效。時間到了播放一個提示音，這樣即使用戶沒看螢幕也能知道時間到了。告訴 AI：
新增提示音功能：
- 準備一個提示音文件（放在 public 目錄）
- 倒計時結束時播放提示音
AI 會用 Audio 物件來播放音訊文件。
4）新增統計功能
最後新增統計功能。告訴 AI：
實現統計功能：
- 記錄完成的番茄鐘數量
- 顯示今日完成數量、本週完成數量
- 資料儲存在 LocalStorage
這樣使用者可以看到自己的工作效率，更有成就感。
關鍵技術點
這個專案的核心是倒計時邏輯和通知功能。倒計時要準確，每秒減 1，不能有誤差。通知功能需要先請求使用者權限，如果使用者拒絕了權限，要給出友好的提示。
為了更好的使用者體驗，可以在計