昨天我們讓 AI Agent 修復了收藏管理器的 Bug，現在新增、刪除、搜尋和 LocalStorage 都能正常運作，這個小專案也終於接近完成了。

不過在宣布完工之前，我還想做最後一件事：讓 AI 重新檢查整個專案，看看有沒有什麼需要改善的地方。

其實 Day 18 就已經介紹過 Code Review，當時是拿簡單的登入頁面練習。今天就不再重新解釋什麼是 Code Review，而是直接把這幾天完成的收藏管理器交給 Agent，進行一次完整檢查。

第一步：先讓 Agent 檢查，不要急著修改

這次一樣開啟 BookmarkManager 專案，裡面包含：

BookmarkManager/
├── index.html
├── style.css
└── script.js

接著把以下 Prompt 交給 Agent：

請幫目前的 BookmarkManager 專案進行一次完整的 Code Review。

請檢查 HTML、CSS 和 JavaScript，找出可能存在的重複程式碼、命名不清楚、錯誤處理不足、安全性問題，以及不必要的複雜設計。

請將問題依照重要程度排序，並說明建議的改善方式。

先不要直接修改任何檔案，也不要新增功能或第三方套件。

這次刻意要求 Agent 先提出建議，不要直接動手。

畢竟現在功能都已經完成，如果 AI 為了讓程式「看起來更漂亮」，反而把原本正常的功能改壞，那就有點本末倒置了。

第二步：看看 AI 找到了什麼

假設 Agent 檢查後，提出以下幾個建議：

這些是示範可能出現的 Review 結果，實際操作時仍然要以 Agent 對目前專案的檢查結果為準。

而且不是每個建議都一定要採用。

例如 AI 可能建議把整個 JavaScript 改成模組化架構，甚至加入額外的工具。但我們這次只是個小型練習專案，沒必要為了重構而重構。

所以我會優先處理可能影響安全性、正確性，以及明顯降低可讀性的問題。

第三步：挑一個問題實際改善

這次就拿「重複程式碼」當例子。

前面新增和刪除收藏時，都需要執行：

saveBookmarks();
renderBookmarks();

如果每個修改資料的地方都要重複寫這兩行，可以考慮整理成一個函式：

function updateBookmarks() {
    saveBookmarks();
    renderBookmarks();
}

之後新增收藏時：

bookmarks.push(newBookmark);
updateBookmarks();

刪除收藏時：

bookmarks = bookmarks.filter(
    bookmark => bookmark.id !== id
);

updateBookmarks();

這樣之後如果需要調整資料更新流程，只需要修改 updateBookmarks()，不必到每個功能裡面分別處理。

當然，這只是示範重構方式。如果實際程式沒有這種重複問題，就不需要硬改。

另外，這裡也要注意：重構的目的是改善程式結構，而不是改變原本功能。

所以這次可以再給 Agent 一段 Prompt：

請根據剛才的 Code Review，優先改善明確存在的重複程式碼與可讀性問題。

不要改變原本功能、UI 或 LocalStorage 的資料格式，也不要加入新的套件。

修改完成後，請列出變更內容，並確認新增、刪除、搜尋和資料保存功能是否受到影響。

這樣就能把「先檢查、再決定要改什麼」的流程完整串起來。

第四步：重構完成後，再測試一次

接下來就是最後的功能驗證。

我會重新測試這幾天做過的功能：

• 新增一筆收藏，確認卡片正常出現。
• 搜尋網站名稱，確認篩選結果正確。
• 刪除指定收藏，確認其他資料不受影響。
• 按下 F5，確認 LocalStorage 的資料仍然存在。
• 縮小瀏覽器視窗，確認手機尺寸下的版面沒有跑掉。

如果這些功能都正常，就代表這次重構至少沒有破壞主要的使用流程。

如果 Agent 有執行自動化測試，也可以參考測試結果；但如果它只是閱讀程式碼，沒有真正執行，就不能直接把「AI 說沒問題」當成測試通過。

最後還可以請 Agent 幫忙更新 README，整理目前的功能和使用方式：

# BookmarkManager

一個使用 HTML、CSS 和 JavaScript
製作的簡易網站收藏管理器。

## 功能
- 新增網站收藏
- 刪除網站收藏
- 搜尋網站名稱
- 網站分類
- LocalStorage 資料保存

## 使用方式
使用瀏覽器開啟網頁即可操作。

README 的部分在 Day 19 已經練習過，所以今天只需要把它更新成這次專案的實際內容，不用重新介紹一次怎麼產生文件。

從一句 Prompt 到真正的成品

回頭看看這幾天的進度，其實還滿有意思的。

Day 23 的時候，我們只有一句：

我想做一個可以收藏常用網站的網頁。

接著讓 AI 幫忙整理需求、產生 UI、加入功能、保存資料，再經過 Debug 和 Code Review。

最後就慢慢變成一個真正可以操作的小工具。

它沒有什麼複雜的技術，也不是多厲害的作品，但至少完整走過了一次從需求到成品的開發流程。

更重要的是，這次並不是單純叫 AI 一次產生整份程式碼，而是透過多次 Prompt、檢查和調整，逐步完成專案。

這也是我覺得這次練習最值得觀察的地方。

Vibe Coding 不只是讓 AI 幫忙寫 Code，而是學著怎麼跟 AI 一起把一個想法做出來。

到這裡，這次的小專案就正式告一段落。