M3E Canvas: Drag-and-Drop Prototyping to Structured AI Coding Prompts for Cursor/Claude Code

Problem: Communicating UI Designs to AI Coding Tools

When using AI coding assistants such as Cursor, Claude Code, or Codex, developers often struggle to convey precise interface layouts and interactions through text prompts. Short prompts lead to hallucinated layouts; detailed prompts become thousands of words long, are time-consuming to write, and still miss details like page transitions or animation behaviors. This communication gap forces multiple iteration cycles.

Solution: M3E Canvas — Visual Prototyping to Structured Prompts

M3E Canvas (MIT licensed, 6.4k+ GitHub stars, Trendshift daily #1) is a browser-based static web app built with Next.js. It requires no backend, no registration, and stores all prototype data in the browser's localStorage. Optional AI assistant integration supports OpenAI, Claude, Gemini, and DeepSeek; API keys stay local and requests go directly to providers.

Core Features

Drag-and-Drop Prototyping with Material 3 Expressive Components

Full suite of M3 Expressive components: buttons, icon buttons, FAB, cards, inputs, search bars, lists, navigation bars, switches, sliders, chips, dialogs, snackbars, image placeholders, badges, camera/map placeholders.

M3-native details: magnetic grouping when components approach, automatic corner-radius blending at seams, dynamic loading animations matching Android's official component effects.

Layer panel for z-order adjustment and multi-selection grouping.

One-click layout cleanup: snaps app bars to edges, floats FAB to corners, aligns remaining elements to 16dp grid; undo available.

Responsive dual-canvas sizes: phone (412×892) and desktop (1280×800). A single prototype auto-adapts — bottom navigation on phone becomes side navigation on desktop with automatic reflow.

Interactive Multi-Page Flows

Define page-to-page navigation on any button: select target page and transition animation (slide up/down/left/right, fade, expand).

Canvas visualizes flow with arrows; this diagram can be shared with product/engineering for alignment.

Preview mode (press P) runs the prototype like a real app: taps trigger transitions, back gesture plays reverse animation, swipe pagination supported.

Per-component behavior notes (e.g., "click opens gallery", "save returns to previous page") are embedded into the exported prompt.

Unified Theme Configuration

Color: 7 preset schemes or single seed color generating light/dark themes with three contrast levels; dynamic color extraction from wallpaper.

Shape: three corner-radius presets (sharp, medium, full) applied globally.

Typography: Roboto, Roboto Flex, Roboto Serif, or system font.

Motion: standard vs. Material spring easing.

All theme parameters are written into the exported prompt so the AI reuses the complete visual spec without extra description.

Standardized Prompt Export (Core Capability)

The canvas produces a fixed six-section specification document — not free-form text:

Color specification

Shape, typography, motion

Screen structure

Page transitions & interaction behaviors

Per-component detailed styles

Overall development principles

Export options: full project or single page; output languages — Chinese, English, Japanese, Korean; target platform — Android or Web (Web selection adapts prompt to web tech stack). Component notes, layout, layer hierarchy, and navigation logic are all structured into the prompt, yielding a thousand-word document that removes guesswork for the AI.

Collaboration & Bidirectional Flow

Shareable canvas links let collaborators view the prototype instantly.

Advanced agent.md capability: Claude Code can read the project spec and reverse-generate a prototype on the canvas, enabling design↔code round-trips.

Usage Tutorial

Online (Quick Prototyping)

Open https://lnkiai.github.io/m3e-canvas/ → drag components → configure navigation & behaviors → adjust theme → export prompt → paste into Cursor, Claude Code, Gemini CLI, Codex, etc.

Local Deployment (High-Frequency / Private Hosting)

Prerequisite: Node.js installed.

# Install dependencies
npm install

# Start dev server at http://localhost:3000
npm run dev

# Static build to ./out
npm run build

For GitHub Pages (subpath deployment), add base path env var: NEXT_PUBLIC_BASE_PATH=/repo-name npm run build Repo includes deploy.yml for GitHub Actions auto-publish. Mobile browsers can open the canvas but only offer simplified single-page editing; full multi-page prototyping requires desktop browser.

Target Users

Independent developers with clear product ideas but weak UI skills who cannot articulate interfaces to AI.

Product managers needing rapid multi-page interactive prototypes for requirement alignment that also emit AI-ready prompts.

AI programming beginners wanting a visual mental model of app page structure to accelerate frontend/Android development with AI.

Current Limitations

Only Material 3 Expressive style; iOS-style interfaces not supported.

Prompt defines UI skeleton and interactions only; business logic, backend APIs, and data handling remain the developer's responsibility.

Early-stage project; features still iterating.

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