img2ui
把介面圖片轉成可編輯結構，接進 Figma 與前端開發流程。
案件資料
把介面圖片拆成可編輯的設計結構，交給設計師、工程師與 coding agent 繼續使用。
img2ui 從截圖與視覺參考中分析色彩、字體與版面，產生 25 種 UI 元件及設計 token，並輸出 JSON、HTML、SKILL.md、DESIGN.md 與 Figma 可用資料。
UI 元件25 種
帳號49
設計系統467
分析請求662
實際流程
把圖片資訊整理成設計與工程都能繼續使用的結構。
- 01 輸入參考
介面截圖或視覺參考進入分析
- 02 拆出結構
色彩、token、版面與元件被整理成系統
- 03 帶回工作流
輸出 JSON、HTML、文件與 Figma 可編輯節點
01 ANALYSIS
不是生成一張相似圖片，而是辨識可重用的設計規則。
Canvas 與 K-means 協助擷取色彩，視覺模型理解區塊與元件，再整理成可被人與 coding agent 讀取的結構。
02 SYSTEM
分析結果能繼續編輯，而不是一次性輸出。
25 種元件、設計 token 與多種格式，讓結果可進入前端實作、文件與後續提示流程。
03 FIGMA
Figma 外掛把資料重建為原生可編輯節點。
外掛處理 plugin sandbox、UI 通訊、資料驗證、字體 fallback 與社群審核，不把結果只當作貼回畫布的一張圖。
04 USAGE
帳號、設計系統與分析請求分開計算。
2026/03/17–08/27 累積 49 個帳號、467 份設計系統與 662 次分析請求；三個數字各自代表不同使用行為。
下一個案例
丞石建築 →