吾心吾行澄如明镜，所作所为皆为正义。
今天苏米来聊一个让我"止挫转顺"的组件库：Wot UI。
一路做小程序，最早用过 Color UI，也被图鸟 UI 圈粉过。后来慢慢发现一个痛点：项目只用三五个组件，却要整套引入、还得去改一堆样式，成本高、回头维护也累。那段时间我甚至想自己写一套给自己用。
转机来自腾讯的 TDesign，它把设计与工程打通，定制能力也不错。但在 uni-app 里，TD 生态出来不久，踩坑点还不少。这个空档，我遇到了 Wot UI：轻、好看、上手快，还兼顾可定制。这也是我今天推荐它的原因。作为独立开发者，我更看重"能快速上线"和"后期好维护"——Wot UI 在这两点上给到的体验很稳。
核心推荐理由
💎 内置 CSS 变量，可直接改主题与细节
不用大动干戈改组件，只需在项目里覆盖少量变量（如主题色、圆角、字体大小），就能快速统一风格。对想做品牌化、细节控的同学非常友好。
实战建议：先把品牌主色、灰度、圆角这三类变量定死，再逐步微调按钮、标签、通知等局部变量，既快又不容易乱。
🎯 Slots 很多，UI 可塑性强
官方把插槽位留得很充分，想加图标、加提示、换布局，都能在原有组件上"拼"出来，既保持稳定，又能做出自己的样子，减少"魔改"带来的维护风险。
实战建议：列表项、卡片、对话框这三类场景最吃插槽，优先抽出项目级的"小骨架"，后面复用会省很多时间。
如果你在 uni-app 中用 TDesign 还遇到不少 bug，想先稳定推进业务，不妨把 Wot UI 作为主力方案。等业务稳定后，再评估是否需要迁移到更重的体系，风险更可控。
项目介绍
🌐 多平台覆盖
支持微信小程序、支付宝小程序、钉钉小程序、H5、APP 等。一套代码，多端通用，适合独立开发者快速验证想法。
小提醒：不同端的原生能力略有差异，上线前把"输入、弹窗、滚动"这三类常见交互多端点一遍，能避开大部分小坑。
🚀 80+ 个高质量组件
覆盖移动端主流场景。表单、导航、反馈、数据展示……常见业务基本都能找到现成积木。
优先级建议：表单类（输入、选择）、反馈类（Toast、Dialog、Loading）和导航类（Tabs、Navbar）优先落地，能最快搭起骨架。
💪 使用 Typescript 构建
类型更清晰。即便团队协作，组件入参也更直观，减少低级错误。
实战价值：当你把组件二次封装成"项目组件"时，类型提示会帮你约束传参，交接更省心。
🤖 AI 友好的设计系统
官方提供 Skill/Agent 能力。通过技能提示词，能更快把设计规范和用法交给智能体理解，提效明显。
适用场景：生成页面骨架、批量产出样式覆盖、对比几种交互方案，让 AI 先给"草图"，你再细修。
🌍 国际化支持
内置 15 种语言包。做出海产品更省心，文案切换无需重复造轮子。
小技巧：统一做一层"文案映射"，把业务文案和组件文案放在同一规则下，后期扩语种只改配置。
📖 完整的文档与示例
上手路径清晰。从安装到进阶定制，文档覆盖比较细，遇到问题可快速定位。
建议路径：先跑示例项目 → 对照文档改主题 → 挑两三个业务组件二次封装 → 再接入整页。
🎨 主题定制与暗黑模式
支持修改 CSS 变量快速做亮色/品牌色，统一视觉不费力。一键切换暗黑模式，配合变量体系，夜间体验也能保证一致性。
进阶玩法：把主题变量放到配置中心，结合环境变量或用户设置，做"登录即换肤"体验。
功能亮点总结
- 轻量级 + 高度可定制：CSS 变量 + 丰富插槽，快速出稿又能做出个性
- 80+ 组件开箱即用：表单、导航、反馈、数据展示全覆盖
- 多平台一套代码：小程序、H5、APP 同步支持
- AI 赋能开发流程：官方 Skill 让智能体帮你生成页面和样式
- TypeScript + 完整文档：类型安全 + 学习成本低
部署与使用
快速开始
- 从官网 https://wot-ui.cn/ 获取安装指引
- 在 uni-app 项目中集成 Wot UI
- 在 CSS 变量中覆盖主题色、圆角等基础配置
- 按页面需求选择组件，利用插槽做二次封装
🤖 AI Agent 工作流
打开你的智能体工具（如 trea），添加官方 Skill 后，按以下流程协作：
- 复制官方提示词：https://github.com/wot-ui/open-wot/blob/main/skills/wot-ui-v2/SKILL.md
- 将仓库里的提示词导入你的智能体
- 结合项目实际组件与主题变量，让 Agent 帮你生成页面骨架或样式覆盖
- 遇到样式冲突或交互不确定时，让 Agent 给出多种方案对比
小技巧：把"页面目标、可用组件清单、已定主题变量"一并贴给智能体，它会更懂你的上下文；产出的代码先落到测试页验证，通过再合并到正式页面。
应用场景
- 小程序 MVP 快速验证：一周内搭建核心功能原型
- 品牌化 H5 活动页：利用 CSS 变量快速适配品牌主题
- 出海产品多语言适配：15 种内置语言减少国际化工作量
- 团队协作项目：TypeScript 类型约束 + 完整文档降低交接成本
- AI 辅助开发流程：用官方 Skill 让 Agent 批量生成页面框架
开源说明
Wot UI 是一个开源项目，核心特点：
- 完整的组件源码与文档开放
- 社区活跃，官方持续维护
- 支持二次开发与定制化集成
- 提供 AI Agent 集成方案，赋能开发效率
个人总结
从 Color UI 到图鸟再到 TDesign，我走过不少组件库的"坑"。Wot UI 给我的启发是：不一定要大而全，反而是"轻、稳、可扩展"的组件库更适合独立开发者。
它的 CSS 变量体系让我可以快速统一风格，丰富的插槽让我在不魔改源码的前提下做出个性化方案，TypeScript 的类型保障让团队交接更顺畅。最妙的是，官方提供的 AI Skill 打开了"人机协作开发"的可能性——不是替代，而是让我在业务逻辑和交互细节上投入更多心思。
如果你现在在 uni-app 上还在"选型纠结"，我的建议是：不妨从 Wot UI 开始，它能在"快速上线"和"品质感"之间找到平衡。等业务稳定、有了具体的工程化诉求后，再评估是否升级到更重的体系。这样风险最小，回报最大。
希望这个推荐对你有帮助。有问题欢迎在下方留言讨论！
相关链接：
- 官网：https://wot-ui.cn/
- AI Skill 仓库：https://github.com/wot-ui/open-wot/blob/main/skills/wot-ui-v2/SKILL.md
```