Sketch2Website is an AI-powered web application that converts hand-drawn website sketches into functional HTML/CSS code.
The goal is simple: reduce the gap between design and development using computer vision and AI.
- 🖼️ Upload hand-drawn UI sketches
- 🔍 Detect layout and UI elements using Vision APIs
- 🧠 AI-assisted conversion of sketches into HTML/CSS
- 🐳 Fully Dockerized setup for easy development & deployment
- 🔐 Environment-based configuration using
.env - ⚙️ Scalable backend architecture
Backend
- Python
- Flask / Django-style architecture
- Computer Vision APIs (Google Vision or similar)
Frontend
- HTML, CSS (static templates)
DevOps
- Docker
- Docker Compose
- Nginx (proxy layer)
- Shell scripts for automation
git clone https://github.com/krishnasingh281/sketch2website.git
cd sketch2websiteCreate a .env file using the sample:
cp .env.sample .envUpdate the values inside .env with your API keys and configuration.
docker-compose up --buildThe application will be available at:
http://localhost:8000##🔑 Environment Variables
Example variables you may need: VISION_API_KEY= SECRET_KEY= DEBUG=True (Refer to .env.sample for the full list.)
##🧪 Development Notes
- Make sure Docker and Docker Compose are installed.
- This project is backend-focused; frontend templates are intentionally minimal.
- The architecture is designed to be extensible for future AI model integrations.
-
🤖 Support for multiple AI models (open-source alternatives)
-
📤 Export code as ZIP / GitHub repo
-
🧩 Component-level detection (buttons, navbars, cards)
-
☁️ Cloud deployment (AWS / GCP)
Contributions are welcome!
- Fork the repo
- Create a new branch
- Commit your changes
- Open a Pull Request
This project is licensed under the MIT License.
Krishna Singh Backend Developer | AI & Web Enthusiast
⭐ If you find this project interesting, give it a star — it helps more than you think!