Vibe Coding: Snapshot 2.0
最早做 Snapshot 的時候只透過程式來產生 snapshot.json 來協助 AI 開發，所以先前寫了 Vibe Coding: Snapshot 這篇來做紀錄我的做法。
但隨著專案變大，單一 snapshot.json 開始不敷使用
當專案變大 Snapshot 就跟著變大這件事其實一直在我心裡，覺得那天一定會碰到問題，直到某天打開 Claude 看到提示 snapshot.json 佔用太多 context 的時候，才真的讓我開始升級 snapshot 架構的動作。
整理幾個升級的重點:
- 把 snapshot 拆成多份，並製作 snapshot index
- 根據使用(溝通)方式來拆分 snapshot
- 建立 snapshot 之間不同維度的連結
架構看起來大概像是下圖這個樣子，透過主要的索引，然後指引到各個特定目的的 snapshot，並且 snapshot 之間也有互相連結。
簡單來說，拆分後透過索引來指引細節，也讓拆分後的 snapshot 符合思考跟溝通的使用方式，最後再各個索引之間互相連結，符合思考的路線。
把 snapshot 拆成多份，並製作索引來連結
當專案變大， Claude 開始提示 snapshot.json 佔用太多 context
看到這個訊息時，我第一個想法就是要把 snapshot 拆分為更多小檔案，避免檔案太大佔用太多 context。
但要怎麼進行拆分? 原本一個檔案不用思考這個問題，拆開後就得思考 AI 會怎麼用，或者是應該怎麼用才對的問題。
我第一個直覺就是想要直接把 MVC 切開，保持目的性單一。
為什麼? 有用過現代 web 開發框架的人都知道，要找資料，就會去找 model，想要處理呈現的部分就會改 template (或是所謂的 view)。
然後用 snapshot 索引來分別指引 AI 讀取 model, view, template .. 等 snapshots，並提供對應的說明。
如此一來，AI 可以分別讀特定用途的 snapshot 來快速知道功能在哪裡，目的性更加的明確，不用每次都載入大檔案、載入不必要的資訊。
升級後的 snapshots 看起來像是這個樣子
可以看到檔案從原本的 snapshots.json 變成 10 個 json 檔了，其他檔案加起來的檔案大小幾乎是 index 的 5 倍。
也因應多個 snapshots 檔案，所以我開了目錄來放 snapshots，然後用 snapshot_index.json 來作為主要入口，並在 CLAUDE.md 提到要使用這個 snapshot。
之後進行開發幾乎不需要進行任何的工具搜尋，讓 AI 開發的速度大幅提升。我還製作了一個測試的評估程式來做到底有沒有加速的測試。
根據使用(溝通)的方式來規劃 snapshot
在跟 AI 溝通時，我常透過提供以下的資訊來進行定位:
- 透過頁面標題
- 提供網址
- 透過框架的程式名稱
這幾個方式都是我覺得最直覺的溝通方式，也是 AI 最能夠快速知道的資訊，
所以除了 python 的程式碼可以直接透過 docstring 來當作說明，非常方便，但要如何最快找到標的，像是如何找到 template，或是如何透過網址找到程式，都是我這次升級考慮進來的部分。
像是 template 其實不像程式有註解，我乾脆把透過程式把 template 的標題取出來當成說明，以下舉個例子做詳細說明。
把網頁標題當成 snapshot 的說明
例如某個活動管理後台可能會有「活動列表」、「活動資訊」 這些頁面的標題，在溝通的時候直接透過標題溝通最快，當覺得可能不夠清楚的時候，我會再補充其他資訊。
可是 template 不像是程式碼有註解的規範可以直接拿來用，所以我就請 snapshot generator 的程式在製作 snapshot 的時候，就讀取 template 把標題抓出來當作說明的一部分，讓我可以直接用畫面上的標題，直接當成 AI 可以最快速搜尋到的字串來搜尋 template。
這樣從 snapshot 就可以快速找到檔案，不用另外再進行搜尋，也不用讀取內容。流程看起來就像是下面這樣:
網址
對於網頁來說，網址是另一個我們最快能看到的資訊，並且 AI 也能夠透過網址最快關聯到程式的入口途徑，因為網址會對應到 view(controller), 而有了 controller 就能找到 model 跟 template 以及其他相關聯的程式。
所以我又做了一個網址對應到 controller 的 snapshot 檔案，讓 AI 一看我貼給他的網址，就能快速找到標的。
檔案之間的連結
後來我開始思考，通常要調整某個頁面，除了 template 之外，其實也有很大的機會會動到 views 或是 models，那是不是在 snapshot 另外做一個關聯，讓 AI 也能夠快速找其他關聯的 views 或 models 進行調整，而不用去讀實際的程式內容。
又或者像是 view (controller) 就是把這 model 跟 template 這 2 個部分連結起來的東西，所以我也在 view 做了一件事，view 用到了哪些 model、哪些 template，都寫在 view 的 snapshot 裡面，如此一來 AI 就不需要再去讀取程式就能夠知道對應的東西在哪裡，大幅提升速度。
最後: 共同語言
我們跟 AI 之間的共同語言，其實就藏在程式碼裡面。就像是跟其他人溝通一樣，你們要有相同的 context，用相同的名詞，才能發揮溝通的最大效益。
其實我一直想要把這個工具 release 出來，但不同的程式語言或是框架會有不同的做法，很難一體適用，所以我一直都在說的是心法，而不是實際的做法。
要有共同的語言的話，要儘量規格化，就像是工程師利用框架來進行開發，除了加速開發之外，其實也在合作上降低了許多門檻，因為很多東西都定義好了，大家都知道怎麼做，東西名詞定義是什麼，都能夠降低許多溝通上的歧異。
除了用框架來進行開發之外，也得明確訂定一些規則，讓 AI 知道你在說的標的物是什麼，例如: item_list 就是列表頁， item_detail 就是內頁。
認知統一的話，AI 在搜尋的速度也會快上許多，就能夠大幅增加開發的速度。
以上這些就是我在目前 snapshot 升級到 2.0 的做法跟心得。透過上述的方式讓我在透過 AI 開發時，加速非常多，減少了非常多的等待時間。