Screenshot to Code

Description

Screenshot to Code is an AI-powered tool designed to transform visual designs into functional code. It accepts various inputs, including screenshots, mockups, Figma designs, and even screen recordings of websites in action, converting them into clean, ready-to-use code. The tool supports popular frontend stacks such as HTML with Tailwind CSS, React with Tailwind CSS, Vue with Tailwind CSS, Bootstrap, and Ionic with Tailwind CSS.

Users have two primary ways to interact with Screenshot to Code: by running it locally for customization and contribution, or by using the official hosted application at screenshottocode.com for immediate testing without any local setup. Running the tool locally involves setting up a React/Vite frontend and a FastAPI backend, requiring API keys for AI model providers like OpenAI, Anthropic, and Gemini. Gemini is particularly recommended for its asset extraction capabilities, allowing the reuse of real logos and images from screenshots, while Replicate is crucial for image generation, background removal, and editing functionalities.

The project supports a range of AI models, including Gemini 3 Flash and Gemini 3.1 Pro Preview, GPT-5.5 and GPT-5.4 Mini, and Claude Opus 4.6/4.8. The integration of multiple API keys enhances the accuracy and quality of the generated code by allowing the app to select a stronger mix of models. For those interested in advanced features like screen recording to functional prototype conversion, Gemini is a prerequisite. The project also offers Docker support for easier deployment and execution.

Screenshot to Code aims to streamline the web development workflow by automating the tedious process of translating designs into code. This is particularly beneficial for developers, designers, and teams looking to accelerate prototyping, reduce manual coding effort, and ensure consistency between design and implementation. The project is actively maintained on GitHub, encouraging community contributions and feedback.

Screenshot to Code's Core Features

• Converts screenshots and mockups into HTML, Tailwind, React, and Vue code.

• Supports screen recordings to generate functional prototypes.

• Offers a hosted application for immediate use.

• Allows local execution for customization and contribution.

• Integrates with multiple AI models including Gemini, GPT, and Claude.

• Features AI-powered asset extraction using Gemini.

• Supports image generation, background removal, and editing via Replicate.

• Provides a React/Vite frontend and FastAPI backend.

• Includes optional screenshot preview for visual verification.

• Docker support for simplified deployment.

Getting Started with Screenshot to Code

1. 1

   Clone the repository from GitHub.

2. 2

   Install dependencies using Poetry for the backend and Yarn for the frontend.

3. 3

   Configure API keys for AI model providers (OpenAI, Anthropic, Gemini, Replicate) in environment files.

4. 4

   Install necessary browser dependencies like Chromium.

5. 5

   Run the backend server using Poetry.

6. 6

   Run the frontend development server using Yarn.

7. 7

   Access the application via the provided local URL (e.g., http://localhost:5173).

Screenshot to Code's Use Cases

• Rapid Prototyping
• Frontend Development
• Design to Code Conversion
• UI/UX Workflow Acceleration
• Screen Recording to Prototype
• Asset Extraction
• Code Generation Comparison

FAQ from Screenshot to Code

• How can I convert a screenshot to code with Screenshot to Code?

  You can use the hosted application at screenshottocode.com or run the tool locally. Drop your screenshot into the interface, and the AI will convert it into HTML/Tailwind, React/Tailwind, or Vue/Tailwind code.

• What programming languages and frameworks does Screenshot to Code support?

  Screenshot to Code supports generating code for HTML + Tailwind, React + Tailwind, and Vue + Tailwind. It also supports Bootstrap and Ionic + Tailwind.

• Can Screenshot to Code convert screen recordings into code?

  Yes, Screenshot to Code supports taking a screen recording of a website in action and turning it into a functional prototype. This feature requires Gemini API keys.

• Which AI models are used by Screenshot to Code?

  The tool supports Gemini 3 Flash and 3.1 Pro Preview, GPT-5.5 and GPT-5.4 Mini, and Claude Opus 4.6/4.8. Gemini is recommended for asset extraction, and Replicate for image generation and editing.

• Do I need API keys to use Screenshot to Code?

  Yes, if you run the tool locally or want to use advanced features like asset extraction and image generation, you will need API keys from providers like OpenAI, Anthropic, Gemini, and Replicate.

• How can I contribute to the Screenshot to Code project?

  You can contribute by forking the repository on GitHub, making changes, and submitting a pull request. You can also report bugs or suggest features by opening an issue.

• What are the benefits of running Screenshot to Code locally?

  Running locally allows for customization, self-hosting, and direct contribution to the project. It also provides more control over API key configurations and model selections.

• How does Screenshot to Code handle image assets from screenshots?

  When using Gemini API keys, Screenshot to Code can extract real assets like logos and images directly from your screenshot, reusing them in the generated code.

• Can I use Screenshot to Code without any API keys?

  You can use the official hosted product at screenshottocode.com without needing to configure your own API keys, though local execution requires them for full functionality.

• What is the purpose of the screenshot preview feature?

  The screenshot preview feature, enabled by installing Chromium, allows the agent to render its generated page in a headless browser and visually check its work.