Every time I wanted to build a mobile app with AI (Claude, ChatGPT, Cursor), I'd spend forever writing prompts describing how screens connect to each other. "The login screen has a button that goes to the home screen, which has a tab bar with 4 tabs, the profile tab has a settings button that opens a modal..." -- you get it.
So I built Drawd -- a browser-based tool where you:
- Upload your screen mockups onto an infinite canvas
- Draw hotspot tap areas on each screen (buttons, tabs, links)
- Connect screens visually with navigation arrows
- Hit "Generate" and get a structured ZIP of markdown files that an LLM can actually consume
The output includes screen specs, navigation maps, hotspot definitions, and a build guide tailored to your framework (SwiftUI, React Native, Flutter, or Jetpack Compose). You feed the ZIP to your AI coding tool and it knows exactly what to build.
Why I built this
I'm an iOS developer and I was tired of the gap between "I have designs" and "AI builds my app." Existing tools are either general-purpose whiteboards (too generic) or full prototyping tools (too heavy). I wanted something purpose-built for mapping mobile app navigation flows and turning them into structured specs.
What makes it different
- Free, no sign-up -- runs entirely in the browser
-
Local-first -- everything saves to a
.drawdfile on your machine, no cloud dependency - Built for the vibe coding workflow -- the whole point is to bridge design and AI-powered development
- Real-time collaboration -- share a room code and design flows together
- Conditional branching -- model complex flows with drag-to-create branches
Try it out
Would love feedback from anyone who's been using AI to build mobile apps. What's missing? What would make this more useful for your workflow?
Top comments (0)