스크린샷을 코드로 변환: 스크린샷을 깔끔한 프런트엔드 코드로 변환하는 AI 도구

3.2K 00

일반 소개

스크린샷 투 코드는 인공 지능을 사용하여 스크린샷, 디자인 초안, 피그마 디자인을 깔끔하고 기능적인 코드로 변환하는 오픈 소스 도구입니다. 이 도구는 HTML, Tailwind CSS, React, Vue 등 여러 프런트엔드 기술 스택을 지원하며, GPT-4 Vision과 Claude Sonnet 3.5와 같은 고급 AI 모델을 사용하여 코드를 생성하고 비디오 또는 화면 녹화를 기능적인 프로토타입으로 변환할 수 있도록 지원합니다.

기능 목록

스크린샷을 코드로 변환스크린샷과 디자인을 HTML, Tailwind CSS, React 또는 Vue 코드로 변환합니다.
프로토타입 제작을 위한 비디오: 동영상 또는 화면 녹화물을 기능적인 프로토타입으로 변환합니다. (실험적 기능)
여러 기술 스택 지원HTML, 테일윈드 CSS, 리액트, 뷰, 부트스트랩, 아이오닉을 지원합니다.
AI 모델 지원GPT-4 Vision 및 Claude Sonnet 3.5를 사용한 코드 생성.
온라인 테스트사용자가 도구의 기능을 실시간으로 체험할 수 있도록 온라인 테스트 버전이 제공됩니다.

도움말 사용

설치 프로세스

클론 창고터미널에서 실행 git clone https://github.com/abi/screenshot-to-code.git 복제 창고.
종속성 설치프로젝트 디렉토리에 들어간 후 다음을 실행합니다. cd backend && poetry install 백엔드 종속성을 설치하고 cd frontend && yarn 프런트엔드 종속성을 설치합니다.
API 키 구성만들기 .env 파일에 OpenAI API 키를 추가하고 인류학 API 키.
```
OPENAI_API_KEY=sk-your-key
ANTHROPIC_API_KEY=your-key
```
백엔드 프라이밍: 실행 poetry run uvicorn main:app --reload --port 7001 백엔드 서비스를 시작합니다.
프론트엔드 시작: 실행 yarn dev 프런트엔드 서비스를 시작하고 브라우저를 열어 다음과 같이 액세스합니다. http://localhost:5173.

사용 프로세스

스크린샷 업로드: 프론트엔드 인터페이스에서 변환할 스크린샷이나 디자인을 업로드합니다.
기술 스택 선택코드를 생성해야 하는 기술 스택(예: HTML, Tailwind CSS, React 또는 Vue)을 선택합니다.
코드 생성생성 버튼을 클릭하면 도구가 AI 모델을 사용하여 해당 프런트엔드 코드를 생성합니다.
코드 보기 및 편집생성된 코드가 인터페이스에 표시되며 사용자는 코드를 보고 편집할 수 있습니다.
코드 다운로드: 만족하면 사용자는 생성된 코드 파일을 다운로드할 수 있습니다.

기능 작동 흐름

스크린샷을 코드로 변환::
- 스크린샷 또는 디자인을 업로드합니다.
- 코드를 생성해야 하는 기술 스택을 선택합니다.
- 생성 버튼을 클릭하고 AI 모델이 코드를 생성할 때까지 기다립니다.
- 생성된 코드를 보고, 편집하고, 다운로드하세요.
프로토타입 제작을 위한 비디오::
- 동영상 또는 화면 녹화 파일을 업로드합니다.
- 이 도구는 자동으로 동영상 콘텐츠를 분석하고 기능적인 프로토타입을 생성합니다.
- 생성된 프로토타입 코드를 보고, 편집하고, 다운로드하세요.
여러 기술 스택 지원::
- 스크린샷 또는 동영상을 업로드한 후 원하는 기술 스택을 선택합니다.
- 이 도구는 HTML, 테일윈드 CSS, 리액트, 뷰, 부트스트랩, 아이오닉 등 여러 기술 스택을 지원합니다.
AI 모델 지원::
- 이 도구는 GPT-4 Vision 및 Claude Sonnet 3.5와 같은 고급 AI 모델을 사용하여 코드를 생성합니다.
- 사용자는 설정에서 사용할 AI 모델을 선택할 수 있습니다.