❌

阅读视图

发现新文章，点击刷新页面。

uni-app 组件库 Wot UI 2.0 发布了，我们带来了这些改变！

✇掘金 前端
不如摸鱼去

大家好，我是不如摸鱼去，好久不见。

进入 2026 以来，大家可以感受到 wot-ui 的迭代速度明显放缓了，我们最近也接到了无数催更的消息。很多人以为我们是在偷懒或者放弃更新了，其实不是，我们是在偷偷写代码然后准备惊艳所有人！（其实是苦苦码了好几个月，来点点赞吧）

接下来看看我们带来了哪些东西吧！

V2

如今已经是 AI 编程时代了，Wot UI 的 slogan 也调整成了「轻量、美观、AI 友好」。我们的目标很直接，就是为大家带来更高效、更易用，也更适合和 AI 协作的 uni-app 开发实践。

主要变化

对比 v1，v2 这一版我们带来了不少更新：

  1. 全新的设计系统。 在 v2 版本，我们基于基础变量、语义变量和组件变量三层 design token 搭建全新的设计系统，使修改组件样式和自定义主题变得随心所欲，同时升级了 UI 视觉体验。
  2. 简化 form 及相关组件 我们简化了 form 相关组件的用法，提供基于 zod 的校验引擎以及支持自定义校验引擎，使用 form-item 替换 cell 作为表单项，优化各表单组件与非表单组件结合 form-item 使用的写法，不再区分「表单组件」和「非表单组件」。
  3. 优化文档体验 重新整理文档结构，统一组件文档结构，将 @wot-ui/vitepress-theme 提取后发布为 vitepress 主题，统一多个 wot-ui 多个库的文档 UI，同时在每个组件文档中增加 css 变量的展示。
  4. 优化 AI 支持
  • 提供 cli 工具 @wot-ui/cli，其内部提供 cli 与 mcp，以优化 wot-ui 组件库的 AI 编程体验。
  • 提供多个 skills 与 LLMs.txt。
  1. 提供 Unocss 预设 提供了 Unocss 预设 @wot-ui/unocss-preset，内置主题变量、语义色、间距、圆角、字重、透明度、描边和排版相关原子类规则，把 wot-ui 的设计 token 和主题变量映射成可直接使用的原子类。

CLI

很多同学在用 AI 写 wot-ui 页面时，问题其实不在于模型不会写，而在于它总爱“凭感觉”写。比如 props 名字记错了、事件猜错了、slot 用法写得像对的，结果一跑就炸。

所以在 v2 里，我们专门提供了 @wot-ui/cli。它不是一个单纯的脚手架工具，而是把 wot-ui v2 的组件知识整理成一套可查询、可校验、可给 AI 调用的能力。

你可以把它理解成一个本地离线知识库，既能给开发者自己查，也能给 AI 客户端通过 MCP 调用。常见能力包括：

  • 查询组件的 props、events、slots 和 CSS 变量
  • 查看组件 demo，减少 AI 瞎猜用法
  • 扫描本地项目，检查不合理或错误的组件写法
  • 通过 MCP 接入 AI 工具链，让 Agent 先查再写

比如以前你让 AI 写一个表单页，它可能先吐出一份“看起来很像 wot-ui”的代码。现在更合理的流程是，先查组件约束，再生成代码，最后再跑一遍检查。这样出来的结果会稳很多。

简单来说，@wot-ui/cli 想解决的不是“怎么让 AI 更会猜”，而是“怎么让 AI 少猜一点”。这也是我们这次把「AI 友好」放进 v2 里的一个重点。

Starter

如果说组件库解决的是“页面怎么写”，那 Starter 解决的就是“项目怎么开”。所以这次我们也没有把它当成一个单纯的 demo 仓库来维护，而是持续把它往一套更适合真实开发、也更适合 AI 协作的 uni-app 起手方案去打磨。

1.5 之后，Starter 先补上了 skills，开始把项目里常用的开发约定、页面结构和组件使用方式整理出来，让 AI 在这个模板里写代码时不再完全靠猜。到了 2.0，Starter 进一步完成了对 wot-ui v2 的适配，示例、主题能力、反馈组件文档以及整体开发链路也一起升级。

你可以把现在的 Starter 理解成：它不只是“集成了 wot-ui 的模板”，而是一个默认就站在 v2 体系上的起点。新项目拉下来之后，从主题定制、页面组织到后续和 AI 配合开发，整个体验都会比 1.x 时代更顺手一些。

CSS 插件

再往下一层看，组件和模板之外，样式这一层我们也往前推了一步，提供了 @wot-ui/unocss-preset。它本质上是一个基于 UnoCSS 的预设，用来把 wot-ui v2 的设计 token 直接映射成可用的原子类。

这件事的价值在于，你在写页面时不需要一边翻设计变量、一边手写一堆样式映射了。像颜色、间距、圆角、字重、排版这些能力，现在都可以直接通过统一的 wot- 前缀类名来组织，主题切换时也能更自然地跟着整套 token 体系走。对于喜欢原子化 CSS 的同学来说，这一层会让 wot-ui v2 真正从“组件好用”变成“整套样式开发都更顺手”。

VSCode 插件

如果说前面这些更多是在补工具链和工程体验，那再落回到日常写代码，我们也补上了 VS Code 插件这一层，也就是 VS Code 插件 wot-ui-intellisense。

这个插件主要解决的是写页面时那些很碎、但又很烦的事情。比如组件名记不全、属性名老要回头翻文档、事件到底叫什么总要试一下。现在在 .vue 和 .html 文件里，输入 <wd-、空格、:、@ 这些常见场景时，都可以直接拿到补全提示。

除了补全之外，它还支持组件、属性、事件的悬停文档展示，以及一部分属性值校验和错误诊断。也就是说，很多以前要切出去查文档、或者运行后才发现的问题，现在在编辑器里就能先拦一层。

如果说 CLI 更像是给 AI 和工程化链路准备的，那 VS Code 插件就是给开发者日常写代码准备的。一个负责让模型少猜，一个负责让人少翻文档，配合起来，整个 wot-ui v2 的开发体验就会完整很多。

最后

回过头来看，这次 wot-ui v2 对我们来说并不只是一次常规升级。

它一边在补齐设计系统、表单体系、文档体验这些基础能力，一边也在认真回应这两年越来越明显的变化：大家写代码的方式，确实已经和以前不太一样了。

所以你会看到，这一版里不只有组件本身，也有 Starter、CLI、UnoCSS 预设、VS Code 插件这些围绕开发体验的配套。我们想做的，不只是一个“能用”的组件库，而是一套更顺手、更现代，也更适合和 AI 一起协作的 uni-app 开发方案。

v2 还有很多东西会在后面陆续展开，这篇文章先带大家看一个整体。如果你也在关注 wot-ui v2，或者也在想组件库怎么更好地拥抱 AI 编程，欢迎继续关注我们后面的更新。

参考资料

❌