메뉴
多端页面生成器规范。根据项目类型（管理后台/Web前台/移动端）自动识别并提供对应的页面模版、布局规范、路由配置和样式指南。支持管理后台列表页、Web前台内容页、移动端列表/详情/表单页等常见页面类型。
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/wang-q-l/ai-web --skill page-generator명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
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 技能通过自动识别项目类型，为不同端提供专门的页面生成方案：
每种项目类型都有独立的规范文档和页面模版，确保生成的代码符合对应端的开发规范。