abi/screenshot-to-code는 스크린샷을 HTML이나 Tailwind 코드로 옮기는 데서 멈추지 않는다. 목업과 Figma 디자인, 웹사이트 화면 녹화까지 입력으로 받아 React, Vue, Bootstrap, Ionic 기반의 기능성 프로토타입을 만들 수 있다. 지원 스택이 넓다는 점만 보면 여러 코드 생성 도구 중 하나처럼 보이지만, 이 저장소를 조금 더 자세히 보면 다른 장면이 보인다.
앱은 React/Vite 프론트엔드와 FastAPI 백엔드로 나뉜다. 로컬에서 돌리려면 OpenAI, Anthropic, Gemini 가운데 하나 이상의 키가 필요하고, README는 Gemini와 Replicate를 특히 권장한다. Gemini는 코드 생성 모델인 동시에 스크린샷 속 실제 로고와 이미지를 추출하는 역할을 한다. Replicate는 이미지 생성, 배경 제거, 이미지 편집을 맡는다. 화면의 분위기만 흉내 내는 것이 아니라 원본의 자산을 다시 활용하려는 설계다.
검증 단계도 눈에 띈다. Playwright로 Chromium을 설치하면 생성한 페이지를 헤드리스 브라우저에서 렌더링해 미리볼 수 있다. 즉, 모델이 코드를 출력한 뒤 사람이 브라우저를 열어 확인하는 방식만 있는 것이 아니다. 에이전트가 자신의 결과를 화면으로 확인하는 통로가 제품 안에 들어간다. 화면 녹화를 기능성 프로토타입으로 바꾸는 기능도 이 실행 방식과 잘 맞는다.
물론 편리함에는 비용이 따른다. 호스팅 앱은 바로 시험할 수 있지만, 로컬 실행은 Poetry 기반 백엔드 설치, 프론트엔드 패키지 설치, Chromium 준비, API 키 설정이 필요하다. 대신 로컬 환경에서는 코드를 고치고 셀프호스팅하고 프로젝트에 기여할 수 있다. 여러 모델 제공자 키를 넣으면 생성 변형마다 더 강한 조합을 자동으로 고를 수 있지만, 키가 하나뿐이면 그 제공자의 모델만 사용한다.
그래서 이 저장소의 포인트는 플러그인 수나 모델 이름의 나열에 있지 않다. 스크린샷을 읽고, 자산을 추출하고, 코드를 생성하고, 브라우저에서 다시 확인하는 흐름을 한 덩어리로 묶었다는 데 있다. 화면 복제 작업에서 첫 결과는 초안일 뿐이다. 실제 생산성을 가르는 것은 두 번째 렌더링과 그 다음 수정까지 얼마나 자연스럽게 이어지느냐에 있다.