墨刀入门教程：从想法到可交互原型+宠物寄养APP案例

本文旨在介绍工具的基本用法和基础功能，更多强大等你亲自解锁哦~

▲ 墨刀工作台 — 从0到1搭建可交互原型的起点

墨刀入门教程：从想法到可交互原型

本教程适合产品经理、UI/UX设计师、创业者和产品小白，预计 2-3小时 即可完成第一个完整原型。教程覆盖从注册到交付的全流程，包含一个完整的实战案例。

▲ 墨刀新建项目 — 选择设备类型和模板

一、注册并创建第一个项目

步骤1：注册账号

1. 打开墨刀官网
2. 点击右上角 “注册”，支持手机号或微信一键登录
3. 首次登录后进入工作台，这是你的项目管理中心

▲ 墨刀注册页面-众享AI

▲ 墨刀选择创作场景-众享AI

步骤2：新建项目

1. 点击左侧工具栏 “新建” 按钮，选择 “原型”
2. 选择设备类型：手机App、网页、iPad，或自定义尺寸
3. 可以选择 “空白项目” 从零开始，也可以选择 “精品模板” 快速上手

新手建议：第一次使用可以先选一个模板看看结构，理解页面组织方式后再自己动手。

▲ 墨刀新建项目-—-选择设备类型和模板-众享AI

▲ 墨刀编辑器 — 拖拽组件 + 连线交互，无需写代码

二、30分钟快速上手：搭建第一个页面

核心操作：拖拽组件

墨刀的编辑器采用 “拖拽式” 设计，完全不需要写代码。

操作方式：

1. 在画布右侧点击 “素材库” 图标，弹出内置组件面板
2. 组件分为三类：
   • 基础组件：按钮、输入框、图片框、文字、矩形、圆形等
   • 高级组件：导航栏、标签栏、弹窗、轮播图等
   • 页面模板：登录页、首页、个人中心等完整页面
3. 双击或拖拽 组件即可添加到画布
4. 选中组件后，右侧 “外观” 面板可修改颜色、边框、阴影、文字等属性

💡 新手误区提醒：先用墨刀自带的基础组件（按钮、输入框、图片框）快速搭框架，颜色选默认的黑灰白，等逻辑确定后再细化样式。不要在搭建阶段花大量时间调颜色和字体，逻辑通了之后这些可以批量修改。

核心操作：添加交互逻辑

静态页面变成可交互原型，是墨刀最核心的能力。

页面跳转（最常用）：

1. 点击要触发交互的组件（如“登录”按钮）
2. 组件旁会出现一个 灰色闪电图标
3. 将闪电图标 拖动到左侧页面列表 中的目标页面（如“登录成功页”）
4. 松开鼠标，一条蓝色连线建立，表示跳转关系已创建
5. 右侧“事件”面板可调整动效（如淡入淡出、滑动等）

状态切换（组件变化）：

墨刀的状态与Axure的动态面板类似，指同一组件在不同情况下的不同样式。例如：

1. 从组件库添加一个“图片上传”组件
2. 点击右侧“状态”图标，新建一个状态（如“图片放大”）
3. 用同样的闪电拖拽方式，将图片链接到“图片放大”状态
4. 动效选择 “神奇移动”，可以实现平滑的放大缩小效果

预览与分享

原型做好后，点击右上角 “预览” 图标进入预览模式，可以选择 真机模式、长页面模式、PRD模式 等不同展示方式。

点击 “分享” 按钮，一键生成访问链接发给团队成员，对方 无需安装任何工具，打开链接就能在线体验整个原型流程。

三、实战案例：做一个“宠物寄养APP”原型

下面用一个真实案例，完整走一遍从需求到原型的流程。

▲ 实战案例：宠物寄养APP原型 — 从需求到可交互页面

案例背景

假设你要做一个 长假宠物寄养和上门喂养 的APP，目标用户是假期需要出行的宠物主人。

第1步：拆解产品需求

💡 关键认知：很多新手用AI效果不好，往往是因为指令给得太宽泛。让AI生成有效原型的前提是，你自己先想清楚产品要做什么。

在动手之前，先在脑子里列出核心页面：

🎯 产品思路：像这种服务类APP，通常需要首页（聚合信息）、服务入口（找人/找店）、搜索与筛选（精准匹配）、动态或社区（增加用户粘性）。把这些核心点列出来，你的AI提示词就有了基础骨架。

第2步：用墨刀AI生成原型

打开墨刀AI，选择 “原型设计” 模式。

关键：输入具体的需求描述，而不是模糊的一句话。

❌ 错误示范：

“给我画个宠物APP”

✅ 正确示范：

“设计一个宠物寄养/上门喂养（长假托付服务）APP原型，包括：首页、服务入口、搜索与筛选、动态/社区这四个主要页面。”

💡 提示词技巧：你的指令描述得越具体、越贴近真实的业务场景，AI产出的框架就越准。如果有明确的目标人群特征或主色调偏好，也可以一并补充在提示词中。

▲ 实战案例：墨刀AI生成宠物寄养APP原型-众享AI

第3步：AI生成与微调

输入需求后，墨刀AI会执行一套完整的推演逻辑：

1. 全网检索“宠物APP设计UI/UX设计趋势”，了解当下流行的视觉规范
2. 抓取行业参考案例，分析竞品的搜索入口、服务详情和筛选功能布局
3. 推演方案：结合最新设计趋势，生成结构合理的高保真方案

🤖 AI工作机制：这种机制就像是给你配备了一个专业的交互设计师，帮你把前期竞品调研和逻辑梳理的活儿都干了。

经过短暂等待，墨刀AI会生成一套完整的原型图，包含首页整体布局、各个功能模块、商品卡片以及底部导航等内容。

▲ 实战案例：墨刀AI生成宠物寄养APP原型-1-众享AI

▲ 实战案例：墨刀AI生成宠物寄养APP原-2-众享AI

▲ 实战案例：墨刀AI生成宠物寄养APP原型-3-众享AI

第4步：优化与交付

AI生成只是第一步，接下来你可以：

1. 轻编辑：在原型图上直接修改组件样式、文案内容
2. AI对话：继续用自然语言优化页面布局（如“把首页Banner改为三张轮播图”）
3. 深度编辑：将原型导入墨刀，手动完善页面布局和交互动效

⏱️ 效率提升：以前搞一套这样的原型，找参考、画线框、调对齐，起码得熬两三个大夜。现在有了墨刀AI，只要你会精准地提需求，几分钟就能拿到一个高质量的底稿。

▲ 实战案例：墨刀AI生成宠物寄养APP原型-4-众享AI

▲ 墨刀AI生成应用 — 一键导出React/Vue可运行代码

四、AI进阶：一句话生成可交互原型 + 代码

4.1 一句话生成完整原型

墨刀AI最强大的功能是 “一句话生成原型”。

操作流程：

1. 登录墨刀后，点击首页 “AI一键生成原型” 进入墨刀AI
2. 在对话框中输入产品构想
3. AI会自动生成一份 功能说明文档，包含设计主题、页面布局结构、颜色方案等
4. 确认功能文档无误后，点击 “生成原型”，一键生成完整原型页面

🚀 核心价值：无需手动画框架，AI智能识别页面布局、模块结构和常用交互，帮助设计师快速从想法落地到可视化页面。

4.2 如何写好Prompt（需求描述）

AI生成原型的关键在于需求描述要清晰。

写作公式：说清结构 + 说明内容 + 明确形式。

电商APP首页范例：

“生成一个电商APP首页原型，包含顶部搜索栏、Banner轮播区域、商品分类导航、限时秒杀模块和推荐商品列表。商品卡片需包含图片、名称、价格和购买按钮。底部设置导航栏：首页、分类、购物车、个人中心。整体为移动端布局，并支持页面点击跳转。”

社交APP原型范例：

“生成一个社交APP原型，包含3个页面：第一个首页，支持图文、视频内容展示，卡片式排版，包含点赞、评论、分享功能入口；第二个消息页，包含私信和群聊列表，支持搜索联系人，消息气泡样式；第三个个人中心页，展示头像、昵称、个性签名，入口包括设置、隐私、安全中心。”

4.3 智能调整：两种修改模式

墨刀AI提供两种修改方式：

• AI对话式修改：在选择模式下，点击要修改的元素，在弹出的对话框中输入修改要求（如“换成圆角按钮”“调整为三列布局”），AI迅速响应并应用更改
• 手动深度编辑：将AI生成的原型导出为墨刀文件，像操作普通原型一样拖拽组件、修改页面内容、替换图片

💡 最佳实践：AI对话式修改适合快速迭代，手动深度编辑适合精细化打磨。两者结合使用，效率最高。

4.4 一键导出代码

墨刀AI生成的原型不仅可视化呈现，还 自带可直接使用的代码。墨刀AI生成应用可直接导出 React代码 和 Vue代码。

🔧 开发效率：开发团队可以直接对接原型，实现前端快速开发，无需额外手动转化，显著缩短设计到开发的周期。

五、交互进阶：让原型“活”起来

5.1 组件状态与动态交互

墨刀的动态组件可以实现弹窗、底部导航、下拉菜单等动态效果。

实战：实现“收藏计数与角标联动”

这是一个电商或内容类APP常见的交互场景：点击图片右上角的心形图标，自动收藏到书架，同时底部导航栏“书架”处的角标数字自动更新。

实现思路：

1. 在页面中添加一个“心形”图标组件
2. 为该组件添加 “点击” 交互事件
3. 在事件中设置变量（如 favoriteCount += 1）
4. 将底部导航栏“书架”标签的角标数字绑定到该变量
5. 预览时点击心形，角标数字自动+1

5.2 变量与条件判断

墨刀支持变量管理、条件判断、联动逻辑等高级交互配置，可模拟真实业务流程。

实战：登录页的输入框校验

在APP登录页面，常见交互是：当输入手机号长度为11位数，显示“对勾”提示，非11位数不显示。

实现思路：

1. 添加一个“输入框”组件，设置变量 phone 绑定输入内容
2. 添加一个“对勾”图标，默认隐藏
3. 为输入框添加“输入时”事件，判断 phone.length == 11
4. 条件成立时显示对勾，否则隐藏

5.3 浮层与弹窗

墨刀内置了浮层组件，可以轻松实现弹窗遮罩和交互效果。

操作步骤：

1. 在基础组件中找到 “浮层组件”（也称弹窗组件）
2. 拖拽到画布中，调整位置和大小
3. 为触发按钮添加 “点击→显示浮层” 的交互事件

六、协作与交付

6.1 团队协作

墨刀支持 多人实时编辑、评论、标注和版本管理。团队成员可在同一平台完成从需求讨论到原型制作的全部流程，不同角色拥有不同操作权限。

6.2 导出与交付

6.3 设计稿转代码（D2C）

墨刀设计的D2C功能支持 一键将设计稿转成标准代码，直接交给前端使用，减少重复还原设计的工作量。

七、版本与定价

墨刀采用“免费 + 付费套餐”模式。

免费权益补充：个人用户注册后可获得 2000点数 用于墨刀AI，其中AI助手约100点/千字，生成原型页面约400点/页。付费会员到期后会自动降为免费空间，文件数据仍会保留。

八、常见问题

墨刀和Figma怎么选？

• 选Figma：你更看重UI视觉设计、界面微动效、国际化协作
• 选墨刀：你是产品经理，需要快速产出可交互原型、AI辅助生成、中文环境、本地化资源

墨刀和Axure怎么选？

• 选Axure：你需要极其复杂的逻辑判断、变量运算、条件分支
• 选墨刀：你追求快速出方案、团队高效协作、AI辅助

免费版够用吗？

够用。免费版支持3个项目，适合个人学习、小型项目验证和小规模试用。如果需要更多项目、团队协作或无限页面，可以考虑付费版。

AI生成的页面能手动修改吗？

可以。AI生成的原型支持自由编辑，组件、布局、文案都可以按需求调整。也可以导出为墨刀文件后进行深度手动编辑。

总结

墨刀的核心价值在于 降低原型设计门槛、提升从想法到原型的效率。无论你是产品经理、设计师还是创业者，掌握墨刀都能让你的产品想法更快落地。

💡 核心认知：做原型不一定要会画界面，也不需要熬夜画美工稿。关键是快速把想法呈现出来，让团队、投资人或者用户一眼就看懂你的产品思路。

学习路径建议：

1. 第1天：完成注册，跟着本文“快速上手”做一个简单登录页
2. 第2-3天：用墨刀AI生成一个完整APP原型（参考“宠物寄养APP”案例）
3. 第1周：练习交互设计（页面跳转、状态切换、变量控制）
4. 持续：尝试导出代码，体验从设计到开发的全流程

👉 立即开始：访问 墨刀官网 免费注册体验