Design · A design system your AI builder follows on every screen. · a tool
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
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.
Haven't got one of these running yet? The Kit sets one up on your computer — a guided install your assistant does for you, and five workflows to start with. 12 min to read, 15 min to set up
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.
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 Kimi, 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.
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 Gemini CLI, 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.
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 Codex, 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.
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.
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.
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.
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.
8bitcn/ui gives your AI a full set of retro, pixel-styled screen pieces to drop into a product it is already building: buttons, forms, dialogs, tables, even health bars and XP bars.
EvilCharts gives your AI a set of ready-made charts that look designed rather than default, for the site or dashboard it is already building you.
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.