screenshot-to-code

AI를 사용하여 스크린샷, 목업(mockups) 및 Figma 디자인을 깔끔하고 기능적인 코드로 변환하는 간단한 도구입니다.

지원되는 스택:

• HTML + Tailwind
• HTML + CSS
• React + Tailwind
• Vue + Tailwind
• Bootstrap
• Ionic + Tailwind
• SVG

기본 AI 모델:

• Gemini 3 Flash Preview 및 Gemini 3.1 Pro Preview - 최적의 모델
• GPT-5.5, GPT-5.2 Codex 및 GPT-5.4 Mini
• Claude Opus 4.6, Claude Opus 4.8
• 이미지 생성을 위한 Flux Schnell (Replicate 사용)

더 많은 데모는 아래의 Examples 섹션을 참조하세요.

작동 중인 웹사이트의 비디오/화면 녹화본을 찍어 이를 기능적인 프로토타입(prototype)으로 변환하는 실험적인 지원 기능도 제공합니다.

비디오에 대한 자세한 내용은 여기에서 확인하세요.

업데이트를 위해 Twitter에서 저를 팔로우하세요.

🌍 호스팅 버전

호스팅 버전(유료)에서 라이브로 체험해 보세요.

🛠 시작하기

이 앱은 React/Vite 프론트엔드와 FastAPI 백엔드로 구성되어 있습니다.

필요한 키:

• OpenAI API key, Anthropic 키, 또는 Google Gemini 키
• 서로 다른 모델의 결과를 비교할 수 있도록 여러 개의 키를 사용하는 것을 권장합니다.

Ollama 오픈 소스 모델로 앱을 실행하고 싶다면 (결과 품질이 낮아 권장하지 않음), 이 댓글을 따르세요.

백엔드를 실행합니다 (패키지 관리를 위해 Poetry를 사용합니다 - 설치되어 있지 않다면 pip install --upgrade poetry를 실행하세요):

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
...

프론트엔드의 설정(settings) 대화 상자를 사용하여 키를 설정할 수도 있습니다 (프론트엔드 로드 후 톱니바퀴 아이콘을 클릭하세요).

프론트엔드를 실행합니다:

cd frontend
yarn
yarn dev

http://localhost:5173 을 열어 앱을 사용하세요.

백엔드 (backend)를 다른 포트에서 실행하는 것을 선호한다면, frontend/.env.local 파일의 VITE_WS_BACKEND_URL을 업데이트하세요.

Docker

시스템에 Docker가 설치되어 있다면, 루트 디렉토리에서 다음을 실행하세요:

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

앱이 http://localhost:5173 에서 실행됩니다. 이 설정으로는 파일 변경 사항이 재빌드(rebuild)를 트리거하지 않으므로 애플리케이션을 개발할 수는 없다는 점에 유의하세요.

🙋‍♂️ FAQs

• 백엔드 (backend) 설정 시 오류가 발생합니다. 어떻게 해결하나요? 이 방법을 시도해 보세요. 그래도 해결되지 않으면 이슈 (issue)를 생성해 주세요.
• OpenAI API 키는 어떻게 발급받나요? https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md 를 참조하세요.
• OpenAI 프록시 (proxy)를 어떻게 설정하나요? - 국가 제한 등의 이유로 OpenAI API에 직접 접속할 수 없는 경우, VPN을 사용하거나 프록시를 사용하도록 OpenAI 기본 URL (base URL)을 설정할 수 있습니다: backend/.env 파일 내의 OPENAI_BASE_URL을 설정하거나, UI의 설정 대화 상자에서 직접 설정하세요. URL 경로에 "v1"이 포함되어야 하며, 다음과 같은 형태여야 합니다: https://xxx.xxxxx.xxx/v1
• 프론트엔드 (front-end)가 연결되는 백엔드 (backend) 호스트를 어떻게 변경하나요? - front/.env.local에서 VITE_HTTP_BACKEND_URL과 VITE_WS_BACKEND_URL을 설정하세요. 예를 들어, VITE_HTTP_BACKEND_URL=http://124.10.20.1:7001로 설정합니다.
• 백엔드 (backend) 실행 시 UTF-8 오류가 발생하나요? - Windows 환경에서는 Notepad++로 .env 파일을 연 다음, 인코딩 (Encoding) 메뉴에서 UTF-8을 선택하세요.
• 피드백은 어떻게 전달하나요? 피드백, 기능 요청 및 버그 리포트 (bug reports)는 이슈 (issue)를 생성하거나 Twitter에서 저를 태그해 주세요.

📚 Examples

NYTimes

📚 예시

NYTimes

Instagram

Hacker News