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 生成的样机转换为结构化的 HTML/CSS 代码。
• Product Designers 正在使用 AI 驱动的设计工作流。

Highlights

• AI-Powered Slicing: 自动区分原生 UI 元素和静态图像资产。
• Intelligent Inpainting: 填充被遮挡的背景区域，以创建可用的、全出血的资产。
• Figma Integration: 作为 Figma Desktop 插件或导出 .fig 文件 的独立 Web 应用运行。
• Flexible Output: 支持导出为可编辑的 Figma 图层、原始 HTML/CSS 或独立的图像资产包。
• High-Fidelity Capture: 可选的 Playwright/CDP 集成，用于在导入 Figma 时处理复杂的 CSS 滤镜、混合模式和伪元素。