Zyro From Sketches to React UI by Muhammad UnainZyro From Sketches to React UI by Muhammad Unain

Zyro From Sketches to React UI

Muhammad Unain

Muhammad Unain

Zyro From Rough Sketches to Working React UI

The problem
Every product idea goes through the same annoying gap. You know roughly what the screen should look like in your head, but "roughly what it should look like" and "code I can actually work with" are two completely different things. Normally that means sketch → mockup → someone builds it, and each step loses a little bit of what you actually meant.
If you're a solo builder or a small team, this is worse, not better. There's no designer to hand off to, no dev team waiting on the other end. It's just you, staring at a blank file, trying to remember what your own sketch was supposed to mean five minutes after you drew it.
I wanted to cut that down to one step sketch it, get real code back.

Live Demo

What I built

Zyro is an AI tool that closes that gap. Sketch on the canvas, upload a screenshot, or just describe the screen Zyro reads it and generates working React and Tailwind components, with a live preview rendered right next to the code. No mockup step in between, no separate handoff. Built for solo builders and small teams who need to move from idea to reviewable UI without waiting on anyone else.

How it works

Sketch a screen on an infinite Excalidraw-style canvas, or upload a wireframe/screenshot Export the board or send it directly so the AI has visual context, not just a prompt Zyro generates React + Tailwind components with sensible layout and spacing Preview the result live, then refine with another sketch or instruction

Key features

Excalidraw-style wireframing canvas with auto-save AI UI generation powered by Gemini, tuned for clean React + Tailwind output Live Sandpack preview so layout issues show up immediately Screenshot and sketch input, not just text prompts Clerk billing with generation limits (10 free generations, no credit card)

Built with

Next.js, React, Tailwind CSS, Excalidraw, Sandpack, Gemini AI, Clerk,ImageKit, Tanstack Query
Like this project

Posted Aug 5, 2026

Developed Zyro, an AI tool converting sketches to React code for UIs.