50kg/image-to-slice

Image To Slice – AI 기반 UI 이미지 분해 for Figma 및 웹

개요 – Figma 데스크톱 플러그인(독립형 웹 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에서 플러그인 로드 – Plugins → Development → Import plugin from manifest… → 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 제안은 사람의 검토가 필요합니다. 복잡한 글꼴, 필터, 의사 요소 또는 혼합 모드는 래스터화될 수 있습니다.
• 한 번에 하나의 주요 이미지만 처리됩니다.
• 로컬 서버는 API 키와 작업 영역 기록을 디스크에 저장합니다. 인증이 없으므로 공개적으로 노출하려면 인증이 있는 리버스 프록시가 필요합니다.
• .fig는 openfig-core를 통해 생성된 독점 Figma 형식입니다. 향후 Figma 변경 사항에 따라 업데이트가 필요할 수 있습니다.

라이선스 – MIT.

---

Image To Slice는 AI 생성 UI 목업과 실제 개발 자산을 연결하여, 디자이너와 개발자가 단일 스크린샷을 편집 가능한 디자인 파일과 깔끔한 코드로 전환할 수 있는 실용적인 방법을 제공합니다.