Sybil · 個人頁 — Vibe Coder 入門課

學習進度4/8

作品與個人建議

第 2 堂 · Lunch Squadsybil-linnnnn/lesson-02/index.html

第 4 堂講評第 4 堂 · 逐支 PR 審查 · 補課頁 →

亮點

三項全做到，用店名當紀錄名字、沒評分的 24 家店也正確不顯示星等。

建議

存進抽屜沒有防護，而且天氣和清單那兩處把「抓資料」和「存抽屜」包在同一層——存不進去時畫面會說「資料載入失敗」，但資料其實明明抓到了。這種錯誤會讓你查錯方向（跑去查網路、查網址，怎麼查都查不出來）。

小挑戰

跟 AI 說「幫我在天氣、地點清單、跟團紀錄這三個寫 localStorage 的地方都包上 try/catch，寫入失敗不要影響畫面顯示、也不要跟『抓取失敗』搞混」。

特別指派作業（全班）：第 4 堂盤點發現 14 份作業裡有 10 份漏掉同一件事——存進 localStorage 的動作沒有防護。這不是誰粗心，是 AI 寫這種程式的固定盲點。看完再交一張 issue ＋一個 PR：補課 · 抽屜的另一半 →

第 3 堂講評第 3 堂 · 視覺／UX 講評

亮點

Binance 風格的深色專業感辨識度很高，星級評分＋Google 評分文字＋地圖連結資訊齊全；跟團之後卡片會亮起金色邊框，是全班唯一用「邊框變色」標示已跟團狀態的做法，質感細節做得不錯。

建議

最影響觀感的一件事——桌機 1280px 寬螢幕下，卡片被限制在畫面中間一條窄窄的欄位裡（單欄），左右兩側留了大片空白完全沒利用到，寬螢幕看起來像手機版被放大而已。

小挑戰

跟 AI 說「桌機寬螢幕時把卡片排成兩到三欄的格狀版面，不要卡片全部擠在中間一條」。

第 2 堂 · 地點貢獻

這堂尚未參與地點貢獻。