M3E Canvas: Sketch Material 3 UIs, Get Agent-Ready Prompts
M3E Canvas is the open-source browser tool behind the current wave of "sketch-first vibe coding": draw app screens with Material 3 Expressive components, link them into flows, and export a structured prompt your AI coding agent (Claude Code, Cursor, Codex) can build from. This guide covers the full workflow, export tips, and how it compares to Figma.
The 4-step workflow
- 1
Open the canvas
M3E Canvas runs in the browser (official host: lnkiai.github.io/m3e-canvas) — no install, no account. Drag a phone frame onto the board; you get the Material 3 Expressive component palette: buttons, FABs, cards, nav bars, chips, dialogs.
- 2
Sketch your screens
Assemble each screen from M3 components. Stay honest to the palette — the point of M3E Canvas is that constraints produce designs an AI coder can actually build. Name every screen (e.g. home, list, detail, checkout); the names flow into the exported prompt.
- 3
Link screens into a flow
Connect screens with transitions and gestures (tap, swipe, back). The flow graph is what makes the export valuable: your agent receives navigation logic, not just pictures of screens.
- 4
Export the prompt into your agent
Export produces a structured text prompt describing screens, components, layout hierarchy and navigation. Paste it into Claude Code / Cursor / Codex as the design spec, paired with your stack instruction (e.g. "React + Tailwind, Material 3 tokens"). The best results come from exporting one flow at a time and building incrementally.
Export tips that make the difference
- One flow per export. Whole-app exports overload the agent; screen-by-screen produces cleaner code.
- Ship the stack line yourself. Add "React + TypeScript + Tailwind" (or Android/Compose) to the prompt — the export describes design, not stack.
- Keep screen names semantic. "order-confirmation" beats "screen-4" in every downstream agent output.
- Re-sketch, don't re-prompt. When the build drifts, fix the canvas and re-export rather than patching generated code by hand.
FAQ
Is M3E Canvas free?
Yes — it is open source (MIT) and runs entirely in the browser. The GitHub repo is linked from the official page; you can self-host the static site if you want it inside a corporate network.
Which AI coding tools does the export work with?
The export is a plain-text prompt, so it works with any agent that accepts instructions: Claude Code, Cursor, Codex CLI, Windsurf, Gemini CLI. Community tutorials show full Android and web apps designed in M3E Canvas and built by Claude Code or Codex.
M3E Canvas vs Figma for vibe coding?
Different jobs. Figma is a full design tool with plugins and multiplayer; M3E Canvas is deliberately smaller — a Material 3 Expressive sketchboard whose output is an AI-readable prompt, not a pixel-perfect spec. If your next step is "ask an agent to build it", M3E Canvas removes the Figma-to-prompt translation step.
Can I build custom components or plugins for it?
The component set covers the Material 3 Expressive catalogue. Custom components are a common request in the repo issues — the practical workaround today is exporting the closest built-in component and describing your variant in the prompt text.
Working with coding agents? See our DeepSeek Harness plugin directory and Codex plugins.