用 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 供我们使用：

llms.txt：包含最核心的信息和外部链接，适合快速获取概要和官方资源，链接是 wot-design-uni.cn/llms.txt
llms-full.txt：包含完整全面的详细信息，适用于需要深入了解组件实现和用法的场景，链接是 wot-design-uni.cn/llms-full.t...

以 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 排版