墨刀AI原型导出React代码操作指南

墨刀AI原型导出React代码，操作流程本身并不复杂，但几个硬性门槛必须卡死。首先账号必须为「企业版」，且企业管理员已在后台为你开通「前端代码导出」权限——个人版账号即使升级到Pro会员，也无法开启这一功能。项目必须建在团队空间下，而非个人文件夹。导出操作仅限墨刀Web端执行，本地客户端无法完成。一切顺利的话，下载ZIP包后在终端依次执行npm install和npm start即可启动运行。

概括来说，墨刀AI生成的原型要导出成React代码，先要保证项目本身已开放「代码导出」权限，再通过Web端项目设置页手动触发导出。这是唯一途径，没有捷径可走。

确认账号与项目权限是否满足导出条件

登录墨刀官网（modao.cc），进入目标AI原型项目首页，点击右上角「…」图标，选择「项目设置」。在「高级功能」区域，找到「React代码导出」开关。若显示「未开通」，说明当前账号为免费版，或虽是企业版但未被授权——必须由企业管理员在后台开通「前端代码导出」权限，且项目必须在「团队空间」下创建。个人版账号即便将Pro会员升满，也无法绕开此限制。只有企业版＋管理员授权这一组合，才能顺利执行导出流程。

在Web端启动React代码导出流程

方法一：从项目画布页快捷导出
打开AI生成的原型画布，在顶部菜单栏点击「更多」，选择「导出为React代码」。弹窗中建议勾选「包含交互逻辑」和「使用TypeScript」（推荐如此操作），然后点击「开始导出」即可。

方法二：通过项目设置页导出
进入项目设置，左侧导航找到「代码导出」，点击「生成React代码包」。后台开始打包，通常需要40到90秒。待状态变为「就绪」后，点击「下载ZIP」即可获得完整代码包。

特别提醒：导出过程中切勿刷新页面，一旦中断任务将失败，需重新触发一次。

解压与运行导出的React项目

第一步：解压下载的ZIP文件，得到一个结构完整的目录，包含package.json、src/、public/等标准文件。

第二步：打开终端，进入该目录，执行 npm install。首次运行会自动安装react、react-router-dom、@modao/sdk等必要包，基本无需额外干预。

第三步：执行 npm start 启动开发服务器。浏览器将自动打开 http://localhost:3000，此时可看到与墨刀原型完全一致的可交互React页面。

需要说明：导出的代码默认使用Vite构建，但墨刀强制锁定为Create React App模板。因此不要自行替换vite.config.ts——一旦修改，路由跳转和组件绑定均会失效，得不偿失。