Menu
多端页面生成器规范。根据项目类型（管理后台/Web前台/移动端）自动识别并提供对应的页面模版、布局规范、路由配置和样式指南。支持管理后台列表页、Web前台内容页、移动端列表/详情/表单页等常见页面类型。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
移动端应用框架生成器。采用 Vue3 + Vant + Vite + TypeScript + Mock.js。用于快速创建完整的移动端 H5 应用。使用场景：(1) 需要创建新的移动端项目，(2) 用户描述了底部导航结构、页面类型（列表/表单/详情）、主题颜色等需求，(3) 用户提供移动端设计稿，通过分析图片中的 Tabbar 结构、配色方案、页面布局来生成应用，(4) 需要一个带 Mock 数据的移动端前端项目（无需后端），(5) 快速搭建移动端应用原型。
生成或细化需求说明书文档。支持完整文档生成和局部细化两种模式。适用场景：(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 | page-generator |
| description | 多端页面生成器规范。根据项目类型（管理后台/Web前台/移动端）自动识别并提供对应的页面模版、布局规范、路由配置和样式指南。支持管理后台列表页、Web前台内容页、移动端列表/详情/表单页等常见页面类型。 |
本 skill 提供标准化的页面开发规范和模版，根据项目类型自动识别并提供对应的页面生成方案。
技能会自动识别当前项目类型，这决定了使用哪套页面模版和规范。
识别规则：
检查项目依赖（package.json）：
element-plus + 有侧边栏布局组件 → 管理后台项目element-plus + 无侧边栏布局 → Web 前台项目vant → 移动端项目检查项目结构：
src/components/core/layouts/art-sidebar-menu/ → 管理后台项目src/layout/ 且包含 Header/Footer 组件 → Web 前台项目检查路由配置：
src/router/modules/ 且有菜单配置 → 管理后台项目询问用户确认：
识别出项目类型后，自动加载对应的规范文档：
references/admin/ 下的规范和模版references/web/ 下的规范和模版references/mobile/ 下的规范和模版特征：
适用场景：
参考文档：
特征：
适用场景：
参考文档：
特征：
适用场景：
参考文档：
所有页面必须使用卡片式布局，这是项目的核心设计规范。
卡片默认样式：
border: none !important;box-shadow: none !important;border-radius: 12pxbackground: #fff重要提示： 只有在特殊说明的情况下才添加投影和边框，默认情况下卡片保持简洁的无边框无投影样式。
生成页面时必须：
当用户请求生成页面时，按照以下流程执行：
检查 package.json 依赖
↓
检查项目目录结构
↓
检查路由配置方式
↓
确定项目类型（管理后台/Web前台/移动端）
根据识别出的项目类型，加载对应目录下的规范文档：
references/admin/references/web/references/mobile/根据用户需求，选择合适的页面模版：
管理后台：
Web 前台：
移动端：
根据选择的模版和用户需求，生成完整的页面代码，包括：
生成代码后，运行构建命令验证：
npm run build
确保代码符合规范，没有 TypeScript 错误。
所有项目类型：
开发完成后必须验证：
npm run build 验证代码是否合规npm run dev，由用户自行启动遵循项目规范：
组件使用：
代码质量：
用户：生成一个用户管理列表页
技能执行流程：
1. 识别项目类型 → 管理后台项目
2. 加载 references/admin/ 规范
3. 选择模版 → template-list-page.md
4. 生成代码：
- src/views/user/index.vue
- src/router/modules/user.ts
- src/api/user.ts
- src/mock/user.ts
- src/types/user.ts
5. 验证构建 → npm run build
用户：生成一个产品列表页
技能执行流程：
1. 识别项目类型 → Web 前台项目
2. 加载 references/web/ 规范
3. 选择模版 → template-list-page.md
4. 生成代码：
- src/views/products/index.vue
- src/router/index.ts（添加路由）
- src/api/products.ts
5. 验证构建 → npm run build
用户：生成一个商品列表页
技能执行流程：
1. 识别项目类型 → 移动端项目
2. 加载 references/mobile/ 规范
3. 选择模版 → template-list-page.md
4. 生成代码：
- src/views/goods/list.vue
- src/router/index.ts（添加路由）
- src/api/goods.ts
5. 验证构建 → npm run build
检查依赖：
{
"dependencies": {
"vue": "^3.x",
"element-plus": "^2.x",
"pinia": "^2.x"
}
}
检查目录结构：
src/
├── components/
│ └── core/
│ └── layouts/
│ └── art-sidebar-menu/ ← 有侧边栏菜单
├── router/
│ └── modules/ ← 路由模块化
└── views/
识别结果： 管理后台项目
加载规范： references/admin/
page-generator 技能通过自动识别项目类型，为不同端提供专门的页面生成方案：
每种项目类型都有独立的规范文档和页面模版，确保生成的代码符合对应端的开发规范。