Repolode
제출하기
leigest519

leigest519/ScreenCoder

모듈식 멀티 에이전트 파이프라인으로 UI 스크린샷과 디자인 목업을 편집 가능한 HTML/CSS 코드로 변환합니다.

대체할 수 있는 제품:Figma to code pluginsLocofyAnima

GitHub에서 보기
스타
3,006
포크
320
열린 이슈
16
마지막 커밋
지난달

어떤 프로젝트인가요?

ScreenCoder는 스크린샷이나 디자인 목업을 입력받아 HTML/CSS 프런트엔드 코드를 생성하는 비주얼-투-코드 시스템입니다. 작업을 블록 감지, UIED 엔진을 통한 UI 요소 감지, 플레이스홀더 생성, 그리고 스크린샷의 원본 영역을 잘라 페이지에 다시 삽입하는 이미지 교체 모듈로 나눕니다.

파이프라인을 사용하면 생성 결과가 고정된 형태로 끝나는 대신, 개발자와 디자이너가 생성 후 레이아웃과 스타일을 조정할 수 있습니다. 생성 모델은 Doubao(기본값), Qwen, GPT, Gemini 중에서 선택할 수 있으며, 각 모델은 로컬 API 키 파일로 설정합니다. Hugging Face 데모를 사용할 수 있고, 저장소에는 후속 학습 코드(SFT 및 RL)와 웹 스크린샷을 HTML 소스와 짝지은 ScreenBench 벤치마크가 포함되어 있습니다.

이 프로젝트는 EMNLP 2026 논문과 연계된 연구용 코드베이스이며, 패키지형 라이브러리가 아니라 여러 Python 스크립트를 순서대로 실행하는 방식으로 사용합니다.

핵심 기능

  • 01UI 스크린샷이나 디자인 목업을 HTML/CSS 코드로 변환합니다.
  • 02UIED 엔진으로 UI 구성 요소를 감지하고 페이지 영역에 대응시킵니다.
  • 03플레이스홀더 블록을 원본 스크린샷에서 잘라낸 이미지로 교체합니다.
  • 04생성 모델로 Doubao, Qwen, GPT, Gemini를 지원합니다.
  • 05SFT 및 RL 후속 학습 코드와 ScreenBench 데이터셋을 포함합니다.

활용 사례

  • 기존 스크린샷이나 목업을 바탕으로 웹 페이지를 빠르게 프로토타이핑합니다.
  • 디자인 초안에서 편집 가능한 프런트엔드 코드의 출발점을 생성합니다.
  • 비주얼-투-코드 생성 벤치마크나 실험을 구축합니다.

토픽

#ui-to-code#html-css#multimodal-llm#computer-vision#front-end#code-generation#screenshot-to-code

자주 묻는 질문

ScreenCoder은(는) 무엇인가요?
모듈식 멀티 에이전트 파이프라인으로 UI 스크린샷과 디자인 목업을 편집 가능한 HTML/CSS 코드로 변환합니다. ScreenCoder는 스크린샷이나 디자인 목업을 입력받아 HTML/CSS 프런트엔드 코드를 생성하는 비주얼-투-코드 시스템입니다. 작업을 블록 감지, UIED 엔진을 통한 UI 요소 감지, 플레이스홀더 생성, 그리고 스크린샷의 원본 영역을 잘라 페이지에 다시 삽입하는 이미지 교체 모듈로 나눕니다.
ScreenCoder은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
ScreenCoder은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
ScreenCoder은(는) 아직 유지보수되고 있나요?
6개월 이내 업데이트. ScreenCoder의 마지막 커밋은 2026년 9월 15일입니다.
ScreenCoder은(는) 어디에 사용할 수 있나요?
기존 스크린샷이나 목업을 바탕으로 웹 페이지를 빠르게 프로토타이핑합니다. 디자인 초안에서 편집 가능한 프런트엔드 코드의 출발점을 생성합니다. 비주얼-투-코드 생성 벤치마크나 실험을 구축합니다.
ScreenCoder은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/leigest519/ScreenCoder

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트