메뉴
移动端应用框架生成器。采用 Vue3 + Vant + Vite + TypeScript + Mock.js。用于快速创建完整的移动端 H5 应用。使用场景：(1) 需要创建新的移动端项目，(2) 用户描述了底部导航结构、页面类型（列表/表单/详情）、主题颜色等需求，(3) 用户提供移动端设计稿，通过分析图片中的 Tabbar 结构、配色方案、页面布局来生成应用，(4) 需要一个带 Mock 数据的移动端前端项目（无需后端），(5) 快速搭建移动端应用原型。
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/wang-q-l/ai-web --skill mobile-app-generator명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
SOC 직업 분류 기준
| 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，我会通过问答方式收集信息。