Cornhsu.Parity
實習時看著 PM 每天用人眼抓「顏色不對、字太大、間距跑掉」。市面工具把兩張圖疊給人看——「這裡怪怪的」；Parity 反過來：抓 Figma 設計稿與實際渲染畫面兩邊的真實數值做程式比對，結果是「內距 8px，設計是 12px」——精確到數字，可以進 CI 把關。
$ dotnet tool install -g Cornhsu.Parity $ parity check # Figma ↔ 實際畫面數值比對 → 報告 + exit code（CI 把關） $ parity snapshot # 沒有設計稿？把「現在的畫面」凍結成基準，重構不跑版 $ parity lint # 設計師端：新設計稿是否守 design token 規範 $ parity serve --watch # 本機報告 UI：截圖疊框、點選配對、存檔自動重掃
把「這裡怪怪的」，變成「內距 8px，設計是 12px」
設計還原度 QA 至今大多靠人眼：設計師與 PM 對著畫面抓「顏色不對、字太大、間距跑掉」。市面工具的做法是把設計稿與截圖疊給人看——最後判斷的還是人，結論仍然是「這裡怪怪的」。
Parity 換一條路：從 Figma API 與瀏覽器實際渲染的組合樹兩邊抓真實數值做程式比對——尺寸、內距、間距、字體、顏色（CIEDE2000 色差）、相對位置，刻意不比絕對座標（彈性版面下必誤報）。結果精確到數字，就能進 CI：PR 讓畫面偏離設計就打紅，並自動把還原度報告貼成 PR 留言（原地更新不洗版）。
誤報會毀掉工具的信任——寧可漏、不可誤報。沒有設計稿的專案也能上車：快照模式把「現在的畫面」凍結成基準，重構不跑版——等於數值版的 visual regression。這個網站（cornhsu.com）全站 17 頁、4,000 多個元素，現在就由 Parity 守門——包括你正在看的這一頁。
v0.9.1，朝 1.0 dogfooding 中
| 發佈 | NuGet v0.1.0 → v0.9.1 共 10 版，推 tag 即 OIDC Trusted Publishing 自動上架（repo 零長效金鑰） |
| 測試 | 147 條，含 CIEDE2000 標準測資集、配對消歧、位置誤報防護、圖片取樣 |
| 比對維度 | 尺寸、內距、間距、字體、顏色（CIEDE2000 ΔE）、相對位置——刻意不比絕對座標（彈性版面下必誤報） |
| 設計來源 | 4 種：Figma API、畫面快照、圖片＋標註（像素取樣，任何工具匯 PNG 即可）、JSON |
| 實作端 | 網頁（含 Shadow DOM / 同源 iframe / RWD 多斷點）＋ Electron（CDP attach 活視窗） |
| CI 實證 | GitHub Action 用外部 repo 跑真 PR 驗證：擋 PR、自動留言（原地更新不洗版）、baseline 回歸把關 |
| 真實驗證 | 本站（cornhsu.com）17 頁、4,000 多個元素由 Parity 守門——首日 dogfooding 即揪出並修掉兩個 flaky 根因 |
六個值得一提的設計
以設計端為錨的配對引擎
設計稿幾十個有意義的節點，逐一到上千個 DOM 元素中找對應——四關策略（文字錨定 → 圖層名 ↔ id/class/aria → 已配對子孫的 LCA 容器推論 → 手動點選補漏）。同文字多候選時用圖層名消歧、不硬湊；配不到誠實列入未配對清單。快照模式另走「selector 身分」關，100% 確定性。
「寧可漏、不可誤報」的比對哲學
相對位置比對取「最近的可靠兄弟」當參照——TEXT/HUG 的框不可靠、不當參照；量不準的軸誠實跳過。一個元素偏掉不會讓整排被連坐；文字框天生量測不同 → 不比尺寸；font-family 是軟落差不擋 gate。
色彩科學
sRGB→CIELAB→CIEDE2000 色差（以 Sharma 標準資料集驗證），半透明先合成、現代色域（oklch()、display-p3）矩陣轉換——比 hex 全等聰明，容差擋掉次像素渲染差異。
組合樹擷取
注入腳本走瀏覽器實際渲染的樹——open shadow root、<slot>、同源 iframe 座標平移合併；量測前凍結動畫／轉場（進場動畫讓兩次擷取量到不同座標，是 dogfooding 實測抓到的 flaky 根因）。
可信度底線
設定配錯導致 0 配對時，「沒有落差」不能當 PASS——gate 先驗配對可信度，拒存殘缺的 baseline；報告的每個數字都要值得被相信。
回歸把關（baseline）
SQLite 存落差基準，CI 只擋「新增／惡化」——已有一堆舊債的專案也能今天上車，團隊只需承諾「不要更差」；快照序列同時就是還原度分數的走勢。
規畫書 → 里程碑 → 真實實證 → dogfooding → 才談 1.0
先拍板取捨
本機優先（設計 QA 是上線前的活，工具要碰得到 localhost）、引擎／外殼分離（一顆純函式庫引擎，CLI／本機 UI／GitHub Action 都是薄外殼）、兩扇 adapter 門（IDesignSource / IImplementationSource）——後來 Electron 與四種設計來源都從這兩扇門插進來，核心比對邏輯零改動。
主打路徑不留「應該可以」
GitHub Action 專門開了外部消費者 repo 跑真 PR——擋 PR、bot 留言、baseline 回歸，三條路徑全部實跑通過才記錄為完成。
自己每天在用，才談 1.0
本站 16 頁交給 Parity 守門，首日就逼出兩個真實 bug（動畫 flaky、快照視窗自我參照——100vh 在重現時爆炸），當天修完發版。「自己每天在用」之後，才宣告介面凍結與 1.0。
「不做」也明文記錄
雲端外殼不做（只碰得到公開網址＝最不重要的階段）、Adobe XD 不做（已停止開發）、絕對座標永不比——每條都有寫下來的理由，避免未來的自己重新踩一次思考成本。
先讓這個網站當第一個使用者
你正在看的這個網站，全站 17 頁、4,000 多個元素由 Parity 以快照模式守門（連這一頁本身也在守門清單裡）——任何改版讓畫面偏離基準，直接打紅。首日 dogfooding 就逼出兩個 flaky 根因：進場動畫讓兩次擷取量到不同座標、快照視窗自我參照（100vh 在重現時爆炸），當天修完發版。工具好不好用，自己每天用最誠實。
取了什麼、捨了什麼、為什麼
| 決定 | 取 | 捨 | 理由 |
|---|---|---|---|
| 數值級 diff，非疊圖 | 「內距 8px 設計 12px」的確定性 | 疊圖的直觀 | 疊圖只能給人眼，數值才能進 CI 當 gate |
| 本機優先，雲端不做 | 碰得到 localhost／內網，無 SSRF 面 | 貼網址即用的低門檻 | 設計 QA 發生在上線前；報告分享 PR 留言已覆蓋 |
| 不比絕對 x/y | 彈性版面零誤報 | 位置錯位漏抓 | 後以「相對可靠兄弟」補位置比對，兩者兼得 |
| 配對不硬湊 | 報告可信 | 配對率數字好看 | 錯配產生假落差，比漏配對信任傷害更大 |
| 快照當設計來源 | 無 Figma 也能守門（visual regression 數值版） | 非「正統」設計比對 | 讓工具的價值不被「有沒有設計稿」綁死 |
從引擎到上架的具體組成
| 套件 | Cornhsu.Parity（dotnet tool，指令 parity） · MIT |
| 架構 | 引擎／外殼分離：純函式庫引擎＋薄外殼（CLI · 本機報告 UI · GitHub Action） · 兩扇 adapter 門（IDesignSource / IImplementationSource） |
| 設計來源 | Figma API · 畫面快照 · 圖片＋標註（像素取樣） · JSON |
| 實作端 | 網頁（Shadow DOM / 同源 iframe / RWD 多斷點） · Electron（CDP attach 活視窗） |
| 色彩 | sRGB→CIELAB→CIEDE2000（Sharma 標準測資驗證） · 半透明先合成 · oklch() / display-p3 矩陣轉換 |
| 品質 | 147 條測試 · 外部消費者 repo 真 PR 實證 · baseline（SQLite）只擋新增／惡化 |
| 發佈 | OIDC Trusted Publishing（無長效金鑰） · 推 tag 即自動測試、打包、上架 NuGet（v0.1.0 → v0.9.1 共 10 版） |
MIT 授權開源。README 含快速開始、四種設計來源、RWD／Shadow DOM、baseline 與 GitHub Action 教學；真實案例——本站（cornhsu.com）全站 17 頁由 Parity snapshot 模式守門。