企业官网建设流程全解析

Windsurf + daisyUI 配置指南：用 llms.txt 与 MCP 服务器让 AI 生成准确的 daisyUI 组件代码

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

在 Windsurf 编辑器中使用 AI 生成 daisyUI 页面时，最常遇到的问题是大模型凭记忆生成的组件类名过时、结构不完整。本文基于 daisyUI 官方文档（关联原文档/docs/editor/windsurf/+page.md)），完整讲解在 Windsurf 中接入 daisyUI 官方 llms.txt 文档与三种 MCP（Model Context Protocol）服务器的具体步骤，覆盖从零配置到落地验证的完整链路，读完后你可以在 Windsurf 聊天窗口中稳定生成语法准确的 daisyUI 5 组件与主题代码。

为什么 Windsurf 需要为 daisyUI 做专门配置

daisyUI 是一个基于 Tailwind CSS 的组件类库，提供了 button、card、modal、navbar 等数十个组件的类名组合，同时内置 30+ 主题。这些类名与主题变量会随版本迭代变化，仅靠模型训练记忆很容易生成过时或拼凑的错误代码。

Windsurf 内置的 Cascade AI 本身无法自动获得 daisyUI 的最新准确文档，因此 daisyUI 官方提供了一条让 AI 按需获取权威资料的路径，本文的核心是两条：

1. llms.txt 快速引用：把 daisyUI 全部文档的紧凑文本版喂给 AI；
2. MCP 服务器：让 Windsurf 与外部 API 通信，在对话时实时检索 daisyUI 资料，返回更准确的结果。

从本仓库源码可以看到，daisyUI 的 llms.txt 并非手写的单一文件，而是由服务端动态聚合生成的。llms.txt 生成入口 使用import.meta.glob批量加载 skills/daisyui 目录 下的官方 Skill 文档——包括安装、使用、配置、颜色/主题四个 SKILL.md，以及 components 目录下全部 60+ 组件指南——按固定顺序拼接后以text/plain返回，并自动注入alwaysApply: true与applyTo: "**"等运行期 frontmatter，使内容既能被人类阅读、也能被 AI 作为长期适用的指令直接消费。这也是它值得作为 AI 上下文来源的原因：内容与仓库源码、组件 CSS 实现保持同步。

快速使用：在对话中直接引用 llms.txt

最轻量的方式不需要任何配置文件，只需在 Windsurf 聊天窗口输入以下内容并附上你的需求即可：

@web https://daisyui.com/llms.txt

@web是 Windsurf 的网页引用指令，会将该 URL 指向的 llms.txt 内容注入当前对话上下文，AI 随后即可依据其中的组件结构与语法约束来生成代码。例如：

@web https://daisyui.com/llms.txt 给我一个带统计卡片的仪表盘首页，使用 daisyUI 5

这种方式适合临时提问，缺点是每次都需要显式引用。若你希望 Windsurf 长期具备 daisyUI 知识，推荐使用下面的 MCP 服务器方案。

方案一：daisyUI Blueprint（官方 MCP 服务器）

Blueprint 是 daisyUI 官方出品的 MCP 服务器，面向需要高质量生成结果的场景。它不仅仅是文档检索，还内置了组件语法专家、设计规则、页面架构库、Figma 转 daisyUI 等能力（详见 Blueprint 介绍页/blueprint/+page.svelte)）。

前提：获取 Blueprint License

Blueprint 为付费服务，需要先获取 License（具体套餐与订阅说明见 blueprint/checkout 路由/blueprint/checkout)）。购买后你会收到包含 license key 的邮件。

在 Windsurf 中添加 Blueprint 服务器

1. 在 Windsurf 中按⌘ CMD+⇧ Shift+P（Windows 为Ctrl+Shift+P）打开命令面板；
2. 搜索并执行Windsurf: MCP Configuration Panel；
3. 点击Add custom server +；
4. 在打开的配置文件中加入以下片段，并把LICENSE、EMAIL替换为你的真实凭据：

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

各配置项含义如下：

该配置与仓库中的 官方 mcp.json 示例 结构完全一致，你可参考其中的字段命名与格式进行核对。更详细的 Blueprint 安装步骤还可参考 Blueprint for Windsurf 安装文档/blueprint/windsurf/+page.md)。

使用方式

配置完成后，在对话中直接向 AI 提问，并在 prompt 末尾追加use Blueprint MCP以显式激活该服务器：

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

方案二：Context7 MCP 服务器（免费）

Context7 是免费的第三方 MCP 服务器，按需拉取对应库的文档，适合不想付费但需要比纯模型记忆更准确结果的场景。

添加 Context7 服务器

操作步骤与方案一相同：按⌘ CMD+⇧ Shift+P（Windows 为Ctrl+Shift+P）→ 搜索Windsurf: MCP Configuration Panel→ 点击Add custom server +，然后加入：

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

使用方式

提问时在 prompt 末尾追加use context7：

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

方案三：daisyUI GitMCP 服务器（免费）

GitMCP 是另一款免费的第三方 MCP 服务器，它直接暴露 daisyUI 仓库的代码与文档内容，适合需要结合源码细节确认实现的场景。

添加 GitMCP 服务器

同样通过命令面板打开Windsurf: MCP Configuration Panel，点击Add custom server +，然后加入：

{ "mcpServers": { + "daisyui-github": { + "serverUrl": "https://gitmcp.io/saadeghi/daisyui" + } } }

注意该配置使用serverUrl字段声明远端服务器地址，与 Blueprint、Context7 的stdio本地进程方式不同。

使用方式

GitMCP 无需在 prompt 中追加关键词，直接提问即可：

give me a light daisyUI 5 theme with tropical color palette

三种方案对比与选择建议

选择建议：追求生成质量与完整工作流（如从设计稿直接生成组件）选 Blueprint；预算有限且只需准确语法参考，可先试 Context7 或 GitMCP。三者可以同时配置在~/.codeium/windsurf/mcp_config.json的mcpServers对象下，按需激活。

验证与常见问题

如何验证配置生效

配置完成后，重启 Windsurf 或重载 MCP 面板，确认服务器状态为已连接；随后用上文示例 prompt 提问，观察 AI 是否返回结构完整的 daisyUI 5 类名（如btn btn-primary、card card-border等）。若 AI 仍未使用 daisyUI，可在提问时明确要求"使用 daisyUI 5 组件类名"。

与 Tailwind CSS 语法支持的区分

本文配置解决的是"AI 生成代码的准确性"问题。若你还需要编辑器中针对 Tailwind CSS 的语法高亮与 IntelliSense 补全，则需要另行配置 Tailwind CSS 官方的编辑器插件，其安装方式以 Tailwind CSS 官方编辑器设置文档为准（原文档开头有专门说明，见 关联原文档/docs/editor/windsurf/+page.md)）。

相关参考

• 更多编辑器（VSCode、Cursor、Zed、Claude 等）的同类配置，见 编辑器与 LLM 设置总览/docs/editor/+page.md)
• Windsurf 专属 MCP 配置页面：daisyUI MCP server for Windsurf/docs/mcp/windsurf/+page.md)
• llms.txt 的内容来源（AI 读取的 Skill 文档）：skills/daisyui/SKILL.md 及其 components 子目录
• Blueprint MCP 官方配置模板：packages/blueprint/mcp.json

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