M3E Canvas: Open-Source In-Browser Material 3 UI Sketching and AI Coding Prompt Generator

As vibe-coding with AI coding assistants—such as Claude Code, Codex, Gemini CLI, and Cursor—becomes mainstream, one of the most frustrating bottlenecks is verbally describing UI layouts and screen transitions in plain text. Attempting to convey complex nested hierarchies and spatial positioning purely through text prompts frequently leads models to make inaccurate layout assumptions, resulting in tedious cycles of manual correction and regeneration. To eliminate this friction, developer lnkiai has released M3E Canvas (lnkiai/m3e-canvas), an open-source tool that allows creators to visually sketch Material 3 Expressive interfaces in the browser, wire interactive transitions, and export production-ready prompts tailored for AI coding agents.

Released under the permissive MIT license, M3E Canvas runs entirely inside modern web browsers with zero installation and no sign-up requirements. By laying out multiple phone and desktop screens on an infinite canvas, dropping UI components, and connecting touch or swipe pathways, developers can immediately translate their visual ideas into a structured natural-language brief that coding assistants can understand without ambiguity.

36 Material 3 Expressive Parts and Interactive Screen Flow Previews

Unlike generic wireframing tools that draw placeholder rectangles, M3E Canvas implements the precise geometric and behavioral standards of Google's Material 3 Expressive design system.

• Catalog of 36+ Expressive Parts: Built-in components include top app bars, bottom navigation bars, floating toolbars, tabs, search bars, floating action buttons (FABs) and FAB menus, split buttons, chips, cards, lists, dialogs, snackbars, text input fields, switches, sliders, checkboxes, badges, and dividers. It even features shape-morphing loading indicators ported directly from Google's Android implementation (material-components-android).
• Magnetic Grouping: Nearby buttons or list items automatically snap together along horizontal (x) or vertical (y) axes, fusing into cohesive, correctly spaced component groups.
• Interactive Screen Navigation and Live Previews: Tappable parts—such as buttons, app bar icons, or navigation tabs—can be assigned destination screens (or a "back" action) alongside customizable transitions (slide from any of the four sides, fade, expand, or none). The canvas renders visual flow arrows between screens, and an interactive preview mode enables live tap-through testing to verify transitions before generating code.
• Theme and Viewport Configuration: The tool supports seven color palette presets (Purple, Blue, Green, Coral, Amber, Teal, Mono), dynamic schemes generated from a single seed color, light and dark themes, shape rounding, and typography controls. Designers can assemble mobile frames (412×892) and desktop viewports (1280×800) side-by-side, while mobile browsers automatically receive a streamlined single-screen bottom-sheet editing interface.

Structured Prompt Generation and Vibe-Coding Workflows

M3E Canvas acts as a dedicated translation layer between the designer's intent and AI coding tools. Once a visual flow is established, the design can be exported as a concise, structured prompt covering the entire project or a single selected screen.

• Engineered Prompt Engine: Rather than dumping unstructured component lists, the generator explicitly details visual overlaps, side-by-side rows, element sizing, and Material variants (Filled, Tonal, Elevated, Outlined, Text). Responsive variations of a screen across different widths are consolidated into a single unified description.
• Target Stack and Multilingual Output: Users can specify their target platform—Android (the default, targeting Jetpack Compose and Material 3) or the Web—prompting the AI to scaffold the matching technology stack. Output briefs can be generated in English, Korean, Japanese, or Chinese.
• Embedded Behavioral Notes: Creators can attach custom notes to individual parts, detailing tap handlers, validation rules, or persistence logic in the inspector. These notes are injected verbatim into the generated prompt alongside the respective component specifications.
• Optional BYOK AI Assistant: Users can supply their own API keys (OpenAI, Claude, Gemini, or DeepSeek) directly in the browser to automatically draft behavioral notes or summarize screen purposes. API keys remain strictly local in browser storage and communicate directly with provider endpoints without passing through an intermediate proxy server.

Once exported, the prompt can be pasted directly into Claude Code, Cursor, Codex, or Gemini CLI, enabling the coding agent to begin implementation with complete clarity regarding spatial layout, styling, and navigation flow.

Client-Side Architecture, Setup, and Practical Considerations

M3E Canvas is engineered as a zero-dependency, fully client-side Next.js static export.

• Static Next.js Deployment: With no backend server and no external database, the entire application executes client-side on the hosted deployment (lnkiai.github.io/m3e-canvas). For self-hosting or offline usage, developers can clone the repository and run npm install, followed by npm run dev (running locally at http://localhost:3000) or npm run build to generate static assets in ./out.
• Local Persistence Caveats: All canvas data is persisted exclusively in browser localStorage. Clearing browser caches or working in incognito windows risks wiping project data. Users should regularly use the project export feature to save their work as local .json files.
• AI Agent Specification (agent.md): The entire design state serializes into a clean JSON document. By feeding the repository's included agent.md guide to an autonomous coding agent, the agent can programmatically sketch multi-screen layouts and share them via URL hash fragments for instant visual inspection in the user's browser (currently in beta).
• Prototyping Scope: The tool focuses strictly on visual layout, component states, and screen transitions. Developers must still rely on their AI coding agent to implement complex business logic, database transactions, state management, and backend integrations on top of the generated UI scaffold.

By replacing ambiguous verbal descriptions with precise visual models and engineered prompts, M3E Canvas provides an efficient, practical bridge for developers aiming to streamline their AI-assisted front-end workflow.

Sources

• GitHub Repository: lnkiai/m3e-canvas
• Live Web Application: M3E Canvas Live
• Snow Brave Announcement on X (@Sn0wbrave): M3E Canvas Open-Source Introduction