「我的冰箱」、「採買清單」、「食譜」與「最愛食譜」等核心功能完工後。現在回頭想想，還是有一個需求沒有解決：

難道每次把食材放進冰箱，都要自己一個一個打字輸入嗎？

如果今天剛買了一袋青菜、幾顆雞蛋、一些番茄和雞胸肉，要全部手動輸入名稱、數量與分類，其實還是有點麻煩。

這也是 my-refrigerator 最希望解決的問題之一。

因此，今天要開始加入 AI，讓使用者可以直接使用手機拍攝冰箱或食材照片，再由 AI 協助辨識照片中的食材，將辨識結果轉換成可以加入「我的冰箱」的資料。

這一天，我們會建立新的 AI Vision Skill。

如果 Feature Skill 是規範「一個功能應該怎麼開發」，那麼 AI Vision Skill 就可以專門規範「AI 圖像辨識功能應該怎麼設計與使用」。

例如可以規定 AI Vision 注意流程應該是：

圖片輸入
↓
AI Vision 分析
↓
辨識食材
↓
結構化輸出
↓
使用者確認
↓
寫入冰箱

這裡有一個非常重要的觀念：

不要讓 AI 辨識完就直接修改資料庫。

例如使用者拍了一張照片，AI 判斷裡面可能有：

雞蛋
番茄
高麗菜
雞胸肉

這些結果應該先顯示給使用者確認：

AI 辨識結果

🥚 雞蛋

🍅 番茄

🥬 高麗菜

🍗 雞胸肉

[確認加入冰箱]

確認之後，才真正寫入 Supabase。

這樣做非常重要，因為 AI Vision 並不是百分之百正確。

照片中的食材可能被遮住、光線不足，也可能有相似的食材。例如 AI 可能把青江菜判斷成小白菜，或者無法確定照片裡到底有幾顆雞蛋。

因此，我們應該把 AI 定位成：「協助輸入資料的助手」；而不是：「永遠正確的資料來源」。

接著，可以讓 Claude Code 使用 AI Vision Skill 協助我們規劃整個功能。

例如：

「請閱讀 CLAUDE.md、Feature Skill 與 AI Vision Skill，設計 my-refrigerator 的『拍照辨識食材』功能。使用者可以從手機拍照或選擇圖片，交給 AI Vision 辨識食材，回傳結構化資料，讓使用者確認後再加入冰箱。請先提出架構與資料流程，不要修改檔案。」

這時候 Claude Code 可以協助我們思考圖片上傳、AI API、資料格式以及錯誤處理。

AI 的輸出最好不要只是：

雞蛋、番茄、高麗菜

而是要求 AI 回傳結構化資料，例如：

{
  "items": [
    {
      "name": "雞蛋",
      "category": "蛋類",
      "confidence": 0.95
    },
    {
      "name": "番茄",
      "category": "蔬菜",
      "confidence": 0.91
    }
  ]
}

這樣程式就比較容易處理，也方便我們在畫面上顯示辨識結果。

另外，AI API Key 也不能直接放進 Vue 前端。

因為 GitHub Pages 是公開的靜態網站，如果把 API Key 寫在前端程式碼中，任何人都有可能取得。因此比較安全的方式，是讓前端將圖片交給後端服務，再由後端呼叫 AI API。

整體流程可以變成：

手機拍照
   ↓
Vue
   ↓
後端 / Edge Function
   ↓
AI Vision
   ↓
辨識食材
   ↓
回傳結構化結果
   ↓
使用者確認
   ↓
Supabase PostgreSQL

這也是今天另一個重要的學習：AI 功能不只是呼叫一個 API。

我們還需要思考 Prompt、輸出格式、錯誤處理、權限、安全性，以及 AI 判斷錯誤時使用者該怎麼修正。

在完整思考完架構定案後，一樣可以直接接續請 Claude 開始實作功能，

等待完成後，my-refrigerator 開始真正具備「智慧冰箱」的雛形了！

以前需要：

看到食材 → 打開 App → 手動輸入 → 儲存

現在可以變成：

拿起手機 → 拍照 → AI 辨識 → 確認 → 加入冰箱。

這就是 AI 真正融入產品流程的地方。

而 AI Vision Skill 也會成為之後 AI 功能的重要基礎。未來如果要辨識購物發票、食材包裝、保存期限，甚至分析料理照片，都可以在這套 Skill 上繼續擴充。

下一步，我們可以讓 AI 不只「看懂冰箱裡有什麼」，還能進一步思考：

「根據我現在冰箱裡的食材，我今天可以煮什麼？」

我們將使用 Claude 建立**「全聯特價食材」**功能，讓 my-refrigerator 能夠整合外部特價資訊，幫助使用者更方便地掌握近期優惠食材，並安排採買計畫。