M3E Canvas Free

What it does

M3E Canvas is a browser-based design tool for sketching Material 3 Expressive screens and turning them straight into vibe-coding prompts. It bridges UI design and AI-assisted code generation: sketch a screen, and the tool writes up a design brief you paste into an AI coding agent, so the agent starts from a precise layout instead of a vague text description.

What is inside

• A drag-and-drop component library covering Material 3 Expressive buttons, FABs, chips, app bars, navigation elements, cards and dialogs
• Screen linking, with phone (412×892) and desktop (1280×800) canvases and tap/swipe navigation between them
• Magnetic connections that snap components together with softened corners
• Theme controls for color, shape, typography and motion across the M3 Expressive design axes
• An interactive preview to test navigation flows before handing a screen off to an agent
• Prompt export in Japanese, English, Chinese or Korean
• Optional direct AI integration: bring your own API key for Claude, OpenAI, Gemini or DeepSeek to generate behavior descriptions in-app

Works with

M3E Canvas targets prompt-driven coding agents generally rather than one specific app: its own README names Claude Code, Codex, Gemini CLI and Cursor as the kind of tool you'd paste its generated prompts into.

How to install or connect

npm install
npm run dev        # http://localhost:3000
npm run build      # static export to ./out

Maintenance and safety

Very actively developed (7,900+ stars, MIT licensed, hundreds of new stars in the past week alone). Optional AI features require your own API key, which the tool sends to the corresponding provider to generate a behavior description, so treat it the same as any other bring-your-own-key integration.

Who should use it

Designers and developers who want to design a screen visually first and then hand a precise, structured prompt to a coding agent, rather than describing UI requirements in plain text from scratch. It's a companion to an agent, not a replacement for one.