有鑒於我們開發好了「我的冰箱」，又加入了「採買清單」。現在 my-refrigerator 已經可以幫我們記錄家裡有哪些食材，也可以記下下一次要買什麼。不過，對一個喜歡下廚的人來說，還少了一個非常重要的功能：

「這些食材到底可以煮什麼？」

因此，今天要使用 Claude Code 建立 「食譜」與「最愛食譜」功能，讓 my-refrigerator 開始從單純的食材管理工具，變成真正與料理生活結合的工具。

這一次依然會使用前幾天建立的 Feature Skill。

Feature Skill 的目的，就是讓 Claude Code 在開發每一個功能時，都遵循相同的流程與規範。因此，開始之前，可以先讓 Claude Code 閱讀：

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

接著提出需求：

「請閱讀目前專案的 Context 與相關 Skill，建立 my-refrigerator 的『食譜』與『最愛食譜』功能。使用者可以查看食譜、查看食譜詳細內容，以及將食譜加入或移除最愛。請先分析資料結構與實作計畫，不要立即修改檔案。」

這次的功能會比前面的採買清單稍微複雜，因為食譜本身包含比較多資訊。

一份食譜可能包含：

名稱
封面圖片
料理時間
難度
介紹
食材
料理步驟
建立時間
更新時間

例如：

番茄炒蛋

⏱ 15 分鐘
難度：簡單

食材：
🥚 雞蛋 3 顆
🍅 番茄 2 顆
🧂 鹽 少許

步驟：
1. 番茄切塊
2. 雞蛋打散
3. 先炒雞蛋
4. 加入番茄拌炒
5. 調味後完成

如果只是把這些內容全部放在 Recipe 資料表裡，未來會很難管理。因此 Day20 設計 Database Schema 時，就可以讓 Claude Code 思考 Recipe 與 Recipe Ingredient 之間的關係。

例如：

Recipe
  │
  ├── Recipe Ingredients
  │
  └── Recipe Steps

這樣一份食譜就可以有多個食材與多個料理步驟。

接下來是今天另一個重要功能——最愛食譜。

當使用者看到喜歡的食譜時，可以點擊愛心：

♡ 加入最愛

❤️ 已加入最愛

之後就可以在「我的最愛」頁面快速找到自己收藏的料理。

這個功能看起來很簡單，但其實很適合拿來練習資料關聯。

因為「最愛」不是另一份完整的食譜，而是代表：

某個使用者喜歡某一份食譜。

因此資料庫可以設計成：

User
 │
 └── Favorite Recipes
          │
          ↓
       Recipe

如果未來有多個使用者，每個人都可以擁有自己的最愛食譜，而不會影響其他使用者。

在 UI 設計上，也要思考 Mobile First。

因為使用者很可能是在廚房裡拿著手機查看食譜，所以食譜頁面不應該只是桌面版網站縮小，而應該讓使用者可以很容易地：

看食材 → 看步驟 → 捲動 → 回頭確認 → 繼續料理。

因此，食譜詳細頁可以將食材與步驟清楚分開，並讓文字、圖片與按鈕都有適合手機閱讀的尺寸。

完成初版之後，再讓 Claude Code 進行一次 Review：

「請依照 Feature Skill 檢查食譜與最愛食譜功能，確認資料關聯、CRUD、Loading、Error、Empty State 與 Mobile First 是否完整。」

這樣的流程可以讓我們再次體驗：

需求 → Schema → Feature → 實作 → Review → 修正。

而且到目前為止，my-refrigerator 已經慢慢形成一條完整的生活流程：

我的冰箱
    ↓
查看目前食材
    ↓
發現缺少食材
    ↓
加入採買清單
    ↓
完成採買
    ↓
回到冰箱
    ↓
查看食譜
    ↓
收藏喜歡的料理

這時候，my-refrigerator 已經不只是「記錄冰箱裡有什麼」的 App，而開始成為一個從食材管理、採買到料理的完整工具。

下一步，我們可以再往前一步。

如果我今天打開冰箱，看到雞蛋、番茄、高麗菜和雞胸肉，系統能不能直接告訴我：

「你現在可以煮什麼？」

Day25，我們將開始加入 AI 食材辨識與 AI 料理推薦，讓 my-refrigerator 真正開始具備「智慧」。