M3E Canvas
Editor's PickA free, browser-native canvas to drag-and-drop Material 3 Expressive screens, link them into a clickable prototype, and copy a deterministic prompt for Claude Code, Cursor or other AI coding tools.
What is M3E Canvas?
M3E Canvas is an open-source (MIT), browser-based UI canvas built around Google's Material 3 Expressive design system. Instead of describing a screen in words and hoping an AI codes the right look, you visually sketch it: drag expressive components onto the canvas, arrange multiple screens, link them into interactive flows, and click through the result like a real app. Then its prompt compilation turns the visual scene and component-behavior notes into a concise, deterministic, structured brief you paste into an AI coding agent (Claude Code, Cursor, Codex and similar), so the generated UI closely matches the design rather than a generic dated style. It runs entirely in the browser with no backend (work is saved in localStorage) and can be deployed to GitHub Pages; the stack is React 19 and Next.js 16 with Material 3 Expressive. The project went viral quickly on GitHub, gaining thousands of stars within days and trending as a repository of the day, and is especially popular for vibe-coding Android-flavored and web apps.
Pros
- Shows the AI exactly what to build instead of vague text descriptions.
- No install and no backend — open the page and start.
- Produces a clickable prototype, not just static mockups.
- Free and open source under MIT.
- Fast Material 3 Expressive output ideal for Android-style apps.
Cons
- Optimized for the Material 3 / Android look, not arbitrary brand systems.
- It generates prompts, not the final production code itself.
- Young, fast-moving project that may change quickly.
- Browser-local storage makes team collaboration limited.
Compare with Alternatives
| Feature | M3E Canvas | AI UI Builder - Chrome Extension | Penpot | AI Debug |
|---|---|---|---|---|
| Rating | 0.0 | 4.8 | 4.3 | 4.3 |
| Pricing | Free | Free | Free | Free |
| Starting From | — | Free | Free | Free |
| API | — | — | — | — |
| Free Tier | — | — | — | — |
| Mobile App | — | — | — | — |
Who is it for
Vibe coding
Draw an app UI, copy the prompt, and have an AI agent build it accurately.
App prototyping
Sketch and link multiple Material 3 screens before writing code.
Non-designers
Founders and PMs communicate an interface without design skills.
Android/Material apps
Quickly spec Material 3 Expressive screens for dev teams or AI.
Design-to-code handoff
Turn a visual mock into a deterministic brief an agent can implement.