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 the 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.

The layman's guide to getting started with AI

Help you learn how to utilize AI tools at a low cost and from a zero base.AI, like office software, is an essential skill for everyone. Mastering AI will give you an edge in your job search and half the effort in your future work and studies.

View Details>