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 インペインティングを使用して隠された領域を埋め、クリーンでフルサイズの背景画像を作成します。
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 who want to turn AI-generated concepts into editable Figma files.
• Frontend Developers who need to convert UI screenshots or AI-generated mockups into structured HTML/CSS code.
• Product Designers who working with AI-driven design workflows.

Highlights

• AI-Powered Slicing: ネイティブ UI 要素と静的な画像アセットを自動的に区別します。
• Intelligent Inpainting: 隠された背景領域を埋めて、使用可能なフルブリード（full-bleed）アセットを作成します。
• Figma Integration: Figma Desktop プラグイン、または .fig ファイルをエクスポートするスタンドアロンの Web アプリとして動作します。
• Flexible Output: 編集可能な Figma レイヤー、生の HTML/CSS、またはスタンドアロンの画像アセットパッケージへのエクスポートをサポートします。
• High-Fidelity Capture: Figma インポート時に複雑な CSS フィルター、ブレンド、および擬似要素を処理するための、オプションの Playwright/CDP 統合。