必须选择“生成应用”功能才能输出可运行的react工程代码，否则仅得静态html；需用结构化模板或自然语言精准描述需求，确保ai生成含src目录、组件拆分及vite配置的完整项目结构。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
想用墨刀AI把APP页面设计稿直接变成可运行、可修改的React代码，不用反复沟通、不用手动重写组件，关键在启动“生成应用”而非“生成原型”功能——前者输出工程化代码，后者只出静态界面。
确认使用「生成应用」功能入口
打开墨刀AI工作台，在顶部导航栏找到【新建】→点击下拉菜单，【必须选择“生成应用”】，不能点“生成原型”或“生成页面”。选错会导致后续所有代码无src目录、无组件拆分、无Vite配置，导出的只是HTML快照。
进入对话框后，系统自动启用「深度模式」，会主动追问App核心定位、目标用户、导航结构等——这步不能跳过，否则生成的页面跳转逻辑会缺失或错乱。
输入精准但非刻板的需求描述
方法一：用结构化模板（推荐新手）
在对话框中粘贴以下格式，替换括号内内容：
“生成一套【APP名称】，包含【首页、XX页、XX页】。各页核心功能：【首页展示推荐模板+一键修图入口；XX页支持上传多图+AI批量处理；XX页按标签浏览社区作品】。设计风格：【现代简约，主色#4F46E5，圆角8px，阴影柔和】。交互需求：【底部Tab切换、点击图片进入详情页、修图结果可保存至本地】。”
方法二：自然语言描述（适合已有明确视觉概念）
直接写：“我要一个类似Lightroom Mobile的AI修图工具，首页是瀑布流模板卡片，点进去是带滑动参数条的AI工作台，右上角有‘+’上传按钮，所有页面顶部统一深蓝渐变导航栏。”
注意：提到“统一导航栏”“所有页面”这类词，AI才会强制复用Layout组件，否则每页header都独立写死。
检查并确认生成的工程结构
第一步：等待AI完成云端构建，右侧画板出现高保真预览界面后，左上角点击【> 按钮】切换至代码视图。
第二步：展开左侧文件树，确认存在以下关键结构：
• src/ 目录下有 components/（含Header、TabBar等复用组件）
• pages/ 下按页面命名分文件夹（如 home/、editor/、community/）
• 根目录含 vite.config.ts、tailwind.config.js、tsconfig.json
第三步：点击任意页面下的index.tsx，查看是否含export default function HomePage() { … }——若看到的是div套div无函数声明，说明未触发应用级生成，需返回重试。
这一步操作起来很简单，直接把文件拖进去就行。
导出并验证React工程可用性
点击右上角【导出】→选择【React工程（ZIP）】→下载压缩包。
解压后进入根目录，执行：
npm install → npm run dev
浏览器自动打开 http://localhost:5173，确认所有页面能正常跳转、Tab栏状态同步、AI参数滑块响应拖拽——【若首页加载后报错“Cannot find module ‘@/components/Header’”】，说明导出时未勾选“包含依赖声明”，需重新导出并勾选该选项。
