decant

從任何網站抽出「設計語言」，變成機器可讀的 design tokens，餵給 AI coding agent。

AI agent 很會寫 UI，但寫出來的東西沒有品味——因為它沒有品味的參考基準。 你心裡想的是「像 cuberto.com 那種感覺」，但這句話傳不進 agent。 decant 把一個參考網站的 URL，蒸餾成 agent 看得懂的 design tokens： 字級級距、間距節奏、色彩配對、圓角與陰影的質感語言。

我們不是在複製參考網站的畫面，而是在萃取它的設計系統。靈感萃取 ≠ 抄襲。

Before / After

同一個 prompt，差別只在有沒有把 decant 抽出的 tokens 餵給 agent。

| Before — agent 自己猜 | After — 餵入 decant tokens | |---|---| | | |

用法

npx tsx src/extract.ts <url>     # 撈原始 computed styles → out/raw/<host>.json
npx tsx src/cluster.ts <host>    # 頻率加權分群 → out/dna/<host>.json
npx tsx src/report.ts <host>     # 轉成 agent 指令 → out/md/<host>.md

out/md/<host>.md 是給 agent 讀的片段，寫成指令式而非報告式——直接貼進你的 CLAUDE.md。

抽什麼

| 類別 | 內容 | |---|---| | typography | font-size 級距、建議基準單位 | | spacing | 帶容差的基準單位 + 級距，並標記 art-directed / modular-rhythm / mixed | | color | (background, foreground) 配對，標出 dominant surface 與 accent | | surface | border-radius 級距 |

收斂不足時明確標記 no clear system detected，不硬生一組系統。