img2ui
把介面圖片轉成可編輯結構，接進 Figma 與前端開發流程。
案件速覽
07 / 20- 客戶
- 三伍杉自有產品
- 類型
- AI 應用
- 期間
- 2026 年 3 月起
- 狀態
- v0.4 beta
- 合作方式
- 產品、設計與工程由三伍杉整合
- 負責內容
- 產品設計、視覺分析、全端、生成格式與 Figma 外掛
案件說明
上傳一張介面圖片，就能整理出可編輯的顏色、字體、元件與版面資料，接著帶進 Figma 或前端開發使用。
img2ui 會分析截圖中的色彩、字體、元件和版面，將結果整理成可編輯資料，供 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 次分析請求；三個數字各自代表不同使用行為。
下一個案例
丞石建築 →