SketchFlow

Inspiration

We’ve all been there—stuck translating messy whiteboard sketches into pixel-perfect code. As devs, we dread the frontend handoff, and as designers, we’re constantly clarifying wireframes. SketchFlow was born out of this friction. We wanted a tool that could bridge the design-to-dev gap and make it painless to turn ideas into interactive UI.

What it does

SketchFlow takes hand-drawn wireframes or UI sketches and instantly converts them into clean, production-ready React code. Just draw your interface, upload the sketch, and watch SketchFlow generate responsive React components—ready to drop into your codebase.

Challenges we ran into

Balancing speed and accuracy—especially on low-res, low-contrast sketches
Integrating Microsoft Sketch2Code to turn PNG images to HTML code

Accomplishments that we're proud of

End-to-end sketch-to-React conversion with zero manual intervention
Seamless frontend UX for uploading and editing the sketch before conversion
Robust element detection with 90%+ accuracy across different test sets

What we learned

Training object detection models for niche use-cases takes a lot of iteration
Simple UI/UX beats over-engineered features when building for real users
Even messy sketches contain enough structure for code generation if modeled correctly