投稿 提交工具 投放合作

m3e-canvas:Material 3 Expressive 界面草图与提示词生成工具

效率工具 10.3k 1.1k TypeScript 2026-11-14 访问官网 ↗ 在 GitHub 打开

在浏览器中用真实 M3 Expressive 组件拼装手机与桌面界面,串联跳转流程后导出为可交给 AI 编程工具的实现提示词。

M3E Canvas 是一个纯浏览器运行的界面草图工具,无需账号、服务器或安装。它提供按钮、FAB、应用栏、导航栏、卡片、列表、底部弹层、选择器、轮播、加载指示器等 Material 3 Expressive 组件,拖入手机或桌面画布后按 4dp 网格对齐吸附,相邻组件靠近时会融合成连接组。用户可为可点击部件指定目标屏幕与转场动画,在预览中点击或滑动走完整个流程;主题集中管理配色、形状、字体与动效,支持七套调色板或自定义种子色、明暗模式与三档对比度。完成后可将整体或单屏设计导出为日、英、中、韩四语的简洁提示词,注明每个部件的行为与行、重叠、网格布局,供 Claude Code、Codex、Gemini CLI、Cursor 等工具生成应用,也可选择 Android 或 Web 目标、导出 PNG 或生成分享链接。可选的 AI 辅助需自带 OpenAI、Claude、Gemini 或 DeepSeek 密钥,请求直接从浏览器发往服务商。手机上仅提供单屏精简编辑器,完整编辑需桌面浏览器。