50kg/image-to-slice

Image To Slice – AI支援によるFigmaおよびWeb向けUI画像分解

概要 – Figmaデスクトッププラグイン（スタンドアロンのWeb UI付き）で、UIスクリーンショット（多くの場合、Image2やNano Banana2などのテキストから画像を生成するモデルで作成）を取得し、構造化されたレイヤーセットに自動的に分解します。ネイティブのFigmaノードやHTML/CSSで再作成できる部分と、画像アセットとして残すべき部分を判断し、結果を編集可能なFigmaファイル、.figパッケージ、またはすぐに使用できるHTML/CSSバンドルとしてエクスポートします。

重要性 – 純粋な画像からコードへの変換アプローチは、UIモックアップがベクターに適した要素（ボタン、テキスト、コンテナ）とラスターアセット（アイコン、イラスト、背景写真）を混在させている場合に苦労します。Image To Sliceは、AI駆動の「スライス＆分類」ステップを追加します：

• 切り抜きアセットと背景、コードに適したコンポーネントを検出します。
• ユーザーがAIの提案を手動で調整できるようにします。
• オプションで欠落した背景領域をインペイントします。
• デザイン時（Figma）と開発時（HTML/CSS）の両方の成果物を生成します。

主な機能

機能	提供内容
AI駆動の分解	ワンクリックの「AI拆图」で、切り抜き矩形、背景候補、コードレイヤーのヒントを生成します。
手動JSONモード	JSON記述+背景+アセットをアップロードしてAI呼び出しをスキップします。バックエンドが実行されていない場合に便利です。
背景インペイント	マスクされた領域が画像編集モデルに送信され、完全な背景を再構築します。
アセット分類	AIが、どのピースがPNG/SVGアセットになり、どれがネイティブのFigmaノードまたはHTML要素になるかを提案します。
HTML/CSSプレビュー	再構築されたページのライブプレビューを生成します。再実行またはキャッシュ可能です。
Figmaインポート	プレビュー（DOM）を編集可能なFigmaレイヤーに変換します。複雑なスタイルには、オプションで高忠実度のPlaywrightキャプチャを使用します。
エクスポートオプション	• .figパッケージをダウンロード（Figmaで編集可能） • index.html、styles.css、script.js、アセットを含むZIPをダウンロード • スライスアセットパッケージのみをエクスポート。
ワークスペース履歴	作業領域のドラフトをローカルに保存し、クローン、復元、または新規作成が可能です。
設定可能なモデルバックエンド	チャット（画像理解）および画像生成/編集用に、OpenAI互換の任意のAPIをサポートします。
ゼロAPI手動モード	ローカルサーバーに到達できない場合でも、完全にオフラインで動作します。

開始方法

1. 前提条件 – Figmaデスクトップ、Node 20+、OpenAI互換のAPIキー、および（オプション）高忠実度インポート用のPlaywright Chromium。
2. インストール

   git clone https://github.com/50kg/image-to-slice.git
   cd image-to-slice
   npm install               # 依存関係をインストール
   # 高忠実度キャプチャ用（オプション）
   npx playwright install chromium
   

3. ローカルAPIサービスを実行

   npm run api   # http://127.0.0.1:18787 を起動
   

   curl http://127.0.0.1:18787/health で確認します。
4. Figmaでプラグインを読み込む – プラグイン → 開発 → マニフェストからプラグインをインポート… → manifest.json を選択します。
5. プラグイン（Image To Slice という名前）を開きます。AI生图 / 本地图片 を選択してUIスクリーンショットを読み込み、AI拆图 をクリックして分解を開始します。
6. 提案されたスライスを調整し、必要に応じて背景インペイントを実行し、最後に 切图导入（Figmaへ）または AI图层导入 → 导入此设计稿到 Figma / 下载 HTML をクリックして開発成果物を取得します。

典型的なワークフロー

UIスクリーンショット → AI拆图（スライスを自動検出） → 手動調整 → 背景インペイント →
 アセットを分類 → Figmaにエクスポート（編集可能なレイヤー）またはHTML/CSSバンドルをエクスポート

設定 – プラグインの 设置 パネルで、複数のAPIエントリを追加し、ベースURL、モデルID、APIキーを設定し、目的（画像理解 vs. 画像生成/編集）を選択できます。保存する前に接続をテストします。

制限事項

• AIの提案は人間によるレビューが必要です。複雑なフォント、フィルター、疑似要素、ブレンドモードはラスタライズされる場合があります。
• 一度に処理されるメイン画像は1枚のみです。
• ローカルサーバーはAPIキーとワークスペース履歴をディスクに保存します。認証がないため、公開するには認証付きのリバースプロキシが必要です。
• .fig は openfig-core を介して生成される独自のFigma形式です。将来のFigmaの変更には更新が必要になる場合があります。

ライセンス – MIT。

---

Image To Sliceは、AI生成のUIモックアップと実際の開発アセットを橋渡しし、デザイナーと開発者が単一のスクリーンショットを編集可能なデザインファイルとクリーンなコードに変換する実用的な方法を提供します。