摹客

先说结论

摹客是国内原型工具三剑客里最被低估的一个。墨刀被产品经理们捧得很高，Axure 是上古神器但学习曲线巨陡——摹客刚好卡在两者中间：比 Axure 好上手得多、比墨刀更适合做带大量列表和表单的 Web 后台原型。最大的特点是它是一款真正的 Web 端工具——浏览器打开就能用，不用装任何软件，画完点一下「发布」，设计稿自动变成开发能用的标注页——间距、色值、CSS 代码、切图全自动生成。如果你是一个每天要跟前端对接的 PM 或设计师，这个东西能砍掉你一半的沟通时间。免费版功能大部分都开，个人用完全够了，团队版也不贵。下面把从打开浏览器到交付给开发的全流程拆开。

摹客跟墨刀、Axure 到底怎么选

三个工具定位重叠但其实各自有最适合的场景：

• 摹客（这款）：做Web后台、企业管理系统、表单多、列表多的项目最顺手。协作交付能力三家里最强——画完发布的标注页、代码片段、切图一键打包
• 墨刀：做移动端App 的原型——手势交互、多页面跳转、可点击的高保真Demo比摹客好。但做后台管理系统不如摹客
• Axure：做超复杂的交互逻辑——条件判断、多重分支、变量绑定。银行后台的几十个状态流转图这种东西。但学习曲线是三家里最陡的，上手慢

简单说：做一个App 给人演示 Demo——用墨刀。做一个企业内部管理系统、跟开发对接交付——用摹客。做一个需要精细到每一个异常状态的原型——用Axure。三者不冲突，很多团队是混着用的。

🔧 场景一：从零搭一个Web后台原型——全流程拆解

第一步：新建项目

打开 mockplus.cn，注册登录（手机号就行）。进主页后点「新建」→ 选「原型稿项目」。这时候会让你选设备类型——手机、平板、Web、智能手表、车载屏幕都有。做后台管理系统选「Web」，自定义宽度（推荐1440px，覆盖大部分显示器）。项目建好之后是一个无限大的白色画布——没有边界，可以放任意多的页面。

第二步：画页面结构

左侧是组件面板，直接拖进画布。常用的几类组件：

• 布局类：矩形画布（做页面容器）、面板（做侧边栏、顶部导航的分区）
• 内容类：文本、图片、按钮、输入框、下拉选择器、表格
• 导航类：面包屑、分页器、标签页切换

做后台系统最常用的起步布局：先拖一个1440×900的矩形做页面容器→在顶部放一个60px高的导航栏（Logo+搜索框+用户头像）→在左边放一个240px宽的侧边栏菜单→剩下的区域是主内容区。这套布局是所有后台系统的通用骨架，搭好之后之后所有页面都在这个骨架上改。

做列表页有一个偷懒技巧——拖一个表格组件进来，用「数据填充」功能一键生成几十条假数据。不用自己一条一条敲，表格直接就有了看起来真实的数据——对演示和客户确认来说这个细节很重要。

第三步：加交互——让原型可以点

选中你要加交互的组件（比如侧边栏的「用户管理」菜单项），右侧会出来交互面板。可以设置的交互类型：

• 页面跳转：点击菜单项→跳转到对应的管理页面。这是最常用的
• 切换可见性：点击一个按钮→弹出一个对话框。对话框平时是隐藏的，点了才出现
• 滚动到区域：点击一个锚点链接→页面自动滚到下面某个区域

设置完交互后点右上角「预览」——效果跟在浏览器里操作真实网页一模一样。菜单点一下真的跳到另一个页面，弹窗点关闭真的消失。这个对需求评审会的时候特别管用——打开预览模式投影出来，全场人都能直观理解每个按钮点了之后干什么。

第四步：画流程图——全貌画板是隐藏的杀手功能

画完所有页面后，点「全貌画板」模式——这是摹客最有特色但最少人知道的功能。你会看到一个总览视图，所有页面像卡片一样排列在画布上。你可以用逻辑线把页面连接起来——首页→用户列表→用户详情→编辑用户——形成完整的流程图。每条线上可以标注触发条件（「点击编辑按钮」「提交表单成功」）。还能给每个页面标记状态——「设计中」「待评审」「已定稿」。这个功能在跟开发和测试的交接中很重要——他们不用翻几十个页面去猜逻辑，看全貌画板一目了然。

🔧 场景二：发布到协作平台——自动出标注和代码

原型画完之后最烦人的环节来了——交付给前端。传统做法是设计师手动把每个元素的间距、颜色、字型标注出来，切图一个个导出。摹客这一步几乎全自动：

点击右上角「发布」→ 选择发布到协作平台（CC）→ 可以全部发布或只选部分页面发布。发布后你会得到一个协作链接，把这个链接发给前端开发。

前端打开链接后看到的是四个模式：

• 开发模式：这是给前端用的——鼠标放在任意元素上，自动弹出它的坐标、宽高、字体、字号、颜色值。右侧面板直接给你复制 CSS / Android XML / iOS Swift 代码。切图也是一键下载——不需要设计师手动切
• 评论模式：像批注一样在任意位置钉图钉→写意见→@某个同事→对方收到通知点进来直接跳转到有问题的位置回复。评论可以跟踪「待处理/已解决」状态
• 定稿模式：手动标注——补充一些自动标注没覆盖到的细节，比如「这个间距是相对于父容器的而不是相对于页面的」
• 全貌画板模式：看页面流程图的全局视角

这个流程省掉了设计师手动出标注的时间。以前一个中型项目，设计师从画完到标注完毕大概要半天。现在发布完前端直接自己去看标注和代码——还省掉了群里反复问「这个按钮的蓝色是哪个色号」「这个列表项的高度是多少」这种来回沟通。

🔧 场景三：团队协作——多角色权限管理

企业版支持把团队分成不同部门，每个部门里的角色可以分四级：

• 管理员：创建删改项目、管理成员
• 成员：在项目里画原型、编辑内容
• 协同人：只能评论和标注，不能改设计
• 访客：只读——适合给甲方或客户看但不想他们乱动

这个权限体系对代理商团队特别实用——设计师和开发给「成员」、项目经理给「协同人」、甲方客户给「访客」权限，大家看同一个链接但各有各的操作权限。

摹客还能接Axure和Sketch——不是让你换工具

如果你的团队之前用Axure画的旧项目——可以用摹客的「Axure原型上传」功能把文件传上去，摹客会自动给你生成标注页、CSS代码和切图。设计师用Sketch/PS/XD/Figma画的图也可以通过插件上传到摹客协作平台统一管理。它不想让你换工具——你爱用什么画就用什么画，编辑完之后上传到摹客做协作交付。这个「保留你原有工具只帮你改进交付环节」的定位很务实。

价格

• 个人免费版：基础原型功能全开，核心协作功能可用。日常够
• 团队版：按人数付费（具体以官网为准）——解锁更多存储、高级权限、私有化部署选项

* 信息更新于 2026-07

常见问题

Q: 不会Axure能直接用摹客吗？

A: 完全能。摹客的操作逻辑跟PPT比较像——拖拽组件、双击编辑文字、属性面板调样式。不需要学代码、不需要会Axure。

Q: 浏览器端卡不卡？

A: 页面不太多（50页以内）的时候很流畅。超过100页的大项目建议把不同的模块拆成多个项目文件，不要全塞在一个文件里。

Q: 摹客/墨刀/Axure三者能不能配合用？

A: 能，而且很多团队就是这么做的。墨刀做移动端App原型、Axure做复杂逻辑页面、摹客做后台管理系统——三个文件分别管不同模块，通过摹客协作平台汇总交付。

基本信息