問 AI 的方式改變了

這個系列一開始設定的方向，是下指令讓 AI 負責產出程式碼，而自己負責閱讀、拆解、理解與 Code Review。
Day 20 剛開始建立專案時，只是單純想簡單做一個漫畫與動畫收藏清單。至於 Component 怎麼拆、State 放在哪裡，以及資料該怎麼保存，大部分都先交給 AI 決定。
因為一開始沒有直接挑戰太複雜的專案，所以可以先從比較簡單的架構慢慢理解。到了 Day 26，也能從中找出 loadItems() 的問題，並嘗試告訴 AI 應該修改什麼、不能修改什麼。
慢慢的會發現「負責看懂」不只是解釋 AI 寫出的程式碼，當自己對專案了解得更多時，詢問 AI 的方式也會跟著改變。

一開始只知道想做什麼

Day 20 交給 AI 的需求大致是：

請使用 React、TypeScript、Vite 和一般 CSS，建立一個漫畫與動畫收藏清單。

使用者可以新增、修改狀態與刪除收藏作品，並使用 localStorage 保存資料。

請將畫面拆成適合的 Component，但不要加入後端、UI 套件或需求以外的功能。

這份需求有列出想要的功能與使用技術，但範圍比較大，很多事情仍然需要由 AI 決定：

• 要建立哪些 Component
• State 應該放在哪裡
• Props 要怎麼傳遞
• 型別要怎麼設計
• 資料保存功能要放在哪裡

當時還不熟悉 React 與 TypeScript，所以也很難提出更詳細的要求，只能先描述想完成什麼。

看懂之後，問題變得更明確

前面從 JavaScript 與 Vue 的經驗出發，慢慢認識 React 的 Component、Props、State，以及 TypeScript 的型別。
這些內容原本看起來像是一個個分開的概念，實際放進專案後，才慢慢變成找出問題的線索。

所以 Day 26 交給 AI 的需求變成：

請修改目前的 loadItems()，在 JSON.parse() 後確認資料是陣列，並檢查每一筆資料是否符合 CollectionEntry 的格式。

如果資料格式不正確，請回傳空陣列。不要安裝新的套件，也不要修改其他功能。

這次不再只是說「幫我修好」，而是直接說清楚：

• 問題出在哪個函式
• 希望得到什麼結果
• 哪些內容不要修改

AI 可以自行決定的範圍變小，自己也比較容易確認它有沒有按照需求完成。

Prompt 不是越長越好

比較兩次需求後，我覺得 Prompt 的重點不一定是寫得很長，而是有沒有把重要內容說清楚。

目前可以先整理成：

現在遇到什麼問題
問題出現在哪裡
希望修改成什麼結果
哪些內容不要更動

如果還不知道問題在哪裡，也不用勉強指定修改方式，可以先請 AI 說明：

請解釋這段程式碼的用途、執行流程與可能的問題，先不要修改。

等自己嘗試理解後，再決定是否需要更動程式碼，會比一開始就叫 AI「幫我改得更好」更容易掌握變化。

限制修改範圍也很重要

Day 26 的需求中特別寫了：

不要安裝新的套件，也不要修改其他功能。

這也不是說 AI 一定會亂改，只是讓修改範圍更清楚而已。
如果原本只想處理一個小問題，AI 卻同時改動其他功能，後面需要閱讀與檢查的內容也會變多。先說清楚哪些地方不要動，多加一些明確的限制，完成後會比較容易對照結果。

從「幫我做」變成「請修改這裡」

一路看下來，我詢問 AI 的方式大概經過了這些變化：

幫我建立一個專案
        ↓
請說明為什麼這樣拆
        ↓
這段資料是怎麼流動的
        ↓
這裡可能有什麼問題
        ↓
請只修改這個問題
        ↓
重新檢查修改結果

問題慢慢變得明確，不是因為突然學會了什麼厲害的 Prompt 技巧，而是因為開始看得懂專案，知道自己正在問什麼。

今日回顧

• 一開始可以先描述想完成的功能，讓 AI 建立第一版
• 自己越了解專案，就越能指出問題出現的位置
• Prompt 不必刻意寫得很長，但要說清楚問題與預期結果
• 限制修改範圍，可以減少需求以外的變動
• 看不懂時，可以先請 AI 解釋，不用立刻要求修改
• AI 提供修改後，仍然要重新對照原本的需求

先這樣，下篇見!