【Wot UI】star，80+组件！轻量美观、官方 Skill 加持的 uni-app 组件库
标签: uni-app / 组件库 / 多端开发 / TypeScript / CSS 变量 / 暗色模式 / 国际化 / 小程序 / 开源
原文: https://mp.weixin.qq.com/s/zeLJCgq-ws3evJM2jWvhnQ
作者: 程序员茄子
引言
做小程序开发的同学，对组件库一定不陌生。
从早期的 ColorUI（最早火起来的那批），到后来的图鸟UI，再到腾讯 TDesign——社区里从来不缺 UI 框架。但真正用下来，要么太重（全套安装但项目只用几个组件），要么定制困难（魔改组件的成本太高）。
今天要分享的这个组件库——Wot UI，让我眼前一亮。
它有几个非常实在的优点：轻量、组件数量够用（80+）、支持 CSS 变量自定义样式、还有官方 Skill 能直接丢给 AI Agent 使用。
一、Wot UI 是什么
1.1 产品定位
Wot UI 是一款面向 uni-app 开发者的轻量级多端组件库。
它可以在一个代码库的基础上，编译输出到：
| 平台 | 支持情况 |
|---|---|
| 微信小程序 | ✅ 官方支持 |
| 支付宝小程序 | ✅ 官方支持 |
| 钉钉小程序 | ✅ 官方支持 |
| H5 | ✅ 官方支持 |
| APP（iOS / Android） | ✅ 官方支持 |
| 其他小程序平台 | 理论上支持（需实测） |
一套代码，多端运行——这是 uni-app 的核心卖点，Wot UI 在这个基础上把 UI 层也打通了。
1.2 核心数据
| 指标 | 数据 |
|---|---|
| 组件数量 | 80+ |
| GitHub Star | 持续增长中 |
| TypeScript | ✅ 原生支持 |
| CSS 变量 | ✅ 支持 |
| 暗黑模式 | ✅ 原生支持 |
| 国际化 | ✅ 15 种语言包 |
| AI Skill | ✅ 官方提供 |
1.3 为什么选 Wot UI
开发者在选组件库时，通常会纠结几个问题：
① 组件够不够用？
80+ 组件，覆盖按钮、表单、导航、布局、反馈等移动端主流场景，数量上已经是「够用」级别。
② 定制起来麻烦吗？
Wot UI 提供了大量 CSS 变量，可以直接在项目中覆盖主题色、圆角、间距等，不需要魔改源码。组件还预留了大量 Slots（插槽），可以灵活替换内部结构实现自定义 UI。
③ 会不会很重？
组件按需引入，不需要全量安装。用到什么组件，引入什么组件，对项目体积友好。
④ AI 时代能不能用？
这是 Wot UI 很有意思的一个亮点——他们官方提供了一个 Skill，可以直接丢给 Cursor、Claude Code 等 AI 编码助手使用。AI 理解你的组件库规范后，生成的代码更准确，减少「AI 乱写组件名」的尴尬。
二、核心功能详解
2.1 多平台覆盖
uni-app 本身就支持编译到多个平台，但不同平台在 UI 表现上有差异。Wot UI 在各平台的适配上做了大量工作，保证了视觉和交互的一致性。
微信小程序 → ✅
支付宝小程序 → ✅
钉钉小程序 → ✅
H5 → ✅
APP → ✅
2.2 80+ 高质量组件
组件按功能分为以下几大类：
| 类别 | 代表组件 |
|---|---|
| 基础 | Button 按钮、Icon 图标、Cell 单元格 |
| 表单 | Input 输入框、Radio 单选、Checkbox 多选、Switch 开关、Picker 选择器 |
| 布局 | Layout 布局、Grid 宫格、Flex 弹性盒 |
| 导航 | NavBar 导航栏、TabBar 底部标签栏、Tabs 标签页 |
| 反馈 | Toast 轻提示、Dialog 对话框、ActionSheet 动作面板 |
| 展示 | Card 卡片、Collapse 折叠面板、Progress 进度条 |
| 业务 | 各类业务组件持续更新中 |
2.3 CSS 变量：主题定制的核心
这是 Wot UI 最实用的功能之一。项目中覆盖 CSS 变量，就能全局改变主题：
/* App.vue 或全局样式文件 */
page {
/* 主色调 */
--wot-color-primary: #4a90e2;
/* 圆角 */
--wot-border-radius-sm: 4px;
--wot-border-radius-md: 8px;
--wot-border-radius-lg: 16px;
/* 间距 */
--wot-spacing-xs: 8px;
--wot-spacing-sm: 12px;
--wot-spacing-md: 16px;
--wot-spacing-lg: 24px;
/* 字体大小 */
--wot-font-size-xs: 10px;
--wot-font-size-sm: 12px;
--wot-font-size-md: 14px;
--wot-font-size-lg: 16px;
}
不需要修改组件源码，直接覆盖变量即可。升级组件库时自定义样式也不会丢失。
2.4 暗黑模式
只需要一行配置，开启暗黑主题：
// 在 App.vue 或页面配置中
uni-app 暗黑模式配置（平台差异较大，具体参考官方文档）
组件内置了暗色模式的样式变量，切换主题时组件自动响应。
2.5 国际化（15 种语言）
内置了 15 种语言包，开箱即用：
import { useI18n } from '@/uni_modules/wot-ui'
const { t } = useI18n()
// 自动使用当前系统语言
console.log(t('button.confirm')) // 英文: Confirm / 中文: 确认
覆盖的场景：按钮文案、提示语、错误信息、占位符……不需要自己再写一遍国际化逻辑。
三、官方 Skill：AI 编码助手的神器
这是 Wot UI 最有意思的功能。
3.1 什么是 Skill
在 AI 编码助手（Cursor、Claude Code 等）中，Skill 相当于一份「上下文记忆」——告诉 AI 你的组件库叫什么名字、每个组件怎么用、有什么规范。
没有 Skill，AI 生成代码时可能会：
- 乱写组件名（组件叫
wd-button，AI 写成了uni-button） - 不了解 CSS 变量规范，样式写得乱七八糟
- 不知道有哪些组件，遇到需求时自己想方案
有了 Skill，AI 能准确理解 Wot UI 的组件体系和用法，生成符合规范的代码。
3.2 如何使用
# 1. 获取 Skill 文件
# Skill 文件地址：
# https://github.com/wot-ui/open-wot/blob/main/skills/wot-ui-v2/SKILL.md
# 2. 在 AI 编码助手中加载 Skill
# 具体操作方式取决于你使用的工具：
# - Cursor: Settings → AI → 加载自定义 Skill
# - Claude Code: 启动时指定 Skill 路径
# 3. 开始对话
# 你：帮我用 Wot UI 写一个用户登录页面
# AI：根据 Skill 理解，自动使用 wot-ui 的 Input、Button 等组件
# 生成符合规范的完整代码
3.3 Skill 能做什么
有了 Skill 加持后，AI 可以：
- ✅ 准确使用 Wot UI 的组件名称和 API
- ✅ 正确配置 CSS 变量和主题
- ✅ 生成符合多端规范的代码（不用手动改平台适配）
- ✅ 根据项目需求推荐合适的组件组合
- ✅ 帮你写表单验证逻辑（结合组件的事件系统）
四、快速开始
4.1 安装
# 通过 HBuilderX 插件市场安装（推荐）
# 在 HBuilderX 中：工具 → 插件安装 → 搜索 wot-ui
# 或通过 npm 安装
npm install wot-ui-uni
4.2 基础使用
<template>
<view class="container">
<!-- 按钮 -->
<wd-button type="primary" size="large" @click="handleClick">
登录
</wd-button>
<!-- 输入框 -->
<wd-input
v-model="form.username"
label="用户名"
placeholder="请输入用户名"
/>
<!-- Toast 提示 -->
<wd-toast />
</view>
</template>
<script setup>
import { ref } from 'vue'
import { useToast } from 'wot-ui-uni'
const toast = useToast()
const form = ref({ username: '' })
const handleClick = () => {
toast.show('登录成功！')
}
</script>
4.3 官网地址
官网：https://wot-ui.cn
GitHub：https://github.com/wot-ui/open-wot
Skill 文件：https://github.com/wot-ui/open-wot/blob/main/skills/wot-ui-v2/SKILL.md
五、和 TDesign 对比
| 维度 | Wot UI | TDesign |
|---|---|---|
| 组件数量 | 80+ | 100+ |
| uni-app 适配 | ✅ 原生 | 刚起步，bug 较多 |
| TypeScript | ✅ | ✅ |
| CSS 变量 | ✅ | ✅ |
| 暗黑模式 | ✅ | ✅ |
| 国际化 | ✅ 15种 | ✅ |
| AI Skill | ✅ 官方 | ❌ |
| 上手难度 | 简单 | 中等 |
| 社区规模 | 成长中 | 成熟 |
总结：如果你在用 uni-app 开发小程序/H5，TDesign 的 uni-app 版本目前还不算稳定，Wot UI 是一个非常值得考虑的选择。
六、总结
一句话评价
Wot UI 是一款专为 uni-app 开发者打造的轻量级多端组件库——80+ 组件够用、CSS 变量定制灵活、暗黑/国际化开箱即用，最亮眼的是官方 Skill，让 AI 编码助手能真正理解你的组件规范。
核心优势
| 亮点 | 说明 |
|---|---|
| 多端覆盖 | 微信 / 支付宝 / 钉钉 / H5 / APP 一套代码通吃 |
| 轻量 | 按需引入，不绑架项目体积 |
| CSS 变量 | 覆盖即定制，升级不丢样式 |
| Slots 丰富 | 每个组件预留大量插槽，UI 定制无压力 |
| 暗黑模式 | 原生支持，一键切换 |
| 国际化 | 15 种语言，开箱即用 |
| AI Skill | 官方 Skill，AI 编码助手必备 |
适用人群
- 🎯 uni-app 小程序开发者：想快速搭项目 UI，不想从零写组件
- 🎯 有多端需求的团队：微信 / 支付宝 / H5 一套代码搞定
- 🎯 追求 UI 一致性：不希望不同平台界面看起来像两个产品
- 🎯 用 AI 辅助编程：官方 Skill 让 AI 生成的代码更准确
官网: https://wot-ui.cn
GitHub: https://github.com/wot-ui/open-wot
Skill: https://github.com/wot-ui/open-wot/blob/main/skills/wot-ui-v2/SKILL.md
本文首发于「程序员茄子」博客，原文链接：https://chenxutan.com