Uniapp Ui Template Builder Skill

UI Template Builder

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

核心设计

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

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

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

交互流程

步骤1：确认技术栈

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

默认值：uniapp (Vue3)

步骤2：确认页面类型

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

【移动端 - uniapp/Taro】
┌─────────────────────────────────────┐
│ 手机 个人中心      │ 商品详情页        │
│ 购物车 商品列表页    │ 分类页面          │
│ 首页 首页          │ 购物车页面        │
│ 留言 聊天列表页    │ 订单列表页        │
│ 清单 表单页面      │ 设置页面          │
│ 礼物 活动页面      │ 搜索结果页        │
└─────────────────────────────────────┘

【PC 端】
┌─────────────────────────────────────┐
│ 安全 登录页        │ 注册页            │
│ 数据 数据大屏      │ 管理后台首页      │
│ 清单 表格列表页    │ 表单填写页        │
│ 资讯 文章详情页    │ 门户网站首页      │
│ 案例 企业官网      │ 文档页面          │
└─────────────────────────────────────┘

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

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

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

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

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

默认值：简约现代

步骤4：确认Mock数据

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

默认值：是

Mock数据说明：

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

页面模板库

移动端模板（uniapp/Taro）

1. 个人中心页面

模板结构：

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

2. 商品详情页

模板结构：

Copy code
商品商品详情/
├── gallery.vue         # 图片轮播
├── info.vue           # 基本信息（标题/价格/评分）
├── specs.vue          # 规格选择
├── detail.vue         # 详情区（富文本/Tabs）
├── bottom-bar.vue     # 底部操作栏
└── mock.json

3. 底部TabBar

⚠️ 重要约束（AI必须遵守）：

• 禁止使用 scroll-view 实现整页滚动
• 胶囊按钮区域必须 safe-area 适配
• tab切换使用 view 切换，禁止滑动动画延迟
• 底部安全距离必须使用 safe-area-inset-bottom

4. 商品列表页

5. 分类页面

6. 购物车页面

7. 订单列表页

8. 表单页面

PC端模板

1. 登录页

2. 数据大屏

大屏组件库：

• 数字滚动卡片
• 折线/面积/柱状图
• 环形/饼图
• 地图可视化
• 实时数据流

3. 管理后台

组件：

• 侧边导航
• 顶部Header
• 面包屑
• 表格（分页/筛选/排序）
• 表单（栅格布局）
• 标签页

4. 表格列表页

5. 文章详情页

组件模板库

组件模板与页面模板相互独立，但页面模板可以直接引用组件模板。

重要：这里的组件不是 Element Plus / Ant Design / uView 等第三方 UI 库，而是纯模板代码：

• 无 npm 依赖
• 无额外编译配置
• 即拷即用
• 可直接修改源码

uniapp 组件

PC React 组件

引用方式

vueCopy code
<!-- uniapp 页面模板内引用 -->
<script setup>
import MyButton from '@/components/uniapp-vue3/button/button.vue'
import MyModal from '@/components/uniapp-vue3/modal/modal.vue'
</script>

Mock数据规范

文件位置

Copy code
项目项目根目录/
├── mock/
│   ├── index.js          # Mock Server 入口
│   ├── user.json         # 用户相关
│   ├── product.json       # 商品相关
│   ├── order.json         # 订单相关
│   └── common.json        # 通用（字典/配置）
└── pages/（业务代码）

数据规范

jsonCopy code
{
{
  "products": [
    {
      "id": "p001",
      "name": "商品名称",
      "price": 99.00,
      "originalPrice": 199.00,
      "sales": 1000,
      "image": "https://via.placeholder.com/200",
      "tags": ["热销", "新品"],
      "stock": 99,
      "rating": 4.5
    }
  ]
}

状态覆盖

每份Mock数据必须包含：

• 正常态：5-20条典型数据
• 空状态：空数组
• 加载态：延迟响应
• 错误态：模拟网络错误

模板级 Mock 数据

每个页面模板目录下都提供 mock.json，与模板代码配套：

Copy code
templates/uniapp-vue3/profile/
├── style-1-simple.vue
├── style-2-vibrant.vue
├── ...
└── mock.json          # 配套 mock 数据

数据格式统一为：

jsonCopy code
{
{
  "code": 200,
  "message": "success",
  "data": {
    "title": "页面标题",
    "user": { ... },
    "list": [ ... ]
  }
}

组件通过 props 接收数据，不是硬编码：

tsxCopy code
import TableList from './templates/pc-react/table-list/style-1-default'
import mock from './templates/pc-react/table-list/mock.json'

function Page() {
  return (
    <TableList
      title={mock.data.title}
      columns={mock.data.columns}
      rows={mock.data.rows}
      pagination={mock.data.pagination}
    />
  )
}

这样 mock.json 可直接替换为后端 API 返回，实现快速对接。

风格系统

颜色定义

每个风格对应一组设计Token：

jsonCopy code
{
{
  "styles": {
    "简约现代": {
      "primary": "#333333",
      "background": "#FFFFFF",
      "surface": "#F5F5F5",
      "border": "#E5E5E5",
      "radius": "8px"
    },
    "活力炫彩": {
      "primary": "#FF6B6B",
      "background": "#FFFFFF",
      "surface": "#FFF5F5",
      "gradient": "linear-gradient(135deg, #FF6B6B, #FFB347)",
      "radius": "12px"
    },
    "高端商务": {
      "primary": "#1A1A2E",
      "background": "#0F0F1A",
      "surface": "#16162A",
      "accent": "#D4AF37",
      "radius": "4px"
    }
  }
}

组件映射

Copy code
风格风格选择  加载对应 tokens.json  渲染时替换变量

动态主题生成器

提供 references/theme-generator.js 脚本，支持自定义主题色一键生成完整色阶：

bashCopy code
# # 生成主题色阶（默认 modern 风格）
node references/theme-generator.js modern

# 指定自定义颜色
node references/theme-generator.js custom #FF6B6B

# 预设主题
node references/theme-generator.js vibrant
node references/theme-generator.js premium
node references/theme-generator.js nature
node references/theme-generator.js dark-tech

输出：自动生成 50-900 色阶的 CSS 变量，替换 --primary-500 等变量即可全局换肤。

一键换肤 & 换尺寸

交互演示：templates/theme-preview.html

直接在浏览器打开预览，支持：

• 5 套主题：现代灰 / 活力橙 / 暗金 / 清新绿 / 科技蓝
• 3 档尺寸：小号 / 中号 / 大号
• 实时预览：点击即切换，所见即所得

在代码中使用：

jsCopy code
import { generateTokens, generateCSSVariables } from './references/theme-generator'

// 用户说"换成红色主题"
const tokens = generateTokens({ primaryColor: '#FF4444' })
const css = generateCSSVariables(tokens)

// 将 css 注入到页面即可全局换肤
document.head.insertAdjacentHTML('beforeend', `<style>${css}</style>`)

换尺寸同理：

cssCopy code
/*/* 小号 */
:root { --font-md: 12px; --space-4: 12px; }

/* 大号 */
:root { --font-md: 16px; --space-4: 20px; }

技术栈适配

uniapp Vue3

vueCopy code
<template>
  <view class="page-container">
    <!-- 页面内容 -->
  </view>
</template>

<script setup>
import { ref } from 'vue'
// 使用 Composition API
</script>

<style lang="scss">
// 使用 SCSS 变量
</style>

uniapp Vue2

vueCopy code
<template>
  <view class="page-container">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style lang="scss">
</style>

React + Vite

tsxCopy code
import { useState } from 'react'

export default function Page() {
  return (
    <div className="page-container">
      {/* 页面内容 */}
    </div>
  )
}

输出结构

生成的文件结构：

Copy code
项目项目/
├── pages/
│   ├── profile/           # 个人中心
│   │   ├── index.vue
│   │   └── index.scss
│   ├── product-detail/    # 商品详情
│   │   ├── index.vue
│   │   └── index.scss
│   └── ...
├── components/            # 页面级组件
├── mock/                   # Mock数据
│   ├── index.js
│   ├── user.json
│   └── product.json
└── styles/
    └── tokens.scss        # 风格变量

与其他技能协作

目录结构

Copy code
uniapp-ui-template-builder/
├── SKILL.md                    # 本文件
├── README.md                   # 使用文档
├── references/
│   ├── scenarios/              # 场景定义
│   │   ├── mobile/             # 移动端场景
│   │   │   ├── profile.md
│   │   │   ├── product-detail.md
│   │   │   ├── product-list.md
│   │   │   ├── category.md
│   │   │   ├── cart.md
│   │   │   ├── order.md
│   │   │   └── ...
│   │   └── pc/                 # PC端场景
│   │       ├── login.md
│   │       ├── dashboard.md
│   │       ├── table.md
│   │       └── ...
│   ├── styles/                 # 风格定义
│   │   ├── modern.json
│   │   ├── vibrant.json
│   │   ├── premium.json
│   │   ├── nature.json
│   │   └── dark-tech.json
│   └── mock-templates/         # Mock模板
│       ├── user.json
│       ├── product.json
│       └── order.json
└── templates/                  # 页面代码模板
    ├── uniapp-vue3/
    ├── uniapp-vue2/
    ├── react/
    └── vue3/

实际仓库结构还包含：

Copy code
uniapp-ui-template-builder/
├── components/                 # 组件模板（与页面模板独立，可被引用）
│   ├── uniapp-vue3/           # uniapp 组件：button/modal/drawer/toast/picker/calendar/moments
│   └── pc-react/              # PC React 组件：button/modal/drawer/toast
└── templates/                  # 页面代码模板
    ├── uniapp-vue3/
    ├── pc-react/
    └── ...

默认值总结

一句话：选页面 → 选风格 → 确认Mock → 一键生成 ✓

触发词

uniapp-ui-template-builder、UI Template Builder