🚀 Built at the 2025 IEEE Hackathon
Front-end UI design remains a major bottleneck for backend developers and small teams.
⏱️ According to GitHub’s 2024 DevOps Report, 63% of full-stack and backend developers cite UI prototyping as one of their biggest slowdowns in the software lifecycle.
Backend developers often lack access to intuitive, fast, and code-ready UI tools. Manually translating wireframes into code wastes time and introduces inconsistencies, especially for small teams and early-stage startups.
SketchFlow is an AI-powered prototyping tool that converts hand-drawn UI sketches directly into functional React components — streamlining design-to-code handoff.
- 🎯 Target Audience: Backend developers, full-stack engineers, lean startups, and solo devs.
- 💻 Use Case: Quickly sketch an interface, and receive code that’s ready to integrate into your React app.
| Feature | Description |
|---|---|
| ✏️ Sketch-Based Input | Draw your UI using mouse input directly on the canvas |
| 🤖 AI-Powered Conversion | Uses Microsoft Sketch2Code to convert sketches into HTML |
| ⚛️ React Output | Automatically transforms HTML into reusable, semantic React components |
| 🔄 Handoff | Bridges the gap between design and code for faster prototyping and iteration |
- Sketch2Code Integration
- Uses AI trained on millions of UIs to convert visual sketches into semantic HTML.
- Employs object detection and OCR to identify buttons, fields, and layout patterns.
- HTML to React Conversion
- HTML is parsed and translated into JSX with component structure and state logic.
- Promotes accessible, modular design with minimal refactoring needed.
- Frontend: React (JSX rendering, component handling)
- AI Integration: Microsoft Sketch2Code
- HTML Parsing: Custom HTML-to-React parser
- Development Tools: Node.js, Create React App
- 🔗 Export to Figma + real-time browser editing
- 🧩 Support for other frameworks (Vue, Flutter, SwiftUI)
- 👆 Gesture detection for tap/swipe-based UI components
- 🤝 Collaboration mode for team-based editing and annotations
To run the project locally:
- Install Dependencies
npm install- Start the App
npm start- Open http://localhost:3000 to view the app in your browser.
🧪 For testing and additional scripts, see the Create React App Documentation
Check out our walkthrough (coming soon) Live deployment available upon request.
Built by Group 2 at the 2025 IEEE Hackathon:
- Azra Bano
- Preet Patel
- Yusuf Lee
- James Machado
This project is licensed under the MIT License.
By democratizing UI development and empowering developers to go from concept to code in seconds, SketchFlow revolutionizes how interfaces are prototyped, built, and deployed.