墨刀AI支持在网页端一键生成带交互效果的UI原型,输入自然语言描述后,通常可在5分钟内产出可预览页面;同时支持多页面跳转逻辑配置,以及 Vue/React 工程级代码导出。

如果你想用墨刀AI快速生成一个可直接演示的UI界面,无需从零开始拖拽组件,也不必依赖设计师配合,只要输入一句需求描述,就能生成带基础交互的可预览页面。整个流程都在网页端完成,无需下载安装软件,5分钟内即可拿到第一个可用原型。
用墨刀AI一键生成单页面UI
打开 modao.cc → 登录账号 → 点击右上角「新建」→ 选择「AI生成原型」模板。
在弹出的提示框中,建议用自然语言尽可能详细地描述你想要生成的界面。比如:“创建一个企业后台数据看板首页,需要包含顶部导航栏、左侧菜单栏,主内容区域展示折线图和卡片式数据指标,整体风格简约现代,主色调设为深蓝搭配浅灰”。【描述越具体、越完整,最终生成的UI原型就越贴近你的实际需求;如果只是简单写“做个后台页面”,AI大概率会套用默认模板,字段和布局也更容易偏离你的业务场景】
点击「生成」后,等待8~12秒,系统会自动创建画布并填充完整的UI结构,包括文案内容、图标、图表占位符以及基础的间距布局。
生成完成后会立即进入编辑器,所有组件通常已经按照逻辑完成分组排列,你可以直接选中后修改文案、调整配色或替换图标——这一步非常直观,右键组件即可调出快捷操作菜单。
让多页面具备真实跳转逻辑
墨刀AI支持一次生成包含多个页面的原型,但前提是你必须在提示词中明确说明页面数量以及页面之间的跳转关系。
方法一:用结构化提示词触发多页生成
在AI输入框中写明:“用户从登录页输入账号密码→点击登录→进入首页→点击‘订单管理’跳转至列表页→点击某条目进入详情页”,确保包含【至少3个页面名称+2个以上跳转动作】,否则AI默认只会生成单页面原型。
方法二:生成后手动补齐跳转链
AI生成的页面默认没有自动连线,需要手动完成交互配置:先切换到「登录页」,然后选中「登录」按钮,接着在右侧属性面板点击「交互」,再选择「添加交互」,之后点击「点击时」,再选择「跳转页面」,最后从下拉列表中选择「首页」。需要特别注意的是,下拉列表匹配的是页面缩略图右侧显示的页面名称,而不是你自己理解中的“首页”,因此一定要认真核对左侧页面列表中的准确名称。
方法三:用「跳转规则」批量管理(适合页面超过5个时)
顶部菜单栏点「演示」→「跳转规则」→ 新建规则 → 设置触发条件为「按钮点击」→ 源页面选「登录页」→ 目标页面选「首页」→ 保存。使用这种方式,后续如果要修改页面跳转路径,只需要调整一条规则即可,无需逐个页面重新连接。
导出Vue或React代码直接交付开发
确认UI页面已经调整完成,并且关键按钮的跳转逻辑已测试通过。
在画布左上角找到「>」按钮,点击后切换至代码模式。
系统会自动渲染并输出完整的工程级代码:Vue项目包含
