M2 使用手册

M2 Canvas 是一块让你的团队和 AI Agent 一起设计的共享画布。本手册介绍怎么开始使用、编辑器、和 Agent 协作、设计系统、分享与导出。

开始使用

M2 目前处于内测阶段，需要邀请才能注册。

1. 在首页加入候补名单。申请通过后，我们会把邀请链接发到你的邮箱。
2. 打开链接，用 Google、GitHub 或邮箱加密码注册。请使用收到邀请的那个邮箱。邀请链接 7 天内有效，只能使用一次。
3. 如果用邮箱注册，输入我们发给你的验证码（或点击那封邮件里的链接）完成验证。

已经有账号？用 Google、GitHub 或邮箱密码登录。登录页的「Forgot password?」会发送重设密码的链接。

第一次登录后会进入你的工作空间，并弹出一段简短引导，提供两种开始方式：Start with an example（从示例开始）或 Blank project（空白项目）。两种都会打开一个项目，并显示接入 Agent 的引导。之后可以在用户菜单里点 Show onboarding 再次打开这段引导。

工作空间与项目

• 在工作空间侧栏点 New Project 新建项目。能建多少个项目取决于你的套餐，详见定价。
• 一个项目包含一个或多个页面。在编辑器左侧栏的 Pages 旁点 + 新建页面，双击页面可以改名，页面菜单里可以复制、调整顺序或删除。删除页面不可恢复。
• 删除项目会把它移到回收站，在那里可以恢复、彻底删除或清空回收站。项目在回收站里的保留时长取决于套餐。
• 如果工作空间的项目数超出套餐上限，超出的项目会变成只读，升级后恢复编辑。

编辑器

左侧栏。 Design 页签显示项目的设计系统、页面列表，以及图层列表 Nodes（编辑者还有 Assets）。Resources 页签存放你上传的文件和应用。按 Shift \ 可以收起侧栏。

顶栏。 左边是面板开关 Page、Inspector、Connect，以及工具：选择 V、抓手 H、Frame F、文字 T、形状工具（矩形 R、直线 L、箭头 Shift L、椭圆 O、多边形、星形）、钢笔 P、图片 I。中间是项目名，点击可以改名。右边是保存状态、在线成员和 Share。

画布。 用右下角的缩放控件缩放，或者用 ⌘ +、⌘ −、⌘ 0（100%）、⌘ 1（显示全部）、⌘ 2（缩放到选中内容）。按住 Space 可以拖动画布。左上角 M2 标志的菜单里有画布偏好设置，比如标尺、像素网格、吸附和背景。

Agent 面板。 M2 内置 Agent 在右侧。左侧栏展开时它固定在右边；收起左侧栏后它会变成浮动卡片，可以最小化成右下角的小胶囊。

用内置 Agent 做设计

在 Agent 面板里输入你想要的内容，比如「设计一个包含三个套餐的定价页」，按 Enter 发送（Shift Enter 换行）。Agent 会自动带上当前页面和你选中的内容，并使用项目的设计系统来做。

• 输入框旁的模型选择器可以切换模型。
• New chat 开始新对话，历史菜单可以回到之前的对话。
• 内置 Agent 会消耗积分。工作空间切换面板里能看到剩余积分和下次重置时间。积分不够时，对话开始前会提示你。各套餐的积分额度见定价。

接入你自己的 Agent

你也可以用自己常用的 Agent 来设计：Claude Code、Codex、Cursor、OpenCode、Qoder，或任何支持 MCP 的客户端。

• 最快的方式是把这句话粘贴给你的 Agent：「Read https://m2ui.ai/agent-setup.md and follow the instructions to connect to M2.」它会自己完成接入，并请你在浏览器里登录授权。
• 也可以点顶栏的 Connect，再点 Copy to agent，复制一段带着当前项目和页面的启动提示词，直接粘贴给 Agent。
• 各客户端的接入命令和 MCP 地址见通过 MCP 接入。

Connect 面板会列出这个项目上的所有 Agent：属于谁、在哪个页面、是否还在响应。Agent 和团队成员在同一块画布上实时编辑，每个人都有自己的光标。

设计系统

设计系统（DS）保存你的 token 和组件，Agent 会按它来做设计，让每个页面都符合品牌规范。

• 在工作空间的 Design Systems 页点 New design system 新建，可以从零开始，也可以基于已有的设计系统复制一份。新建的设计系统是 Draft（草稿）状态。
• 打开设计系统可以查看 Overview、Library、Assets 和 Versions。点 Start Editing 开始修改，改完点 Publish 发布新版本，可以附上版本说明。
• 组件由 Agent 来创建：在设计系统页面里对 Agent 说，比如「添加一个 Button 组件」。
• 在项目里，用左侧栏的 Bind Design System 选择新节点使用的设计系统，并选择项目跟随哪个版本。选中节点后，Inspector 的 Design System 区域会显示它使用的设计系统和版本。

分享与协作

• 顶栏的 Share 可以按邮箱邀请别人以查看者身份访问项目，并把通用访问设置为 Restricted（受限）或 Anyone with the link（任何拿到链接的人都可以查看）。Copy link 复制只读链接。
• 要添加编辑者，请到工作空间设置 → Members → Invite，选择 Admin、Editor 或 Viewer。编辑者和管理员占用席位，查看者免费。
• 只有工作空间所有者和管理员可以管理分享。
• 在项目里工作的每个人都会显示在顶栏的头像里，并在画布上有实时光标 —— 人和 Agent 都一样。

素材与应用

• 在 Resources 里用 Upload files… 或 Upload folder… 上传图片，并整理到文件夹里。支持 PNG、JPEG、GIF、WebP、SVG、BMP、TIFF，单个文件最大 10 MB。总存储空间取决于套餐。
• Agent 可以在画布上做可交互的应用。选中应用后点 Run（或按 Enter）就能直接在画布上使用。在 Resources → Apps 里点 Export code，可以把应用下载成 Vite 项目，用 npm install && npm run dev 运行。
• Design 一侧的 Assets 页签可以浏览设计系统里的图标和组件，拖到画布上使用。

导出

在画布上右键点击任意内容：

• Copy as → Copy as PNG（⌘ Shift C）、Copy ID 或 Copy Node JSON。
• Export… 可以导出 PNG、JPG 或 SVG，倍率从 0.5× 到 4×，也可以指定宽度或高度。

快捷键

Windows 上请把 ⌘ 换成 Ctrl。

补充说明

• 修改会自动保存，保存状态显示在头像旁边。
• 撤销只针对你自己在本次会话中的修改，刷新页面后不会保留。
• 项目暂时没有版本历史；设计系统会保留已发布版本的列表。
• 有问题？请写信到 hello@m2ui.ai。