Builderoom
Log inSign up
Work types896Web App / SaaS484Design & UX34UI Design Tools5UI Generation3Vector Editing2Design to Code2Design to Prompt1Design System Generation1Auto Layout1

October 23, 2026

M3E Canvas

Design & UXUI Design Tools8
Use tool

Design Material 3 Expressive interfaces in the browser and generate prompts for AI coding tools.

MIT
Design to PromptUI Generation
1 / 7

Product facts

Type
Web App / SaaS
Category
Design & UX › UI Design Tools
Pricing
Open source
License
MIT
Launched
Oct 23, 2026
Listed
Oct 23, 2026
Website
github.com

Overview

GitHub

M3E Canvas is a free, open-source web app for designing app interfaces with real Material 3 Expressive components directly in your browser. No account registration, no server dependency, and no software installation required.

Its core purpose is to turn design sketches into precise text prompts that AI coding tools like Claude Code, Codex, Gemini CLI, or Cursor can read to generate runnable applications.

Workflow

  1. Sketch: Drag components onto a mobile or desktop canvas. They automatically snap and align to a 4dp grid.
  2. Tap through: Set destination screens for components, then click Preview to experience the full flow with transition animations.
  3. Copy the prompt: The entire design is converted into a concise description you can paste directly into AI coding tools.

Key Capabilities

  • Authentic M3 Expressive components: Includes buttons, FABs, navigation bars, tabs, cards, lists, bottom sheets, pickers, carousels, loading indicators, and more. Each component has its own panel to configure text, style, size, and tap behavior.
  • Multi-screen & flow linking: Switch between mobile (412×892) and desktop (1280×800) screen sizes; components like navigation bars adapt automatically. Supports setting screen scroll length and triggering screen transitions (slide, fade, expand, etc.) via taps or swipes.
  • Unified theme management: Centrally manage colors, shapes, typography, and motion. Supports 7 preset palettes or custom seed colors, light/dark mode, 3 contrast levels, corner styles, and expressive spring animations.
  • Optional AI assistance: Provide your own API Key to let AI help generate design drafts or write annotations. Keys are used locally in the browser only and never uploaded to a server.
  • Magnetic connections: When buttons, chips, or list items are placed close together, they automatically merge into a connected group with smoothly blended corners.

Built with Next.js 16 and React 19, written in TypeScript, and open-sourced under the MIT license. Ideal for developers or designers who want to quickly communicate UI requirements to AI coding tools visually.

Key features

  • Material 3 Component Library: Provides authentic M3 Expressive components like buttons, FABs, navigation bars, cards, lists, and dialogs, with configurable text, styles, and tap behaviors.
  • Multi-Screen & Responsive Switching: Supports mobile and desktop screen sizes. Component layouts adjust automatically when switching, and identically named screens are merged in the exported prompt.
  • Interaction Flow Preview: Set destination screens and transition animations for components, then tap or swipe in Preview mode to experience the full interaction flow.
  • Prompt Export: Converts the entire design into a structured text prompt ready to paste into AI coding tools.
  • Unified Theme Configuration: Centrally manage colors, shapes, typography, and motion, supporting preset palettes, custom seed colors, light/dark mode, and contrast levels.
  • Magnetic Connections: Buttons, chips, or list items placed nearby automatically merge into a connected group with smoothly blended corners.
  • Screen Scrolling: Screens can extend beyond device height, allowing content to scroll beneath top and bottom bars during preview.
  • Optional AI Assistance: Enter your own API Key to let AI help generate design drafts or write annotations. Your key never leaves the browser.
  • Layer & Group Management: Each screen has its own layer panel for adjusting component stacking order.
  • Runs Entirely in the Browser: No account registration, no servers, no installation—use it directly in your browser.

Releases

Notify me

Initial · M3E Canvas

Q&A

Does M3E Canvas require installation or registration?AI-generated
No. It runs entirely in the browser—no account registration, no servers, and no software installation required.
Which AI coding tools can use the generated prompts?AI-generated
The documentation states it works with any AI coding tool that accepts prompts, such as Claude Code, Codex, Gemini CLI, or Cursor.
Does the AI assistance feature upload my API Key?AI-generated
No. The documentation explicitly states that your API Key never leaves your browser.
Which screen sizes are supported?AI-generated
It supports 412×892 mobile screens and 1280×800 desktop screens, which you can switch between directly from the screen tabs.
Is this project open source?AI-generated
Yes, M3E Canvas is free and open source under the MIT license, with its code hosted on GitHub.
Can components align automatically?AI-generated
Yes. When you drag components onto the canvas, they automatically snap and align to a 4dp grid.
More
Use tool
Bookmark

This product has no owner yet

It was listed by the platform or its author left. If it is your work, prove your relationship to become the owner.

Claim this product

Alternatives

The product content on this page was translated by AI from the author's original.