企业官网建设流程全解析

daisyUI UI design skill for Cursor：让 Agent Mode 生成风格一致的 Tailwind CSS 界面

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

在 Cursor 的 Agent Mode 中编写界面时，单纯的“帮我做一个干净的页面”式提示词往往会让 AI 自由发挥，产出按钮、面板、徽章与表格互不协调的“AI 味”界面。给 Cursor 挂载 daisyUI 官方 skill，本质上是为 Agent 注入一份偏好的组件词汇表（component vocabulary），让它优先选择btn、alert、card、input这类命名组件与btn-primary、badge-success等语义化颜色类，而不是手搓一长串无法维护的工具类。读完本文，你将掌握在 Cursor 中安装 daisyUI skill、用命名组件 + 语义化类驱动的提示词工作流，以及可选的插件与 MCP 替代方案。

本文基于 daisyUI 仓库中 Cursor 阵营的官方指南页面（packages/docs/src/routes/(routes)/(marketing)/(groups)/cursor/ui-design-skill-guide/+page.md）展开，并结合仓库中的 skill 定义与相关文档作源码级佐证。

为什么只靠提示词做设计会翻车

“Make a clean CRM page”这类提示词给 Agent 留下了过多决策空间。Cursor 也许能拼出一个能用的页面，但其中的按钮、面板、徽章、表格风格彼此毫无关联——这正是 AI 生成 UI 最常见的“AI slop（AI 涂抹感）”形态。

问题并不只出现在 Cursor：当 AI Agent 只拿到任务、却没有拿到设计系统/(marketing)/(groups)/cursor/ui-design-skill-guide/+page.md) 时，界面同质化几乎不可避免。典型症状包括：

• 同一操作在不同位置出现不同样式的按钮；
• 缺失焦点态、激活态；
• 错误态、空状态被忽略；
• 颜色不跟随主题体系；
• 超长的 utility class 字符串淹没了组件语义结构。

daisyUI skill 的作用，就是把这些决策收敛为“按哪几个命名组件来组合”。官方文档指出：Cursor 虽然能读取附近文件，但一个混杂的前端项目里往往躺着旧的工具类链、复制来的示例代码和未完成的模式；skill 则明确告诉 Agent该偏向哪条实现路径（相关阐述见 ui-design-skill 指南/(marketing)/(groups)/cursor/ui-design-skill-guide/+page.md)）。

skill 的底层机制：仓库中的 skill 定义

这种“可复用的知识注入”正是 Agent Skills 的设计初衷（Agent Skills 说明/(marketing)/(groups)/cursor/best-free-component-library/+page.md)）。仓库根目录的 skills/daisyui/SKILL.md 就是该 skill 的实体：它声明了自己在编写 HTML/JSX 时必须被使用，并列出 60+ 组件（accordion、alert、avatar、badge、button、card、dropdown、modal、navbar、tab、toast、tooltip……），还内置了一套组件发现协议（Component discovery protocol）：

1. 先识别请求背后的功能、行为与布局意图；
2. 依据组件清单挑选候选组件；
3. 候选不明确时，先阅读多个候选组件指南再取舍；
4. 对比各候选的描述、语法与约束；
5. 选出最佳组件或组件组合并遵守其全部约束；
6. 严格使用所选组件的结构与约束。

这意味着，为 Cursor 安装该 skill 后，Agent 会先“查词典”再写码，而不是凭训练记忆乱猜类名——这正是“比裸提示词生成更干净结构”的底层原因。

更好的生成结构：用命名组件替代模糊样式

与其让 Cursor 手绘每个控件，不如直接要求命名组件。官方指南给出的最小示例是 alert + 按钮的组合：

<div class="alert alert-info"> <span>Your trial ends in 3 days.</span> <button class="btn btn-sm">Manage plan</button> </div>

注意两种类名的分工：

• alert alert-info：容器语义 + 状态语义，一次声明“这是 info 级别的提示条”；
• btn btn-sm：按钮语义 + 尺寸语义，Agent 想改大小只需换成btn-md、btn-lg或加btn-outline。

关键收益在于可修订性：Cursor 后续可以单独修改 alert 或 button，而不必推倒重来、重建整套视觉体系。

把示例扩成一个更真实的“团队邀请页”局部，展示多组件协作与语义色：

<div class="card w-full max-w-3xl bg-base-100 shadow-xl"> <div class="card-body"> <h2 class="card-title">Invite your team</h2> <div class="alert alert-warning"> <span>2 pending invites expire in 3 days.</span> </div> <div class="join w-full"> <input class="input input-bordered join-item w-full" placeholder="teammate@company.com" /> <button class="btn btn-primary join-item">Send invite</button> </div> <div class="overflow-x-auto"> <table class="table"> <thead> <tr><th>Name</th><th>Role</th><th>Status</th><th></th></tr> </thead> <tbody> <tr> <td>Ada</td> <td>Developer</td> <td><span class="badge badge-success">Active</span></td> <td><button class="btn btn-ghost btn-xs">Revoke</button></td> </tr> </tbody> </table> </div> </div> </div>

input、table、badge、join（按钮与输入框粘连成组）都有对应的组件规则，Agent 可以直接在 skills/daisyui/components/ 下逐篇查阅（如 alert 规则、button 规则）。而这些类名对应的真实 CSS 实现，位于 packages/daisyui/src/components/（如 alert.css、button.css、table.css），skill 是对这套编译产物的一层“可读索引”。

主题让颜色决策更难出错

纯 CSS 十六进制/OKLCH 值在不同页面间极易漂移；而使用 daisyUI 后，Agent 可优先使用btn-primary、badge-success、alert-error这类语义类：

• primary / secondary / accent：品牌主色/次色/强调色；
• success / warning / error / info：状态色；
• 配上base-100 / base-content / neutral等基础表面类，深色模式下无需重写。

语义类表达的是“意图”而非某个具体色值，因此它们能无缝跨 daisyUI 主题工作。仓库 packages/daisyui/src/themes/ 下按主题拆分的源码（如 light.css、dark.css）证实了这点：同一套btn-primary会在不同主题里解析成不同的实际颜色。colors 与 themes 的使用细节在 skills/daisyui/colors/SKILL.md 中单独成篇，skill 会要求 Agent 在写颜色类前先读它。

对新手尤其友好：不必在让 Cursor 建页前就敲定整张调色板——先选一个 daisyUI 主题，再让组件类承担配色职责即可（ui-design-skill 页面相关论述/(marketing)/(groups)/cursor/ui-design-skill/+page.md)）。甚至可以用theme-controller组件在页面内实时切换主题。

安装 daisyUI skill

在 Cursor 中安装官方 skill 只需一条命令：

npx skills add saadeghi/daisyui --agent cursor --yes

参数说明：

• npx skills add：Skill 安装器的标准入口，从 GitHub 拉取技能包；
• saadeghi/daisyui：技能仓库的 owner/name；
• --agent cursor：声明目标 Agent 是 Cursor（也可按需换成其他编辑器 Agent）；
• --yes：跳过交互确认，便于脚本化执行。

安装后，Agent 就能在项目里读取上述 skills/daisyui/SKILL.md 定义以及组件、配色、配置子指南。若项目尚未接入 daisyUI，skill 还会先引导阅读 skills/daisyui/install/SKILL.md 完成接入，再开始写组件代码。

在 Agent Mode 中使用

安装完成后，在 Cursor 的 Agent Mode 中给出带技能名 + 具体组件约束的提示词。官方示例：

Create a team invite page with daisyUI skill. Use an alert for pending invites, inputs for email addresses, and a table for members.

这种写法的要点是：先说技能名（daisyUI skill），再点明需要的具体组件（alert、input、table），而不是只说“做漂亮点”。Agent 会：

1. 依据 SKILL.md 的组件发现协议匹配“pending invites → alert”、“邮箱收集 → input”、“成员列表 → table”；
2. 读取对应组件指南（如 alert、input、table、button）确认类名与结构约束；
3. 输出带语义类的组件化 HTML/JSX。

更进一步的引导模式，是直接使用与文档配套的营销落地页中推荐的完整工作流：daisyUI skill for Cursor 完整指南/(marketing)/(groups)/cursor/ui-design-skill-guide/+page.md) 提到的官方文档页（由 docs/skill 的动态 slug 页面/docs/skill/[slug]/+page.md) 渲染，数据由 slug/+page.server.js/docs/skill/[slug]/+page.server.js) 提供），例如“用 tabs/cards/inputs/toggles/alerts 做一个设置页，并且把 disabled、loading、success、error 状态都做出来”——这类提示词能驱动 Agent 一次性覆盖完整状态矩阵。

插件方案：由 Cursor 管理的免命令安装

不想手动跑命令时，可用 Cursor 官方插件流程安装 daisyUI plugin（见 daisyUI plugin for Cursor/docs/plugin/cursor/+page.md)）：

1. 打开 Cursor 设置（⌘+,）；
2. 进入Plugins；
3. 搜索并添加saadeghi/daisyui仓库；
4. 点击daisyui→Add to Cursor。

插件会持续提供最新版的 skill 内容（组件规则、主题规则、用法说明都会同步进上下文），适合希望安装环节完全托管在 Cursor 内、不接触命令行的场景。插件与手动 skill 安装属于同一用途的两种路径，插件总览页/docs/plugin/+page.md) 可对比其他编辑器的安装方式。

更进一步：Blueprint MCP server

官方 docs/skill 说明页/docs/skill/[slug]/+page.md) 还提醒：若追求更低 Token 消耗与更快生成，可改用MCP server——它按需提供上下文，而不是把整份静态 skill 常驻上下文。Cursor 阵营相关配置见 Cursor 的 MCP 文档/docs/mcp/cursor/+page.md)，daisyUI 侧对应的 Blueprint MCP 定义在 packages/blueprint/mcp.json。技能类方案与 MCP 方案可以并存，按项目对 Token 敏感度取舍。

小结：把“设计系统”作为 Agent 的默认偏好

daisyUI skill 对 Cursor 的价值可以归结为一句话：它把“干净 UI”从模糊的审美形容词，翻译成了 Agent 能稳定执行的组件级指令。安装之后，Cursor 会读组件清单、查组件指南、用语义类与主题色，而不是每次从零即兴发明视觉系统——产出的界面因此更容易保持一致、可维护、可后续修订。

• 组件词汇：依赖 skills/daisyUI/SKILL.md 提供的组件清单与发现协议；
• 语义配色：依赖btn-primary、badge-success、alert-error等跨主题语义类，底层实现在 packages/daisyui/src/themes/；
• 两种接入路径：命令行npx skills add saadeghi/daisyui --agent cursor --yes，或 Cursor 插件流程；
• 进阶优化：Token 敏感场景改用 Blueprint MCP。

现在就可以在 Agent Mode 里试试官方推荐的那句提示词：“Create a team invite page with daisyUI skill. Use an alert for pending invites, inputs for email addresses, and a table for members.”，直观对比加与不加 skill 时生成结构的差异。

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