메뉴
移动端应用框架生成器。采用 Vue3 + Vant + Vite + TypeScript + Mock.js。用于快速创建完整的移动端 H5 应用。使用场景：(1) 需要创建新的移动端项目，(2) 用户描述了底部导航结构、页面类型（列表/表单/详情）、主题颜色等需求，(3) 用户提供移动端设计稿，通过分析图片中的 Tabbar 结构、配色方案、页面布局来生成应用，(4) 需要一个带 Mock 数据的移动端前端项目（无需后端），(5) 快速搭建移动端应用原型。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
生成或细化需求说明书文档。支持完整文档生成和局部细化两种模式。适用场景：(1) 将需求概述转换为完整的需求说明书，(2) 对已有文档的特定章节进行详细补充和细化，(3) 只生成某个功能模块的详细说明，(4) 需要标准化的需求文档格式，支持多端系统（Web管理后台、Web学员端、移动App等）
管理后台框架生成器。采用Vue3 + Element Plus + Vite + TypeScript + Mock.js 。用于快速创建完整的 Web 管理后台系统。使用场景：(1) 需要创建新的管理后台项目，(2) 用户描述了登录页样式、布局方式(左右布局/顶部导航等)、菜单结构、主题颜色等需求，(3) 用户提供参考图或手稿图,通过分析图片中的布局结构、配色方案、菜单结构来生成后台系统，(4) 需要一个带 Mock 数据的前端项目(无需后端)，(5) 快速搭建管理系统原型。
官网前台框架生成器。采用 Vue3 + Element Plus + Vite + TypeScript + Mock.js。用于快速创建完整的企业官网、产品官网等用户前台系统。使用场景：(1) 需要创建新的官网项目，(2) 用户描述了导航结构、页面类型（首页/产品/关于我们/新闻/联系我们等）、主题颜色等需求，(3) 用户提供官网设计稿，通过分析图片中的导航结构、配色方案、页面布局来生成官网，(4) 需要一个带 Mock 数据的前端项目（无需后端），(5) 快速搭建官网原型。
生成或细化需求说明书文档。支持完整文档生成和局部细化两种模式。适用场景：(1) 将需求概述转换为完整的需求说明书，(2) 对已有文档的特定章节进行详细补充和细化，(3) 只生成某个功能模块的详细说明，(4) 需要标准化的需求文档格式，支持多端系统（Web管理后台、Web学员端、移动App等）
管理后台框架生成器。采用Vue3 + Element Plus + Vite + TypeScript + Mock.js 。用于快速创建完整的 Web 管理后台系统。使用场景：(1) 需要创建新的管理后台项目，(2) 用户描述了登录页样式、布局方式(左右布局/顶部导航等)、菜单结构、主题颜色等需求，(3) 用户提供参考图或手稿图,通过分析图片中的布局结构、配色方案、菜单结构来生成后台系统，(4) 需要一个带 Mock 数据的前端项目(无需后端)，(5) 快速搭建管理系统原型。
在长对话中创建检查点，保存任务状态和关键信息，帮助在新对话中快速恢复工作进度。触发场景：用户说「创建检查点」「保存进度」「对话太长了」「上下文快满了」，或长时间对话后需要开始新会话。
| name | mobile-app-generator |
| description | 移动端应用框架生成器。采用 Vue3 + Vant + Vite + TypeScript + Mock.js。用于快速创建完整的移动端 H5 应用。使用场景：(1) 需要创建新的移动端项目，(2) 用户描述了底部导航结构、页面类型（列表/表单/详情）、主题颜色等需求，(3) 用户提供移动端设计稿，通过分析图片中的 Tabbar 结构、配色方案、页面布局来生成应用，(4) 需要一个带 Mock 数据的移动端前端项目（无需后端），(5) 快速搭建移动端应用原型。 |
这是一个专门用于生成移动端 H5 应用的技能。它会创建一个完整的、可立即运行的移动端项目，包含：
你可以通过以下三种方式快速创建移动端应用：
示例 1：
创建一个电商移动端应用，底部导航包含首页、分类、购物车、我的，主题色用蓝色，需要暗黑模式
示例 2：
创建一个工具类应用，底部有首页、工具、我的三个导航，主题色用绿色
示例 3：
创建一个社交应用，底部导航有首页、消息、发现、我的，主题色用微信绿 #07c160，支持暗黑模式
你可以上传移动端设计稿或参考截图，我会自动分析：
使用方式：
/mobile-app-generator [上传截图] 根据这个设计稿创建移动端应用
我会分析：
示例：
/mobile-app-generator [上传淘宝首页截图] 参考这个布局创建一个电商应用
/mobile-app-generator [上传微信截图] 参考这个风格创建一个社交应用
如果你不确定如何描述，直接调用：
/mobile-app-generator
我会通过问答方式收集信息。
描述要素：
优先方式：自然语言描述
如果你在调用技能时已经提供了应用描述（如"创建一个电商应用，底部有首页、分类、购物车、我的，主题色用蓝色"），我会直接解析你的需求并开始生成项目。
必要信息：
备选方式：问答收集
如果你没有提供完整描述，我会通过以下方式收集信息：
方式一：交互式问答
方式二：设计稿/截图分析
你可以上传移动端设计稿、参考截图或手绘草图，我会分析并提取：
分析内容：
支持的图片类型：
使用示例：
/mobile-app-generator [上传截图] 参考这个布局创建应用
/mobile-app-generator [上传设计稿] 按照这个设计稿生成项目，主题色改成蓝色
重要说明： 我会直接在当前工作目录下生成所有项目文件，不会创建子文件夹。
生成的文件包含：
当前目录/
├── package.json # 项目依赖配置
├── vite.config.ts # Vite 构建配置
├── tsconfig.json # TypeScript 配置
├── postcss.config.js # Viewport 适配配置
├── index.html # HTML 入口
├── .gitignore # Git 忽略文件
├── README.md # 项目说明
├── mock/ # Mock 数据
│ ├── user.ts
│ └── product.ts
└── src/
├── main.ts # 应用入口
├── App.vue # 根组件
├── router/ # 路由配置
├── layout/ # 布局组件
│ └── TabbarLayout.vue # 底部导航布局
├── views/ # 页面组件
│ ├── login/ # 登录页
│ ├── home/ # 首页
│ ├── category/ # 分类页
│ ├── cart/ # 购物车
│ └── profile/ # 我的
├── components/ # 页面模板
│ ├── ListPage.vue # 列表页模板
│ ├── FormPage.vue # 表单页模板
│ ├── DetailPage.vue # 详情页模板
│ └── SearchPage.vue # 搜索页模板
├── composables/ # 组合式函数
│ ├── useList.ts # 列表逻辑复用
│ └── useTheme.ts # 主题切换
├── styles/ # 样式文件
│ ├── index.css # 全局样式
│ ├── variables.css # CSS 变量
│ └── vant-custom.css # Vant 定制
├── utils/ # 工具函数
│ └── request.ts # 请求封装
└── api/ # API 接口
└── user.ts
我会配置 postcss-px-to-viewport 插件，实现移动端自动适配：
详细配置请参考：references/viewport-adaptation.md
根据你提供的主题色，我会修改：
CSS 变量（src/styles/variables.css）
Vant 主题配置（src/main.ts）
暗黑模式变量
详细配置请参考：references/theme-customization.md
我会创建一个符合移动端设计规范的登录页：
设计特点：
可定制内容：
根据你的需求，我会配置底部导航栏：
配置内容：
Vant 图标选择：
详细配置请参考：references/tabbar-configuration.md
为每个 Tabbar 标签创建对应的页面组件：
页面类型：
页面模板复用：
components/ListPage.vue 快速创建列表页components/FormPage.vue 快速创建表单页components/DetailPage.vue 快速创建详情页components/SearchPage.vue 快速创建搜索页详细使用请参考：references/page-templates.md
我会实现完整的暗黑模式功能：
实现方式：
useTheme composable 管理主题状态data-theme 属性切换支持的组件：
我会配置流畅的页面切换动画：
动画效果：
配置方式：
详细配置请参考：references/router-configuration.md
我会创建移动端特有的 Mock 数据：
Mock 文件：
mock/user.ts：用户登录、用户信息mock/product.ts：商品列表、商品详情数据特点：
响应格式：
{
code: 200,
data: { ... },
message: 'success'
}
详细配置请参考：references/mock-data-guide.md
我会创建详细的 README.md 文档，包含：
最后，我会执行以下步骤验证项目：
# 1. 安装依赖
npm install
# 2. 验证构建（确保没有错误）
npm run build
# 如果构建失败，修复问题后再次运行 npm run build，直到构建成功
# 3. 启动开发服务器
npm run dev
验证内容：
生成项目后，你可以查看以下参考文档了解详细配置：
theme-customization.md - 主题定制指南
tabbar-configuration.md - 底部导航配置
router-configuration.md - 路由配置指南
page-templates.md - 页面模板使用指南
viewport-adaptation.md - 视口适配指南
mock-data-guide.md - Mock 数据指南
调用方式：
/mobile-app-generator 创建一个电商移动端应用，底部导航包含首页、分类、购物车、我的，主题色用蓝色，需要暗黑模式
生成结果：
调用方式：
/mobile-app-generator 创建一个工具类应用，底部有首页、工具、我的三个导航，主题色用绿色
生成结果：
调用方式：
/mobile-app-generator [上传淘宝/美团/微信等应用截图] 参考这个布局创建移动端应用
分析过程：
生成结果：
调用方式：
/mobile-app-generator 创建一个社交应用，底部导航有首页、消息、发现、我的，主题色用微信绿 #07c160，支持暗黑模式
生成结果：
调用方式：
/mobile-app-generator
交互流程：
Q: 如何修改主题颜色？ A: 修改 src/styles/variables.css 中的 CSS 变量，或在 src/main.ts 中配置 ConfigProvider。
Q: 如何添加新的 Tabbar 页面？ A: 参考 references/tabbar-configuration.md，在路由配置中添加新页面，并设置 meta.tabbar: true。
Q: 如何使用页面模板？ A: 参考 references/page-templates.md，导入对应的模板组件并传入配置。
Q: 如何修改 Viewport 适配基准？ A: 修改 postcss.config.js 中的 viewportWidth 配置。
Q: 如何禁用某些元素的 px 转换？ A: 在 postcss.config.js 的 selectorBlackList 中添加类名，或给元素添加 .ignore 类。
推荐方式：直接描述需求
/mobile-app-generator 创建一个[应用类型]，底部导航有[页面1]、[页面2]、[页面3]，主题色用[颜色]
示例：
/mobile-app-generator 创建一个电商应用，底部有首页、分类、购物车、我的，主题色用蓝色/mobile-app-generator 创建一个工具应用，底部有首页、工具、我的，主题色用绿色/mobile-app-generator 创建一个社交应用，底部有首页、消息、发现、我的，主题色用微信绿简单调用：
如果你不确定如何描述，直接调用 /mobile-app-generator，我会通过问答方式收集信息。