50kg/image-to-slice

What it solves

Image To Slice 解決了將扁平的 AI 生成 UI 圖片（來自 Image2 或 Nano Banana2 等模型）轉換為可編輯設計檔案或程式碼的困難。傳統的 AI 編碼工具通常難以區分哪些元素應該是原生程式碼/Figma 節點，哪些應該保持為靜態圖片資產，從而導致重建結果不佳。此工具透過將扁平圖片分解為結構化、分層的資產，彌補了 AI 生成的 UI 視覺效果與實際軟體開發之間的差距。

How it works

該工具透過結合 AI 圖片理解、圖片編輯和 DOM 擷取的流程來運作：

1. Decomposition: AI 會識別潛在的圖片資產（slices）和背景候選對象。使用者可以手動微調這些邊界。
2. Background Inpainting: 對於應該是背景資產但被 UI 組件（如按鈕或文字）遮擋的元素，該工具使用 AI inpainting 來填補被遮蔽的區域，從而建立一個乾淨、完整尺寸的背景圖片。
3. Classification: AI 會建議該元素應該是靜態圖片 (PNG/SVG) 還是原生程式碼/Figma 元素 (HTML/CSS)。
4. Reconstruction: 該工具會生成 UI 的 HTML/CSS 預覽。此預覽隨後可以導出為 ZIP 檔案以供開發使用，或透過標準 DOM 擷取，或透過 Playwright/CDP 進行高保真度擷取（用於處理複雜的視覺效果），將其匯入 Figma 作為可編輯圖層。

Who it’s for

• UI/UX Designers 想要將 AI 生成的概念轉換為可編輯的 Figma 檔案。
• Frontend Developers 需要將 UI 截圖或 AI 生成的 mockup 轉換為結構化的 HTML/CSS 程式碼。
• Product Designers 從事 AI 驅動的設計工作流程。

Highlights

• AI-Powered Slicing: 自動區分原生 UI 元素與靜態圖片資產。
• Intelligent Inpainting: 填補被遮蔽的背景區域，以建立可用的、全出血 (full-bleed) 的資產。
• Figma Integration: 作為 Figma Desktop 插件或可導出 .fig 檔案的獨立 Web App 運作。
• Flexible Output: 支援導出為可編輯的 Figma 圖層、原始 HTML/CSS，或獨立的圖片資產包。
• High-Fidelity Capture: 可選的 Playwright/CDP 整合，以便在匯入 Figma 時處理複雜的 CSS filters、blends 和 pseudo-elements。