Skip to Main Content

The Dark Knight

Built at Google I/O Hackathon · May 23, 2026 · San Francisco, CA

The Dark Knight — Demo video

▎ Sketch2App turns hand-drawn UI sketches into working web apps via a multi-step Gemini agent. ▎ ▎ The problem: the fastest path from "idea in your head" to "working product on screen" today is typing a 200-word prompt. That's a writing skill, not a design skill. ▎ Sketching is universal — PMs, designers, founders, and kids all sketch. We make the sketch the prompt. ▎ ▎ A user draws a wireframe on a canvas. A Gemini-powered agent then runs three phases: ① Analyze the sketch using vision + structured JSON output (responseSchema) to ▎ produce a typed Plan — title, components, theme, interactions. ② Build a complete self-contained HTML/CSS/JS page from the plan + sketch. ③ Refine in a chat loop — the ▎ user types "make it dark mode" or "add a Google sign-in" and the agent patches the live app in place. ▎ ▎ The whole thing is one HTML file. No backend, no build step, no install. The API key stays in the browser; the generated app runs in a sandboxed iframe. Multimodal ▎ reasoning is the creative tool — vision in, working code out, no intermediate text representation the user has to author. --- Public GitHub Repository *

Team