設計參考擷取與映射 (design-ref) 是做什麼的？
參考來源：$ARGUMENTS
1. 擷取參考
URL： 使用共享工具包在 1440 與 375 寬度下截圖，然後讀取其樣式表：
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs <url> --widths 375,1440 --no-axe --out /tmp/design-ref/<host>
使用 --inject 參數拉取計算後的樣式，或透過一次性 CDP 腳本引用 ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/cdp.mjs（launch() → navigate() → evaluate()）。對 body、h1–h3、p、a、button、主要 CTA、卡片、眉標/kicker、輸入框以及頁尾進行 getComputedStyle 取樣。收集 font-family/size/weight/line-height/letter-spacing、color、background、border-radius、box-shadow、padding 以及 gap。
貼上的 HTML / 電子郵件： 將其儲存到 /tmp/design-ref/ref.html，使用 render-html.mjs 渲染，並直接讀取內聯樣式。
2. 提煉系統
- 色彩角色： 畫布背景、表面、文字、淡化文字、強調色、強調色文字、邊框、成功/警告色。給出十六進位值以及每個角色出現的位置。
- 字體： 字體家族（若字體需要授權，則提供最接近的免費替代字型）、比例階梯（含 px/行高/字重/字距），以及大小寫設定（眉標是否為大寫且加字距？）。
- 間距： 實際使用的節奏（例如 8/16/24/40/64）、區段內邊距、卡片內邊距。
- 形狀： 各元素類別的圓角、陰影配方、邊框粗細。
- 結構： 按鈕（高度、內邊距、圓角、字重、圖示）、卡片、眉標、以及主視覺區的構成。
- 色調： 3 個形容詞，外加文案的寫法（短句？第二人稱？數字？）。
3. 映射到專案（不要複製專案）
讀取專案的符記（app/globals.css 中的 @theme/:root、tailwind.config、或主題檔案）及其現有元件。產出：
| 角色 | 參考值 | 當前專案符記 | 建議 |
|---|---|---|---|
| 強調色 | #FF5A1F | --color-brand #… | 保留 / 微調數值 / 新增（說明理由） |
規則：
- 先嘗試微調現有符記，再新增。每個新增的符記都必須附上一行理由。
- 品牌鎖定的項目不更動：標誌、專案已有的品牌色、以及已授權或正在使用的字型。
- 對每個提議都檢查強調色在畫布上、文字在表面上的對比度（文字 ≥ 4.5:1，UI ≥ 3:1）。
- 若專案有與程式碼同步的 Figma 檔案，則符記變更應在同一個任務中更新到 Figma。
退出標準
- 符記對照表已完成，每個列都標記為保留、微調或新增。
- 已檢查提議配對的對比度。
- 尚未修改任何程式碼。那將是「design-pass」的工作，在使用者同意對照表之後進行。
- 向使用者提供一句總結，並附上表格。