☰

企业官网建设流程全解析

首页 / 建站日记 / 企业官网建设流程全解析
daisyUI 编辑器与 LLM 接入指南：用 llms.txt 与 MCP 让 AI 精准生成 Tailwind CSS 组件代码
2026/9/10 3:36:56 网站建设 项目流程

daisyUI 编辑器与 LLM 接入指南：用 llms.txt 与 MCP 让 AI 精准生成 Tailwind CSS 组件代码

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

本文是 daisyUI 官方「Code editors and LLM setup」文档的完整实践指南，面向希望让 VSCode、Cursor、Zed、Windsurf、Claude、ChatGPT 等工具中的 AI 助手准确生成 daisyUI 组件代码的开发者。读完本文，你将掌握三条让 AI「读懂」daisyUI 的路径——llms.txt快速引用、项目级永久规则文件、以及 Blueprint / Context7 / GitMCP 三类 MCP 服务器——并能在 10 种主流编辑器与 LLM 客户端中独立完成配置。

文档主题与适用场景

在 daisyUI 文档站中，docs/editor板块（仓库路径 packages/docs/src/routes/(routes)/docs/editor/+page.md/docs/editor/+page.md)）充当一个「选择入口」，集中列出了 10 种可配置的目标工具：

类别工具
代码编辑器VSCode、Cursor、Zed、Windsurf
桌面/命令行 AI 客户端Claude Desktop、Claude Code、Cline（VSCode 扩展）
网页端 LLMChatGPT、Gemini、Grok

每个工具对应一份独立子文档（如 vscode/+page.md/docs/editor/vscode/+page.md)、cursor/+page.md/docs/editor/cursor/+page.md) 等），但核心思路完全一致：给 AI 提供 daisyUI 的官方文档上下文，让它在回答你的 prompt 时输出符合 daisyUI 5 规范、可实际运行的 Tailwind CSS 代码。

需要注意的一个前提：本文解决的是「AI 生成代码准确性」问题，而编辑器内 Tailwind CSS 的语法高亮与 IntelliSense 属于另一套配置，各子文档均指向 Tailwind CSS 官方的编辑器设置说明，不在本文范围内。

核心机制一：llms.txt——让 AI 读到 daisyUI 官方文档

什么是 llms.txt

daisyUI 提供了一个https://daisyui.com/llms.txt文件，它是 daisyUI 官方文档的精简纯文本版本，专门用于帮助 LLM 依据你的 prompt 生成准确的 daisyUI 代码。它的价值在于：大模型训练数据中的 daisyUI 知识可能过时或含混，而实时引用 llms.txt 可以拿到当前版本（daisyUI 5.x）的准确类名、主题与用法。

仓库中的生成实现

这个 llms.txt 并非手工维护的静态文件，而是由仓库中的服务端路由动态组装生成，实现见 packages/docs/src/routes/llms.txt/+server.js：

  • 它通过import.meta.glob加载skills/daisyui/目录下的一系列技能文档，包括 skills/daisyui/SKILL.md、install、usage、config、colors 五个 SKILL.md 以及components/*.md全部组件指南；
  • 按固定顺序拼接：根 SKILL → 安装 → 使用 → 配置 → 颜色 → 组件发现协议 → 全部组件文档；
  • 每个文档会stripFrontmatter去掉 YAML 头部，并在运行时统一注入source: https://daisyui.com/llms.txt、alwaysApply: true、applyTo: "**"等 frontmatter 字段，使下游 Agent 能识别文档的适用范围与强制应用属性。

也就是说，你在各编辑器里引用的 llms.txt，内容与仓库 skills/daisyui 目录下的官方技能文档一一对应，阅读该目录即可了解 AI 将会「看到」的 daisyUI 知识全貌。

三种使用方式

各编辑器文档把 llms.txt 的使用归纳为三种粒度：

  1. 快速引用（一次性）：在聊天窗口输入特定的引用指令，让本次对话使用 llms.txt；
  2. 项目级永久设置：用curl把 llms.txt 保存到项目内的规则文件，让 Copilot / Cursor / Cline 默认读取；
  3. 作为自定义文档 / Workspace 附件：把 llms.txt 注册为编辑器的可检索文档，或上传到 Grok Workspace，之后在需要时手动调用。

核心机制二：MCP 服务器

MCP（Model Context Protocol）是 AI 模型与外部工具通信的开放 API 协议。在编辑器或 LLM 客户端中添加 MCP 服务器后，AI 会实时调用该服务器获取上下文，从而得到比「凭记忆生成」更准确的结果。daisyUI 文档推荐的 MCP 服务器有三类：

1. daisyUI Blueprint（官方 MCP 服务器）

Blueprint 是 daisyUI 官方出品的 MCP 服务器，详细介绍见文档站的 Blueprint 板块（仓库对应页面 packages/docs/src/routes/(routes)/blueprint/+page.svelte/blueprint/+page.svelte)）。其配置在仓库中有一份标准模板 packages/blueprint/mcp.json：

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

要点：

  • 需要先获取 Blueprint License，配置时填入LICENSE（许可证密钥）与EMAIL（邮箱）；
  • FIGMA为可选环境变量，仅在需要 Figma 设计稿转代码（Figma-to-code）时才需要填写 Figma API Key；
  • 使用方式：在 prompt 末尾追加use Blueprint MCP，例如：give me a light daisyUI 5 theme with tropical color palette. use Blueprint MCP

2. Context7（通用文档 MCP）

Context7 是一个通用的文档检索 MCP 服务器，通过npx以 stdio 方式本地启动：

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

Claude Code 还支持 HTTP 传输方式：claude mcp add --transport http context7 https://mcp.context7.com/mcp。使用时代入use context7后缀即可，无需 Blueprint 的许可密钥。

3. daisyUI GitMCP（仓库文档 MCP）

GitMCP 直接暴露 daisyUI 仓库的文档，通过 SSE 或 HTTP 远程连接。在支持「Add MCP server」界面的工具中，配置为：

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

在 Zed、Claude Desktop 等工具中则通过npx mcp-remote桥接：npx mcp-remote https://gitmcp.io/saadeghi/daisyui。

三类服务器适用场景对比：

维度BlueprintContext7GitMCP
性质daisyUI 官方通用文档检索仓库文档直连
是否需要许可证需要（License + Email）不需要不需要
可选扩展Figma 转代码（需 FIGMA Key）——
传输方式stdio（npx）stdio / HTTPSSE / HTTP
prompt 后缀use Blueprint MCPuse context7无需

各编辑器与 LLM 的详细配置

下面按工具逐一说明。所有配置片段均完整继承自对应子文档，可直接复制使用。

VSCode（GitHub Copilot）

文档：vscode/+page.md/docs/editor/vscode/+page.md)

快速使用：在聊天窗口输入

#fetch https://daisyui.com/llms.txt

VSCode 会抓取 llms.txt 来生成代码。

项目级永久设置：执行以下命令，将 llms.txt 保存到.github/instructions/daisyui.instructions.md，Copilot 会默认读取（--create-dirs会自动创建目录）：

curl -L https://daisyui.com/llms.txt --create-dirs -o .github/instructions/daisyui.instructions.md

MCP 配置：按⌘ CMD + ⇧ Shift + P（Windows 为Ctrl + Shift + P），搜索MCP: Open User Configuration，然后按需追加以下任意服务器到配置文件中。

Blueprint：

{ "servers": { "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)" } } } }

Context7：可直接点击文档中的「Install Context7 MCP」按钮一键安装；或在项目根目录创建.vscode/mcp.json（若不存在）后追加：

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

GitMCP：同样在.vscode/mcp.json中追加：

{ "servers": { "daisyUI": { "type": "sse", "url": "https://gitmcp.io/saadeghi/daisyui" } } }

配置完成后在 Agent 模式下提问即可，Blueprint / Context7 记得在 prompt 末尾加对应后缀。

Cursor

文档：cursor/+page.md/docs/editor/cursor/+page.md)

快速使用：

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

项目级永久设置：

curl -L https://daisyui.com/llms.txt --create-dirs -o .cursor/rules/daisyui.mdc

注册为自定义文档：按⌘ CMD + ⇧ Shift + P（Windows 为Ctrl + Shift + P）→ 输入Add new custom docs→ 添加https://daisyui.com/llms.txt。之后在聊天窗口输入@docs并选择daisyUI即可引用。

MCP 配置：按⌘ CMD + ⇧ Shift + P打开MCP: Open MCP Settings，编辑~/.cursor/mcp.json。

Blueprint（需先获取 License）：

{ "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)" } } } }

Context7：点击Add MCP server后添加：

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

GitMCP：

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

Zed

文档：zed/+page.md/docs/editor/zed/+page.md)

快速使用：在 Thread 聊天中于 prompt 前输入：

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

MCP 配置：按⌘ CMD + ⇧ Shift + P（Windows 为Ctrl + Shift + P）→ 选择agent: add context server，添加以下 JSON。

Blueprint：

{ "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)" } } }

Context7：

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

GitMCP（Zed 通过 mcp-remote 桥接远程服务器）：

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

Windsurf

文档：windsurf/+page.md/docs/editor/windsurf/+page.md)

快速使用：

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

MCP 配置：按⌘ CMD + ⇧ Shift + P（Windows 为Ctrl + Shift + P）→ 输入Windsurf: MCP Configuration Panel→ 点击Add custom server +，编辑~/.codeium/windsurf/mcp_config.json。

Blueprint：

{ "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)" } } } }

Context7：

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

GitMCP（注意该工具使用serverUrl字段）：

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

Claude Desktop

文档：claude/+page.md/docs/editor/claude/+page.md)

快速使用：在聊天窗口启用🌐 Search功能，并在 prompt 前粘贴 llms.txt 地址：

https://daisyui.com/llms.txt

示例：

https://daisyui.com/llms.txt give me a light daisyUI 5 theme with tropical color palette

MCP 配置：进入 Settings > Developer → 点击Edit Config，编辑claude_desktop_config.json。

Blueprint：

{ "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)" } } } }

Context7：

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

GitMCP：

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

Claude Code（命令行）

文档：claudecode/+page.md/docs/editor/claudecode/+page.md)

Claude Code 无需编辑 JSON，直接用 CLI 注册 MCP 服务器。

Blueprint（FIGMA 可选）：

claude mcp add daisyui-blueprint --env LICENSE=YOUR_LICENSE_KEY --env EMAIL=YOUR_EMAIL --env FIGMA=YOUR_FIGMA_API_KEY -- npx -y daisyui-blueprint@latest

Context7（两种方式任选）：

# HTTP 传输（远程） claude mcp add --transport http context7 https://mcp.context7.com/mcp # 本地服务器连接 claude mcp add context7 -- npx -y @upstash/context7-mcp

GitMCP（HTTP 传输）：

claude mcp add --transport http daisyui https://gitmcp.io/saadeghi/daisyui

ChatGPT / Gemini / Grok（网页端 LLM）

这三类网页端工具不支持项目级规则文件，统一走「把 llms.txt 地址放进 prompt」的路径。

  • ChatGPT（文档：chatgpt/+page.md/docs/editor/chatgpt/+page.md)）：启用🌐 Search功能，在 prompt 前加https://daisyui.com/llms.txt。其 MCP 支持目前标注为 coming soon…，暂无配置项。
  • Gemini（文档：gemini/+page.md/docs/editor/gemini/+page.md)）：启用🔍 Deep research功能，同样在 prompt 前加 llms.txt 地址。
  • Grok（文档：grok/+page.md/docs/editor/grok/+page.md)）：
    • Deep Search 方式：启用꩜ Deep Search功能后把 llms.txt 地址放在 prompt 前；
    • Workspace 方式（仅 SuperGrok）：访问 llms.txt 页面后右键「Save As...」下载文件，再上传到 Grok 的 Workspace 作为附件。此后该 Workspace 内的每轮对话都能访问 daisyUI 文档，且无需依赖 Deep Search，响应更快。

统一示例 prompt：

https://daisyui.com/llms.txt give me a light daisyUI 5 theme with tropical color palette

Cline（VSCode 扩展）

文档：cline/+page.md/docs/editor/cline/+page.md)

快速使用：在聊天窗口于 prompt 前输入：

https://daisyui.com/llms.txt

项目级永久设置：

curl -L https://daisyui.com/llms.txt --create-dirs -o .clinerules/daisyui.md

MCP 配置：点击 Cline 面板顶部导航栏的 MCP Servers 图标 → 选择Configure标签页 → 点击Configure MCP Servers按钮，编辑cline_mcp_settings.json。

Blueprint：

{ "servers": { "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)" } "disabled": false, "autoApprove": [] } } }

Context7：直接从 Cline 的 MCP marketplace 安装Context7即可。

GitMCP：

{ "mcpServers": { "daisyui-github": { "url": "https://gitmcp.io/saadeghi/daisyui", "disabled": false, "autoApprove": [] } } }

配置速查与常见问题

一份可复用的标准提问模板

无论使用哪种接入方式，官方各文档统一采用如下示例 prompt，你可以照此模式描述任意 UI 需求：

give me a light daisyUI 5 theme with tropical color palette

需要 Blueprint 或 Context7 时追加use Blueprint MCP/use context7后缀。

常见注意事项

  • Figma 转代码：只有 Blueprint 支持，且FIGMA环境变量是可选的——仅在需要 Figma 设计稿转代码时才填写；
  • 快捷键差异：所有「命令面板」操作在 macOS 为⌘ CMD + ⇧ Shift + P，Windows 为Ctrl + Shift + P（Windsurf 文档写作⌃ Ctrl + ⇧ Shift + P）；
  • 配置文件字段差异：不同工具的 MCP 配置文件顶层键名不同——VSCode 的.vscode/mcp.json与 Cline 的cline_mcp_settings.json使用servers，Cursor / Windsurf / Claude Desktop 使用mcpServers，配置时不要混淆；
  • GitMCP 的字段差异：大多数工具用url字段指向https://gitmcp.io/saadeghi/daisyui，但 Windsurf 使用serverUrl，Zed 与 Claude Desktop 则通过npx mcp-remote桥接远程服务器；
  • 规则文件路径：VSCode 存到.github/instructions/、Cursor 存到.cursor/rules/、Cline 存到.clinerules/，各自对应其规则/指令加载机制。

仓库内可继续深入阅读的参考文件

  • llms.txt 的生成实现：packages/docs/src/routes/llms.txt/+server.js
  • llms.txt 的内容来源（AI 实际读取的知识库）：skills/daisyui/SKILL.md 及 skills/daisyui/install/SKILL.md、skills/daisyui/usage/SKILL.md、skills/daisyui/config/SKILL.md、skills/daisyui/colors/SKILL.md、skills/daisyui/components
  • Blueprint MCP 官方配置模板：packages/blueprint/mcp.json
  • 各编辑器子文档：editor/vscode/+page.md/docs/editor/vscode/+page.md)、editor/cursor/+page.md/docs/editor/cursor/+page.md)、editor/zed/+page.md/docs/editor/zed/+page.md)、editor/windsurf/+page.md/docs/editor/windsurf/+page.md)、editor/claude/+page.md/docs/editor/claude/+page.md)、editor/claudecode/+page.md/docs/editor/claudecode/+page.md)、editor/chatgpt/+page.md/docs/editor/chatgpt/+page.md)、editor/gemini/+page.md/docs/editor/gemini/+page.md)、editor/grok/+page.md/docs/editor/grok/+page.md)、editor/cline/+page.md/docs/editor/cline/+page.md)

小结

daisyUI 的编辑器与 LLM 接入方案可以归纳为一条主线：无论使用哪个工具，目标都是把 llms.txt 生成器 产出的官方文档知识注入 AI 的上下文。轻量场景用#fetch/@web/ 直接粘贴 URL 快速引用即可；团队协作或长期项目建议用curl落地为规则文件；追求实时性与 Figma 转代码能力则接入 MCP 服务器（官方 Blueprint 或开箱即用的 Context7 / GitMCP）。配置完成后，用本文给出的热带配色主题示例 prompt 验证一次，就能立即感受到 AI 生成 daisyUI 5 代码的准确度提升。

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

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

标签： 网站建设 企业官网 项目流程 UI设计 前端开发

热门文章

文章分类

标签云

网站建设 响应式设计 用户体验 SEO优化 前端开发 小程序 电商平台 性能优化

相关文章

您可能感兴趣的其他内容

基于SpringBoot+Vue的艺体培训机构业务管理系统设计与实现
2026/9/10 3:34:13 网站建设

基于SpringBoot+Vue的艺体培训机构业务管理系统设计与实现

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …...

阅读更多 →
聆听艺术联系方式？
2026/9/10 3:31:44 网站建设

聆听艺术联系方式？

简述：国内少儿声乐培训市场近年来保持稳步扩张态势，随着家庭美育教育意识持续提升，越来越多家长开始关注孩子的声乐素养培养，少儿声乐机构的市场供给规模随之持续扩大。据行业公开统计数据显示，近三年国内少儿声乐培训…...

阅读更多 →
蓝桥杯砍柴题解析：从SG函数到一行结论
2026/9/10 3:30:09 网站建设

蓝桥杯砍柴题解析：从SG函数到一行结论

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …...

阅读更多 →

需要专业的网站建设服务？

联系我们获取免费的网站建设咨询和方案报价，让我们帮助您实现业务目标

立即咨询