用 AI 驱动 wot-design-uni 开发小程序

背景

wot-design-uni 是当前 uni-app 生态中最受欢迎的 UI 组件库之一。然而,主流 AI 工具对其了解有限,导致开发过程中难以获得精准的智能辅助。本文以 Cursor 编辑器为例,系统介绍如何为 AI 提供 wot-design-uni 的最新知识,提升小程序开发效率。

llms.txt & llms-full.txt

llms.txt 和 llms-full.txt 是专为 AI 设计的知识文件格式,内容由库作者或社区维护,旨在为 AI 提供权威、结构化的技术信息。

wot-design-uni 官方提供了最新版本相应的 llms.txt 和 llms-full.txt 供我们使用:

以 Cursor 为例,使用以下的提示词,让我们使用 Claude 4 Sonnet 测试一下:

复制代码
wot-design-uni 中,CalendarDayType 类型的可选值 multiple-selected,要求的最低版本是什么?

这个问题的答案是 1.5.0。不出所料,它并没有能找到对应的结果。

如果我们在提示词里面加上链接呢?

arduino 复制代码
使用 wot-design-uni 提供的 llms-full.txt https://wot-design-uni.cn/llms-full.txt

wot-design-uni 中,CalendarDayType 类型的可选值 multiple-selected,要求的最低版本是什么?

😱 它还是没能找到对应的结果!但实际上,这是 Claude 4 Sonnet 的一个局限,它并不能真正地浏览网页!如果你使用的是 GPT 4.1,就不会出现这个问题。

但是,Claude 4 Sonnet 在编程上的表现比 GPT 4.1 要更好一些,所以我更倾向于继续使用 Claude 4 Sonnet。既然 Claude 4 Sonnet 无法真正地读取浏览器网页,我们可以增加 MCP,来辅助它真正地浏览网页。

让我们来更新 ~/.cursor/mcp.json,增加 fetch MCP,确保 mcpServers 下面包含 fetch 相关配置。启用 fetch MCP 后,Claude 4 Sonnet 就可以真正地读取浏览器网页了。

json 复制代码
{
  "mcpServers": {
    "fetch": {
      "command": "uvx",
      "args": ["mcp-server-fetch"]
    }
  }
}

⚠️请注意:这需要你本地安装了 uv 并全局可用,你也可以查看 fetch MCP 文档,里面还提供了使用 Docker 的方法,但这里不再做相关展示。

添加 fetch MCP 之后,让我们再次来询问 Claude 4 Sonnet。

arduino 复制代码
使用 fetch MCP 获取 wot-design-uni 提供的 llms-full.txt https://wot-design-uni.cn/llms-full.txt

wot-design-uni 中,CalendarDayType 类型的可选值 multiple-selected,要求的最低版本是什么?

🎉 多亏了 fetch MCP,Claude 4 Sonnet 这次可以实际获取到网页内容了,最终也给出了正确答案 1.5.0!

如果你不想使用 fetch MCP,你也可以添加 Cursor Docs,或者使用 Repomix 将 wot-design-uni 代码仓库打包成文件,再将 Cursor Docs 或者 Repomix 打包出来的文件附加到对话中即可。

⚠️请注意:这两种方式存在一定的不稳定性。Cursor Docs 依赖于 Cursor 的索引和解析机制,可能会因为解析或索引异常而无法获取到理想的文档内容。而打包出来的文件一般体积较大,容易超出 LLM 的上下文窗口,导致内容无法被完整解析。因此,这里不再展示更具体的操作,你可以自行探索一下。

综合考虑稳定性和效果,更推荐通过 fetch MCP 或者支持获取网页内容的 LLM 来使用 llms.txt 或 llms-full.txt。

context7 MCP

context7 是当前主流的 AI 代码文档索引服务,支持为 LLM 和代码编辑器(如 Cursor)提供最新的第三方库文档。

如果我们不想每次都附加 wot-design-uni 的 llms.txt 和 llms-full.txt 来获取知识,又或者是其它库没有提供 llms.txt 和 llms-full.txt,我们可以考虑使用 context7 MCP。

我们直接搜索 wot-design-uni,可以看到已经有相关的索引了,最后一次更新是 2 周前。如果没有相关的索引,我们需要点右上角的 Add Docs 手动添加。

我们可以尝试刷新一下,让 context7 索引和解析到最新的版本。刷新的过程会比较久,需要耐心等待。

我们也可以添加特定的版本,以满足特定版本的查询。

确认 context7 已经有相关版本的索引后,我们需要添加 context7 MCP。

我们继续以 Cursor 为例,让我们更新 ~/.cursor/mcp.json,增加 context7 MCP,确保 mcpServers 下面包含 context7 相关配置。

json 复制代码
{
  "mcpServers": {
    "context7": {
      "url": "https://mcp.context7.com/mcp"
    }
  }
}

使用以下的提示词,让我们使用 Claude 4 Sonnet 测试一下:

text 复制代码
使用 context7 MCP,wot-design-uni 中,CalendarDayType 类型的可选值 multiple-selected,要求的最低版本是什么?

🎉 Claude 4 Sonnet 也给出了正确的答案:1.5.0!比起使用 llms-full.txt 和 fetch MCP,使用 context7 MCP 达到了同样的效果,而且调用 Tool 的次数更少!唯一的缺点是,context7 目前不支持 API 调用来刷新索引,我们需要定期打开网站,刷新 wot-design-uni 相关索引。

比较

这两种为 AI 提供 wot-design-uni 的最新知识的方案各有优缺点,下面给出表格来进行比较。请根据具体场景来选择方案。

方案 准确性 适用场景 限制
llms.txt & llms-full.txt 官方提供支持 1. 需要官方维护,推荐搭配 fetch MCP 使用 2. 一般是最新版本,不支持特定版本
context7 MCP 1. 不希望每次都附加特定链接作为上下文 2. 官方没有提供 llms.txt & llms-full.txt 3. 需要特定版本的知识内容 1. 目前需要手动维护最新和特定版本的索引 2. 需要搭配 context7 MCP

本文以 Cursor 和 wot-design-uni 为例进行阐述,但思路互通,你可以把 Cursor 换成 Trae、VS Code 等编辑器,也可以把 wot-design-uni 换成其它库,请不要拘泥于具体例子,进行适度的发散 😉

希望本文能带给你一点启发和帮助!

欢迎关注我的 个人站、我的公众号 程序员想退休、我的掘金号 狗鸽 和我的知乎号 狗鸽,获取更多分享。

本文使用 markdown.com.cn 排版

相关推荐
灵感__idea12 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴1 小时前
Mix
前端·webgl
代码续发1 小时前
前端组件梳理
前端
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
源码_V_saaskw3 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端