Screenshot to Code

Screenshot

About Screenshot to Code

Screenshot to Code is an open-source AI-powered development tool that transforms screenshots, mockups, Figma designs, and screen recordings into production-ready frontend code. It supports multiple frameworks including HTML with Tailwind CSS, HTML with CSS, React, Vue, Bootstrap, and Ionic. The project leverages leading AI models from OpenAI, Anthropic, Google Gemini, and Replicate to generate accurate user interfaces, reuse real image assets, perform image editing, and create interactive prototypes. Developers can self-host the application using Docker or run it locally with a React frontend and FastAPI backend. Additional capabilities include screen recording conversion, screenshot preview validation using Playwright, AI model comparison, image editing, and configurable model providers, making it a powerful assistant for UI development and rapid prototyping.

Key Features

• Convert screenshots into frontend code
• Import Figma designs
• Generate code from screen recordings
• Supports React, Vue, HTML, Bootstrap, and Ionic
• Tailwind CSS support
• Docker deployment
• Self-hosted option
• Playwright screenshot preview validation
• Supports OpenAI, Anthropic, Gemini, and Replicate
• Asset extraction from screenshots
• Image editing and background removal
• Interactive prototype generation
• FastAPI backend with React frontend
• Compare outputs from multiple AI models
• Open-source MIT licensed

Useful Links