M3E Canvas is a browser-based design tool for sketching Material 3 Expressive interfaces and turning them into prompts for AI coding tools. Users can drag buttons, cards, navigation bars, dialogs, fields, chips, images, and many other components onto a canvas. Screens can be linked together and tested as simple interactive flows before implementation. A Tidy function automatically aligns and groups nearby elements using Material-style spacing. Designs can be exported as PNG images or copied as prompts for tools such as Claude Code, Codex, Gemini CLI, and Cursor. Optional AI helpers can generate behavior notes and screen descriptions while keeping provider keys in the browser. Projects are stored locally and can also be shared through links.
Features
- Material 3 Expressive drag-and-drop components
- Multi-screen linking and tap-through prototypes
- Automatic layout cleanup and grouping
- AI coding prompt generation
- Optional AI-written behavior and screen descriptions
- PNG export, local storage, and shareable project links