wang-q-l
wang-q-l/ai-web
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/wang-q-l/ai-web --skill page-generator命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
移动端应用框架生成器。采用 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) 快速搭建管理系统原型。
基于 SOC 职业分类
正在显示 SKILL.md
| 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 技能通过自动识别项目类型，为不同端提供专门的页面生成方案：
每种项目类型都有独立的规范文档和页面模版，确保生成的代码符合对应端的开发规范。