UniApp UI - 设计稿到 UniApp 代码生成器

概述

这个 skill 可以将设计稿（文本描述、HTML/CSS）自动转换为 UniApp + UnoCSS + Wot Design Uni 的生产就绪代码。通过智能组件映射和页面模板系统，快速生成跨平台兼容的移动应用页面。

核心功能

智能组件映射 - 自动识别 HTML/CSS 并映射到 WotUI 组件或自定义组件
页面模板系统 - 6 种基础模板（表单、列表、详情、Tab、搜索、网格）
自定义组件分析 - 自动扫描项目组件并优先使用
跨平台兼容 - 生成的代码支持 H5、微信小程序、App
最佳实践内置 - 自动应用 Vue3、UnoCSS、UniApp 最佳实践

前置要求

确保已安装 Python 3.8+：

python3 --version

如未安装，请按以下方式安装：

macOS:

brew install python3

Ubuntu/Linux:

sudo apt-get update && sudo apt-get install python3 python3-pip

Windows: 下载并安装 Python from https://www.python.org/downloads/

使用流程

7 步工作流

Step 1: 分析设计输入

输入方式:

文本描述（如："创建一个登录页面，包含用户名、密码输入框和登录按钮"）
HTML/CSS 代码片段
设计要求文档

分析内容:

页面类型（form/list/detail/tab/search/grid）
所需组件（button/input/cell/etc）
布局结构
交互需求

示例:

用户: 我需要一个商品列表页，包含搜索框、商品卡片（图片、标题、价格），支持下拉刷新和上拉加载更多。

Step 2: 选择页面模板

使用搜索引擎匹配最合适的模板：

python3 scripts/search.py "list refresh load-more" --domain template

6 个可用模板:

form-page - 表单页（登录、注册、设置、反馈）
list-page - 列表页（新闻、订单、商品、聊天）
detail-page - 详情页（商品详情、文章、用户资料）
tab-page - Tab 页（首页、分类）
search-page - 搜索页（搜索结果、筛选）
grid-page - 网格页（分类网格、相册）

Step 3: 映射组件

优先级系统:

自定义组件 (Priority 1) - 项目中的自定义组件
WotUI 组件 (Priority 2) - Wot Design Uni 组件库
UniApp 内置组件 (Priority 3) - view/text/image 等
直接实现 (Fallback) - 使用 UnoCSS + 基础组件

搜索命令:

搜索自定义组件（如果已运行 analyze_components.py）

python3 scripts/search.py "product card" --domain custom

搜索 WotUI 组件

python3 scripts/search.py "button primary" --domain wotui python3 scripts/search.py "input text field" --domain wotui python3 scripts/search.py "list cell" --domain wotui

搜索 UnoCSS 样式模式

python3 scripts/search.py "card container" --domain unocss

搜索最佳实践

python3 scripts/search.py "navigation" --domain best-practice

Step 4: 生成代码

基于选定的模板和组件映射生成完整的 .vue 文件：

生成内容包括:

完整的 Vue3 SFC 结构（<template> , <script setup> , <style scoped> ）
UnoCSS 原子化样式类
WotUI 或自定义组件
响应式数据和方法
UniApp 生命周期钩子（onLoad, onShow, onReady）
错误处理和加载状态
跨平台兼容代码

Step 5: 应用最佳实践

自动检查并应用最佳实践：

搜索相关最佳实践

python3 scripts/search.py "form validation" --domain best-practice python3 scripts/search.py "list performance" --domain best-practice

检查项包括:

UniApp 跨平台兼容性
Vue3 Composition API 规范
UnoCSS 原子类使用
WotUI 组件正确集成
性能优化（虚拟列表、懒加载）

Step 6: 质量检查

运行质量检查清单（见下文"质量检查清单"章节）。

Step 7: 输出代码

提供完整的、生产就绪的 .vue 文件代码。

自定义组件分析

为什么需要自定义组件分析？

如果你的项目已经有自定义组件（如 ProductCard、UserAvatar），应该优先使用这些组件而不是重复实现。

如何使用

扫描项目并生成组件映射:

分析项目组件

python3 scripts/analyze_components.py /path/to/your/uniapp-project

指定输出文件

python3 scripts/analyze_components.py /path/to/your/uniapp-project -o data/components.csv

脚本会:

扫描项目 components/ 目录下的所有 .vue 文件
提取组件元数据（Props、Emits、Slots、CSS 类名）
生成 components.csv 文件
自动赋予最高优先级（Priority 1）

生成的 components.csv 示例:

No,Component Name,File Path,HTML Pattern,CSS Classes,Props,Slots,Events,Use Case,Category,Code Example,Priority 1,ProductCard,components/ProductCard.vue,<view class='product-card'>,product-card card-item,{"title":"string","price":"number","image":"string"},default,"click","商品展示卡片",card,"<ProductCard :title='商品' :price='99.9' />",1

搜索命令参考

5 个搜索域

域名用途 CSV 文件示例查询

custom

自定义组件 components.csv "product card image"

wotui

WotUI 组件 wotui.csv "button primary large"

template

页面模板 templates.csv "form login submit"

unocss

UnoCSS 模式 unocss-patterns.csv "flex center card"

best-practice

最佳实践 best-practices.csv "navigation storage"

搜索语法

基础搜索

python3 scripts/search.py "<query>" --domain <domain>

限制结果数量

python3 scripts/search.py "<query>" --domain <domain> -n 5

JSON 输出

python3 scripts/search.py "<query>" --domain <domain> --json

搜索示例

搜索 WotUI 组件:

按钮组件

python3 scripts/search.py "button primary action" --domain wotui

输入框组件

python3 scripts/search.py "input text clearable" --domain wotui

列表单元格

python3 scripts/search.py "cell list item link" --domain wotui

表单组件

python3 scripts/search.py "form validation" --domain wotui

搜索页面模板:

表单页模板

python3 scripts/search.py "form login register" --domain template

列表页模板

python3 scripts/search.py "list scroll refresh" --domain template

详情页模板

python3 scripts/search.py "detail product image" --domain template

搜索样式模式:

布局模式

python3 scripts/search.py "flex center" --domain unocss python3 scripts/search.py "card container shadow" --domain unocss

按钮样式

python3 scripts/search.py "button full-width" --domain unocss

搜索最佳实践:

导航相关

python3 scripts/search.py "navigation" --domain best-practice

存储相关

python3 scripts/search.py "storage" --domain best-practice

性能优化

python3 scripts/search.py "performance list" --domain best-practice

质量检查清单

UniApp 跨平台兼容性

使用 <view> , <text> , <image> 等 UniApp 组件
避免使用 Web-only 标签（div, span, a）
使用 uni.* API 而非 Web API（如 uni.navigateTo 代替 router.push ）
图片路径使用相对路径或 HTTPS URL
避免 Web-only 事件（如 onMouseOver）

Vue 3 Composition API

使用 <script setup> 语法
Props 使用 defineProps<T>()
Emits 使用 defineEmits<T>()
响应式数据使用 ref() 或 reactive()
计算值使用 computed()
生命周期钩子：onLoad, onShow, onReady, onHide, onUnload

UnoCSS 原子化样式

优先使用原子类而非内联样式
使用响应式类（sm: md: lg:）
使用语义化颜色或直接颜色值
间距使用一致的比例（p-4, m-2, gap-4）
避免不必要的任意值 [value]

WotUI 组件集成

组件导入正确
Props 名称和类型匹配文档
事件绑定使用 @event-name
使用组件提供的 TypeScript 类型
主题定制使用 CSS 变量

代码质量

表单有验证规则
适当的 TypeScript 类型注解

完整使用示例

示例 1: 创建登录页面

Step 1: 描述需求

创建一个登录页面，包含：

用户名输入框
密码输入框（隐藏字符）
"记住我"复选框
登录按钮（全宽、主色调）
"忘记密码"链接

Step 2: 选择模板

python3 scripts/search.py "form login" --domain template

结果: form-page (表单页模板)

Step 3: 搜索组件

搜索输入框

python3 scripts/search.py "input text" --domain wotui

结果: wd-input

搜索密码框

python3 scripts/search.py "input password" --domain wotui

结果: wd-input (type="password")

搜索复选框

python3 scripts/search.py "checkbox" --domain wotui

结果: wd-checkbox

搜索按钮

python3 scripts/search.py "button primary block" --domain wotui

结果: wd-button

Step 4: 生成代码

生成的 login.vue:

&#x3C;scroll-view class="flex-1" scroll-y>
  &#x3C;view class="p-4">
    &#x3C;view class="text-center mb-8">
      &#x3C;text class="text-2xl font-bold text-gray-900">欢迎回来&#x3C;/text>
    &#x3C;/view>

    &#x3C;wd-form ref="formRef" :model="formData" :rules="rules">
      &#x3C;wd-form-item label="用户名" prop="username">
        &#x3C;wd-input
          v-model="formData.username"
          prefix-icon="user"
          placeholder="请输入用户名"
          clearable
        />
      &#x3C;/wd-form-item>

      &#x3C;wd-form-item label="密码" prop="password">
        &#x3C;wd-input
          v-model="formData.password"
          type="password"
          prefix-icon="lock"
          placeholder="请输入密码"
        />
      &#x3C;/wd-form-item>

      &#x3C;wd-form-item>
        &#x3C;wd-checkbox v-model="remember">记住我&#x3C;/wd-checkbox>
      &#x3C;/wd-form-item>

      &#x3C;wd-button
        block
        type="primary"
        :loading="loading"
        @click="handleLogin"
      >
        登录
      &#x3C;/wd-button>

      &#x3C;view class="text-center mt-4">
        &#x3C;text
          class="text-blue-500"
          @click="goToForgotPassword"
        >
          忘记密码？
        &#x3C;/text>
      &#x3C;/view>
    &#x3C;/wd-form>
  &#x3C;/view>
&#x3C;/scroll-view>

</view> </template>

const formRef = ref<FormInstance>() const loading = ref(false) const remember = ref(false)

const formData = ref({ username: '', password: '' })

const rules = { username: [ { required: true, message: '用户名不能为空' } ], password: [ { required: true, message: '密码不能为空' }, { min: 6, message: '密码至少6个字符' } ] }

const handleLogin = async () => { try { await formRef.value?.validate() loading.value = true

// 登录逻辑
const res = await uni.request({
  url: '/api/login',
  method: 'POST',
  data: formData.value
})

// 保存 token
uni.setStorageSync('token', res.data.token)

// 跳转到首页
uni.switchTab({ url: '/pages/index/index' })

} catch (error) { uni.showToast({ title: '登录失败', icon: 'error' }) } finally { loading.value = false } }

const goToForgotPassword = () => { uni.navigateTo({ url: '/pages/forgot-password/index' }) } </script>

Step 5: 检查最佳实践

python3 scripts/search.py "form validation navigation" --domain best-practice

Step 6: 质量检查

✅ 使用 UniApp 组件（view, text, scroll-view）
✅ 使用 <script setup> 和 TypeScript
✅ 表单验证规则完整
✅ 错误处理（try-catch）
✅ 使用 uni.* API（navigateTo, switchTab, setStorageSync）
✅ 原子化 UnoCSS 类

资源说明

scripts/

可执行脚本，用于搜索和分析：

core.py - BM25 搜索引擎核心
search.py - CLI 搜索接口
analyze_components.py - 自定义组件分析器

data/

CSV 数据库文件：

wotui.csv - Wot Design Uni 组件映射（70+ 组件）
components.csv - 自定义组件映射（自动生成）
templates.csv - 页面模板元数据
unocss-patterns.csv - UnoCSS 常用模式
uni-components.csv - UniApp 内置组件
best-practices.csv - 最佳实践指南

templates/

页面模板文件：

form-page.vue - 表单页模板
list-page.vue - 列表页模板
detail-page.vue - 详情页模板
tab-page.vue - Tab 页模板
search-page.vue - 搜索页模板
grid-page.vue - 网格页模板

references/

参考文档（按需加载）：

wotui-api.md - Wot Design Uni API 完整参考
unocss-presets.md - UnoCSS 预设和快捷方式
uni-lifecycle.md - UniApp 生命周期详解

常见问题

Q: 如何添加新的自定义组件到映射？

A: 重新运行 analyze_components.py 脚本，它会自动扫描并更新 components.csv。

Q: 生成的代码在小程序上报错怎么办？

A: 检查是否使用了 Web-only API 或组件。运行质量检查清单中的跨平台兼容性检查。

Q: 如何自定义组件样式？

A: 使用 UnoCSS 原子类或添加 scoped 样式。避免直接修改 WotUI 组件内部样式。

Q: 支持暗黑模式吗？

A: Wot Design Uni 支持暗黑模式。使用 CSS 变量进行主题定制。

Q: 如何优化长列表性能？

A: 搜索最佳实践 python3 scripts/search.py "list performance" --domain best-practice ，考虑使用虚拟滚动或分页加载。

uniapp-ui

Safety Notice

Copy this and send it to your AI assistant to learn