前一天,我們使用 Claude Code 完成了 my-refrigerator 第一個核心功能——「我的冰箱」。現在,我們已經可以記錄家裡有哪些食材,但很快就會遇到下一個煩惱:冰箱裡沒有的東西,要買什麼?
這也是我最希望 my-refrigerator 可以解決的生活問題之一。
平常下班準備回家煮飯時,可能突然想到需要雞蛋、牛奶或番茄,但又不確定家裡到底有沒有。打開冰箱確認之後,還可能忘記自己剛剛缺了什麼。等到了超市或全聯,才發現忘記帶採買清單。
因此,今天要使用 Claude Code 建立第二個核心功能——「採買清單」。
這次同樣會使用前一天建立的 Feature Skill。
Feature Skill 的價值,就是讓 Claude Code 不只是完成一個畫面,而是按照我們定義好的功能開發流程,從需求、資料、UI 到實際功能,一步一步完成。
在開始之前,可以先讓 Claude Code 閱讀:
CLAUDE.md
Frontend Skill
Database Skill
Backend/Data Skill
Feature Skill
接著提出今天的需求:
「請閱讀目前專案的 Context 與相關 Skill,建立 my-refrigerator 的『採買清單』功能。使用者可以新增、修改、刪除與完成採買項目,並請先提出實作計畫,不要立即修改檔案。」
這裡可以看到,我們並沒有直接叫 Claude Code「幫我做一個購物清單頁面」,而是把它當成一個完整 Feature 來處理。
首先要思考的是採買清單需要哪些資料。
例如:
name
quantity
unit
category
purchased
created_at
updated_at
name 是要購買的食材名稱,quantity 與 unit 用來記錄數量,例如「2 盒雞蛋」或「1 瓶牛奶」。category 可以用來分類蔬菜、肉類、乳製品等,而 purchased 則用來判斷這項商品是否已經購買。
在 UI 上,可以設計成簡單的清單:
☐ 雞蛋 1 盒
☐ 牛奶 2 瓶
☐ 番茄 3 顆
☑ 高麗菜 1 顆
使用者買完東西後,只需要點擊 checkbox,就可以將項目標記為「已完成」。
這裡就可以開始思考一個很重要的使用情境:
採買清單與我的冰箱,應該不是兩個完全獨立的功能。
例如使用者買完「雞蛋」之後,如果點擊「已購買」,未來可以進一步詢問是否要把這項食材加入「我的冰箱」。
如此一來,整個使用流程就會變成:
發現缺少食材
↓
加入採買清單
↓
前往超市 / 全聯
↓
完成採買
↓
加入我的冰箱
↓
開始料理
這才是 my-refrigerator 真正想解決的問題,而不是單純做兩個 CRUD 頁面。
在實作過程中,也可以再次讓 Feature Skill 發揮作用。
例如要求 Claude Code 確認採買清單需要處理:
如果目前沒有任何採買項目,也不應該只顯示空白畫面,而是可以顯示:
「目前沒有採買項目,先新增下一次要買的食材吧!」
這些 UX 細節也可以逐漸整理進 Feature Skill,讓 Claude Code 未來建立其他功能時,自動遵循相同的設計方式。
完成初版後,可以再請 Claude Code 進行 Review:
「請檢查採買清單功能是否符合 Feature Skill,確認 CRUD、Loading、Error、Empty State 與 Mobile First 是否完整,並檢查是否有重複的資料存取邏輯。」
這個過程再次提醒我們,AI 輔助開發並不是「Prompt 一次,程式就完成」。
比較好的方式是:
需求 → 規劃 → AI 實作 → Review → 修正 → Commit。
而 Feature Skill 就像一份「功能開發檢查表」,幫助 Claude Code 在每次開發功能時,都維持一致的品質。
今天完成後,my-refrigerator 已經開始從單純的「冰箱紀錄工具」,慢慢變成真正的生活助手。
目前的核心流程已經可以串起來:
我的冰箱
↓
發現缺少食材
↓
加入採買清單
↓
完成採買
↓
回到我的冰箱
下一步,我們還可以讓這個流程變得更有趣。
既然已經知道冰箱裡有什麼食材,那麼下一個問題就是:
「我現在到底可以煮什麼?」
再來,我們將使用 Claude Code 建立 「最愛食譜」與食譜紀錄功能,開始讓 my-refrigerator 從「管理食材」進一步走向「管理料理」。