iT邦幫忙

2026 iThome 鐵人賽

DAY 21
0
Claude AI

跟 Claude Code CLI 變成好朋友系列 第 23

【Day23】使用 Claude 建立採買清單功能

  • 分享至 

  • xImage
  •  

前一天,我們使用 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 是要購買的食材名稱,quantityunit 用來記錄數量,例如「2 盒雞蛋」或「1 瓶牛奶」。category 可以用來分類蔬菜、肉類、乳製品等,而 purchased 則用來判斷這項商品是否已經購買。

在 UI 上,可以設計成簡單的清單:

☐ 雞蛋      1 盒
☐ 牛奶      2 瓶
☐ 番茄      3 顆
☑ 高麗菜    1 顆

使用者買完東西後,只需要點擊 checkbox,就可以將項目標記為「已完成」。

這裡就可以開始思考一個很重要的使用情境:

採買清單與我的冰箱,應該不是兩個完全獨立的功能。

例如使用者買完「雞蛋」之後,如果點擊「已購買」,未來可以進一步詢問是否要把這項食材加入「我的冰箱」。

如此一來,整個使用流程就會變成:

發現缺少食材
      ↓
加入採買清單
      ↓
前往超市 / 全聯
      ↓
完成採買
      ↓
加入我的冰箱
      ↓
開始料理

這才是 my-refrigerator 真正想解決的問題,而不是單純做兩個 CRUD 頁面。

在實作過程中,也可以再次讓 Feature Skill 發揮作用。

例如要求 Claude Code 確認採買清單需要處理:

  • Loading State
  • Empty State
  • Error State
  • 新增採買項目
  • 修改數量
  • 刪除項目
  • 標記為已購買
  • Mobile First 操作
  • 與「我的冰箱」之間的資料串接

如果目前沒有任何採買項目,也不應該只顯示空白畫面,而是可以顯示:

「目前沒有採買項目,先新增下一次要買的食材吧!」

這些 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 從「管理食材」進一步走向「管理料理」。


上一篇
【Day22】使用 Claude 建立「我的冰箱」食材管理功能
系列文
跟 Claude Code CLI 變成好朋友23
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言