Uniapp UI Template Builder Skill

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

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

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

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

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

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}
    />
  )
}

{
  "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"
    }
  }
}

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

# 生成主题色阶（默认 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

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

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

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

/* 小号 */
:root { --font-size-base: 12px; --space-base: 12px; }

/* 大号 */
:root { --font-size-base: 16px; --space-base: 20px; }

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

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

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

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

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

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

import { useState } from 'react'

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

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

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/

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/
    └── ...