ScreenCoder: UI 스크린샷을 HTML/CSS 코드로 자동 변환하는 모듈형 AI 시스템

ScreenCoder는 UI 스크린샷이나 디자인 모형을 분석해 깨끗하고 생산성 높은 HTML/CSS 코드로 자동 변환해주는 오픈소스 프로젝트입니다  .

이 시스템은 세 단계 모듈형 구조로 구성되어 있습니다:
• Grounding Agent (시각 인식 엔진): VLM 기반으로 화면의 버튼, 네비게이션, 텍스트 박스 등 UI 요소를 감지하고 라벨링합니다   .
• Planning Agent (레이아웃 계획 엔진): 감지된 요소를 바탕으로 계층적 레이아웃 구조를 생성하고 CSS Grid 또는 Tailwind 스타일 레이아웃으로 변환합니다  .
• Generation Agent (코드 생성 엔진): adaptive prompt 기반으로 HTML/CSS 코드를 생성하여 디자인을 재현하며, 구조화되고 확장 가능하게 구성됩니다  .

또한 ScreenCoder는 자체적으로 대규모 이미지‑코드 쌍 합성 엔진을 갖추고 있어, 사전 훈련된 VLM을 지도 학습 및 강화 학습 방식으로 미세조정해 코드 품질과 UI 이해도를 크게 향상시킵니다  

 

https://github.com/leigest519/ScreenCoder

GitHub - leigest519/ScreenCoder: ScreenCoder — Turn any UI screenshot into clean, editable HTML/CSS with full control. Fast, a