Brain-log
Product Design
Chrome CSS UI 指南實戰：5 個能直接提升體驗的互動細節
整理 CSS UI 文件中可立即套用的互動模式，從表單狀態、焦點可視化到捲動與可讀性優化。
發布於 2026年5月3日 把介面細節、互動狀態與使用者判斷整理成可落地的設計決策。
Reader lens
這篇文章不是單純紀錄技術，而是把實作判斷整理成後續網站、內容系統或 AI workflow 可重複使用的知識。
前端體驗差異常常不在大功能，而在細節：焦點狀態清不清楚、輸入錯誤可不可理解、滑動是否穩定。
可立即採用的 5 個方向
:focus-visible：只在鍵盤導覽時呈現焦點樣式，兼顧可及性與視覺整潔。accent-color：快速統一 checkbox/radio/progress 的品牌色。scroll-behavior與scroll-padding：改善錨點跳轉與固定 Header 遮擋問題。caret-color與::selection：提升輸入與選取操作的可感知性。- 狀態樣式一致化：
hover / active / disabled / invalid統一規則。
導入時的原則
- 先定義狀態語意，再做視覺樣式。
- 所有互動樣式都要兼顧 mobile 與 desktop。
- 每次調整都要做鍵盤操作檢查。
參考來源
- Chrome Developers（CSS UI）：https://developer.chrome.com/docs/css-ui?hl=zh-tw
Keep reading
延伸閱讀
Brain-log 會把策略、產品設計與工程實作分開整理，讓每篇文章都能回到可執行的判斷。
Product Design
導視系統是什麼？從 V&A 博物館重新設計談尋路體驗
從 V&A 博物館導視系統改版出發，整理資訊、方向、識別與警告標示的差異，以及聲音導引如何補足空間中的尋路體驗。
AI Strategy
Lottie 開始變成 AI 動畫的原生語言：一篇關於 token、格式與工作流的 brain-log
從 LottieGPT、OmniLottie 到 diffusionstudio/lottie，整理為什麼向量動畫正在從輸出格式變成生成模型的原生目標。
Engineering
Cloudflare Pages + Edge：Arise.tw 的部署策略與回應速度優化
整理我們如何在 Cloudflare Pages 與 Edge Runtime 上部署 Astro 站點，並用快取與路由策略降低延遲、提升穩定性。