墨刀AI怎么生成UI界面_墨刀AI界面设计功能使用操作步骤

墨刀AI支持网页端一键生成带交互的UI原型，输入自然语言描述即可5分钟内产出可预览页面；支持多页跳转逻辑配置及Vue/React工程级代码导出。

想用墨刀AI快速生成一个可用的UI界面，不用从零拖组件、不靠设计师配合，输入一句话就能出带基础交互的可预览页面。整个过程在网页端完成，无需安装软件，5分钟内就能拿到第一个原型。

用墨刀AI一键生成单页面UI

打开 modao.cc → 登录账号 → 点击右上角「新建」→ 选择「AI生成原型」模板。

在弹出的提示框中，用自然语言描述你要的界面，例如：“生成一个企业后台数据看板首页，包含顶部导航栏、左侧菜单、主内容区显示折线图和卡片式数据指标，整体风格简约现代，主色为深蓝+浅灰”。【描述越具体，生成结果越贴近预期；若只写“做个后台页面”，AI可能套用默认模板，字段和布局易偏离业务】

点击「生成」，等待8～12秒，系统自动创建画布并填充完整UI结构，包括文字、图标、图表占位符和基础间距布局。

生成后立即进入编辑器，所有组件已按逻辑分组排列，可直接选中修改文案、调整颜色或替换图标——这一步操作起来很简单，右键组件就能调出快捷菜单。

让多页面具备真实跳转逻辑

墨刀AI支持一次性生成含多个页面的原型，但必须在提示词中明确写出页面数量与跳转关系。

方法一：用结构化提示词触发多页生成

在AI输入框中写明：“用户从登录页输入账号密码→点击登录→进入首页→点击‘订单管理’跳转至列表页→点击某条目进入详情页”，确保包含【至少3个页面名称+2个以上跳转动作】，否则AI只会输出单页。

方法二：生成后手动补全跳转链

AI生成的页面默认无连线，需人工配置：切换到「登录页」→ 选中「登录」按钮 → 右侧属性面板点「交互」→「添加交互」→「点击时」→「跳转页面」→ 从下拉列表中选择「首页」。注意：下拉列表匹配的是页面缩略图右侧显示的名称，不是你脑中想的“首页”，务必核对左侧页面列表里显示的准确名称。

方法三：用「跳转规则」批量管理（适合页面超过5个时）

顶部菜单栏点「演示」→「跳转规则」→ 新建规则 → 设置触发条件为「按钮点击」→ 源页面选「登录页」→ 目标页面选「首页」→ 保存。此方式后期修改路径只需改一条规则，不用逐页重连。

导出Vue或React代码直接交付开发

确认UI页面已调整完毕，且关键按钮跳转已测试通过。

在画布左上角找到「</>」按钮，点击切换至代码模式。

系统自动渲染出完整工程级代码：Vue项目含语法、

点击右上角「下载代码」，生成ZIP包，解压后运行npm install → npm run dev即可本地预览——【代码中已内置Mock数据和响应式断点，无需额外配置即可跑通】。