lnkiai/m3e-canvas

Sketch Material 3 Expressive screens in the browser and turn them into vibe-coding prompts.

What it solves

Designing app interfaces and communicating those designs to AI coding assistants can be difficult and imprecise. M3E Canvas provides a visual workspace to sketch Material 3 Expressive screens and automatically converts those designs into structured, detailed prompts that AI coding tools can interpret to build functional applications.

How it works

Users drag and drop pre-built Material 3 components (buttons, cards, navigation bars, etc.) onto a canvas to build screen layouts. The tool allows users to link screens together to define navigation flows and transitions. Once the design is ready, the tool generates a concise text-based brief that describes the layout, components, and user flow, which can then be pasted into AI coding agents like Claude Code, Cursor, or Gemini CLI to generate the actual code.

Who it’s for

It is designed for developers, designers, and product builders who want to use AI coding assistants to speed up the creation of Material 3-based applications by providing them with clear, visual-to-text design specifications.

Highlights

  • Visual Design to Prompt: Converts visual screen layouts and navigation flows into structured text prompts for AI coding agents.
  • Material 3 Expressive Library: Includes a comprehensive set of ready-to-use UI components that snap to a 4dp grid.
  • Interactive Preview: Allows users to test app flows, swipes, and transitions directly within the browser.
  • Theming Engine: Supports full customization of color palettes, typography, corner styles, and motion settings.
  • Browser-based: Runs entirely in the browser with no account or server installation required.

Written about in

Related

  • Project
    penecho/penecho

    PenEcho is an interactive, AI-powered canvas that allows users to turn sketches and notes into diagrams and working widgets, integrating with AI agents via the Model Context Protocol.

  • Project
    gszhangwei/open-spdd

    A CLI tool and methodology that transforms AI coding prompts into structured design contracts using the REASONS Canvas framework to ensure synchronization between design and implementation.

  • Project
    ZSeven-W/openpencil

    OpenPencil is an open-source, AI-native vector design tool where you describe UIs in natural language and watch them generate on an infinite canvas. It uses concurrent AI agent teams, adapts to different models' capabilities, stores designs as Git-friendly JSON (`.op` files), exports to multiple code frameworks, and includes a built-in MCP server for terminal-based AI control. It runs as a web app or native desktop app (macOS/Windows/Linux) from a single Rust core, with a CLI, collaboration features, style guides, and presentation tools.

  • Project
    breaking-brake/cc-wf-studio

    A visual workflow designer for AI agents that allows users to create orchestrations on a canvas and export them as Markdown skills for tools like Claude Code and Cursor.

  • Project
    tigerowo/infinite-canvas

    An open-source multimodal AI creative workbench that combines an infinite canvas with AI image, video, and audio generation tools to streamline visual iteration.