This project provides a tool to convert screenshots and mockups into functional code (HTML/Tailwind, React/Vue, Bootstrap, Ionic) using AI. It targets designers and developers seeking to rapidly prototype or generate boilerplate code from visual designs, offering a significant time-saving benefit.

How It Works

The application utilizes AI models like Claude Sonnet 3.7 and GPT-4o to interpret visual input (screenshots, Figma designs) and generate corresponding code. It supports various frontend frameworks and styling libraries. An experimental feature also allows converting video screen recordings into functional prototypes.

Quick Start & Requirements

• Install/Run: Clone the repository, set up API keys (OpenAI, Anthropic recommended) in .env files for backend and frontend, then run poetry install and poetry run uvicorn main:app --reload --port 7001 for the backend, and yarn then yarn dev for the frontend. Docker Compose is also available.
• Prerequisites: OpenAI API key (GPT-4 or newer), Anthropic API key (optional but recommended), Poetry, Yarn.
• Links: Hosted Version (paid), Troubleshooting.

Highlighted Details

• Supports multiple AI models including Claude Sonnet 3.7 and GPT-4o for code generation.
• Offers experimental support for converting video screen recordings into prototypes.
• Integrates with popular frontend stacks like React, Vue, and Bootstrap with Tailwind CSS.
• Allows configuration of API keys via UI settings or environment variables.

Maintenance & Community

The project is actively maintained by the author, with community feedback encouraged via GitHub Issues and Twitter.

Licensing & Compatibility

The repository appears to be under the MIT License, allowing for commercial use and integration with closed-source projects.

Limitations & Caveats

While powerful, the quality of generated code is dependent on the AI model used and the clarity of the input screenshot. The experimental video-to-code feature may have varying results.