Empowering developers with AI-driven UI design
Keep the frontend at the backend of your mind!
The Problem
Front-end development is often a bottleneck in software projects, requiring extensive knowledge of HTML, CSS, JavaScript, and UI/UX design principles. Developers spend significant time manually coding interfaces, which slows down productivity, especially in hackathons, rapid prototyping, and agile development environments.
Our Solution
Blueprint AI is a VSCode extension that leverages AI to automate front-end UI design. Users can generate layouts by uploading images and/or describing their ideas in natural language. The AI seamlessly converts these inputs into structured UI components using CraftJS, enabling real-time editing without the need for code.
Blueprint AI streamlines front-end development by reducing manual effort through integrating AI at every step of the design process. From ideation to exporting of code, this ensures design consistency and accelerates project timelines. It democratises UI design, making professional-grade interfaces accessible to both developers and non-coders, ultimately bridging the gap between creativity and implementation.
“If this was available now, I would use it.” - Prof. Joseph Connor, UCL Dept of Computer Science
Project Video
Project Timeline
The Gantt chart below illustrates our time organisation. This enabled us to work more efficently and collaboratively.
Meet Team 21
Gideon Zeru
2nd Year BSc CS Student
Programmer | Tester | Report Editor
Joshua Mendel
2nd Year BSc CS Student
Programmer | Tester | Client Liason
Joshua Ian Soh
2nd Year BSc CS Student
Programmer | UI Design | Researcher
Simran Goel
2nd Year MEng CS Student
Programmer | Researcher | Report Editor