大家好我是不如摸鱼去wot-ui 的发起人欢迎来到我的 AI Coding 分享专栏。这两年我经常用 AI 写代码。它写页面确实快几十秒就能给你搓出一份看起来像模像样的 Vue 文件。然后你把代码放进项目熟悉的节目就开始了组件名是对的属性是编的Toast和Dialog调用了 Hook却忘了在页面里放对应组件项目已经升级到 wot-ui v2它还在认真地写 v1 API遇到主题定制张嘴就是深度选择器组件库明明有现成的 CSS 变量代码写得飞快修起来也很快——很快就到下班时间了。这事不能全怪 AI。组件库版本一直在变文档、示例、更新记录又散落在不同页面里。如果没有准确的上下文模型只能凭训练数据和经验去猜。所以我们做了 Open Wothttps://github.com/wot-ui/open-wot一套面向 wot-ui 的开源 AI 工具集把组件知识、使用规范和项目检查能力交给 AI也给开发者留了一套随时能在终端里验证的工具。一句话概括让 AI 写代码之前先查写完以后再检查。Open Wot 到底是什么Open Wot 不是一个新的组件库也不是把官网文档复制一份塞进仓库。它把 Wot UI 的 AI 能力拆成了三个入口Skills 告诉 Agent 遇到不同任务时该怎么做MCP Server 让 Agent 能查询组件 API、示例和主题变量CLI 给开发者、本地脚本和 CI 提供同一套查询与检查能力底层是一份从 wot-ui 文档和源码中提取的离线知识库。组件的 props、events、slots、demo、CSS 变量和更新记录会按稳定版本保存。CLI 和 MCP 读取的是同一份数据不需要每次临时抓网页。Wot UI 文档与源码离线组件知识库CLIMCP ServerAgent SkillsAI Agent开发者 / 脚本 / CI我更看重的是这里面的分工Skills 管做事方法MCP 管取数CLI 管验证。它们不是什么三选一用在一起才顺手。第一层给 AI 一套能落地的 Skills如果把大模型比作一个刚加入项目的新同事Skills 有点像我们给他准备的开发手册。它不只是说一句“请熟练使用 wot-ui”而是把查询顺序、代码约束、常见坑和执行步骤都写清楚。比如生成一个 wot-ui 页面时Agent 应该先确认组件再查 API 和 demo涉及主题时优先使用 ConfigProvider 与 CSS 变量修改完成后还要检查项目中的实际用法。Open Wot 目前提供 6 个 SkillsSkill能做什么wot-ui-v2组件选型、API 查询、页面生成和常见问题排查wot-ui-cli使用与调试wot-ui/cli、配置 MCPwot-ui-unocss-preset-guide接入和排查wot-ui/unocss-presetcreate-wot-ui-theme按约定生成可维护的单文件 SCSS 主题migrate-v1-to-v2扫描并辅助迁移 v1 包名、组件 API、表单和样式starter-cleaner把 wot-starter v2 清理成最小可开发状态安装也比较简单pnpx skillsaddwot-ui/open-wot# 也可以使用 npxnpx skillsaddwot-ui/open-wot安装时可以按需选择不用把所有 Skill 一股脑搬进项目。我自己很喜欢迁移和主题这两个场景因为它们特别适合交给 Skill。比如 v1 升 v2并不是把wot-design-uni替换成wot-ui/ui就结束了。wd-message-box、useMessage、表单校验和一些组件属性都发生了变化。把这些差异、扫描方式和回归清单放进 SkillAgent 才知道接下来该查什么、改什么。第二层把组件文档变成可查询的 CLISkills 解决“怎么做”准确的组件知识则由wot-ui/cli提供。先全局安装 CLI当前要求 Node.js 20 或更高版本npminstall-gwot-ui/cli装好以后就能直接使用wot命令# 看看有哪些组件wot list# 查询 Button 的属性、事件、插槽和 CSS 变量wot info Button# 查看 Button 的 demo 列表wot demo Button# 获取完整文档和主题变量wot doc Button wot token Button# 查看更新记录wot changelog这些命令不只给人看也支持 JSON 输出脚本和 Agent 可以直接消费结构化结果wot info Button--formatjson还有一个很容易被忽略的问题版本。AI 明明回答过这个组件代码放进你的项目却不工作很多时候不是 API 完全错了而是版本没对上。Open Wot 会尝试从项目的node_modules/wot-ui/ui或package.json中识别版本也可以手动指定# 自动使用 2.0 下最新的 patch 版本wot info Button--version2.0# 锁定精确版本wot info Button--version2.0.4# 始终查询最新稳定版wot info Button--versionlatest这样问“Button 怎么用”时答案终于不用建立在“大家说的是同一个版本”这个美好愿望上了。第三层通过 MCP 把知识交给 Agent如果每次都要我们手动运行命令再把结果复制给 AI那多少还是有点不够 AI。Open Wot 内置了 MCP Server。把下面配置加入支持 MCP 的客户端Agent 就能自行调用组件查询工具{mcpServers:{wot-ui:{command:wot,args:[mcp]}}}配置完成后Agent 可以使用这些工具wot_list先找到合适的组件wot_info查询 props、events、slots 和 CSS 变量wot_doc读取完整组件文档wot_demo获取官方 demo 源码wot_token查询主题变量及默认值wot_changelog按版本或组件查更新记录wot_lint扫描本地项目中的 wot-ui 使用问题以后你可以直接这样提需求使用 wot-ui v2 写一个登录页面包含手机号、密码、协议勾选和登录按钮。写代码前先查询相关组件的 API 和 demo完成后检查项目中的 wot-ui 用法。Agent 的工作顺序会从“先写一版再说”变成先选组件、查约束、看示例然后生成代码并检查结果。这中间当然不能保证 AI 一次就把所有业务逻辑写对但至少组件 API 不需要靠它现场发挥了。少猜一次就少修一个奇怪问题。不只查文档它还能检查你的项目做到组件查询以后我还是觉得差点意思。因为 AI 最大的问题不只是在对话框里答错而是它已经把错误写进项目了。你需要知道哪些组件正在使用、基础环境有没有配好以及错误具体在哪个文件。所以 CLI 还提供了三个项目分析命令# 检查依赖、运行环境和基础集成情况wot doctor.# 统计 .vue 文件中的 wd-* 组件使用情况wot usage.# 检查未知组件、空按钮等问题wot lint.usage很适合在升级和重构前摸底lint会把问题定位到具体文件。对于 Agent 来说这就像写完代码以后终于有人喊它回来验收而不是生成完最后一个代码块就潇洒离场。为什么我们要做 Open WotWot UI v2 的 slogan 是“轻量、美观、AI 友好”。前两个比较容易理解最后这个“AI 友好”到底是什么我们也想了挺久。多写几份 Prompt、准备一个llms.txt都有帮助。但如果 AI 还是拿不到准确版本的组件数据也不能检查本地工程那它对组件库的理解依然停留在“看过一些资料”。我们想做得再往前一点把文档变成结构化知识把知识接入 Agent再把生成结果拉回真实项目里检查。这也是为什么项目叫 Open Wot而不是只叫 wot-ui CLI。现在仓库里已经有 Skills、CLI、MCP 和数据提取工具后面也可以继续放入更适合 AI Coding 的能力。只要它能让 wot-ui 用户少查一会文档、少踩一个坑就值得做。目前的边界Open Wot 还在持续完善中有些边界先说清楚当前聚焦 wot-ui v2usage和lint主要扫描.vue文件中的wd-*标签及相关 importlint 规则还不算多现阶段更适合做组件库专项检查不能代替 ESLint 和完整测试Skills 能让 Agent 更熟悉流程但最终结果仍然需要结合业务需求验收这不是万能外挂不过已经能解决一批很具体的问题。后面我们会继续补充组件规则、项目检查和更多 AI Coding 场景。如果你正在使用 wot-ui v2可以从安装一个 Skill 或运行一次wot info Button开始。遇到问题欢迎提 Issue有新的 Skill 想法也欢迎一起贡献。觉得项目有点意思的话也请帮我们点个 Star。开源项目的快乐有时候就这么朴素。相关资源Open Wothttps://github.com/wot-ui/open-wot - Wot UI 的 Skills、MCP、CLI 与离线知识库Wot UIhttps://github.com/wot-ui/wot-ui - 轻量、美观、AI 友好的 uni-app 组件库Open Wot Skillshttps://github.com/wot-ui/open-wot/tree/main/skills - 查看全部 Skills 与安装方式Agent Skills、Rules、Prompt、MCP一文把它们理清楚了https://juejin.cn/post/7599268297201958950
