從網站 URL 反推 Design System：AI 正在把「拆網站」變成設計工程流程

Design System · AI Extraction · Figma Variables

從網站 URL 反推 Design System：AI 正在把「拆網站」變成可自動化的設計工程流程

AI郵報這篇 Threads 描述的工作流很值得收：貼上一個網站 URL，AI 解析視覺語言，產出 design.md，再建立 Figma Variables、Text Styles、Components，最後生成可 build 的 Next.js 作品集網站。這不是單純「仿站」，而是把過去手工抓色票、spacing、字體、component pattern 的設計系統萃取流程，改成 AI 可執行的 pipeline。

以前的痛點

看到喜歡的網站後，要人工截圖、量 spacing、抓色票、整理字級、重刻 component；真正花時間的不是創意，而是把視覺語言拆成可重用規格。

新的切入點

URL 變成輸入，AI 先讀頁面結構、CSS、字體、色彩、layout pattern，輸出 design.md，讓設計語言先被文字化與版本化。

Figma 的角色

Figma 不再只是手工畫布，而是把 design.md 轉成 variables、text styles、components 的中介層，讓設計規格能被團隊檢查與維護。

工程輸出

最後輸出 Next.js 作品集網站，代表 design system extraction 可以接到 production-like prototype，而不只停在靜態 mockup。

關鍵判斷：這個趨勢跟「AI 時代 UI 設計師」是同一條線：設計工作正在從手工製圖，移到規格化、版本化、可驗證的設計工程。真正有價值的不是 AI 仿得像不像，而是能否把視覺語言拆成 reusable tokens / components / rules。

階段	AI 可自動化的事	人要把關的事
網站解析	讀 DOM、CSS、字體、色彩、間距、layout pattern、互動狀態	確認來源網站是否可合法參考，避免變成直接抄襲或侵權仿站
design.md	整理品牌語氣、色票、typography scale、spacing scale、component inventory	把「觀察結果」改成自己的設計決策，而不是照搬原站規格
Figma 系統化	建立 Variables、Text Styles、Components、Variants	命名、層級、component API、狀態覆蓋與團隊維護規則
Next.js 輸出	用 design tokens / component spec 生成 portfolio 或 landing page	可及性、響應式、效能、SEO、內容真實性與品牌差異化

如果要把這套流程產品化，建議要求 AI 產出這些檔案

design.md：視覺語言摘要、品牌語氣、頁面結構、component inventory。
tokens.json：color、typography、spacing、radius、shadow、breakpoints。