工程規範
27 份規範，全部可以下載給 Claude Code
這些不是「最佳實踐大全」，是我們實際看過的坑：金鑰外洩、錯誤訊息噴到用戶臉上、 串流輸出跳來跳去、上一頁回去整頁重刷。每一份都寫成可以被檢查的規則，不是形容詞。
入門
怎麼下 Prompt，AI 才會一次做對 把「感覺」翻譯成可驗證的約束。一份能用的前端 prompt 有六個固定段落，缺一個就會得到看起來對、但沒人能檢查的東西。
how-to-prompt.md 約 4 分鐘Vibe Coding 十四個常見地雷 沒有前端經驗、靠 AI 一路生出來的專案，壞掉的地方高度重複。這是清單，每一項都附上怎麼看出來、怎麼修。 vibe-coding-pitfalls.md 約 6 分鐘同一份設計，跑在 Svelte / React / Vue / Next 為什麼是純 CSS 變數而不是 Tailwind、四個框架的模板對照表，以及移植時的逐項檢查。 framework-portability.md 約 6 分鐘設計系統
Token 契約：模組 × 風格為什麼能自由組合 整套系統只靠一條規則成立 —— 模組只能讀 --ds-* 變數，風格只能寫 --ds-* 變數。這份文件是完整的變數清單與使用規則。
token-contract.md 約 7 分鐘風格規格書：Neon Ink 螢光墨紙 從 whatsub.equal2.app 分析出來、重新實作的完整風格決策。包含色彩策略、字體階層、密度、動態、材質與明確的 Do / Don't。 style-neon-ink.md 約 9 分鐘設計系統規格：零件庫與設計頁 tokens → primitives → components → patterns 的完整清單，元件的變體命名規則，以及設計頁必須展示什麼。 design-system.md 約 7 分鐘前端落地計畫：架構、資料流、狀態模型 從路由結構、資料夾配置、client/server 邊界，到狀態機、型別策略與開發節奏的完整計畫。 frontend-plan.md 約 6 分鐘版面與遮擋：z-index、sticky、捲動、破版 為什麼元素會互相蓋住、為什麼 z-index 加到 9999 還是沒用、錨點被 header 吃掉怎麼修，以及橫向捲動的六個元凶。 layout-and-overlap.md 約 7 分鐘動畫：只動兩個屬性，尊重使用者設定 為什麼只該動 transform 和 opacity、進場動畫怎麼做才不會讓內容永遠看不到、多圖動畫的三種做法，以及 reduced-motion 的正確處理。 animation.md 約 7 分鐘圖片、背景與 CSS 造型 圖片格式與尺寸怎麼選、背景圖上的文字怎麼保證看得見、不用圖片就能做出來的十種背景，以及紋理與遮罩。 imagery-and-backgrounds.md 約 7 分鐘無障礙基準：做到這些就贏過九成的網站 鍵盤、焦點、語意標籤、對比、ARIA 的最小必要集合，以及一份十分鐘就能跑完的自我檢測流程。 accessibility.md 約 6 分鐘小細節：Tooltip、捲軸、游標、間距 四個最常被跳過、但一眼就看得出有沒有做的地方。附上可以直接抄的 CSS 與判斷規則。 micro-details.md 約 10 分鐘工程
層級架構：誰可以知道什麼 UI / domain / container 三層的責任與禁止事項、資料流方向、什麼時候該拆檔案，以及怎麼判斷一個檔案已經腐化。
architecture-layers.md 約 5 分鐘導覽、快取與「不要每次都重刷」 狀態放 URL、上一頁要能回去、資料要有快取層級、捲動位置要記得，以及預抓怎麼做才不浪費。 navigation-cache.md 約 5 分鐘表單、焦點與輸入法 為什麼輸入框會失焦、中文輸入法為什麼被打斷、autocomplete 為什麼重要，以及驗證訊息該怎麼寫。 forms-focus-input.md 約 7 分鐘錯誤處理：使用者看一句話，log 看全部 錯誤該記什麼、該顯示什麼、追蹤碼怎麼串起來，以及為什麼堆疊訊息出現在畫面上同時是體驗問題和資安問題。 error-handling.md 約 5 分鐘多語系：不要拼句子，交給 Intl 字典結構、語言協商、為什麼字串拼接一定會出錯、日期金額數字怎麼格式化，以及 CJK 排版要注意的事。 i18n.md 約 7 分鐘效能：先量測，再最佳化 該看哪三個指標、首屏預算怎麼訂、常見的自傷行為，以及不要提前最佳化的具體理由。 performance.md 約 5 分鐘註解與清理：寫為什麼，刪掉噪音 什麼註解該留、什麼該刪、AI 產生的註解為什麼特別多噪音，以及一份可以直接用的清理流程。 comments-and-cleanup.md 約 4 分鐘Code Review：審什麼、什麼時候擋下來 依嚴重程度分層的審查順序、每一層的具體檢查項目、一份可以貼給 AI 的自審 prompt，以及什麼情況必須退回。 code-review.md 約 4 分鐘資安
AI 介面
LLM 串流輸出：SSE、逐字渲染、串流 JSON 解析 從伺服器代理、SSE 事件解析、不會閃爍的 markdown 漸進渲染，到部分 JSON 的容錯解析與工具呼叫參數的即時累積。
llm-streaming.md 約 10 分鐘Markdown 解析與淨化 可信與不可信兩條路徑、為什麼在 Workers 上不能用 DOMPurify、標題錨點與目錄，以及讓 AI 輸出安全落地的最小策略。 markdown-parser.md 約 7 分鐘把 Agent 架構寫進前端 agent loop 的形狀、tool_use 與 tool_result 為什麼必須成對、權限詢問怎麼做成 UI，以及前端要維護哪些狀態。 claude-agent-frontend.md 約 6 分鐘