METAL LAB

abi/screenshot-to-code

★ 75,222오늘 +309Python

화면 캡처 한 장을 넣으면 AI가 그걸 그대로 코드로 만들어준다

screenshot-to-code는 웹사이트 스크린샷, Figma 디자인, 화면 녹화 영상을 넣으면 HTML, React, Vue 같은 실제 동작하는 코드로 바꿔주는 오픈소스 프로젝트다. Gemini, GPT, Claude 같은 여러 AI 모델을 골라 쓸 수 있고, Replicate를 붙이면 이미지 생성이나 배경 제거도 된다. 파이썬 기반 FastAPI 백엔드와 React 프론트엔드로 직접 설치해 쓰거나, 호스팅된 웹앱을 바로 써볼 수 있다.

무엇을 하는 레포인가

  1. 웹사이트 화면 캡처, 목업 이미지, Figma 디자인, 화면 녹화 영상을 입력하면 HTML+Tailwind, HTML+CSS, React+Tailwind, Vue+Tailwind, Bootstrap, Ionic+Tailwind 중 원하는 형태의 코드로 변환한다
  2. OpenAI, Anthropic, Gemini 중 최소 하나의 API 키만 있으면 동작하며, 여러 키를 넣으면 여러 모델을 조합해 더 정확한 결과를 만든다. Gemini 키는 스크린샷 속 실제 로고나 이미지를 그대로 가져다 쓰는 기능과 영상 입력 모드에 필요하다
  3. Replicate 키를 추가하면 이미지 생성, 배경 제거, 이미지 편집 기능이 활성화된다
  4. Chromium 브라우저를 설치하면 AI가 자기가 만든 페이지를 직접 렌더링해서 눈으로 확인하는 스크린샷 프리뷰 기능도 쓸 수 있다
  5. 파이썬 Poetry로 백엔드를, pnpm으로 프론트엔드를 실행하거나 Docker Compose 한 줄로 전체를 띄울 수 있다

왜 중요한가

디자인 목업이나 참고할 웹사이트 화면만 있어도 코드를 처음부터 손으로 짜지 않고 뼈대를 빠르게 얻을 수 있어 프런트엔드 개발 초기 작업 시간을 줄여준다. 여러 AI 제공사 모델을 자유롭게 조합해 결과 품질을 비교해볼 수 있다는 점도 실무에서 바로 활용할 만하다.

이 레포의 용어

  • Tailwind · CSS를 클래스 이름만으로 빠르게 작성하게 해주는 스타일링 도구
  • FastAPI · 파이썬으로 웹 서버(백엔드)를 만들 때 쓰는 프레임워크
  • Replicate · AI 모델을 API로 호출해 이미지 생성 등을 처리해주는 외부 서비스
  • Playwright/Chromium · AI가 만든 웹페이지를 화면 없이 실행해 캡처해보는 브라우저 자동화 도구
  • Poetry · 파이썬 프로젝트의 라이브러리 설치와 관리를 도와주는 도구

레포 원문 소개 (영문)

Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)

GitHub에서 보기

주목받는 레포

레포 전체 보기 →

METAL LAB 최신 기사