# The Dark Knight

- **Event:** [Google I/O Hackathon](https://cerebralvalley.ai/e/google-io-hackathon)
- **When:** Sat, May 23 at 9:00 AM – 10:00 PM (PDT)
- **Where:** Shack15, San Francisco, CA
- **Team:** [Gangadhar Viswanathan](https://cerebralvalley.ai/u/gangsd007)
- **GitHub:** https://github.com/gangsd92/sketch2app
- **Demo video:** https://www.youtube.com/watch?v=EQr2YUCZo8Y
- **Gallery:** https://cerebralvalley.ai/e/google-io-hackathon/hackathon/gallery
- **Page:** https://cerebralvalley.ai/e/google-io-hackathon/hackathon/gallery/120

▎ 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 *

---

Markdown version of https://cerebralvalley.ai/e/google-io-hackathon/hackathon/gallery/120. Site index for agents: https://cerebralvalley.ai/llms.txt · full text: https://cerebralvalley.ai/llms-full.txt