abi/screenshot-to-code

어떤 프로젝트인가요?

핵심 기능

• 01스크린샷과 Figma 디자인을 HTML, React, Vue, Bootstrap 코드로 변환
• 02Tailwind, 일반 CSS, Ionic 출력 스타일 지원
• 03웹사이트 화면 녹화 영상으로 프로토타입 생성
• 04Gemini를 설정하면 스크린샷에서 실제 로고와 이미지 추출
• 05OpenAI, Anthropic, Gemini 모델 중 선택

활용 사례

• 디자인 목업을 프런트엔드 페이지의 시작점으로 변환
• 스크린샷을 바탕으로 기존 웹사이트 레이아웃 재현
• 기존 앱의 화면 녹화 영상으로 UI 프로토타입 제작

빠른 시작

1. 1

   Poetry로 백엔드를 설정하고 종속성을 설치합니다

   cd backend && poetry install
2. 2

   스크린샷 미리보기 도구용 Chromium 브라우저를 설치합니다

   poetry run playwright install chromium
3. 3

   포트 7001에서 백엔드 서버를 시작합니다

   poetry run uvicorn main:app --reload --port 7001
4. 4

   프런트엔드 종속성을 설치하고 개발 서버를 시작한 다음 http://localhost:5173 을 엽니다

   cd frontend && pnpm install && pnpm dev

사용 전 알아둘 점

• !로컬에서 실행하려면 최소 하나의 모델 API 키가 필요하며, 모든 기능을 사용하려면 Replicate를 강력히 권장합니다.
• !FastAPI 백엔드와 React 프런트엔드를 모두 설정해야 하므로 셀프 호스팅에는 어느 정도 노력이 필요합니다.
• !결과 품질이 낮아 Ollama 오픈 소스 모델은 권장하지 않습니다.

토픽

자주 묻는 질문

screenshot-to-code은(는) 무엇인가요?

AI 모델을 사용해 스크린샷, 목업, Figma 디자인, 화면 녹화 영상을 HTML, Tailwind, React, Vue 등의 프런트엔드 코드로 변환합니다. screenshot-to-code는 스크린샷, 목업, Figma 디자인, 화면 녹화 영상 같은 시각 자료를 작동하는 프런트엔드 코드로 변환합니다. HTML과 Tailwind 또는 CSS, React와 Tailwind, Vue와 Tailwind, Bootstrap, Ionic과 Tailwind 등 원하는 기술 스택을 선택하면 레이아웃을 재현하는 코드를 생성합니다.

screenshot-to-code은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

screenshot-to-code은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

screenshot-to-code은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. screenshot-to-code의 마지막 커밋은 2026년 10월 9일입니다.

screenshot-to-code은(는) 어디에 사용할 수 있나요?

디자인 목업을 프런트엔드 페이지의 시작점으로 변환 스크린샷을 바탕으로 기존 웹사이트 레이아웃 재현 기존 앱의 화면 녹화 영상으로 UI 프로토타입 제작

screenshot-to-code는 어떻게 설치하나요?

Poetry로 백엔드를 설정하고 종속성을 설치합니다: cd backend && poetry install 스크린샷 미리보기 도구용 Chromium 브라우저를 설치합니다: poetry run playwright install chromium 포트 7001에서 백엔드 서버를 시작합니다: poetry run uvicorn main:app --reload --port 7001 프런트엔드 종속성을 설치하고 개발 서버를 시작한 다음 http://localhost:5173 을 엽니다: cd frontend && pnpm install && pnpm dev

screenshot-to-code은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/abi/screenshot-to-code