Screenshot to Code: AI tool for converting screenshots to clean front-end code

General Introduction

Screenshot-to-Code is an open source tool that uses artificial intelligence to convert screenshots, design drafts, and Figma designs into clean, functional code. The tool supports multiple front-end technology stacks, including HTML, Tailwind CSS, React, and Vue, and uses GPT-4 Vision and Claude Advanced AI models such as Sonnet 3.5 to generate code and support for converting video or screen recordings into functional prototypes.

Function List

• Screenshots to Code: Convert screenshots and designs into HTML, Tailwind CSS, React or Vue code.
• Video to Prototype: Convert a video or screen recording into a functional prototype. (experimental functionality)
• Multiple technology stacks support: Support for HTML, Tailwind CSS, React, Vue, Bootstrap, and Ionic.
• AI model support: Code generation using GPT-4 Vision and Claude Sonnet 3.5.
• Online Test: An online test version is available so that users can experience the tool's functionality in real time.

Using Help

Installation process

1. clone warehouse: Run in a terminal git clone https://github.com/abi/screenshot-to-code.git Cloning Warehouse.
2. Installation of dependencies: Once in the project directory, run cd backend && poetry install Install the backend dependencies, run cd frontend && yarn Install front-end dependencies.
3. Configuring API Keys: Create the .env file, add the OpenAI API key and Anthropic API key.

   OPENAI_API_KEY=sk-your-key
   ANTHROPIC_API_KEY=your-key
   

4. priming the backend: Run poetry run uvicorn main:app --reload --port 7001 Start the back-end service.
5. Launch Front End: Run yarn dev Start the front-end service and open a browser to access http://localhost:5173The

Usage Process

1. Upload screenshot: Upload screenshots or designs to be converted in the front-end interface.
2. Selecting a Technology Stack: Select the technology stack (e.g. HTML, Tailwind CSS, React, or Vue) from which the code needs to be generated.
3. Generate Code: Click the Generate button and the tool will generate the corresponding front-end code using the AI model.
4. Viewing and editing code: The generated code will be displayed in the interface and the user can view and edit the code.
5. Download Code: Once satisfied, the user can download the generated code file.

Functional operation flow

1. Screenshots to Code::
   • Upload a screenshot or design.
   • Select the technology stack for which you need to generate code.
   • Click the Generate button and wait for the AI model to generate the code.
   • View, edit and download the generated code.
2. Video to Prototype::
   • Upload a video or screen recording file.
   • The tool will automatically analyze the video content and generate functional prototypes.
   • View, edit and download the generated prototype code.
3. Multiple technology stacks support::
   • After uploading a screenshot or video, select the desired tech stack.
   • The tool supports multiple technology stacks such as HTML, Tailwind CSS, React, Vue, Bootstrap and Ionic.
4. AI model support::
   • The tool generates code using advanced AI models such as GPT-4 Vision and Claude Sonnet 3.5.
   • The user can select the AI model to use in the settings.