daisyUI Blueprint MCP for Cursor为 Agent Mode 注入按需组件上下文的 UI 设计 MCP 服务器接入指南【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyuidaisyUI Blueprint MCP 是 daisyUI 官方提供的 MCPModel Communication Protocol服务器实现用于在 Cursor 的 Agent Mode 中按需提供 daisyUI 组件、主题与布局的准确上下文。本文从其在packages/docs中的官方用法说明出发结合仓库中的 Blueprint MCP 配置文件packages/blueprint/mcp.json与 Cursor 接入文档packages/docs/src/routes/(routes)/docs/mcp/cursor/page.md/docs/mcp/cursor/page.md)完整讲解安装配置、环境变量、目标示例与提示词写法帮助你把「组件规则」从每次提示词中剥离出去让 AI 生成更可靠的 daisyUI 界面。为什么要给 Cursor 配一个 UI 设计 MCP 服务器Cursor 运行在编辑器内部它的优势是从提示词到代码的转换速度极快。但当仓库中存在多种 UI 实现风格时「速度」并不能保证「正确性」——Agent 需要在组件、主题、重复出现的布局片段上有一个可信的单一事实来源source of truth。UI design MCP server 解决的核心问题是把「界面请求」与「设计参考」分离。你只描述目标界面例如管理后台布局、结账流程或数据看板而组件上下文class 命名、结构约定、主题取值由 MCP 服务器按需提供。Cursor 的 Agent Mode 不再需要你在每条消息里反复粘贴组件规则而是在构建屏幕的过程中动态获取它需要的细节。这一点在仓库的官方说明中被明确为 Blueprint MCP 的定位给 Agent Mode 一个「聚焦的 daisyUI 上下文来源」详见 cursor 组的官方页面/(marketing)/(groups)/cursor/reduce-token-usage/page.md)Instead of pasting component rules into every request, Cursor can connect to Blueprint MCP and fetch the details it needs while building the screen.何时应该使用 MCP 方案在 Cursor 使用 token 优化路径/(marketing)/(groups)/cursor/reduce-token-usage/page.md) 中daisyUI 为 Cursor 提供了三种可复用的上下文注入方式MCP 只是其中一种路径适用场景Skill技能只是偶尔需要 UI 辅助成本最低Plugin插件希望通过 Cursor 的 Settings → Plugins 管理配置MCP 服务器经常生成较大页面、希望保持提示词短小精炼MCP 是三者中与「大屏生成 短提示词」诉求最匹配的方案把日常提示词中反复出现的「主按钮长什么样、卡片怎么组织、alert/modal 的语义」从对话里移除交给按需拉取的服务器上下文。一个典型的目标示例原文档用一个drawer布局演示了最终想要达成的代码形态div classdrawer lg:drawer-open input idnav typecheckbox classdrawer-toggle / div classdrawer-contentDashboard content/div aside classdrawer-sideNavigation/aside /div这里用到的是 daisyUI 的 drawer 组件drawer-toggle复选框控制开合、drawer-content承载主内容、drawer-side承载侧边导航配合lg:drawer-open在桌面端保持展开。在 packages/daisyui/src/components/drawer.css 中可以看到这些 class 是组件库内建的 CSS 规则而非手写布局。原文档强调了一个判断标准一个具名的nameddrawer比手工拼装的侧边栏更容易被 Cursor 后续修订。Agent 只需要知道「用 daisyUI 的 drawer」就能稳定命中既有的组件规则而不是每次重新发明一套结构。在 Cursor 中安装 Blueprint MCP配置样例完整继承自官方说明将下面的 JSON 写入 Cursor 的用户级配置文件~/.cursor/mcp.json{ mcpServers: { daisyui-blueprint: { type: stdio, command: npx, args: [-y, daisyui-blueprintlatest], env: { LICENSE: YOUR BLUEPRINT LICENSE KEY, EMAIL: YOUR EMAIL ADDRESS, FIGMA: YOUR FIGMA API KEY (optional) } } } }这份配置与仓库内packages/blueprint/包自带的 packages/blueprint/mcp.json 完全同构后者是包级样例字段为YOUR_LICENSE_KEY/YOUR_EMAIL/YOUR_FIGMA_API_KEY可以作为分发到其他工具前的参照模板。核心字段说明type: stdio以标准输入输出协议与本机 MCP 服务器通信command: npxargs: [-y, daisyui-blueprintlatest]通过 npm 直接拉取并运行最新版daisyui-blueprint无需全局安装env服务器启动时注入的鉴权与能力开关见下表。环境变量含义变量是否必填说明LICENSE必填你的 Blueprint 许可证密钥Blueprint License Key。官方 Cursor 接入文档要求先获取 Blueprint License/blueprint/checkout/)再填写密钥EMAIL必填与许可证关联的邮箱地址FIGMA选填Figma API Key仅在需要 Figma 设计稿转代码Figma-to-code时启用注意官方接入文档特别注明若不需要 Figma 转码可以留空 FIGMA 字段。两种安装操作路径结合 Cursor 官方接入文档/docs/mcp/cursor/page.md)Blueprint 的安装有两种方式自动安装推荐通过 Cursor 提供的「Install MCP Server」入口一键生成daisyui-blueprint配置然后在 MCP 设置表单中填入上述三个环境变量该自动配置的等价 JSON 即为上面样例。手动安装在 Cursor 中按⌘ CMD ⇧ Shift PWindows/Linux 为Ctrl Shift P打开命令面板选择MCP: Open MCP Settings将上面的 JSON 写入并把license key与email address替换为真实值。使用方法让提示词保持简短配置完成后在 Agent Mode 中正常提问并在提示词末尾追加use Blueprint MCPAgent 就会主动向该服务器拉取所需的 daisyUI 上下文。原文档给出了可直接套用的目标提示词形态Build a responsive admin layout with daisyUI. use Blueprint MCP官方文档中另一个主题示例同样遵循这一约定give me a light daisyUI 5 theme with tropical color palette. use Blueprint MCP其核心工作方式可以概括为Agent 收到的是「目标 状态 文件位置」设计参考组件规则、主题约定、布局模式则来自 MCP 服务器按需返回的内容从而保证 daisyUI 生成结果的一致性与正确性。深入理解MCP 服务器在 daisyUI 生态中的位置从 packages/docs/src/routes/(routes)/docs/mcp/page.md/docs/mcp/page.md) 的定义来看MCP 是一套「与 AI 模型通信的 API 标准」而 MCP 服务器是实现了该协议、为模型提供生成准确代码所需信息的工具。daisyUI 的 MCP 能力同时覆盖了多个编辑器Claude、Codex、Cline、Windsurf、Zed 等均在docs/mcp/下有对应接入文档Cursor 只是其中一条链路。在 Cursor 场景下官方文档列出了三个 MCP 来源选项Blueprint——daisyUI 官方 MCP 服务器官方推荐用于获得最佳结果本文主题Context7——第三方免费 MCP 服务器通过upstash/context7-mcp提供daisyUI GitMCP——基于仓库的第三方免费 MCP 服务器。从仓库源码结构看daisyUI 组件上下文的「本体」沉淀在两层组件 CSS 源码位于 packages/daisyui/src/components/对应各组件文档目录中出现的drawer.css、button.css、alert.css等文件而语义化、可被 Agent 检索的说明则落在 skills/daisyui 的组件文档如 components/alert.md、components/button.md与 docs 内容中。Blueprint MCP 服务器相当于在这两层知识与 Cursor 之间建立了一个按需、聚焦的访问通道这正是「UI 请求」与「设计参考」分离能够落地的底层依据。从源码与文档进一步追踪packages/blueprint/mcp.jsonBlueprint MCP 服务器可分发的最小配置样例packages/docs/src/routes/(routes)/docs/mcp/cursor/page.md/docs/mcp/cursor/page.md)Cursor 官方接入全文含自动/手动安装与三种 MCP 来源对比packages/docs/src/routes/(routes)/(marketing)/(groups)/cursor/reduce-token-usage/page.md/(marketing)/(groups)/cursor/reduce-token-usage/page.md)Skill / Plugin / MCP 三种低 token 上下文路径的选型对照packages/daisyui/src/components/drawer.css示例目标中 drawer 组件的真实 CSS 实现。实际使用时请依据你购买的 Blueprint 许可证环境填写LICENSE与EMAIL并按需决定是否配置FIGMA若只需要低频 UI 辅助而尚未使用 Blueprint也可先评估 Skill 或第三方 MCP 方案再决定是否切换为官方 Blueprint 以获得最佳生成效果。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考