Menu
多端页面生成器规范。根据项目类型（管理后台/Web前台/移动端）自动识别并提供对应的页面模版、布局规范、路由配置和样式指南。支持管理后台列表页、Web前台内容页、移动端列表/详情/表单页等常见页面类型。
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
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.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/wang-q-l/ai-web --skill page-generatorThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Based on SOC occupation classification
| 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 技能通过自动识别项目类型，为不同端提供专门的页面生成方案：
每种项目类型都有独立的规范文档和页面模版，确保生成的代码符合对应端的开发规范。