Signal Collective
Hong Kong Book a call
Signal Collective The Library Design
We find where your growth is · Then we build it

Design · A design system your AI builder follows on every screen. · a tool

Show your AI what to build before it builds it

The open-source project m3e-canvas, by lnkiai

“Sketch Material 3 Expressive screens in the browser and turn them into vibe-coding prompts.” — the project's own words, on GitHub

What it does
m3e-canvas gives you a place to sketch out what your product's screens should look like before your AI starts writing code. You drag together screens in a browser, a Material Design style, cards, buttons, navigation, link them so you can click through the flow like a real app, then copy out a single prompt that describes exactly what you built. Hand that prompt to your AI coding tool and it has a precise, visual spec to build from, instead of guessing at a screen from a paragraph of instructions. Nothing you draw here is code yet, it's the blueprint your AI turns into code.
Replaces
an afternoon describing screens to your AI in a paragraph, or a freelance wireframing job
For
A founder whose AI is building their product and needs a precise, visual spec to hand it instead of a vague paragraph describing a screen.
Not for
Not for a working front-end developer who already designs in code or a proper design tool — this is a sketch-and-prompt step for someone who isn't going to hand-code the interface.
Setup
15 min · Claude Code, Kimi, Gemini CLI or Codex · node, the AI coding tool you'll hand the finished prompt to
Screens that disagree One set of tokens Screens that match TOKENS colour space Aa type radius

Get it running

Paste this into the AI that runs on your computer. It does the install, checks it works, and tells you what to type first. If anything fails, paste the error back to it.

Paste into Claude Code
Install m3e-canvas (https://github.com/lnkiai/m3e-canvas) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Claude Code, running on my machine.

1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password.
2. Clone https://github.com/lnkiai/m3e-canvas into ~/tools/m3e-canvas and follow the README's install exactly.
3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says.
   Tool-specific notes: Install with npm install, then run npm run dev to get it live at http://localhost:3000.
If it'll be deployed under a sub-path (like a GitHub Pages project site) rather than its own domain, set NEXT_PUBLIC_BASE_PATH=/your-repo-name at build time before running npm run build.
It needs no backend and no required API key — everything saves to the browser's local storage.
If I turn on its optional in-canvas AI features, it will ask for my own API key (OpenAI, Claude, Gemini or DeepSeek) — ask me for it rather than guessing or reusing one.
4. Run the smallest test the README gives, and show me the output.
5. When it works, tell me what to type first, in one line, for this job: Sketch your first screen.
If anything fails, show me the exact error and fix it before going on.

What to point it at first

1

Sketch your first screen

Draw the single most important screen in your product, a dashboard or a signup form, using the built-in components, and check it actually looks like a real app rather than a rough wireframe.

2

Link two screens together

Connect that screen to whatever it leads to next and click through the flow yourself, the way a user would, to make sure the sequence makes sense before your AI ever sees it.

3

Copy the prompt into your AI

Copy the generated prompt into your coding AI and check what it builds against the sketch — a good result matches the layout and flow you drew, not just the words you used to describe it.

What it must never do unattended

  • Never let it change the design file without showing you the diff.
  • If you turn on its own optional AI features, the API key you give it stays in your browser and goes straight to the provider — don't hand it a key you can't afford to have sitting in a browser tab.

Who made it

lnkiai/m3e-canvas on GitHub, under the MIT licence. 5,285 stars, checked 9 September 2026. Last change 8 September 2026. We did not write it; we checked it, and wrote this page so you can use it.

Also in Design

Screens that disagree One set of tokens Screens that match TOKENS colour space Aa type radius
Tool · Design · ui

A product that looks designed, not generated

shadcn/ui gives your AI a real component library to build your product's interface from, instead of inventing buttons and forms from scratch every time.

20 min · your AI on your computer · node, an existing project on a supported framework, such as Next.js, Vite, TanStack Start, React Router or Astro, the AI coding tool you'll connect it to, if you want to add components by asking rather than typing commandsOpen

What's in the library is how we work.

If you're launching or growing a brand across Asia and the West, a call is where we work out whether it's a fit.

Book a call Back to the library