你是否曾为一个 Material 3 Expressive 风格的 App 界面反复调整 Figma 布局，却在交给 AI 编程工具（如 Cursor、Claude Code 或 Gemini CLI）时卡在「怎么准确描述这个圆角渐变按钮+悬浮动效+磁吸式列表组合？」——M3E Canvas 就是为此而生：它不是另一个设计工具，而是一个专为 Material 3 Expressive 规范深度优化的交互式画布，让你在浏览器里拖拽搭建高保真界面原型，实时预览导航流，最后「一键复制」自然语言提示词——精准包含布局关系、动效逻辑、主题变量与行为意图，直供 AI 编程工具生成可运行代码。
核心功能
- 磁吸式组件连接，自动构建语义化 UI 组合：把两个按钮或列表项拖近，它们会自动“融合”成带软化过渡角的连贯组——这不仅是视觉优化，更被精准翻译进提示词：“两个水平排列的 Filled Tonal Button，共享顶部圆角，间距 8dp”，让 AI 理解组件间的逻辑关系而非孤立元素。
- 双端自适应屏幕管理，一套设计输出两套布局提示：同一名称的屏幕可同时设为手机（412×892）和桌面（1280×800）尺寸；切换时导航栏自动转为侧边栏（Rail），App Bar 拉伸适配，所有组件重排——提示词中会明确写出：“该屏幕需支持响应式：手机端使用底部导航栏，桌面端使用左侧导航 Rail，并保持卡片网格列数一致”。
- 所见即所得的导航流建模与提示生成：给任意图标、按钮或导航项设置目标屏幕和过渡效果（滑入/淡入/展开），画布上即时显示箭头流向；预览模式下真实点击/滑动手势操作，而生成的提示词会完整包含：“用户点击搜索栏触发 Slide-in-from-top 过渡至结果页，返回时播放反向动画”。
- Material 3 Expressive 四维主题实时调控：在统一面板中同步调节颜色（7 套预设或单色种子生成完整 M3 调色板）、形状（全局切角：方形/圆角/全圆）、字体（Roboto Flex 动态字重支持）、动效（标准曲线 or Expressive 弹簧物理动效）——所有调整实时反映在画布与提示词中，例如：“使用 Expressive Motion scheme，所有按钮点击反馈含 0.4s 弹性回弹”。
- AI 辅助行为注释，本地化私有化处理：选中按钮后点击「让 AI 写说明」，输入你的 OpenAI/Claude/Gemini API Key（仅存于浏览器 localStorage，请求直连厂商 API，无中间服务器），模型会用中文生成该组件的行为描述：“这是一个切换夜间模式的 Toggle Button，点击后图标从 sun 变为 moon，同时触发动态色彩主题切换”——每条均可撤销重写，隐私零泄露。
- 智能对齐与层级控制，确保提示词描述精确：“Tidy”一键自动吸附状态栏/导航栏到边缘、FAB 至右下角、列表项垂直堆叠、其余组件按 16dp 网格对齐；图层面板支持拖拽排序与多选分组——这些空间关系全部转化为提示词中的精确描述：“文本标题居中，下方 24dp 处为带图标的 Primary Chip 按钮组，三者水平居中且左对齐”。
- 原生级加载动效与交互动态反馈：内置从 material-components-android 移植的 M3 Expressive 形状变形 Loading Indicator，以及波浪形线性/环形进度条——不仅视觉还原度高，提示词中也会强调：“采用 Material 3 官方定义的 Morphing Shape Loader，启动时从圆形平滑过渡为环形”。
- 多语言提示词输出，含开发者备注字段：支持中/英/日三语输出，且允许你在每个组件旁手写中文备注（如：“此处需接入 Firebase Auth 登录流程”），这些备注将直接嵌入最终提示词，成为 AI 编程时的关键上下文。
技术亮点
- 纯前端 TypeScript 架构，零服务依赖：基于 Next.js App Router 构建，但所有状态（设计稿、主题配置、API Key）均通过 localStorage 本地持久化，不依赖任何后端服务；部署即静态站点（GitHub Pages），开箱即用，无隐私泄露风险。
- Material 3 Expressive 规范的像素级实现：所有组件（包括 FAB Menu、Split Button、Dynamic Color 切换开关、Expressive Slider 轨道）严格遵循 material.io/m3 最新规范，动效参数（如弹簧阻尼比、质量系数）直接映射官方 Android 实现，确保提示词生成的代码能真实还原 M3 表达力。
- 声明式提示词引擎，非简单模板拼接：提示词生成模块采用语义解析策略——先识别组件拓扑关系（父子、并列、覆盖）、再注入主题变量（如 “color.primary = #6750A4”）、最后叠加行为注释；避免了同类工具常见的“堆砌形容词”问题，输出的是 AI 可执行的结构化指令。
- 跨平台响应式元数据建模：屏幕尺寸切换并非简单缩放，而是重建布局约束系统——手机端 Navigation Bar 的 destination item 自动转为图标+文字，桌面端 Rail 则只保留图标；这种差异被编码为条件化提示：“当 viewport width ≥ 1280px 时，导航组件应渲染为左侧垂直 Rail，图标尺寸 24dp，文字隐藏”。
适合哪些人用
这款工具专为需要快速验证 Material 3 Expressive 设计可行性，并高效对接 AI 编程工作流的产品经理、UI 设计师与全栈开发者打造。
场景一（设计师）：为新上线的「健康食谱 App」设计深色模式下的动态色彩食谱卡片。你用 M3E Canvas 拖出带图片的 Card、添加 Expressive Slider 控制热量筛选、设置 Toggle Button 切换素食标签——点击「复制提示词」，粘贴到 Cursor 中，选择 Android 目标，30 秒生成 Jetpack Compose 可运行代码，直接在模拟器中验证交互动效。
场景二（前端工程师）：接到需求“为管理后台增加响应式仪表盘，桌面端用左侧菜单，手机端改底部导航”。你新建同名 Screens，分别设为桌面/手机尺寸，拖入 Charts + Stats Cards + Navigation Rail/Bar——导出提示词时自动包含响应式逻辑，交给 Claude Code 生成 React + Material UI v5 代码，无需手动写媒体查询。
快速上手
无需安装！访问在线地址：https://lnkiai.github.io/m3e-canvas/ 即可使用。
关键操作速查：
- 添加组件：左侧零件栏拖拽至画布（支持搜索，如输入“fab”快速定位）
- 设置导航：选中按钮 → 右侧面板 → 「Target Screen」选择目标 → 「Transition」选滑入方向
- 调主题：右上角「Theme」面板 → 拖动「Shape」滑块 → 实时看所有按钮圆角变化
- 导提示词：顶部菜单「Prompt」→ 选「Chinese」→ 「Copy Prompt」→ 粘贴到 Cursor/Claude/Gemini 中
- 启用 AI 注释：首次点击「AI Note」会提示输入 API Key（建议用免费额度小号），Key 仅存本地，关闭浏览器即清除
同类对比 / 注意事项
不同于 Figma 插件（如 Anima 或 Galileo）侧重代码生成，M3E Canvas 的核心价值在于设计语义的深度编码：Figma 插件常输出 CSS/JSX 片段，但难以表达“点击 A 按钮触发 B 屏幕的弹性滑入动画并保持状态”这类复合逻辑；而 M3E Canvas 将导航流、动效参数、主题变量全部融入自然语言提示，与 AI 编程工具的工作方式天然契合。
注意事项：
- 目前不支持导出代码文件，仅提供提示词（这是设计哲学选择：确保 AI 生成代码符合最新框架实践）
- 组件库聚焦 Material 3 Expressive，暂未覆盖 Material 2 或 Cupertino 风格
- “Tidy”自动对齐功能在复杂嵌套组中可能需微调，建议先分组再对齐
项目信息
lnkiai/m3e-canvas
GitHub
Sketch Material 3 Expressive screens in the browser and turn them into vibe-coding prompts.
1.7k
Stars
113
Forks
TypeScript
MIT
TypeScript · 1655 Star · MIT 开源协议 · GitHub 项目地址
如果你厌倦了在设计稿和提示词之间反复翻译，又不愿牺牲 Material 3 Expressive 的精致动效与动态色彩，M3E Canvas 就是你缺失的那一块「设计-开发」无缝拼图。
