leigest519/ScreenCoder

해결하는 문제

ScreenCoder는 UI 스크린샷이나 디자인 목업을 프로덕션 준비가 된 HTML 및 CSS 코드로 변환하는 프로세스를 자동화합니다. 시각적 레이아웃을 기능적인 웹페이지로 변환하는 데 필요한 수동 작업을 줄여 비주얼 디자인과 프론트엔드 개발 사이의 간극을 메우는 것을 목표로 합니다.

작동 방식

이 시스템은 모듈식 멀티 에이전트 아키텍처를 사용하여 시각적 코드 변환 프로세스를 여러 전문 단계로 나눕니다.

1. UI 요소 감지: 스크린샷을 분석하여 구성 요소와 레이아웃 블록을 감지합니다.
2. 레이아웃 계획: 감지된 구성 요소를 논리적 페이지 영역에 매핑합니다.
3. 코드 합성: 이미지용 자리 표시자를 사용하여 초기 HTML 레이아웃을 생성합니다.
4. 이미지 통합: 자리 표시자를 감지하고 원본 스크린샷에서 잘라낸 실제 이미지로 교체하여 최종적으로 완성된 HTML 코드를 만듭니다.

대상 사용자

이 도구는 인터페이스를 빠르게 프로토타이핑하거나 고충실도 목업을 처음부터 시작하지 않고 편집 가능한 코드로 변환하려는 프론트엔드 개발자와 디자이너를 위해 설계되었습니다.

주요 특징

• 모듈식 멀티 에이전트 프레임워크: 시각적 이해와 적응형 코드 합성을 결합하여 더 높은 정확도를 제공합니다.
• 사용자 지정 가능: 초기 생성 후 레이아웃과 스타일링 수정을 지원합니다.
• 모델 유연성: Doubao, Qwen, GPT, Gemini를 포함한 여러 LLM과 호환됩니다.
• ScreenBench: 1,000개의 실제 웹 스크린샷과 해당 HTML 소스 코드로 구성된 새로운 벤치마크를 포함합니다.