Skip to content
Day 69: new resources are added every day. See what's new
Best Productivity ResourcesBy Shushant LakhyaniVerified creator

Web App

M3E Canvas

Sketch Material 3 Expressive screens in the browser and turn them into prompts for AI coding tools.

Visit M3E Canvas4.2

  • Rating

    4.2 / 5

  • Pricing

    Free

  • Difficulty

    Beginner

  • Works on

    Web

Built with love by Shushant Lakhyani. Building bestproductivityresources.com

Free: 1,100+ ways people make money onlineFree: 399+ ways to make money online

What is M3E Canvas?

M3E Canvas is a free browser tool for laying out app screens with Google's Material 3 Expressive components and turning the layout into a prompt you can paste into a vibe-coding or AI coding tool. The interface is available in English and Japanese.

Pros: what M3E Canvas does well

  • Visual way to describe a screen to AI
  • Uses Material 3 Expressive components
  • Free, runs in the browser

Cons: where it falls short

  • Limited to Material Design styles
  • Small, early project

Who M3E Canvas is for

Designers and developers who want AI tools to build Material-style app screens accurately.

Who can skip it

People building with other design systems.

What people use M3E Canvas for

  • Sketching an Android or web app screen before asking an AI coding tool to build it
  • Linking several screens and previewing the tap-through flow
  • Turning a layout into a clear written brief for Claude Code, Codex, Gemini CLI or Cursor

How to get started

  1. 1Open M3E Canvas in your browser; there is no account and nothing to install.
  2. 2Drag Material 3 Expressive parts onto a phone or desktop screen and link them to other screens.
  3. 3Press Preview to test the flow, then copy the prompt in English, Japanese, Chinese or Korean.
  4. 4Paste the prompt into your AI coding tool and let it build the screens.

M3E Canvas pricing

M3E Canvas is free and open source under the MIT licence. The optional AI helper uses your own OpenAI, Claude, Gemini or DeepSeek API key, which stays in your browser. See current prices on M3E Canvas's site

Checked 2026-10-30. Prices change, so double-check before you pay.

M3E Canvas FAQ: quick answers

Is M3E Canvas free?
Yes. It is free, open source and needs no sign-up. Only the optional AI helper needs your own API key.
What does M3E Canvas export?
A written prompt for AI coding tools, for the whole design or one screen. You can also save a screen as a PNG or share a link to the design.

M3E Canvas alternatives

Not sold on M3E Canvas? These do a similar job, and each card says what it has in common.

All AI Productivity resources

Vibe Coding CN

Focus: ai coding, pair programming and codex. Shares vibe coding with M3E Canvas. A course, not a web app. Rated 4.7 (M3E Canvas: 4.2).

CourseFreeWeb
4.7Visit

Kage

Focus: design inspiration, ui and ai agents. Shares prompts with M3E Canvas. A website, not a web app. Rated 4.6 (M3E Canvas: 4.2).

WebsiteFreeWeb
4.6Visit

VibeIndex

Focus: ai coding tools, directory and ai agents. Shares vibe coding with M3E Canvas. A website, not a web app. Rated 4.6 (M3E Canvas: 4.2).

WebsiteFreeWeb
4.6Visit

Free alternatives to M3E Canvas

Want to spend nothing? These free picks cover similar ground.

handmux

Focus: tmux, mobile and claude code. Shares vibe coding with M3E Canvas. A mobile app, not a web app. Adds Android and iOS. Rated 4.4 (M3E Canvas: 4.2).

Mobile AppFreeAndroid, iOS
4.4Visit

Lemo Opuscar

Focus: film styles, claude opus and video. Shares prompts with M3E Canvas. A template, not a web app. Rated 4.4 (M3E Canvas: 4.2).

TemplateFreeWeb
4.4Visit

vibe-to-ui

Focus: ai agent skill, landing pages and design direction. Shares ui design with M3E Canvas. An AI tool, not a web app. Rated 4.4 (M3E Canvas: 4.2).

AI ToolFreeCross-Platform
4.4Visit

Hallmark

Focus: design skill, claude code and cursor. Shares ui design with M3E Canvas. An AI tool, not a web app. Rated 4.3 (M3E Canvas: 4.2).

AI ToolFreeCross-Platform
4.3Visit

Speakr

Focus: transcription, audio and self-hosted. Also in AI Productivity and Workflows, like M3E Canvas. Adds Linux. Rated 4.7 (M3E Canvas: 4.2).

Web AppFreeWeb, Linux
4.7Visit
Are you the maker of M3E Canvas?Get a free Featured badge for your site, a share image and ready-to-paste posts. No sign-up.

New · updated daily

What people are actually doing with AI

Real use cases shared on Reddit, Hacker News, X, GitHub and blogs, summarised in plain words with a link to every original post.

Browse AI use cases

Free Notion database

1,100+ ways people are making money online

Real online businesses, creators and projects, broken down by how they make money: apps, online stores, AI tools and more. Free on Gumroad.

Get the free database

Free Notion database

399+ ways to make money online

Hundreds of online income methods in one place, so you can compare options and pick one to try. Free on Gumroad.

Get the free list

For research and ideas only. Results vary and nothing here is a promise of income. See our Disclaimer.

Weekly newsletter

Everything new, every Monday.

One short email every Monday with everything shipped that week: new free tools and websites, new guides, new free browser tools and what's new in my free Gumroad libraries, plus how the site is growing. Free, and you can unsubscribe anytime.

Join the newsletter

You sign up on Gumroad, which stores your email to send the newsletter. See our Privacy Policy.