Design2code
Convert any web design screenshot to clean HTML/CSS code
Install / Use
/learn @mostafasadeghi97/Design2codeREADME
Design2Code
Welcome to Design2Code, the ultimate web design to HTML/CSS/JS converter! 🚀✨
Overview
Design2Code is an open-source project that converts various web design formats, including sketches, wireframes, Figma, XD, etc., into clean and responsive HTML/CSS/JS code. Just upload your design image, and Design2Code will automatically generate the code for you. It's that simple!
Demo Video
Check out the magic in action! Watch our demo video
https://github.com/mostafasadeghi97/design2code/assets/41698808/d04b95bb-d4cc-46dc-818a-3f251d8ca0f6
🌐 Hosted App
try the hosted version: Design2Code Live Demo
OpenAI GPT
try as a GPT: GPT
Deployment
Design2Code is built using Next.js. Deploy your own instance of Design2Code with just one click using Vercel. Click the button below to get started:
If you are using the Vercel hobby plan, update the maxDuration in app/api/code/route.ts to 10 seconds. see this issue
🤝 Contributing
We welcome contributions from the community! If you have ideas, bug fixes, or enhancements, feel free to create a pull request.
📬 Feedback
We value your feedback! Reach out directly on LinkedIn: Mostafa Sadeghi
License
This project is licensed under the MIT License. Feel free to use, modify, and distribute!
Related Skills
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
2.1kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
HappyColorBlend
HappyColorBlendVibe Project Guidelines Project Overview HappyColorBlendVibe is a Figma plugin for color palette generation with advanced tint/shade blending capabilities. It allows designers to
Flyaro-waffle-app
Waffle Delight - Full Stack MERN Application Rules & Documentation Project Overview A comprehensive waffle delivery application built with MERN stack featuring premium UI/UX, admin management, a
