我用 Claude Code 重新設計了 aivideo.tw 的 Blog，中間踩了很多坑
一個晚上，用 Claude Code 把陽春的部落格列表改成 Film Noir Editorial 設計。過程中踩到了三個 production 地雷。全部記錄在這裡。
這是什麼
這篇文章記錄我用 Claude Code 幫 aivideo.tw 做 Blog 改版的完整過程。
不是教學。是我和 Claude Code 對話的實戰紀錄——我怎麼下指令，它怎麼做，中間哪裡炸了，怎麼修好的。
改版前長這樣
標題寫著「部落格」。
文章列表是一行一行的純文字，hover 變黃。
點進文章，EP001 的提示詞——那段長到要命的英文——就直接流水一樣跑在畫面上，跟普通段落一模一樣，沒有任何框。
說實話，陽春。
我給 Claude Code 的第一個指令
我直接說：
「目前的 aivideo.tw/blog 與內文頁都太陽春了，請參考 aivideo.tw 的品牌定位與風格提出一流的設計方案。」
Claude Code 讀了 CLAUDE.md 裡的品牌設定（Film Noir Editorial、黑底白字、accent 紅）、讀了現有的 blog 元件，然後提出了完整的設計方案：
Blog 列表頁要有「OPC Blog」大標題、series banner 顯示系列進度、第一篇用大卡片展示、EP badge 用紅色邊框。
Blog 文章頁要有 EP001 badge + 日期 + 閱讀時間、H2 標題左側紅色 accent 線、提示詞要有深色背景框加複製按鈕、文章末尾加 CTA block。
然後我說：讓圖片和影片可以插入內文
「blog 內文要可插入 Storyboard 圖片與實際生成的影片」
「請讓圖/影可任意插入內文」
Claude Code 設計了一套 Markdown 指令語法，讓我可以在文章任何位置插入圖片和影片：
分鏡圖用 ::storyboard 指令、角色圖用 ::character、YouTube 影片用 ::video。
這些指令在發布時會自動轉成正確的畫面元素——分鏡圖有紅色標籤「GPT Image 2.0 分鏡圖」，YouTube 影片有 embed 播放器。
然後 Production 炸了
改完、deploy、打開 aivideo.tw。
全站白頁。所有文章消失。Blog 顯示「文章即將發布」。
Claude Code 加了一個 debug endpoint 直接在 production 跑查詢，發現錯誤：找不到 drizzle-kit 模組。
原因是 PAYLOAD_DATABASE_PUSH=true 在 production 環境裡，每次冷啟動都要用 drizzle-kit 做 schema push，但 drizzle-kit 是開發工具，production bundle 裡沒有它。Payload 初始化失敗，所有查詢回傳空值。
修法：把 production 的 PAYLOAD_DATABASE_PUSH 改成 false。
然後文章頁還是 404
Production 的 Blog 列表回來了，但文章頁還是 404。
Claude Code 深入追查，發現 Next.js 的 unstable_cache 在之前失敗的 deploy 時快取了 null 結果。新 deploy 沒有清掉這個快取，每次查詢都拿到舊的 null。
修法：cache key 加版本號，強制讓舊快取失效。
還有一個 Payload 版本系統陷阱
在修文章內容的過程中，Claude Code 發現了第三個地雷。
每次更新文章內容，Payload 的版本系統會把更新當成「發布新草稿」，用舊版本的內容把剛更新的內容蓋掉。
等於存了新的，它幫你還原成舊的。
修法：更新時移掉 _status 欄位，只用自訂的 status 欄位控制可見性。
改版後長這樣
這次用 Claude Code 的心得
我給的是需求和方向，Claude Code 負責設計方案、寫程式、debug、部署。
我不需要知道 Payload 的版本系統怎麼運作，不需要知道 Next.js cache 的細節，不需要知道 drizzle-kit 是什麼。
我只需要說「這個不對，去查原因」。
這就是用 AI 建立 aivideo.tw 的方式——我說故事，AI 幫我完成建造。
下一步
Blog 的設計和技術基礎已經建好了。
接下來繼續做內容：EP002、EP003 往下走，把 100 支 AI 短影音系列跑完。
每一集的提示詞都會完整公開在 OPC Blog。