abi/screenshot-to-code

screenshot‑to‑code

기능 – UI 스크린샷, Figma 목업 또는 짧은 화면 녹화 영상을 입력받아 대규모 언어 모델의 도움을 받아 즉시 실행 가능한 깨끗한 프론트엔드 코드를 생성합니다. 생성된 코드에는 스크린샷에서 추출된 원본 에셋(로고, 이미지)이 포함될 수 있습니다.

지원되는 프론트엔드 – HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind.

AI 백엔드 – 기본적으로 최신 Google Gemini (3 Flash, 3.1 Pro), OpenAI GPT-5.5/5.4 Mini, Anthropic Claude Opus 4.6-4.8 및 Replicate 이미지 모델 (z-image-turbo)을 시도합니다. 제공업체를 혼합하여 사용할 수 있으며, 앱은 각 단계에서 사용 가능한 가장 강력한 모델을 선택합니다.

작동 방식

1. 에셋 추출 – Gemini가 스크린샷을 분석하여 실제 로고와 이미지를 추출하며, Replicate를 통해 배경을 제거할 수도 있습니다.
2. 코드 생성 – 선택된 LLM이 레이아웃 및 대상 스택에 대한 설명을 수신하고 해당 마크업, CSS/Tailwind 클래스 및 컴포넌트 코드를 반환합니다.
3. 옵션 미리보기 – Headless Chromium 인스턴스(Playwright를 통해)가 생성된 페이지를 렌더링하여 시스템이 출력물과 원본 스크린샷을 비교하고 명백한 불일치를 표시할 수 있도록 합니다.
4. 비디오 모드 – 짧은 화면 녹화 영상을 업로드하면 백엔드에서 키 프레임을 추출하여 상호작용 흐름을 모방한 프로토타입을 구축합니다.

실행 방법

• 호스팅 데모 – https://screenshottocode.com 을 방문하여 즉시 체험해 보세요.
• 셀프 호스팅 – 저장소를 클론하고 최소 하나 이상의 API 키(OpenAI, Anthropic 또는 Gemini)를 제공한 후 FastAPI 백엔드를 시작합니다 (poetry install && poetry run uvicorn main:app …). 그 다음 Vite-React 프론트엔드를 실행합니다 (pnpm install && pnpm dev).
• Docker – 키가 포함된 .env 파일을 배치한 후 docker-compose up --build를 실행합니다.

주요 설정

변수	필요 용도	활성화되는 기능
OPENAI_API_KEY	모든 경우	GPT-5.5 / 5.4-Mini 코드 생성
ANTHROPIC_API_KEY	모든 경우	Claude 코드 생성
GEMINI_API_KEY (권장)	모든 경우	Gemini 코드 생성, 에셋 추출, 비디오 모드
REPLICATE_API_KEY (권장)	선택 사항	이미지 편집, 배경 제거, 이미지 생성

FAQ 및 문제 해결 – README에는 문제 해결 가이드와 이슈 트래커의 일반적인 오류 수정 링크가 포함되어 있습니다. 방화벽 뒤에 있는 경우 OPENAI_BASE_URL을 통해 OpenAI 프록시를 설정할 수도 있습니다.

예시 – 이 저장소는 NYTimes, Instagram, Hacker News 페이지의 나란히 비교를 보여주어, 이 도구가 복잡한 뉴스 기사 레이아웃, 소셜 미디어 피드 및 토론 게시판 인터페이스를 재현할 수 있음을 입증합니다.

사용 대상 – 디자인에서 빠른 스캐폴딩을 원하는 프론트엔드 개발자, UI 아이디어를 프로토타입으로 만들려는 제품 팀, 또는 AI 지원 코드 생성에 관심이 있는 모든 사람.