Repolode
Submit
lnkiai

lnkiai/m3e-canvas

A browser sketchpad for Material 3 Expressive app screens that turns your design into a prompt for AI coding tools.

Open-source alternative to:Figma

View on GitHubWebsite
Stars
9,510
Forks
1,028
Open issues
9
Last commit
4 days ago

What is it?

M3E Canvas is a browser-based sketching tool for app screens built from Material 3 Expressive components. You drag parts such as buttons, cards, bars, tabs and pickers onto phone or desktop screens, link them to other screens with transitions, and preview the flow by tapping through it. It runs entirely in the browser with no account or server required, and autosaves locally.

The main output is a prompt. The whole design or a single screen is converted into a concise brief in Japanese, English, Chinese or Korean, including notes on what each part does and how rows and grids should be laid out. You can target Android or the web, edit the text, then paste it into an AI coding tool such as Claude Code, Codex, Gemini CLI or Cursor to generate a working app.

Optional AI help lets you supply your own API key for OpenAI, Claude, Gemini or DeepSeek to draft designs or write notes, with requests sent directly from the browser to the provider. The project is a static Next.js export built with React and TypeScript, and is MIT licensed.

Key features

  • 01Drag real Material 3 Expressive parts onto phone or desktop screens that snap to a 4dp grid.
  • 02Link parts to other screens with slide, fade or expand transitions and preview the flow.
  • 03Generate a design brief in four languages, targeting Android or the web, for AI coding tools.
  • 04Adjust theme colors, shape, type and light or dark mode from one panel.
  • 05Use optional AI helpers with your own API key for OpenAI, Claude, Gemini or DeepSeek.
  • 06Share a design through a link, with autosave kept in the browser.

Use cases

  • Sketching an app screen flow before handing it to an AI coding agent to implement.
  • Prototyping Material 3 layouts for a mobile or web project without a design tool license.
  • Communicating a UI idea to developers as a clickable flow with a written brief.
  • Exploring theme palettes and light or dark variants of a Material 3 interface.

Quick start

  1. 1

    Install dependencies

    npm install
  2. 2

    Start the dev server at localhost:3000

    npm run dev
  3. 3

    Build a static export to ./out (optional)

    npm run build

Things to know

  • Running it locally requires Node.js and npm to install and build the Next.js app.
  • AI helper features need your own API key from OpenAI, Claude, Gemini or DeepSeek.

Topics

#material-design#design-tool#prompt#vibe-coding#react#typescript#ui-prototyping#material-3-expressive#material3#nextjs

FAQ

What is m3e-canvas?
A browser sketchpad for Material 3 Expressive app screens that turns your design into a prompt for AI coding tools. M3E Canvas is a browser-based sketching tool for app screens built from Material 3 Expressive components. You drag parts such as buttons, cards, bars, tabs and pickers onto phone or desktop screens, link them to other screens with transitions, and preview the flow by tapping through it. It runs entirely in the browser with no account or server required, and autosaves locally.
Is m3e-canvas free to use? What license does it have?
m3e-canvas is open source under the MIT license. Check the license terms before using it in commercial products.
Is m3e-canvas still maintained?
Actively maintained. The last commit to m3e-canvas was on Oct 16, 2026.
What can I use m3e-canvas for?
Sketching an app screen flow before handing it to an AI coding agent to implement. Prototyping Material 3 layouts for a mobile or web project without a design tool license. Communicating a UI idea to developers as a clickable flow with a written brief. Exploring theme palettes and light or dark variants of a Material 3 interface.
How do I install m3e-canvas?
Install dependencies: npm install Start the dev server at localhost:3000: npm run dev Build a static export to ./out (optional): npm run build
Where can I get m3e-canvas?
The source code and installation instructions are on GitHub: https://github.com/lnkiai/m3e-canvas

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects