uniapp-ui-template-builder-skill

UI Template Builder

页面模板固化技能：把常见页面固化下来，每次生成基于模板，确保效果稳定。

核心设计

用户：帮我做个个人中心页面
AI：
  1. 确认技术栈（uniapp Vue3）
  2. 确认页面类型（个人中心）
  3. 确认风格（简约现代）
  4. 确认是否mock（是）
  5. 基于模板生成代码

三个必须确认的配置（有默认值）：

1. 做什么页面 → 从模板库选择
2. 什么风格 → 风格库选择，每种页面3-5套风格
3. 是否mock数据 → 开启则生成配套mock数据

交互流程

步骤1：确认技术栈

AI：请问您使用的技术栈是？
- uniapp (Vue2)
- uniapp (Vue3)
- React + Vite
- Vue3 + Vite
- Taro (React)
- Taro (Vue3)
- 移动端 H5
- PC 端 H5

默认值：uniapp (Vue3)

步骤2：确认页面类型

AI：请选择要生成的页面类型：

【移动端 - uniapp/Taro】
┌─────────────────────────────────────┐
│ 📱 个人中心      │ 商品详情页        │
│ 🛒 商品列表页    │ 分类页面          │
│ 🏠 首页          │ 购物车页面        │
│ 💬 聊天列表页    │ 订单列表页        │
│ 📋 表单页面      │ 设置页面          │
│ 🎁 活动页面      │ 搜索结果页        │
└─────────────────────────────────────┘

【PC 端】
┌─────────────────────────────────────┐
│ 🔐 登录页        │ 注册页            │
│ 📊 数据大屏      │ 管理后台首页      │
│ 📋 表格列表页    │ 表单填写页        │
│ 📰 文章详情页    │ 门户网站首页      │
│ 💼 企业官网      │ 文档页面          │
└─────────────────────────────────────┘

输入页面名称或序号，或直接描述（如"做一个个人中心"）

步骤3：确认风格（核心！）

每种页面都提供 3-5 套风格 供选择：

AI：请选择风格（共 X 套可选）：

┌─────────────────────────────────────────────────────────────┐
│ 风格1: 简约现代      │ 白色为主，文字为主，少装饰            │
│ 风格2: 活力炫彩      │ 渐变色，圆形图标，活跃氛围            │
│ 风格3: 高端商务      │ 深色系，金色点缀，精致感              │
│ 风格4: 清新自然      │ 绿色/蓝色系，圆角卡片，亲和力         │
│ 风格5: 暗黑科技      │ 深色背景，霓虹点缀，赛博朋克          │
└─────────────────────────────────────────────────────────────┘

默认值：简约现代

步骤4：确认Mock数据

AI：是否需要生成Mock数据？
- ✅ 是，生成配套的mock数据文件（推荐）
- ❌ 否，只需要页面模板

默认值：是

Mock数据说明：

• 使用 JSON Server / Mock.js 兼容格式
• 字段命名符合业务语义
• 数据量适中（5-20条典型数据）
• 包含边界状态（空数据、加载中、错误态）

页面模板库

移动端模板（uniapp/Taro）

1. 个人中心页面

风格	特点	适用场景
简约现代	白色背景，头像+昵称+统计，列表式入口	工具类App
活力炫彩	渐变头部，卡片式布局，图标丰富	电商/社交
高端商务	深色头部，金色/品牌色点缀，会员感	金融/高端
清新自然	浅绿/浅蓝背景，卡片圆润，亲和力	健康/母婴

模板结构：

个人中心/
├── header.vue          # 头部区域（头像/昵称/背景）
├── stats.vue           # 统计数据（订单/积分/优惠券）
├── menu-grid.vue       # 功能菜单（网格布局）
├── menu-list.vue       # 功能菜单（列表布局）
├── footer.vue          # 底部（退出/设置）
└── mock.json           # Mock数据