在 OpenClaw 中接入 daisyUI Blueprint MCP Server:许可证配置、CLI 安装与使用指南

【免费下载链接】daisyui 🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library 【免费下载链接】daisyui 项目地址: https://gitcode.com/GitHub_Trending/da/daisyui

daisyUI 官方为 AI 编程助手提供了基于 MCP(Model Context Protocol)的 daisyUI Blueprint 服务端,让 LLM 在生成页面时能拿到准确的 daisyUI 组件语法、设计规则与项目级上下文,从而替代"凭训练数据猜测类名"的低质量产出。本文以 OpenClaw 为目标客户端,完整讲解从获取许可证、通过 openclaw mcp set 注册服务端,到在提示词中激活 Blueprint 的端到端流程,并附带仓库内可复现的 JSON 配置与排错要点。

为什么需要给 OpenClaw 配置 daisyUI Blueprint

LLM 默认状态下生成 daisyUI 界面时,往往会凭空捏造组件 class、忽略主题与响应式规则,产出"看起来像但用不了"的代码。MCP 是连接 AI 模型与外部工具的 API 标准,在 OpenClaw 中注册 MCP 服务端后,模型可以在回答前主动查询服务端提供的实时资料。

daisyUI 官方文档将其 MCP 服务端定位为三选一(详见 OpenClaw 的 daisyUI MCP 完整指南/docs/mcp/openclaw/+page.md)):

  1. Blueprint(官方推荐)/blueprint/+page.svelte):daisyUI 官方的 MCP 服务端,效果最好;
  2. Context7:免费的第三方 MCP 服务端;
  3. daisyUI GitMCP:免费的第三方 MCP 服务端。

Blueprint 之所以效果更佳,是因为它不只提供一份静态文档:按照 How Blueprint MCP Works/blueprint/workflow/+page.md) 的说明,它以六个相互协作的 MCP 工具(Setup Expert、Rules Enforcer、Creative Director、Page Architect、Component Syntax Expert、Quality Inspector)引导 LLM 分步完成任务,先确认项目环境与规则、再规划整页结构、最后用质量检查器列出需修复的问题清单——这正适合放在 OpenClaw 这类自主性较强的 Agent 环境中使用。

安装前提

开始之前,请确认:

  • 本机已安装 OpenClaw CLI(下述命令均通过终端执行);
  • 拥有可用的 daisyUI Blueprint 许可证(license key);
  • 用于激活许可证的 邮箱地址
  • 网络可访问 npm registry,因为服务端通过 npx 按需拉取。

第 1 步:获取 Blueprint 许可证

Blueprint 是一个需要许可证的商业 MCP 服务,license key 用于在启动时校验授权。请先通过 Blueprint 的 checkout 流程获取属于你自己的 license key 与对应激活邮箱,后续配置中 LICENSEEMAIL 必须与购买信息一致。

第 2 步:用 CLI 注册 MCP 服务端

OpenClaw 提供 openclaw mcp set 命令来动态注册服务端,文档给出的完整命令如下:

openclaw mcp set daisyui-blueprint \
  '{"command":"npx","args":["-y","daisyui-blueprint@latest"],"env":{"LICENSE":"YOUR_LICENSE_KEY","EMAIL":"YOUR_EMAIL","FIGMA":"YOUR_FIGMA_API_KEY"}}'

执行成功后,名为 daisyui-blueprint 的 MCP 服务端即被写入 OpenClaw 的本地配置。

配置参数逐项拆解

把上面的 JSON 单独拆开,每个字段的含义如下:

字段说明
commandnpx通过 Node.js 包执行器启动服务端,要求本机装有 Node.js/npm
args["-y", "daisyui-blueprint@latest"]-y 跳过交互式确认,始终拉取 npm 上最新的 daisyui-blueprint
env.LICENSEYOUR_LICENSE_KEY必填,你在第 1 步获取的 Blueprint 许可证密钥
env.EMAILYOUR_EMAIL必填,购买许可证时使用的邮箱地址,用于激活校验
env.FIGMAYOUR_FIGMA_API_KEY可选,仅当需要 Figma 设计稿转 daisyUI 代码时才填写

这三项环境变量的含义在仓库里有明确的旁证:

  • packages/blueprint/mcp.json 内置了一份同构的服务端参考配置,二者结构完全一致,均可作为 Claude Desktop 等客户端的 mcpServers 配置底稿;
  • Blueprint 的 Claude 安装文档/blueprint/claude/+page.md) 中使用同样的 "command": "npx" + "args": ["-y", "daisyui-blueprint@latest"] 结构与 LICENSE / EMAIL / FIGMA 三个环境变量,说明这套 JSON 是跨客户端的通用配置;
  • Figma API 配置文档/blueprint/figma/+page.md) 明确指出 FIGMA 仅服务于 Figma 到 daisyUI 的代码生成,需要额外在图谱中创建含 file_content:readfile_metadata:readlibrary_assets:read 等权限的 Personal Access Token。

第 3 步:让 AI 模型使用 Blueprint MCP

注册成功后并不会自动生效——OpenClaw 的用法是在提示词末尾显式声明要使用哪个 MCP 服务端,文档给出的示例为:

give me a light daisyUI 5 theme with tropical color palette. use Blueprint MCP

即在对话结尾追加 use Blueprint MCP,模型就会在本次回答中调用 daisyui-blueprint 服务端获取资料。同样的约定也适用于该页中展示的另外两个免费选项:Context7 对应 use context7,GitMCP 对应 use daisyui-gitmcp

验证与排错要点

配置完成后可尝试以下检查路径:

  1. 确认服务端已注册:在 OpenClaw 中列出已注册的 MCP 服务端,应能看到 daisyui-blueprint
  2. 首次启动会联网拉包npx -y daisyui-blueprint@latest 首次执行需要从 npm 下载,若长时间无响应,先确认网络与 npm 源可用;
  3. License 校验失败:重点核对 LICENSEEMAIL 是否与购买信息一致、有无多余空格;
  4. 模型没有使用 MCP:OpenClaw 中须在提示词末尾显式写入 use Blueprint MCP,否则模型可能直接按训练记忆作答。

进阶:升级到整页级 UI 生成

如果你希望 Blueprint 不只是补全单个组件,而是生成完整页面,可以关注其版本演进:Blueprint changelog/blueprint/changelog/+page.md) 记录 v1.5 起新增了 Setup Expert、Rules Enforcer、Creative Director、Page Architect 与 Quality Inspector 等工具,并将 Tailwind CSS、Bootstrap、Screenshot to daisyUI 等提示词也封装为 MCP 工具;v1.6 则更新了 MCP SDK 并修复了 Claude Desktop 的 JSON Schema 问题。安装时使用 daisyui-blueprint@latest 即可始终跟随这些能力更新。

小结

在 OpenClaw 中使用 daisyUI Blueprint 的完整路径可以概括为三步:先到 Blueprint checkout 取得许可证,再用 openclaw mcp set daisyui-blueprint 一行命令完成注册(LICENSEEMAIL 必填,FIGMA 按需填写),最后在每一条与 daisyUI 相关的提示词末尾追加 use Blueprint MCP。这套流程与仓库内置的 mcp.json 参考配置一一对应,配置完成后即可让 OpenClaw 稳定产出语法准确、规则合规的 daisyUI 代码。

【免费下载链接】daisyui 🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library 【免费下载链接】daisyui 项目地址: https://gitcode.com/GitHub_Trending/da/daisyui

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐