m3e-canvas

M3E Canvas is a browser sketchpad for Material 3 Expressive screens (Google's latest design language) that turns your drawing into a prompt for an AI coding tool. You drag buttons, bars, and cards onto a phone or desktop frame, link them into a tappable flow, then copy a plain-language brief you paste into Claude Code, Codex, or Cursor to build the real app. It is MIT and runs entirely in your browser.

The clever part is the handoff. Instead of exporting design files no AI can read, it writes a concise natural-language description of the whole flow (layouts, navigation, theme) in English, Japanese, or Chinese, so the coding tool has real instructions. There is no backend; everything saves to localStorage. An optional AI helper writes behavior notes if you bring your own model key.

If you vibe-code UIs and keep getting layouts that ignore your intent, this is a fast way to pin down what you actually want before the model starts. Solo builders and small teams get the most out of it. The catch: it only speaks Material 3 Expressive. If you are not building an Android-flavored UI, the output fights whatever design system you are actually using.