從網站直接抽出 DESIGN.md / SKILL.md：這類工具真正有價值的，不是『抄樣式』，而是把 UI reverse engineering 文件化
這則 Threads 分享一個由日本開發者做的 Chrome 擴充功能：它可以從任意網站擷取樣式資訊，並進一步產出 DESIGN.md 或 SKILL.md 這類文件。
表面上看，這像是一個「抓網站樣式」的小工具；但真正值得記的，不是它會抓 CSS，而是它把 UI reverse engineering 這件事，從感覺型觀察推進到可重複、可交接、可版本化的文件流程。
1. 真正被產品化的，是設計拆解流程
過去如果想研究一個網站的設計系統，常見做法是：
- 開 DevTools 看 CSS
- 截圖分析 spacing、字級、色票
- 自己寫筆記
- 再手動轉成設計規格
這整件事很花時間，也很吃拆解者的經驗。
這類工具的價值，是把上面那套流程變成：
- 擷取畫面
- 抽樣式
- 生成規格文件
也就是說，它不是在「偷網站設計」，而是在幫人建立一種更有效率的學習、比對、模仿與復盤流程。
2. 為什麼 DESIGN.md / SKILL.md 這種輸出格式很重要
真正常被低估的，不是擷取本身，而是輸出格式。
如果最後只是一份 JSON 或 CSS dump，能用的人很少；但如果輸出的是一份人和 AI 都能讀的文件，例如：
- 色彩規範
- 字級層級
- 間距節奏
- 元件語氣
- 版面結構規律
那它就從「抓資料工具」變成「知識萃取工具」。這也是為什麼這類工具和 agent / coding workflow 很容易接起來：一旦網站風格被文件化，後續不管是 Claude Code、Cursor、Figma AI，還是其他 agent，都更容易根據這份規格做後續生成。
3. 它對團隊的真正用途：不是抄，而是對齊
對產品團隊來說，這類工具最有價值的場景不一定是研究競品，而是：
- 幫內部舊站做樣式盤點
- 幫 redesign 前做現況審計
- 幫新成員快速理解既有設計語言
- 幫 AI 工具建立更精準的上下文
換句話說，它不是只有「外部學習」用途，也有很強的「內部治理」價值。
我的判斷
這篇最值得保留的觀察是：
這類樣式擷取工具真正的升級，不在於抓得多完整，而在於它把 UI reverse engineering 從零散觀察變成能被文件化、交接、版本控制與 AI 重用的知識資產。