lnkiai/m3e-canvas

What it solves

M3E Canvas is a browser-based design tool that bridges the gap between visual sketching and AI-driven code generation. It allows users to quickly prototype Material 3 Expressive screens and convert those visual designs into structured, natural-language prompts that AI coding tools (like Cursor, Claude Code, or Gemini CLI) can use to build actual applications.

How it works

The tool provides a drag-and-drop canvas where users can assemble screens using a comprehensive library of Material 3 Expressive components. Users can link screens together with transitions (slides, fades, expands) and define interactions, such as toggle buttons or swipe navigation. The app then translates the entire visual layout—including z-order, grouping, and theme settings—into a concise natural-language prompt in English, Japanese, or Chinese, which the user can copy and paste into an AI coder.

Who it’s for

It is designed for developers and designers who want to rapidly prototype mobile interfaces and use AI to accelerate the transition from a design sketch to a functional app.

Highlights

• AI-Ready Prompts: Converts visual designs into descriptive prompts for AI coding tools.
• Material 3 Expressive: Full support for M3 Expressive components, including shape-morphing loading indicators and dynamic color schemes.
• Interactive Prototyping: Supports tap-to-navigate and swipe-to-navigate transitions with a live preview mode.
• Magnetic Connections: Components like buttons or list items can fuse together into connected groups with softened corners.
• Comprehensive Theming: Control over color (seed colors, light/dark, contrast), shape (square to full rounded), typography, and motion schemes.
• Local Storage: All designs are automatically saved in the browser's localStorage.