M3E Canvas reduces design-to-code friction by translating visual designs into precise, reusable prompts for AI coding agents, speeding up frontend prototyping and development.

As an open-source, browser-based UI canvas for Material 3 Expressive interfaces, it lets you visually sketch mobile and desktop layouts and export structured prompts for AI tools.

The tool runs entirely in the browser with no backend required, built on Next.js 16 and React 19, and supports arranging components like app bars, FABs, chips, cards, sliders, and navigation rails, plus flow prototyping to validate user flows.

Quick-start guidance is provided to run locally—clone the GitHub repo, install dependencies, and start the dev server—along with links to the live app and repository for exploration and contribution.

It features a rich material expressive catalog with magnetic snapping, shape-morphing loading indicators, and responsive layouts that adapt between mobile and desktop widths.

Interactive navigation is supported through tap and swipe, with configurable transitions and direct navigation targets to preview user flows before code generation.

Privacy is prioritized with 100% client-side operation and no telemetry; designs are stored in localStorage, and optional local AI helpers can use the user’s own API keys for Claude, OpenAI, or Gemini to write in-browser component behavior notes.

A core feature is structured AI prompt generation: a single action compiles the visual scene into a deterministic prompt that specifies component hierarchies, layout margins, target tech stacks (Android Compose or Modern Web), and multilingual prompts (English, Japanese, Chinese, Korean).