企业官网建设流程全解析

在 Zed 中接入 daisyUI MCP Server：Blueprint、Context7 与 GitMCP 三种方案配置实战

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

daisyUI 在 Zed 中通过 MCP（Model Context Protocol）向 AI 模型提供 daisyUI 组件、主题与配置的准确上下文，让 AI 依据提示词生成正确的 daisyUI 代码。本文基于 daisyUI 官方文档 Zed 接入指南/docs/mcp/zed/+page.md)，完整讲解 Blueprint（官方推荐）、Context7 与 GitMCP（免费第三方）三种方案的配置 JSON、环境变量与使用方式，并带你定位仓库内对应的源码与配置作为佐证，读完即可在 Zed 中落地任一种方案。

MCP 是什么，为什么 Zed 需要它

MCP 是一种与 AI 模型通信的 API 标准。Zed 内置的 Agent 功能允许你添加 MCP Server（即实现该协议、为 AI 模型提供必要信息的工具），Zed 会与这些 Server 通信以获取更准确的结果。daisyUI 官方文档在 MCP 接入总览页/docs/mcp/+page.md) 中对这一机制的定义是："MCP servers are tools that implement this protocol and provide AI models with the necessary information to generate accurate code based on your prompts"——即 MCP Server 负责把 daisyUI 的组件语法、主题变量等知识"喂"给 AI，避免模型凭记忆生成过时或错误的类名。

在 Zed 的官方支持清单中，daisyUI 通过 docs/mcp/+layout.server.js/docs/mcp/+layout.server.js) 定义了 12 种编辑器/工具的接入文档，其中 Zed 的条目为{ name: "Zed", slug: "zed", icon: "zed.webp" }，本文对应的就是该zed子页面。

根据官方文档，Zed 一共有3 种可选方案：

Zed 中添加 Context Server 的通用操作

无论选择哪种方案，第一步操作完全相同：

1. 在 Zed 中按下快捷键打开命令面板：⌘ CMD+⇧ Shift+P（macOS），或Ctrl+Shift+P（Windows/Linux）；
2. 选择agent: add context server命令；
3. 在弹出的配置中粘贴对应方案的 JSON 配置。

下面逐一给出三种方案的完整配置与使用说明。

方案一：daisyUI Blueprint（官方 MCP Server，推荐）

Blueprint 是 daisyUI 官方的 MCP Server，文档标注为推荐方案（Recommended for best results）。仓库中 packages/blueprint/mcp.json 提供了 Blueprint 的标准 MCP 配置模板，可作为参考：

{ "mcpServers": { "daisyui-blueprint": { "command": "npx", "args": ["-y", "daisyui-blueprint@latest"], "env": { "LICENSE": "YOUR_LICENSE_KEY", "EMAIL": "YOUR_EMAIL", "FIGMA": "YOUR_FIGMA_API_KEY" } } } }

配置步骤

1. 获取 License：访问 Blueprint 授权页面购买并获取 License 授权（官方 Blueprint 落地页/blueprint/+page.svelte) 提供月度、季度与终身三种套餐）。官方针对 Zed 的专项安装页 blueprint/zed/+page.md/blueprint/zed/+page.md) 的第一步同样是"Get a Blueprint license key"；
2. 按上文通用操作打开agent: add context server，粘贴下述配置，并填入你自己的license key与email address：

{ "daisyui-blueprint": { "command": "npx", "args": ["-y", "daisyui-blueprint@latest"], "env": { "LICENSE": "YOUR BLUEPRINT LICENSE KEY", "EMAIL": "YOUR EMAIL ADDRESS", "FIGMA": "YOUR FIGMA API KEY (optional)" } } }

环境变量说明

• LICENSE：必填，你的 Blueprint 授权密钥，用于激活 MCP Server；
• EMAIL：必填，购买授权时登记的邮箱地址；
• FIGMA：可选，Figma API Key，仅在需要 Figma 设计稿转代码（Figma-to-code conversion）时才需要配置。

从配置可以看出，daisyui-blueprint包通过npx -y daisyui-blueprint@latest启动，即由 npx 临时拉取最新版本运行，因此本机需要具备 Node.js/npx 环境。

使用方式

配置完成后，向 AI 提问 daisyUI 相关问题，并在提示词末尾追加use Blueprint MCP，AI 便会调用该 Server 获取资源。官方示例：

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

官方 blueprint/zed/+page.md/blueprint/zed/+page.md) 也强调："After configuring the server, tell the AI model to use Blueprint MCP"——即配置本身不会自动生效，必须显式指示 AI 使用。

Blueprint 的工作机制（仓库佐证）

Blueprint 并非简单地把文档丢给模型，而是通过六个 MCP 工具分步引导 LLM 完成任务。官方文档 blueprint/workflow/+page.md/blueprint/workflow/+page.md) 完整描述了这一流程：

1. Setup Expert：读取项目，提供框架、依赖、Tailwind/daisyUI 安装指引、配置、主题、颜色、字体、图标与文件结构等项目级上下文，避免 LLM 臆测项目环境；
2. Rules Enforcer：加载组件实现与语法、可访问性、响应式、主题、媒体与代码质量等约束，防止 LLM 跳过难执行的规则；
3. Creative Director：提供产品内容、受众、UX、原创性、配色、排版、设计趋势与动效等创意方向；
4. Page Architect：从 211 种页面架构中匹配合适的方案，涵盖页面目的、结构、内容顺序、用户目标、交互状态与边界情况；
5. Component Syntax Expert：按需检索 daisyUI 组件的准确结构、类名、变体、尺寸、状态与代码片段；
6. Quality Inspector：对最终代码做质量审计，发现问题要求 LLM 修复后才能算完成。

这一"分步供给资源 + 最终质检"的工作流，正是 Blueprint 与纯文档检索类 MCP 的核心差异。

方案二：Context7（免费第三方 MCP Server）

Context7 是免费的第三方 MCP Server，无需 License。

配置步骤

1. 打开agent: add context server；
2. 粘贴以下配置：

{ "context7": { "command": "npx", "args": ["-y", "@upstash/context7-mcp@latest"] } }

该配置通过npx -y @upstash/context7-mcp@latest启动 Context7 的官方 MCP 包，无需任何环境变量。

使用方式

在 Zed 的Agent Mode（Agent 模式）下向 AI 提问 daisyUI 相关问题，并在提示词末尾追加use context7。官方示例：

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

方案三：daisyUI GitMCP（免费第三方 MCP Server）

daisyUI GitMCP 同样是免费第三方方案，它通过mcp-remote远程连接 GitMCP 托管的 daisyUI 仓库索引。

配置步骤

1. 打开agent: add context server；
2. 粘贴以下配置：

{ "daisyui-github": { "command": "npx", "args": ["-y", "mcp-remote", "https://gitmcp.io/saadeghi/daisyui"] } }

使用方式

同样在Agent Mode下直接向 AI 提问 daisyUI 相关问题即可，无需追加特殊标记词。官方示例：

give me a light daisyUI 5 theme with tropical color palette

三种方案选型建议

• 追求最佳生成效果：选择 Blueprint。它是官方维护、与 daisyUI 版本同步更新的方案，数据由官方编写与校验，并提供上述六工具工作流、Figma 转码、图片生成主题等增强能力，但需要 License；
• 零成本快速体验：选择 Context7 或 GitMCP，两者均免费、无需任何密钥，配置也只有两三行 JSON，适合先验证 MCP 链路是否打通；
• 需要 Figma 设计稿转 daisyUI 代码：只有 Blueprint 支持（配置FIGMA环境变量）。

官方 Blueprint 落地页/blueprint/+page.svelte) 中有一张完整的对比表，从数据来源、资源准确性、是否包含无关上下文、创意方向、页面架构、Figma 转换、token 消耗效率等维度对比了 Blueprint、daisyUI Skill、Context7 与 GitMCP 四者，可作为选型时的参考资料。

在仓库中继续深入研究

• Zed 接入官方文档/docs/mcp/zed/+page.md)：本文主体文档，包含三种方案的完整 JSON 与使用示例；
• Blueprint MCP 标准配置：mcpServers.daisyui-blueprint的通用配置模板（适用于任意支持 MCP 的工具）；
• Blueprint 的 Zed 专项安装页/blueprint/zed/+page.md)：授权流程与配置说明的独立版本；
• Blueprint 工作流文档/blueprint/workflow/+page.md)：六工具分步机制的详细原理；
• MCP 接入总览页/docs/mcp/+page.md) 与 编辑器清单/docs/mcp/+layout.server.js)：查看全部支持的工具列表，VSCode Copilot、Claude Code、Cursor、Windsurf 等均有对应接入文档；
• daisyUI 组件源码 与 主题源码：接入 MCP 后，AI 所依据的组件类名与主题变量均来源于这些目录。

无论选择哪种方案，核心流程都是一致的：通过命令面板添加 Context Server → 粘贴对应 JSON 配置 → 在提示词中指示 AI 使用该 MCP。配置成功后，Zed 中的 AI 就能基于 daisyUI 的准确组件与主题规范生成代码，显著减少凭记忆编造类名导致的返工。

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