Skip to content

lnkiai/m3e-canvas

  • URL: https://github.com/lnkiai/m3e-canvas
  • Stars: 4486
  • Language: TypeScript
  • Category: Web & Frontend
  • Topics: design-tool, material-3-expressive, material-design, material3, nextjs, prompt, react, vibe-coding

What it does

M3E Canvas allows users to sketch Material 3 Expressive screens directly in the browser, link them together, and generate prompts for AI coding tools. It supports drag-and-drop functionality for various UI components and enables users to customize themes, layouts, and navigation transitions.

Why it's interesting

This tool stands out by integrating a design interface with AI coding capabilities, allowing users to create UI designs and immediately convert them into prompts for AI tools like Claude Code or Codex. Its focus on Material 3 Expressive design principles and the ability to generate concise natural-language prompts in multiple languages is also notable.

How it works

The application is built using TypeScript and Next.js, functioning as a static site that can be deployed easily. Users can create designs using a drag-and-drop interface, where components can be linked and configured for navigation. The generated prompts are tailored for specific platforms (Android or web) and include detailed descriptions of the UI components. The README mentions that the app saves designs in localStorage and supports keyboard shortcuts for efficient editing, but does not provide specific details on the underlying architecture beyond its static nature.

Get started in 5 minutes

To get started, clone the repository and run the following commands:

npm install
npm run dev  # Access the app at http://localhost:3000

This will set up a local development environment where you can begin using the M3E Canvas immediately.

Watch out for

The repository has a significant number of stars (4486), indicating interest, but it was created recently (September 2026), which may imply that it is still maturing. Users should be aware of potential bugs or incomplete features as it evolves. The project is licensed under MIT, allowing for free use and modification.