AI 写 wot-ui 总在猜 API？我们把 Skills、MCP 和 CLI 都配好了

大家好，我是不如摸鱼去，wot-ui 的发起人，欢迎来到我的 AI Coding 分享专栏。

这两年我经常用 AI 写代码。它写页面确实快，几十秒就能给你搓出一份看起来像模像样的 Vue 文件。然后你把代码放进项目，熟悉的节目就开始了：

组件名是对的，属性是编的
Toast 和 Dialog 调用了 Hook，却忘了在页面里放对应组件
项目已经升级到 wot-ui v2，它还在认真地写 v1 API
遇到主题定制，张嘴就是深度选择器，组件库明明有现成的 CSS 变量

代码写得飞快，修起来也很快------很快就到下班时间了。

这事不能全怪 AI。组件库版本一直在变，文档、示例、更新记录又散落在不同页面里。如果没有准确的上下文，模型只能凭训练数据和经验去猜。

所以我们做了 Open Wot：github.com/wot-ui/open... 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 读取的是同一份数据，不需要每次临时抓网页。

flowchart LR A[Wot UI 文档与源码] --> B[离线组件知识库] B --> C[CLI] B --> D[MCP Server] E[Agent Skills] --> F[AI Agent] D --> F C --> G[开发者 / 脚本 / CI]

我更看重的是这里面的分工：Skills 管做事方法，MCP 管取数，CLI 管验证。它们不是什么三选一，用在一起才顺手。

第一层：给 AI 一套能落地的 Skills

如果把大模型比作一个刚加入项目的新同事，Skills 有点像我们给他准备的开发手册。

它不只是说一句"请熟练使用 wot-ui"，而是把查询顺序、代码约束、常见坑和执行步骤都写清楚。比如生成一个 wot-ui 页面时，Agent 应该先确认组件，再查 API 和 demo；涉及主题时优先使用 ConfigProvider 与 CSS 变量；修改完成后，还要检查项目中的实际用法。

Open Wot 目前提供 6 个 Skills：

Skill	能做什么
`wot-ui-v2`	组件选型、API 查询、页面生成和常见问题排查
`wot-ui-cli`	使用与调试 `@wot-ui/cli`、配置 MCP
`wot-ui-unocss-preset-guide`	接入和排查 `@wot-ui/unocss-preset`
`create-wot-ui-theme`	按约定生成可维护的单文件 SCSS 主题
`migrate-v1-to-v2`	扫描并辅助迁移 v1 包名、组件 API、表单和样式
`starter-cleaner`	把 wot-starter v2 清理成最小可开发状态

安装也比较简单：

bash 复制代码

pnpx skills add wot-ui/open-wot

# 也可以使用 npx
npx skills add wot-ui/open-wot

安装时可以按需选择，不用把所有 Skill 一股脑搬进项目。

我自己很喜欢迁移和主题这两个场景，因为它们特别适合交给 Skill。比如 v1 升 v2，并不是把 wot-design-uni 替换成 @wot-ui/ui 就结束了。wd-message-box、useMessage、表单校验和一些组件属性都发生了变化。把这些差异、扫描方式和回归清单放进 Skill，Agent 才知道接下来该查什么、改什么。

第二层：把组件文档变成可查询的 CLI

Skills 解决"怎么做"，准确的组件知识则由 @wot-ui/cli 提供。

先全局安装 CLI，当前要求 Node.js 20 或更高版本：

bash 复制代码

npm install -g @wot-ui/cli

装好以后就能直接使用 wot 命令：

bash 复制代码

# 看看有哪些组件
wot list

# 查询 Button 的属性、事件、插槽和 CSS 变量
wot info Button

# 查看 Button 的 demo 列表
wot demo Button

# 获取完整文档和主题变量
wot doc Button
wot token Button

# 查看更新记录
wot changelog

这些命令不只给人看，也支持 JSON 输出，脚本和 Agent 可以直接消费结构化结果：

bash 复制代码

wot info Button --format json

还有一个很容易被忽略的问题：版本。

AI 明明回答过这个组件，代码放进你的项目却不工作，很多时候不是 API 完全错了，而是版本没对上。Open Wot 会尝试从项目的 node_modules/@wot-ui/ui 或 package.json 中识别版本，也可以手动指定：

bash 复制代码

# 自动使用 2.0 下最新的 patch 版本
wot info Button --version 2.0

# 锁定精确版本
wot info Button --version 2.0.4

# 始终查询最新稳定版
wot info Button --version latest

这样问"Button 怎么用"时，答案终于不用建立在"大家说的是同一个版本"这个美好愿望上了。

第三层：通过 MCP 把知识交给 Agent

如果每次都要我们手动运行命令，再把结果复制给 AI，那多少还是有点不够 AI。

Open Wot 内置了 MCP Server。把下面配置加入支持 MCP 的客户端，Agent 就能自行调用组件查询工具：

json 复制代码

{
  "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 还提供了三个项目分析命令：

bash 复制代码

# 检查依赖、运行环境和基础集成情况
wot doctor .

# 统计 .vue 文件中的 wd-* 组件使用情况
wot usage .

# 检查未知组件、空按钮等问题
wot lint .

usage 很适合在升级和重构前摸底，lint 会把问题定位到具体文件。对于 Agent 来说，这就像写完代码以后终于有人喊它回来验收，而不是生成完最后一个代码块就潇洒离场。

为什么我们要做 Open Wot

Wot 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 v2
usage 和 lint 主要扫描 .vue 文件中的 <wd-*> 标签及相关 import
lint 规则还不算多，现阶段更适合做组件库专项检查，不能代替 ESLint 和完整测试
Skills 能让 Agent 更熟悉流程，但最终结果仍然需要结合业务需求验收

这不是万能外挂，不过已经能解决一批很具体的问题。后面我们会继续补充组件规则、项目检查和更多 AI Coding 场景。

如果你正在使用 wot-ui v2，可以从安装一个 Skill 或运行一次 wot info Button 开始。遇到问题欢迎提 Issue，有新的 Skill 想法也欢迎一起贡献。

觉得项目有点意思的话，也请帮我们点个 Star。开源项目的快乐有时候就这么朴素。

AI 写 wot-ui 总在猜 API？我们把 Skills、MCP 和 CLI 都配好了

Open Wot 到底是什么？

第一层：给 AI 一套能落地的 Skills

第二层：把组件文档变成可查询的 CLI

第三层：通过 MCP 把知识交给 Agent

不只查文档，它还能检查你的项目

为什么我们要做 Open Wot

目前的边界

相关资源