50kg/image-to-slice

해결하는 문제

Image To Slice는 Image2 또는 Nano Banana2와 같은 모델에서 생성한 평면적인 AI 기반 UI 이미지를 편집 가능한 디자인 파일이나 코드로 변환하는 어려움을 해결합니다. 기존의 AI 코드 도구는 네이티브 코드/Figma 노드로 처리해야 할 요소와 정적 이미지 자산으로 유지해야 할 요소를 구분하는 데 어려움을 겪어, 재구성 결과가 좋지 않은 경우가 많습니다. 이 도구는 AI 생성 UI 시각화와 실제 소프트웨어 개발 사이의 격차를 메우기 위해 평면 이미지를 구조화된 계층적 자산으로 분해합니다.

작동 방식

이 도구는 AI 이미지 이해, 이미지 편집, DOM 캡처를 결합한 파이프라인을 통해 작동합니다:

1. 분해: AI가 잠재적인 이미지 자산(슬라이스)과 배경 후보를 식별합니다. 사용자는 이러한 경계를 수동으로 보정할 수 있습니다.
2. 배경 인페인팅: UI 구성 요소(예: 버튼 또는 텍스트)에 의해 가려진 배경 자산이어야 할 요소에 대해, 도구는 AI 인페인팅을 사용하여 가려진 영역을 채워 깨끗하고 전체 크기의 배경 이미지를 생성합니다.
3. 분류: AI는 요소가 정적 이미지(PNG/SVG)인지, 네이티브 코드/Figma 요소(HTML/CSS)인지 제안합니다.
4. 재구성: 도구는 UI의 HTML/CSS 미리보기를 생성합니다. 이 미리보기는 개발을 위해 ZIP 파일로 내보내거나, 표준 DOM 캡처 또는 Playwright/CDP를 통한 고정밀 캡처를 사용해 Figma로 가져와 편집 가능한 레이어로 사용할 수 있습니다.

대상 사용자

• AI 생성 개념을 편집 가능한 Figma 파일로 전환하고 싶은 UI/UX 디자이너
• UI 스크린샷이나 AI 생성된 모크업을 구조화된 HTML/CSS 코드로 변환해야 하는 프론트엔드 개발자
• AI 기반 디자인 워크플로우를 활용하는 제품 디자이너

주요 기능

• AI 기반 슬라이싱: 네이티브 UI 요소와 정적 이미지 자산을 자동으로 구분합니다.
• 지능형 인페인팅: 가려진 배경 영역을 채워 사용 가능한 전체 배경 자산을 생성합니다.
• Figma 통합: Figma 데스크톱 플러그인 또는 .fig 파일을 내보내는 독립형 웹 앱으로 사용 가능합니다.
• 유연한 출력 형식: 편집 가능한 Figma 레이어, 원시 HTML/CSS, 또는 독립형 이미지 자산 패키지로 내보낼 수 있습니다.
• 고정밀 캡처: Figma 가져오기 시 복잡한 CSS 필터, 블렌드 및 가상 요소를 처리하기 위해 선택적으로 Playwright/CDP 통합을 지원합니다.