DrawCoding

Inspiration

Translating sketches and wireframes into code is slow and repetitive. We built DrawCoding to eliminate that friction: turn any hand-drawn UI idea into a working React component in seconds

What it does

1) Draw & Upload: In-browser canvas to draw wireframes or upload napkin sketches. 2) Multimodal AI: Uses Gemini 1.5 Flash Vision to recognize layouts, buttons, and visual hierarchy. 3) Live Sandbox: Instantly previews interactive React + Tailwind CSS code inside an isolated, secure iframe. 4) Monaco Editor: View, edit, and copy generated TypeScript code on the fly.

How we built it

1) Stack: Next.js (App Router), Tailwind CSS, Monaco Editor. 2) AI: Google Gemini 3.7 Flash via a server-side route (/api/generate) with strict error handling. 3) Runtime: Sandboxed iframe with Babel Standalone and Tailwind CDN for instant in-browser transpilation

Challenges we ran into

Handling raw AI outputs

Accomplishments that we're proud of

Complete sketch-to-code generation loop in ~30 seconds and works immediately without mandatory signups

What we learned

Effective multimodal system prompt design for Gemini 3.7 Flash

What's next for DrawCoding

In-canvas area selection for iterative component editing

Built With

• canvas-api
• gemini-api
• next.js
• react
• tailwind
• typescript