墨刀双十一 会员低至3.7折 限时加赠 15000 AI积分 立即前往 arrow

墨刀 AI · 原型设计

AI生成原型图把想法变成
可修改的页面

描述产品需求,生成多页面原型。用对话或局部选中继续修改,再进入墨刀原型完善页面、交互与团队评审。

中文描述 · 可继续编辑

从一个场景开始
旅行预约App与网页原型的多端页面效果
一段需求,多种产品可能生成 · 预览 · 继续编辑

从需求到页面

把页面说清楚,
让想法有形可见

后台、App、小程序,先写下用户要完成的任务。墨刀AI据此生成页面,你可以打开预览,再接着调整。

同一CRM项目的客户列表、客户详情和新增客户页面,保持一致的数据与组件风格
CRM 示例 · 客户管理的三个页面客户列表 · 客户详情 · 新增客户
试试这份需求

给销售团队做一个CRM

把核心页面和页面之间的动作一起告诉AI,让产品讨论落到具体位置。

  1. 01
    客户列表

    查看客户,按负责人和跟进状态筛选。

  2. 02
    客户详情

    了解联系信息,查看和补充跟进记录。

  3. 03
    新增客户

    填写资料,检查必填项,提交后返回列表。

需要新页面?在当前对话中补充页面用途、内容和跳转要求,继续完善这组原型。

需求还不清楚?先整理页面与核心任务

让初稿更接近你的想法

想改哪里,
就从哪里继续

布局有了,细节还需要调整。你可以继续对话,也可以在编辑中选中局部,说明要修改的内容。

01

用对话补充要求

调整页面结构、增加字段,或补上一个新页面,把想法接着说下去。

02

选中局部,再做修改

聚焦日期、时段或按钮,描述这部分希望怎样变化。

可以这样提出修改“把预约时段分成上午和下午,已约满的时段置灰,保留其他内容。”
了解如何分轮完善原型
预约App时段的局部修改效果,展示上午和下午分组以及约满置灰
预约示例 · 按上午和下午分组,并区分已约满时段。

围绕一个预约任务,连续提出修改

不换项目,接着把预约流程做完整

沿用上面的预约时段案例:先生成完整路径,再修改时段分组,最后补上提交失败后的恢复。每一轮只改变明确范围,回到预览检查前一轮的操作是否仍然成立。

01 / 起稿

先串起五个页面

服务列表 → 详情 → 日期时段 → 确认 → 结果。示例选中14:00,确认页应展示相同服务、日期和时段。

02 / 局部修改

只改时段区域

上午、下午分组;11:00标为“已约满”并置灰。保留已选服务和日期,不重做整页。

03 / 恢复路径

补一次提交冲突

提交时约满,留在当前预约任务,提示重新选时段;不回首页,不清空全部选择。

04 / 预览检查

沿同一路径再走一遍

查看满额项、返回修改、提交失败和成功页。发现问题时指出页面、触发操作和期望结果。

下载练习材料

提供的是可修改需求与检查材料。生成结果以你的任务为准;真实容量、并发预约和通知需由研发实现。登录后开始生成,额度与权益以账号提示为准。

展开三轮需求及六项预览检查
【初次需求】
为预约服务设计一个手机端原型,面向预约体验课程的用户。包含服务列表、服务详情、选择日期与时段、确认预约和预约结果页。
示例服务:陶艺体验课,时长90分钟;示例日期:11月6日。可预约时段为09:30、14:00,11:00已约满。所有信息只用于页面演示。
用户从服务列表进入详情,选择日期时段后看到确认页。确认页显示服务、日期、时段;返回修改时保留服务。约满时段不可提交。成功页显示已选信息,并提供返回服务列表入口。

【第二轮:局部修改】
只修改选择时段区域:把09:30、11:00归入上午,把14:00归入下午。11:00显示“已约满”并置灰;选中时段有明确视觉状态。保留页面其他内容、已选服务与日期。

【第三轮:补失败恢复】
补一个提交期间时段被约满的状态:保留当前服务和日期,提示“这个时段刚刚约满,请重新选择”,回到可选时段;不回首页,不清空全部选择。

【逐项预览】
1. 服务列表进入详情,再进入日期时段选择。
2. 11:00已约满,不可进入确认预约。
3. 选择14:00后确认页显示同一服务、日期和时段。
4. 返回修改日期时,原服务仍保留。
5. 提交冲突后,能重新选择剩余时段。
6. 成功页展示已选信息,并可返回列表。

真实容量、并发预约和通知需要后端实现;本材料用于原型设计与交互讨论。

从AI产物到原型编辑

保留HTML交互,
也能转为原生元素

在AI产物预览中点击“编辑”,可以继续做HTML可视化编辑。导入墨刀原型后,再按你的工作需要选择编辑形态。

01 · AI组件

继续编辑HTML,
保留动态表现

HTML导入后默认作为AI组件放在原型中。它是HTML容器,可呈现代码中的动态交互,并支持继续进行HTML可视化编辑。

了解在线HTML编辑器
电商HTML页面作为墨刀原型中的整页AI组件,页面整体由一个边界选中
以整页AI组件接着编辑,保留HTML形态。
02 · 原生可编辑元素

转为原型元素,
逐项精细调整

需要在画布中调整文字、布局和元素属性时,可以转换为墨刀原型的原生数据格式,继续进行原型编辑。

转换后,原HTML脚本交互需要在原型中重新检查和配置。

查看HTML导入与转换方式
企业申请表单的独立字段编辑视图,突出预算输入框与元素层级
从整页到具体字段,进入原生元素编辑。

从个人创作到团队协作

把讨论放在原型上,
让下一步更清楚

生成只是起点。进入墨刀原型,继续完善页面与交互,再把设计交给团队一起查看和讨论。

团队针对预约原型中的约满时段提出具体反馈并确认修改
预约示例 · 围绕约满状态收集反馈,再继续完善方案。

分享与演示

把原型链接交给同事,沿着页面流程演示产品想法。

评论与修改

围绕具体页面收集反馈,把需要调整的地方说清楚。

设计与交付

在原型工作流程中继续完成标注、资源导出与开发交接。

从你的产品场景开始

换一个任务,
同样可以开始

把用户、页面和关键动作告诉AI。选择下面的需求,还可以按自己的业务继续修改。

移动 App

把预约流程串起来

服务列表、选择时段、确认预约与结果页,说明每一步的内容和返回方式。

电商小程序

从选购走到订单确认

商品详情、规格选择、购物车和配送信息,把购买过程中的操作一起说明。

AI 产品

让提问和回答有清楚的去向

对话入口、历史记录、回答与引用资料,补上追问和找不到答案的情况。

开始前,了解这些

关于AI生成原型

从第一次输入,到生成后的修改与协作。

查看帮助中心
AI生成的原型,还能继续修改吗?

可以。你可以在当前任务中继续对话,也可以从产物预览的“编辑”入口进入HTML可视化编辑。导入墨刀原型后,还能保留AI组件形态,或转换为原生可编辑元素继续调整。

不会写代码,可以用AI生成原型吗?

可以从中文需求开始,不必先写HTML代码。把产品类型、需要的页面和关键操作说清楚,生成后通过预览和编辑继续完善。

AI组件和原生可编辑元素有什么区别?

AI组件是HTML容器,适合保留HTML页面及动态交互;原生可编辑元素是墨刀原型的数据格式,适合调整画布中的元素和属性。转换之后,需要重新检查并配置对应的原型交互。

已有HTML文件,可以接着做原型吗?

可以在墨刀原型中导入HTML文件或粘贴HTML代码,再选择后续编辑方式。已有页面的布局、样式和资源情况会影响导入表现,可以先用一页确认结果,再继续处理其他页面。

生成后的原型可以分享给团队吗?

可以使用产物的分享入口,或进入墨刀原型后分享链接、演示页面并收集评论。分享范围和协作权限按当前项目与账号设置管理。

AI生成原型怎么收费?

生成额度和可用权益与账号方案有关。登录后查看当前可用额度,或到墨刀定价页了解套餐,再选择适合自己的使用方式。

你的下一个产品想法

先把想法写下来,
让原型开始成形

从一段需求开始,把页面一步步改成你想要的样子。

开始生成我的原型