Contents

Suppose you’re building a recipe app. You want a search bar and recipe cards on the home screen, with each card opening a detail screen when tapped. You also want a muted green palette and layouts that work on both phones and desktops.

M3E Canvas lets you assemble these screens in your browser, connect them with transitions, and export the result as a prompt for an AI coding tool. It goes beyond showing a design concept: it turns the structure and behavior of the app you want to build into instructions you can use to start implementation.

The public version is available on GitHub Pages. You can pass its output to Claude Code, Codex, Gemini CLI, Cursor, or any other tool that accepts prompts and begin development. This article walks through what it can do and how to use it.

Start by Placing Components to Build a Screen#

To get started, open the public version and drag components onto the canvas. Available components include buttons, icon buttons, FABs, chips, app bars, navigation bars, tabs, search bars, cards, lists, dialogs, and text fields. There are also placeholders for images, cameras, and maps, giving you enough building blocks to assemble an app’s main screens.

For a recipe app, for example, place a search bar at the top, category chips below it, and recipe cards underneath. Selecting a card opens a detail screen, where a button at the bottom lets users save the recipe. Start with the appearance, then refine the layout and interactions.

You can add as many screens as you like, each with its own name and background color. A handy option on each screen’s label lets you switch between 412×892 for phones and 1280×800 for desktops. If you create screens with the same name at both widths, the prompt treats them as different widths of the same screen. You don’t need to describe the phone and desktop versions as separate apps.

Preview Screen Transitions and Interactions#

Once you’ve placed your components, set where they should navigate when tapped. You can assign another screen or a “Back” action to buttons and cards, as well as app bar icons and navigation bar items. Transition options include slides from any of the four directions, fades, zooms, and no animation.

Arrows on the canvas show the connections between screens, making it easy to see where each interaction leads. In preview mode, you can tap components to try the transitions. When you go back, the original animation plays in reverse.

You can also assign destinations for left, right, up, and down swipes on each screen. In the preview, the screen follows your finger, and you can swipe in the opposite direction to return. Buttons can be configured as toggles that switch on and off with each tap. You can also specify their icon and style when switched on.

These interactions can be surprisingly difficult to convey through screen descriptions alone. M3E Canvas lets you shape the appearance and transitions together while checking both on the same canvas.

Adjust the Material 3 Expressive Theme in One Place#

The theme settings let you edit four aspects of Material 3 Expressive from a single panel.

For color, you can choose from seven presets or specify a base color to generate a Material 3 color scheme, then fine-tune the details. It also supports light and dark modes, three contrast levels, and dynamic colors that match the wallpaper.

Shape settings let you switch component corners collectively between square, standard rounded, and fully rounded. Typography options include Roboto, Roboto Flex, Roboto Serif, and system fonts. Motion can be switched between standard and expressive, and the choice is reflected in preview transitions.

This makes it easy to compare the overall feel of an app without repeatedly rebuilding its screens. After changing the colors or shapes, try previewing the transitions between screens too.

Refine the Layout with Layers and Automatic Arrangement#

For screens with overlapping components, the layers panel lets you adjust their stacking order. You can drag rows to reorder them or expand groups and connected components to rearrange their contents. Grouping multiple components lets you move them together while preserving their overlap. The generated prompt also includes information about overlapping and side-by-side layouts.

If you’re unsure how to arrange things, use “Tidy Up.” It moves bars to the screen edges, places FABs in corners, connects adjacent buttons and list items, and restacks the remaining components with 16dp spacing. Press it again to restore the previous layout.

For finer adjustments, use guides and snapping. Undo, redo, and keyboard shortcuts are also available. For example, V switches to the selection tool, H switches to the hand tool, and P opens the preview. Use the arrow keys to move components, or hold Shift to move them in 8dp increments.

Generate a Prompt for Your AI Coding Tool#

Once your screens are ready, convert the entire design or a single selected screen into a prompt. You can choose Japanese, English, Chinese, or Korean as the output language. The prompt can also include behavior notes written for individual components and descriptions of each screen. Select Android or Web as the implementation target, and the prompt will include instructions to use appropriate technologies.

The workflow is straightforward.

  • Place screens and components on the canvas.
  • Configure the screen transitions and interactions you need.
  • Adjust the theme and screen sizes, then check them in the preview.
  • Select a prompt for the entire design or a specific screen, and edit it manually if needed.
  • Copy the prompt and pass it to your AI coding tool.

When asking AI to implement the design, supplement the prompt with your preferred technologies and runtime environment as needed. M3E Canvas’s output is a starting point for communicating screen structure and behavior. Testing the generated code and refining the details are part of the implementation work.

You can save screens as PNGs and create share links that open the design. A share link lets someone open your design in their own canvas. If you use the instructions for AI agents, the agent reads agent.md, creates a screen design, and returns it as a share link. This feature is labeled as a beta.

Does It Work on Phones? What Should Developers Know?#

On a mobile browser, M3E Canvas opens a button-only editor limited to a single screen. Use the plus button to add components, then tap buttons on the screen to move them. A bottom sheet lets you edit text, icons, and styles. The full editor, which supports multiple screens, is intended for desktop browsers.

Your work is saved in the browser’s localStorage. To use the optional AI assistance features, you’ll need to provide your own API key for OpenAI, Claude, Gemini, or DeepSeek. Keys are stored in the browser, and requests are sent directly to the respective provider. These features let AI write component behavior notes and screen descriptions, and its edits can be undone.

M3E Canvas is free and released under the MIT license. To build it yourself, clone the repository, install the dependencies, and start the development server.

terminal
npm install
npm run dev

To generate a static production build, run:

terminal
npm run build

The output goes to ./out. If you’re publishing under a subpath, as on GitHub Pages, set NEXT_PUBLIC_BASE_PATH=/repository-name when building. The repository also includes a GitHub Actions workflow that deploys to GitHub Pages whenever you push to main.

Start with One Small Screen#

M3E Canvas is a good fit for anyone who wants to assemble Material 3 Expressive screens visually and hand the implementation instructions to AI. It brings together screen layouts, transitions, themes, screen widths, and behavior notes for individual components.

You don’t need to design a large app from the outset. Start with a single list screen containing a search bar and cards, then try setting up a transition from a card to a detail screen. Once you’ve checked the interaction in the preview, copy the Japanese prompt and pass it to your AI coding tool.

Source: https://github.com/lnkiai/m3e-canvas

Contents