昨天， my-refrigerator 開始具備「智慧」功能。讓使用者可以透過手機拍照辨識冰箱裡的食材。現在，我們已經知道「家裡有什麼」，下一個想知道的就是：

「最近有什麼食材正在特價？」

對喜歡下廚的人來說，採買不只是把缺少的東西補齊，如果能知道最近有哪些食材正在優惠，就可以根據價格安排下一餐，甚至反過來決定這週要煮什麼。

因此，今天要使用 Claude Code 建立 「全聯特價食材」 功能。

這一次會使用新的 Web/Data Skill。

如果 Database Skill 負責「資料庫怎麼設計」，Feature Skill 負責「一個功能怎麼開發」，AI Vision Skill 負責「AI 圖像辨識怎麼處理」，那麼 Web/Data Skill 就是負責處理：

「外部網站資料如何取得、整理、驗證與保存。」

因為「全聯特價食材」不是我們自己建立的資料，而是來自外部資料來源，所以開發時需要特別注意資料來源、更新時間、資料格式，以及來源是否允許使用。

開始之前，可以讓 Claude Code 閱讀：

CLAUDE.md
Database Skill
Backend/Data Skill
Feature Skill
Web/Data Skill

接著提出需求：

「請閱讀目前專案的 Context 與相關 Skill，規劃 my-refrigerator 的『全聯特價食材』功能。需要取得外部特價食材資料，整理成適合前端顯示的格式，並保存必要的資料。請先分析資料來源與資料流程，不要立即修改檔案。」

這裡第一個需要思考的問題就是：

資料從哪裡來？

如果外部網站提供公開 API，可以優先使用 API；如果沒有 API，也不能直接假設可以任意抓取網站內容，而是要先確認網站的使用條款、robots 規範與資料授權方式。

因此，Web/Data Skill 可以要求 Claude Code 在實作前先確認：

資料來源
↓
是否有 API？
↓
是否允許取得？
↓
資料格式
↓
更新頻率
↓
資料清洗
↓
儲存方式

這個流程非常重要。

例如外部資料可能長這樣：

商品名稱：高麗菜
原價：59
特價：39
優惠期間：08/10～08/16

但我們真正希望在 my-refrigerator 中使用的資料，可能需要整理成：

name
original_price
sale_price
discount
start_date
end_date
source
updated_at

也就是把外部網站的資料轉換成我們自己的資料模型。

這就是 Web/Data Skill 很重要的地方：外部資料不是拿來就能直接使用，而是需要經過整理與標準化。

另外，特價資料最大的問題之一就是「會過期」。

例如今天顯示高麗菜特價 39 元，但活動結束後，這筆資料就不能繼續當成目前優惠。因此資料庫最好保存：

start_date
end_date
updated_at

前端顯示時，也應該只顯示目前仍在有效期間內的資料。

甚至可以讓畫面顯示：

🥬 高麗菜
原價 $59
特價 $39
優惠至 08/16

並提供「加入採買清單」按鈕。

這樣一來，新的功能就能和 Day23 的採買清單串起來：

全聯特價食材
      ↓
發現高麗菜特價
      ↓
加入採買清單
      ↓
完成採買
      ↓
加入我的冰箱

這樣的設計才真正符合 my-refrigerator 的核心概念：幫助使用者從「發現食材」一路走到「買回家」與「放進冰箱」。

今天也可以讓 Claude Code 協助建立資料同步流程。

例如要求：

「請設計特價食材資料的更新機制，避免過期資料持續顯示，並保留資料來源與最後更新時間。」

Claude Code 可以根據 Web/Data Skill 提出資料流程，再由我們確認是否合理。

同時，也要特別注意不要把外部網站的資料直接當成永遠正確的資料。

如果資料來源更新、格式改變，甚至網站暫時無法取得資料，系統都應該有相對應的處理方式。例如顯示：

「特價資料最後更新：今天 10:30」

而不是讓使用者誤以為畫面上的價格一定是即時價格。

這也是 AI 輔助開發很重要的一個觀念：

AI 可以幫我們寫資料抓取與整理程式，但資料來源是否合法、可靠，以及資料是否適合使用，仍然需要開發者自己判斷。

完成今天的功能後，my-refrigerator 的使用情境又更完整了：

我的冰箱
   ↓
查看缺少的食材
   ↓
查看全聯特價
   ↓
加入採買清單
   ↓
完成採買
   ↓
加入我的冰箱

而 Web/Data Skill 也讓 Claude Code 開始具備處理「外部世界資料」的能力。

到目前為止，我們已經建立了多種不同用途的 Skill：

Frontend Skill → 前端開發

Database Skill → 資料庫設計

Backend/Data Skill → 資料存取

Feature Skill → 功能開發流程

AI Vision Skill → 圖像辨識

Web/Data Skill → 外部資料整合

這些 Skill 並不是互相獨立的，而是逐漸組合成 my-refrigerator 的 AI Native 開發規範。

下一步，我們可以把目前已經收集到的「冰箱食材」與「食譜」真正交給 AI 思考。

後面，我們將使用 Claude 建立「AI 食譜推薦」功能，讓系統根據冰箱裡現有的食材，推薦今天可以料理的菜色。