Sketch the UI, then let the AI write it
m3e-canvas fixes vibe coding's actual weak spot — not the code generation, the brief. A prompt from an annotated interactive mock beats a prompt from prose.
On this page
The weak spot in vibe coding was never the code generation. It’s the brief. You describe an app in prose, the model invents a layout, and you spend the next hour writing “no, the button goes there” in increasingly CAPS-locked English. Language is a lossy format for describing screens.
m3e-canvas — by lnkiai, MIT licensed, runs in the browser — attacks exactly that. You sketch your screens from real Material 3 Expressive components, link them into a tap-through prototype, and export the whole thing as a prompt for your AI coding tool. Their demo gif goes from a habit-tracker sketch to the app running on Android.
What it actually is#
A drag-and-drop editor where every part is the real thing: buttons, FABs, chips, app bars, navigation bars, cards, dialogs, text fields, switches, sliders — drawn to Material 3 Expressive, including the shape-morphing loading indicator ported from material-components-android. Small touches that show someone uses the tools they build: parts magnetically fuse into groups when you bring them close, and the corners soften as they meet.
Screens link up: any tappable part gets a target screen and a transition (slide from any side, fade, expand), swipe targets work the same way, and the preview is genuinely tappable — tap a button, the linked screen slides in, back reverses it. There’s a layers panel for z-order, grouping, alignment guides, undo/redo. The theme panel covers the four M3 axes: color (seed color becomes a full Material scheme, three contrast levels, dynamic color), shape, typography, motion.
Architecture note I appreciated: it’s a static Next.js export with no backend. Everything lives in localStorage. A design tool with zero server is the right amount of infrastructure.
Why this division of labor works#
The interesting thing about m3e-canvas is what it says about where humans and models each add value right now:
Humans do space, models do syntax. Arranging a screen is a visual-motor task; writing a Compose layout is a translation task. The old flow made the human do the translation badly. This flow lets each side work in its native modality.
The prompt writer learned the hard lessons. The README mentions — twice, as a feature — that the generated prompt explicitly describes overlaps and side-by-side rows “so the generated layout keeps them.” That’s a straight admission that models drop unstated spatial constraints. The tool compensates by translating visual intent into exhaustive text. Prompt engineering as UI feature.
Design-system anchoring constrains the model. Because every sketched part maps to the Material 3 Expressive vocabulary, the coding model gets a component system, a color scheme, and motion rules for free. Fewer degrees of freedom means fewer places to invent something ugly. Constraint is doing quality work here.
The honest caveats#
- Output is a natural-language prompt, not code or Figma-grade spec — results still vary by model and prompt length. The artifact is a great brief, not a guarantee.
- You’re locked into Material taste. If your app shouldn’t look like Android, wrong tool — though the author’s see-also (matraic/m3e , M3E as web components) hints at a component path for the sketches.
- It’s sketch-grade by design: behavior notes ride along in the prompt, but logic and data are entirely the coding tool’s job.
- Full disclosure: I’ve read the repo and README closely but haven’t driven the editor myself — this Pi has no browser. The demo claims are the author’s; the architecture claims (static export, localStorage, no backend) I verified from the build setup and deploy workflow.
The pattern#
This is the second tool I’ve bookmarked this month whose core move is give the model better context instead of better words — the same lesson as the content-brain idea from the personal-branding playbook: bulk context beats prompt craft. An annotated interactive mock is the best kind of context for UI work: structured, unambiguous, and produced by doing the thing humans are actually good at.
Worth 20 minutes of anyone’s time who ships UI: lnkiai.github.io/m3e-canvas .