戰報卡產生器 Session Card

每天工作結束，其實累積了很多數據：做了哪些事、花了多少時間與成本。戰報卡把這些收斂成一張設計過的圖卡 —— 不只是數字，是一張看得爽、想分享的「今日戰報」。

專案背景

我已經有在追蹤每天的工作量與花費，但純表格看久了無感。我想要一張「儀表板圖卡」：收工時自動生成，配色統一、排版漂亮，一眼看完今天的成果，順手還能存檔或分享。

核心設計

1. 資料用現成的，不重造輪子。 直接吃既有的每日紀錄，只負責「把它變好看」。
2. 三種尺度。 支援單場、單日、單週三種圖卡，從一場對話到一整週都看得到。
3. 設計感優先。 統一的靛藍配色、清楚的資訊層級，做到接近成品而不是工程草圖。
4. 收工自動跑。 不用記得手動產，收工的指令會順手把當天戰報生出來、開預覽、推到手機。

技術架構

• 資料：讀既有的每日／每週使用紀錄
• 版面：用 HTML + CSS 排出儀表板，掌握精細的視覺控制
• 出圖：用 Playwright 開無頭瀏覽器，把 HTML 渲染成 2 倍解析度的 PNG
• 交付：自動開預覽、存檔到輸出資料夾，並推送到手機

工程挑戰

• HTML 出圖的切版：版面太長容易被截斷，要把視窗高度撐夠、處理好縮放比例，輸出才完整不糊。
• 視覺一致性：多種尺度的圖卡要共用同一套設計語言，看起來才像同一個產品。
• 無痛自動化：要能掛進收工流程裡自動跑，而且重複跑同一天不會出錯（冪等）。

功能亮點

• 收工自動生成當日戰報圖卡
• 單場／單日／單週三種尺度
• 統一靛藍配色、儀表板式排版
• 2 倍解析度 PNG，存檔或分享都清楚