M3E Canvas Skill：拖拽 Material 3 草图一键导出 vibe-coding 提示词

Skill超级捕获手 技术创作者 2026-09-12 17 阅读

上线 10 天狂揽 6.1k Star 的 M3E Canvas，本周登顶 GitHub Trending 第一。它精准戳中了 vibe-coding 最大痛点——「用语言描述 UI 总是差一口气」：把 Material 3 Expressive 全套组件搬进浏览器做画布，拖拽拼稿 → 一键导出结构化自然语言 Prompt → 直接喂给 Claude Code、Codex、Cursor、Gemini CLI 生成可运行的应用，纯前端、MIT 协议、零部署成本。

功能与原则

M3E Canvas 把整个 Material 3 Expressive 设计语言做成了浏览器里的可视化草图工具：所有部件（按钮、图标按钮、FAB、标签、应用栏、导航栏、卡片、列表、对话框、文本框、开关、复选框、单选、滑块、图片占位、徽标等）按官方规范绘制，拖到画布上就能拼出 412×892 手机或 1280×800 桌面两种尺寸的屏幕；多个屏幕之间用点击 / 滑动跳转连成真实可点流程，主题面板一次性覆盖 Material 3 Expressive 的四大维度——颜色（7 套预设或一个种子色自动派生整套 Material 3 配色方案）、形状（方角 / 圆角 / 全圆）、字体（Roboto / Roboto Flex / Roboto Serif / 系统字体）、动效（标准或弹性弹簧）。

它的核心原则是「画稿即 Prompt」：所有图层、组件叠放、横向连接、导航流向都被明确写进自然语言描述，支持中 / 英 / 日 / 韩四种语言，可整体导出，也可单屏导出；可选的 AI 辅助（自带 OpenAI、Claude、Gemini、DeepSeek 任一 API Key）让模型帮每个组件补一句「行为说明」，Key 只留在浏览器本地，请求直连服务商。整个项目无后端、设计存 localStorage，静态部署在 GitHub Pages，零运维成本。

认可度

  • GitHub Stars：约 6,163（截至 2026-09-12）
  • Forks：约 620
  • Trending 经历：2026-09-05 登顶 GitHub Trending 第一；2026-09-07 单周 GitHub 开源热榜第 1（4,274 stars，365 forks）
  • 社媒讨论量：Twitter 原帖（@lnkiai, status 2095698155254005841）24h 内被 @mhdfaran、@benaratame 等多个 AI 领域 KOL 转发；agihunt.info 收录为「Hot 1」；国内今日头条、CSDN、无双技术网、wink.run 等多平台专题报道；GitHub Star 情报工作台连续 10 天跟踪记录 130 次
  • 许可证：MIT
  • 生态接入：官方演示验证兼容 Claude Code、OpenAI Codex、Gemini CLI、Cursor 等所有「吃 prompt」的 AI 编程工具

链接

GitHub：https://github.com/lnkiai/m3e-canvas

在线 Demo：https://lnkiai.github.io/m3e-canvas/

原作者

inori（GitHub: @lnkiai，Twitter: @lnkiai），日本独立开发者，公开仓库 4 个、GitHub 164 followers。个人站 lnkiai.com。M3E Canvas 是其近两年最具代表性的开源作品，把「vibe-coding 流程里缺一环的可视草图」补齐了。

介绍

M3E Canvas 本质是 vibe-coding 工作流里「设计 → 代码」之间那座一直缺失的桥。当你只想用 Claude Code / Codex / Cursor 「写个小 App」时，最痛的一步是把脑海里的 UI 描述成文字——你说「一个带底部导航和筛选列表的页面」，AI 大概率返回的版式跟你想的不一样。M3E Canvas 把这步变成「先在浏览器里画出来」：拖一组 Material 3 组件成屏，给可点击元素指定跳转目标和过场动画（上下左右滑入、淡入、放大等四种），整个交互流在画布上以箭头呈现，预览窗口里能真实点击、滑动、收回反向动画。

真正让它爆火的是 Prompt 出口。整张画布可以一键转成结构化自然语言描述——图层叠放、横向并排、导航路由、四轴主题设置都会被显式写出来，AI 编程工具拿到的不再是模糊自然语言，而是接近设计 Spec 的实现清单。官方 README 给的范例：从画一个食谱 App → 调好主题 → 复制 prompt → 粘贴给 Claude Code → 真机跑起来，整段流程不依赖 Figma、Sketch、任何付费设计工具。

特点

  • 纯前端零部署：Next.js 16 + React 19 + 静态导出，无后端、无数据库、无账号体系；本地 localStorage 保存，GitHub Pages 一键托管，2.7MB 构建产物即可上线。
  • Material 3 Expressive 全组件覆盖：连官方移植的「变形 Loading Indicator」都从 material-components-android 移植过来，不是廉价的占位动画。
  • 磁吸连接 / 一键整理：两个按钮拖近会自动「吸」成连接组，工具栏可一键贴边、FAB 归角、相邻项堆 16dp 间距，再点一下还原——设计软件里那些琐碎操作都被工程化。
  • 双尺寸画布：每屏都能在 412×892 手机和 1280×800 桌面之间切换，导航栏会自动变成 Rail；同名屏幕在 prompt 里被写作「同一屏幕的两种宽度」，AI 拿到的是已经对齐的响应式规格。
  • BYOK 的 AI 辅助：可选接入 OpenAI、Claude、Gemini、DeepSeek 任何一家，写行为说明；Key 只在浏览器，请求直连服务商，不绕经第三方中转。

使用方法

方式 A：在线直接用（零安装）

打开 lnkiai.github.io/m3e-canvas/，无需注册、无需登录、无需 API Key（除非要用 AI 补描述），拖组件就能开干。

方式 B：本地开发（Node ≥ 22.12）

git clone --depth 1 https://github.com/lnkiai/m3e-canvas.git
cd m3e-canvas
npm install
npm run dev      # http://localhost:3000

方式 C：静态构建

npm run build
npx serve out    # 构建产物 2.7MB，可直接部署到任意静态服务

最小使用流程

  1. 点「Add Screen」新增屏幕，拖入 App Bar、Bottom Navigation Bar、Card 列表项等组件；
  2. 给卡片项设置「点击跳转 → 详情页」+ 选择过场动画（slide-in-right）；
  3. 在 Theme 面板选预设色 + 弹性弹簧动效；
  4. 点「Copy Prompt」把整张设计导成一段结构化自然语言描述（中 / 英 / 日 / 韩任选）；
  5. 把这段 prompt 粘贴给 Claude Code 或 Codex，再补一句「请用 Jetpack Compose 帮我实现并跑起来」。

使用场景与人群

  • 独立开发者 / 全栈：用 Claude Code 写 App 时把 UI 这步从「赌运气」变成「所见即所得」，省下三到五轮反复改稿的时间。
  • 产品经理 / UI 设计师：5 分钟内出一份带跳转的高保真原型，连 prompt 一起交付给开发，需求沟通损耗直接砍半。
  • MVP / 工作室批量交付：用 prompt 流水线一次产多个版本，组件库共享在 localStorage 里。
  • 非编程背景的创业者：不会写代码也能把 App 想法变成可点击的交互稿，导出 prompt 后丢给 AI 编程工具直接出原型。
  • 教学 / 学习场景：把设计语言拆成可观察的画布操作，比纯文档更适合教学。

不适用：高度自定义的非 Material 3 设计语言（如 iOS HIG、Ant Design、Webflow 风），M3E Canvas 只产出 M3 Expressive 规范的 prompt。

输入与输出案例

案例 1：食谱 App（README 官方演示）

  • 输入（画布操作）：3 屏——首页（Top App Bar + 卡片网格，每张卡片含图、标题、时长、难度徽章）、详情页（Hero 图 + 大标题 + 步骤列表）、收藏列表（底部 Navigation Bar 切换）。主题：预设 Green 配色 + 弹性弹簧动效 + 圆角 16dp。跳转：首页卡片点击 → 详情页（slide-in-right），底部 Navigation Bar 收藏图标 → 收藏列表（fade）。

  • 输出（生成的 prompt 节选）：

    Build an Android app with Jetpack Compose that follows Material 3 Expressive. The home screen has a top app bar titled “Recipes”, a 2-column grid of recipe cards. Each card shows a 16:9 image, title, cook time chip (“25 min”), difficulty badge. Tapping any card slides in a detail screen from the right with the hero image at top, large display title, ingredient section, and step-by-step list. Bottom navigation has three destinations: Home (current), Favorites (filled heart icon), Profile (avatar). Color: green M3 seed with dynamic color support, dark mode. Shape: rounded 16dp corners. Motion: expressive spring.

  • 下游：把这段 prompt 丢给 Claude Code 或 Codex，配上 Android SDK + Compose 模板，可在 10–15 分钟内跑出一个可装机的 APK。

案例 2：时间管理 App（社区复刻）

  • 输入：4 屏——日程日历（月份网格 + 选中态高亮）、当日事项列表（卡片堆叠 + FAB 新建）、专注计时器（圆形进度 + 启停按钮）、统计（柱状图 + 周/月切换）。连接：日历选中日期 → 当日列表、FAB → 计时器、计时器启停后自动归档到统计。主题：Dynamic Color 跟随壁纸、深色模式高对比。
  • 输出：M3E Canvas 导出的 prompt 把 4 屏的图层关系、底部导航过场、柱状图双轴全部写明，并显式标注「Calendar grid uses M3 expressive date picker cell shape, selected cell uses tonal elevation level 2」这种 Material 3 Expressive 专属语法。
  • 下游：配合 Gemini CLI 选 Android 目标栈，直接生成 Compose 代码并接入 Room 数据库。

GitHub: https://github.com/lnkiai/m3e-canvas

评论区

0 条评论

登录后可评论。

Skill超级捕获手 17 阅读