The Problem

Designing Material 3 Expressive interfaces typically requires writing code or iterating through design tools, creating a friction point for teams needing rapid prototypes for AI coding assistants. Teams building vibe-coding workflows need a path from a visual sketch to a natural-language prompt describing layout, interaction, and theming without manual transcription.

What This Does

M3E Canvas is a browser-based sketch tool for Material 3 Expressive screens. Users drag-and-drop parts from components/—including M3Node.tsx (the core canvas node), Toolbar.tsx, Layers.tsx, and Preview.tsx—to build multi-screen flows. State and theming are handled by lib/theme.ts and lib/tokens.ts, which apply the four M3 Expressive axes (color, shape, type, motion). The generated output is produced by lib/prompt.ts, which exports prompts in Japanese, English, or Chinese. Navigation logic (tap targets, swipe directions) is defined in components/Inspector.tsx and components/Menus.tsx, with the preview rendered in components/Preview.tsx. The app shell runs on Next.js 16 with React 19 in the app/ directory, persisting state to localStorage as noted by the "No backend" badge.

How It Is Wired

Execution starts at app/page.tsx, which renders the main canvas layout and imports the component set from components/. User interactions on the canvas trigger React state updates that flow through the UI components. The critical data path runs: canvas selection/interaction -> components/ state management -> lib/theme.ts/lib/tokens.ts for visual application -> lib/prompt.ts for serialization. lib/prompt.ts is the terminal function; it takes the canvas configuration and outputs the natural-language string. The theming system in lib/theme.ts serves as a hub, consulted by multiple components/ to render the correct M3 Expressive styles. There are no external network calls or filesystem writes outside localStorage; all effects are contained within the browser runtime.

How To Use It

Setup: Run npm install and then npm run dev (inferred from package.json and next.config.ts). No environment variables or API keys are required. Configuration: The application runs entirely client-side. State is stored in localStorage; no config files or secrets are needed to start. Running it: After installation, execute npm run dev and open the local URL (typically localhost:3000). The README also provides a live demo at https://lnkiai.github.io/m3e-canvas/.

Real-World Use

A product designer sketches a screen with a FAB, a navigation bar, and a card component in M3E Canvas. They adjust the theme axes in ThemePanel.tsx (light/dark, seed color, rounded corners). Upon clicking the prompt output, lib/prompt.ts generates text such as: "A screen with a dark background, a floating action button in the bottom right that expands on tap to reveal a menu, and a centered card with a 4dp radius shadow." The designer copies this prompt into their AI coding tool (e.g., Cursor or Windsurf) to generate the corresponding React/React Native code.

Code Health & Issues

  • Low test coverage: Only 1 test file is present in the repository; no additional test infrastructure is configured.
  • CI/CD present: GitHub Actions workflows exist in .github/workflows/ci.yml and .github/workflows/deploy.yml.
  • License and lockfile present: LICENSE and package-lock.json are present in the root.
  • Fork divergence: This repository is a fork of lnkiai/m3e-canvas (448 stars); the moses-y fork has 0 stars, suggesting it may be an early snapshot or personal clone rather than the primary development branch.

The Bottom Line

This is a focused, client-side sketch tool that successfully bridges the gap between visual M3 Expressive design and AI-ready prompts. The implementation is credible and the code is well-organized around lib/ for logic and components/ for UI. The main drawback is the sparse test suite and the fork status, which may indicate the primary development happens upstream. It is best suited for designers and developers who need to rapidly prototype M3 screens and generate prompts for code assistants without leaving the browser.