screenshot-to-code: 스크린샷 한 장이면 React·Vue 코드로
abi/screenshot-to-code
·2026.08.28 20:11
프로젝트 소개
디자인 시안이나 웹 화면 캡처를 넣으면 즉시 동작하는 코드로 변환한다. HTML, Tailwind, React, Vue, Bootstrap, Ionic 등 주요 프론트엔드 스택을 지원하며, 단순 정적 페이지뿐 아니라 실제 웹사이트를 녹화한 영상도 기능성 프로토타입으로 바꿀 수 있다.
Gemini, GPT, Claude 등 최신 LLM을 활용해 화면 요소를 분석하고 코드를 생성한다. 특히 Gemini 모델은 원본 이미지에서 로고나 그래픽 자산을 추출해 재사용하며, Replicate 연동으로 배경 제거 및 이미지 편집까지 수행한다. 생성된 코드는 헤드리스 브라우저로 렌더링되어 시각적 정확도를 스스로 검증하는 과정도 포함한다.
로컬 실행과 호스팅 서비스 두 가지 방식을 제공한다. 로컬에서는 OpenAI, Anthropic, Gemini 중 최소 하나의 API 키가 필요하며, 여러 키를 등록하면 모델별 성능을 비교하거나 더 높은 품질의 결과를 얻을 수 있다. MIT 라이선스로 공개되어 있어 개인 프로젝트나 사내 도구로 자유롭게 활용 가능하다.
GitHub 저장소
abi/screenshot-to-code
Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
Python
이 한국어 소개글은 AI가 자동으로 만들었습니다. 원문의 주장과 맥락은 원문에서 확인해 주세요. 저작권은 원저작자에게 있습니다.