screenshot-to-code

Screenshot to Code는 스크린샷, 목업, Figma 디자인, 화면 녹화를 깔끔하고 기능적인 프론트엔드 코드로 변환하는 오픈소스 도구입니다. Gemini, GPT, Claude 같은 AI 모델을 활용하여 시각적 입력으로부터 정확한 복제본을 생성합니다. 지원하는 출력 스택에는 HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind가 포함됩니다. 이 도구는 정적 이미지뿐만 아니라 웹사이트 화면 녹화도 기능적인 프로토타입으로 변환할 수 있습니다. Replicate 기반의 이미지 관련 기능으로는 자산 추출(원본 스크린샷에서 실제 로고와 이미지 재사용), 이미지 생성, 배경 제거, 이미지 편집이 포함되어 있습니다. 스크린샷 미리보기 기능은 헤드리스 브라우저에서 생성된 페이지를 렌더링하여 시각적 자가 검수를 지원합니다. 이 프로젝트는 React/Vite 프론트엔드와 FastAPI 백엔드로 구성됩니다. 최소한 하나의 공급자(OpenAI, Anthropic, Gemini) API 키로 로컬에서 실행하거나 Docker를 통해 배포할 수 있습니다. 가장 높은 정확도와 전체 기능 지원을 위해 Gemini와 Replicate 키 사용을 강력히 권장합니다. 사용 옵션: - 세팅 없이 빠르게 사용하기 위해 screenshottocode.com에서 호스팅됩니다. - 사용자화, 기여, 비공개 배포를 위해 로컬에서 자체 호스팅할 수 있습니다.