墨刀AI新手怎么制作原型_从需求输入到原型生成完整教程

刚接触墨刀AI的新手想快速做出可用原型，但卡在第一步：不知道怎么把模糊的需求描述转化成AI能理解的输入，更不清楚后续如何校准、调整和导出。别急，下面从打开网页到生成第一个可交互原型，每一步都按真实操作顺序展开。

登录并进入AI生成界面

打开浏览器，访问 modao.com，点击右上角「登录」，支持微信扫码或手机号快捷登录。

登录成功后，在首页导航栏找到「AI生成」按钮，点击进入——

。

页面自动跳转至「AI生成App」主界面，左侧为提示词输入框，右侧为预览区，顶部有「深度模式」开关，默认关闭。

用深度模式对齐核心需求

先打开顶部的「深度模式」开关，再在左侧输入框中写一句最简需求，例如：“做一个帮大学生记账的iOS App”。

点击「生成」后，AI不会马上出图，而是弹出3个追问卡片： ① 这个App主要用于哪种记账场景？（比如日常零食消费？还是兼职收入管理？） ② 用户是否需要进行多账户分类（像生活费、奖学金、兼职工资等）？ ③ 是否要同步到iCloud或使用微信登录？

这三问不是形式主义——不回答就无法继续，因为墨刀AI把信息架构和交互逻辑前置锁定了。你选完答案，系统才开始生成首版原型。

注意：如果跳过深度模式直接输入长段文字，AI会按字面意思硬画，比如你写“要有图表”，它可能塞进6个饼图，但完全没考虑数据来源和更新频率。

选择设计系统并生成首版界面

追问确认后，页面下方出现设计系统选项：Shadcn UI / Ant Design / Material UI / Arco Design / TDesign。

新手推荐选

，它的组件默认间距、圆角、禁用态样式最贴近国内B端习惯，生成后修改成本最低。

点选后，点击「生成原型」按钮，等待约8秒，右侧预览区出现带导航栏、底部Tab和3个默认页面的可交互框架。

此时所有按钮、卡片、输入框都已绑定基础交互逻辑（比如点击Tab切换页面），不是静态图，而是可点击、可跳转的真原型。

微调页面内容与结构

鼠标悬停在任意页面缩略图上，点击「编辑」图标，进入画布编辑模式。

方法一：拖拽替换组件 在左侧组件库中找到「金额输入框」，拖到首页的「今日支出」区域，松手即替换原有占位文本——组件自动适配当前设计系统字号与边距。

方法二：双击改文案 直接双击页面中的「记一笔」按钮，输入「+ 新增」；AI会同步更新所有同名按钮，避免手动逐页修改。

方法三：右键删页面 如果生成了不需要的「报表分析」页，右键缩略图→「删除页面」，整个页面及关联跳转逻辑一并清除，不会残留断链。

导出可交付成果

点击右上角「分享」按钮→选择「生成链接」→勾选「允许查看交互」→复制链接发送给开发同事。

开发打开链接后，不仅能点按跳转，还能点击左上角 图标，直接查看该页面对应的React代码片段。

若需本地交付，点击「导出」→选择「React工程包」→下载ZIP文件，解压后即为含组件拆分、状态管理、路由配置的可运行前端项目。