
如何在 Claude Code 配置 daisyUI MCP 服务器生成正确的 daisyUI 代码【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui如果你在 Claude Code 里让 AI 写 daisyUI 代码直接提问往往拿到的是模型记忆里的旧语法或自创 class。解决方式是给 Claude Code 挂一个 daisyUI MCP 服务器Claude 会通过 MCP 协议向服务器请求组件结构和主题规则再基于这些信息生成代码。daisyUI 文档为此提供三条配置路径——官方 MCP 服务器 Blueprint文档标注 Recommended for best results、免费的第三方 Context7、以及免费的第三方 daisyUI GitMCP。本文按“选路径 → 添加服务器 → 在提示词中触发 → 验证生成结果”的顺序给出可执行的配置步骤。先选一条 MCP 路径文档把三个选项按用途区分如下选项性质前置条件触发方式BlueprintdaisyUI 官方 MCP 服务器文档推荐需要 Blueprint License付费含 3 天免费试用选项提示词末尾写use Blueprint MCPContext7免费第三方 MCP 服务器无提示词末尾写use context7daisyUI GitMCP免费第三方 MCP 服务器无直接提问无需后缀如果不想先购买授权Context7 或 GitMCP 可以立即开始如果追求文档所说的最佳结果走 Blueprint 主路径。主路径配置 Blueprint MCP 服务器第 1 步获取 Blueprint License到 daisyUI 官网购买 Blueprint License 后你会收到一封包含 license key 的邮件文档 FAQ 提示如果没看到邮件先查垃圾邮件文件夹仍找不到可以邮件联系 helpdaisyui.com。第 2 步在 Claude Code 中添加服务器运行下面这条命令把三处占位值替换成你自己的值claude mcp add daisyui-blueprint \ --env LICENSEYOUR_LICENSE_KEY \ --env EMAILYOUR_EMAIL \ --env FIGMAYOUR_FIGMA_API_KEY \ -- npx -y daisyui-blueprintlatest占位值替换说明LICENSE上一步邮件里的 license key必选EMAIL你购买时使用的邮箱必选FIGMAFigma API Key可选只在需要 Figma-to-code 转换时才要不需要时可以删掉整行--env FIGMA...。命令中--之后是服务器启动方式npx -y daisyui-blueprintlatest表示通过 npx 拉取最新版 Blueprint MCP 包运行。可选分支配置 Figma API Key仅 Figma 转代码需要如果你要把 Figma 设计稿转成 daisyUI 代码按 Figma API 文档/blueprint/figma/page.md) 操作在 Figma 中进入 Settings Security Personal Access Tokens Generate new token需要的权限是file_content:read、file_metadata:read、library_assets:read、library_content:read、team_library_content:read、file_dev_resources:read把 token 填进 Blueprint MCP 的FIGMA环境变量。文档给出的服务器配置示例如下LICENSE、EMAIL、FIGMA替换为你的实际值daisyui-blueprint: { type: stdio, command: npx, env: { LICENSE: YOUR LICENSE KEY, EMAIL: YOUR EMAIL, FIGMA: YOUR FIGMA API KEY } }在 Figma 中右键选中区域选择 Copy/Paste as Copy link to selection把链接粘贴给 Claude Code要求它按该设计生成 daisyUI 代码。注意文档明确标注 Figma 转换是实验性功能如果结果不准确尝试更小范围的设计片段或简化设计。替代路径免费第三方 MCP 服务器Context7两种添加方式选其一。HTTP transportclaude mcp add --transport http context7 https://mcp.context7.com/mcp本地服务器连接文档标注 its localclaude mcp add context7 -- npx -y upstash/context7-mcpdaisyUI GitMCP只有一条命令使用 HTTP transportclaude mcp add --transport http daisyui https://gitmcp.io/saadeghi/daisyui使用与验证在提示词中触发 MCP配置完成后验证方式就是发一条真实的 daisyUI 提示词并让模型走 MCPBlueprint提示词末尾必须写use Blueprint MCPContext7提示词末尾写use context7GitMCP直接提问即可无需后缀。文档给出的示例提示词可直接照抄验证give me a light daisyUI 5 theme with tropical color palette. use Blueprint MCP发送后模型调用 MCP 服务器返回 daisyUI 资源和规则并生成代码。使用 Blueprint 时文档描述的流程是六个工具依次向模型提供资源Setup Expert框架与安装信息、Rules Enforcer组件语法、可访问性、响应式等规则、Creative Director、Page Architect211 种页面架构、Component Syntax Expert当前版本的组件结构与 class 名、Quality Inspector对成品源码做最终检查。最后一步由模型修复 Quality Inspector 报告的问题并确认结果——也就是说当模型在回复中体现了对规则清单和资源的应用、并按检查清单完成了修复说明 MCP 链路已经在工作。限制与已知边界Blueprint 需要有效 licensedaisyui-blueprintlatest会自动跟随 daisyUI 更新新工具、资源和提示词自动加入文档 FAQ 说明。Context7 与 GitMCP 的数据来自第三方抓取文档对比表指出它们无法为 daisyUI 做微调资源准确性依赖爬取内容Blueprint 的数据则标注为 Authored verified。Figma-to-code 属于实验性功能只在使用该功能时才需要配置FIGMA环境变量。更多 MCP 用法细节以 Claude Code 官方文档为准daisyUI 文档中给出了指向 Claude Code MCP 文档的引用。相关文档MCP 设置总入口/docs/mcp/page.md)Claude Code MCP 配置文档/docs/mcp/claudecode/page.md)Blueprint for Claude Code 安装文档/blueprint/claudecode/page.md)Blueprint 工作流程说明/blueprint/workflow/page.md)Figma API 配置文档/blueprint/figma/page.md)【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考