尧图网站建设 
daisyUI 插件接入 Claude Code让 AI 编码助手自动使用最新 daisyUI Skill【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyuidaisyUI 官方为 Claude Code 提供了 Agent 插件plugin安装后 Claude Code 会获得最新版本的 daisyUI Skill在生成 UI 代码时自动携带当前的组件规则、主题规则与使用说明作为上下文。本文以仓库内官方文档 docs/plugin/claude-code/docs/plugin/claude-code/page.md) 为主线完整讲解插件安装、使用方式、Skill 内部结构与 Blueprint MCP 的取舍帮助开发者把 daisyUI 5 的组件能力真正接入 AI 编码工作流。一、daisyUI 插件解决了什么问题daisyUI 5 是构建于 Tailwind CSS 4 之上的 CSS 组件库提供组件类名、语义化颜色与主题。当 Claude Code 这类 AI 编码助手直接编写 HTML 或 JSX 时它通常只知道笼统的 Tailwind 知识并不知道当前版本 daisyUI 的准确组件类名、结构约束与用法规则——这正是 daisyUI 插件要解决的问题。根据仓库内 插件总览页/docs/plugin/page.md) 的说明daisyUI 插件会向编码 Agent 提供最新版本的 daisyUI Skill。一旦安装当你要求 Agent 用 daisyUI 构建 UI 时Agent 就能拉取 daisyUI 专属指令并按其生成代码。插件在 Claude Code、Codex、Cursor、Grok Build 四个工具上均有对应安装方案其中 Claude Code 的安装命令与其它工具不同本文聚焦 Claude Code。插件背后实际分发的是仓库 skills/daisyui/ 目录下的 Skill 内容其 SKILL.md 元数据中标注版本为 5.7.x并声明无论用户是否主动请求只要编写 HTML 或 JSX 代码就必须使用该 Skill。Skill 内部再细分为 install安装、usage用法、config配置、colors颜色与主题、components组件五个子模块。二、安装 daisyUI 插件到 Claude Code2.1 执行安装命令在终端依次运行以下两条命令即可完成插件市场添加与插件安装claude plugin marketplace add saadeghi/daisyui claude plugin install daisyuidaisyui命令含义拆解claude plugin marketplace add saadeghi/daisyui将saadeghi/daisyui注册为插件市场marketplace即把 daisyUI 官方仓库作为插件来源claude plugin install daisyuidaisyui从该市场安装名为daisyui的插件daisyui为市场内作用域标识。对比仓库中 Codex 安装文档/docs/plugin/codex/page.md)Claude Code 与 Codex 的命令参数并不相同Codex 需要--sparse .agents/plugins与codex plugin add因此务必在 Claude Code 中按上文命令执行。2.2 安装后的 Skill 内容插件安装完成后Claude Code 便拥有与仓库 skills/daisyui/SKILL.md 同步的最新 Skill 内容主要包含三部分Skill 模块仓库路径核心作用安装指南skills/daisyui/install/SKILL.mddaisyUI 5 依赖 Tailwind CSS 4指导通过plugin daisyui接入用法规则skills/daisyui/usage/SKILL.md12 条类名使用规则与组件变更方法配置选项skills/daisyui/config/SKILL.md主题、前缀、日志等插件配置语法颜色与主题skills/daisyui/colors/SKILL.md使用 daisyUI 颜色前必须阅读组件文档skills/daisyui/components/60 个组件的独立指南使用对应组件前必须先读三、在 Claude Code 中使用 daisyUI 生成界面安装完成后即可直接向 Claude Code 下达编写 UI 的指令官方文档给出的提示词示例为Make a login form. use daisyUIClaude Code 收到此类请求后会依据 Skill 的组件发现协议Component discovery protocol决策协议要求按顺序执行识别请求中的功能、行为与布局意图不局限于字面词使用 SKILL.md 中的组件清单挑选候选组件若选择不明确先阅读多个候选组件指南再决定将各候选的描述、行为、语法和约束与请求比对选出最佳组件或组合并遵守其全部约束使用所选组件的精确结构与约束。该协议特别强调即使请求用词与组件名不同也必须匹配其含义一个名称不同的组件仍可能是最佳匹配当用户明确点名的组件在清单中存在时优先读取该组件指南。此外Agent 在编写代码时会遵守 usage/SKILL.md 的 12 条规则例如优先使用 daisyUI 类名必要时叠加 Tailwind 工具类如btn px-10CSS 优先级冲突时在工具类末尾加!如btn bg-red-500!用户未指定变体时使用默认变体用btn而非btn btn-primary占位图统一使用 picsum.photos 等。四、Claude Code 实际拿到的技能细节仓库源码级4.1 组件清单与数量Skill 在 SKILL.md 中维护了一份完整的组件清单覆盖 accordion、alert、badge、button、card、carousel、checkbox、collapse、drawer、dropdown、fab、fieldset、file-input、filter、footer、hero、hover-3d、hover-gallery、indicator、input、join、kbd、label、link、list、loading、mask、megamenu、menu、mockup 系列、modal、navbar、otp、pagination、progress、radial-progress、radio、range、rating、select、skeleton、stack、stat、status、steps、swap、tab、table、text-rotate、textarea、theme-controller、timeline、toast、toggle、tooltip、validator 等 60 组件每个组件在 skills/daisyui/components/ 下都有对应.md指南文件。4.2 类名分类体系Skill 将 daisyUI 5 的每个类名划分为 10 类仅用于参考不写入代码component必需组件类、part子部件、style样式、behavior行为、color颜色、size尺寸、placement位置、direction方向、modifier修饰、variant变体前缀语法为variant:utility-class。4.3 配置能力根据 config/SKILL.mddaisyUI 5 通过 CSS 中的plugin daisyui配置。一个带完整默认配置的示例为plugin daisyui { themes: light --default, dark --prefersdark; root: :root; include: ; exclude: ; prefix: ; logs: true; }典型进阶配置启用全部内置主题、以bumblebee为默认主题、synthwave为prefersdark深色主题、排除rootscrollgutter、使用daisy-前缀并关闭日志plugin daisyui { themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk; root: :root; include: ; exclude: rootscrollgutter, checkbox; prefix: daisy-; logs: false; }基座模块properties、rootcolor、scrollbar、rootscrolllock、rootscrollgutter、svg可通过exclude按模块名排除。4.4 安装前提插件生成的代码以 daisyUI 5 Tailwind CSS 4 为前提见 install/SKILL.mdTailwind CSS v4 中tailwind.config.js已废弃安装 daisyUI 5 需执行npm i -D daisyuilatest并在 CSS 中写入import tailwindcss; plugin daisyui;这也意味着使用该插件前你的项目应先按上述方式接入 daisyUI 5。五、与 daisyUI Blueprint MCP 的取舍官方文档在插件页末尾提示追求更高效的 daisyUI 生成与按需组件片段时可改用 daisyUI Blueprint MCP 服务器。插件Skill 方式将整套组件规则塞入上下文而 Blueprint MCP 按需提供组件片段——文档明确指出Blueprint MCP 更省 tokensaves more tokens且对生成代码有更强的控制力more control over the generated code。插件总览页同样说明如果你已经在使用 daisyUI Blueprint MCP则无需再安装本插件。Blueprint MCP 的 Claude 配置示例/blueprint/claude/page.md) 要求配置许可证与可选 Figma Key{ mcpServers: { daisyui-blueprint: { type: stdio, command: npx, args: [-y, daisyui-blueprintlatest], env: { LICENSE: YOUR BLUEPRINT LICENSE KEY, EMAIL: YOUR EMAIL ADDRESS, FIGMA: YOUR FIGMA API KEY (optional) } } } }对应 packages/blueprint/mcp.json 中的声明一致。实际选择建议零配置、开箱即用选插件对 token 成本敏感或需要精确控制组件输出时选 Blueprint MCP。六、常见问题与排查要点命令执行失败确认使用 Claude Code 终端环境且已登录 Claude 账号plugin marketplace add与plugin install两条命令缺一不可。生成的类名不对插件分发的是最新版 Skill当前为 5.7.x若仓库版本更新后行为异常可重新执行claude plugin install daisyuidaisyui拉取最新 Skill 内容。生成代码无法运行检查项目是否已按 daisyUI 5 要求安装npm i -D daisyuilatestplugin daisyuidaisyUI 5 仅支持 Tailwind CSS 4不应再使用tailwind.config.js。不清楚该让 Agent 读什么可直接在提示词中要求 Claude Code 参考 skills/daisyui/ 下的对应模块如usage/SKILL.md、components/button.md获得与官方一致的最新规则。七、小结daisyUI 插件与 Claude Code 的组合本质是把官方维护的 Skill安装、用法、配置、颜色、组件五类知识注入 AI 编码助手使其生成的 UI 代码与 daisyUI 5 当前版本完全对齐。安装只需两条claude plugin命令使用只需在提示词中声明 use daisyUI。若你的场景对 token 消耗与输出控制有更高要求可评估切换到 Blueprint MCP 方案。相关实现与文档均可在仓库内查阅插件总览/docs/plugin/page.md)、Claude Code 安装文档/docs/plugin/claude-code/page.md)、Skill 根文件、Blueprint MCP 配置。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 daisyUI 插件接入 Claude Code：让 AI 编码助手自动使用最新 daisyUI Skill
daisyUI 插件接入 Claude Code让 AI 编码助手自动使用最新 daisyUI Skill【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyuidaisyUI 官方为 Claude Code 提供了 Agent 插件plugin安装后 Claude Code 会获得最新版本的 daisyUI Skill在生成 UI 代码时自动携带当前的组件规则、主题规则与使用说明作为上下文。本文以仓库内官方文档 docs/plugin/claude-code/docs/plugin/claude-code/page.md) 为主线完整讲解插件安装、使用方式、Skill 内部结构与 Blueprint MCP 的取舍帮助开发者把 daisyUI 5 的组件能力真正接入 AI 编码工作流。一、daisyUI 插件解决了什么问题daisyUI 5 是构建于 Tailwind CSS 4 之上的 CSS 组件库提供组件类名、语义化颜色与主题。当 Claude Code 这类 AI 编码助手直接编写 HTML 或 JSX 时它通常只知道笼统的 Tailwind 知识并不知道当前版本 daisyUI 的准确组件类名、结构约束与用法规则——这正是 daisyUI 插件要解决的问题。根据仓库内 插件总览页/docs/plugin/page.md) 的说明daisyUI 插件会向编码 Agent 提供最新版本的 daisyUI Skill。一旦安装当你要求 Agent 用 daisyUI 构建 UI 时Agent 就能拉取 daisyUI 专属指令并按其生成代码。插件在 Claude Code、Codex、Cursor、Grok Build 四个工具上均有对应安装方案其中 Claude Code 的安装命令与其它工具不同本文聚焦 Claude Code。插件背后实际分发的是仓库 skills/daisyui/ 目录下的 Skill 内容其 SKILL.md 元数据中标注版本为 5.7.x并声明无论用户是否主动请求只要编写 HTML 或 JSX 代码就必须使用该 Skill。Skill 内部再细分为 install安装、usage用法、config配置、colors颜色与主题、components组件五个子模块。二、安装 daisyUI 插件到 Claude Code2.1 执行安装命令在终端依次运行以下两条命令即可完成插件市场添加与插件安装claude plugin marketplace add saadeghi/daisyui claude plugin install daisyuidaisyui命令含义拆解claude plugin marketplace add saadeghi/daisyui将saadeghi/daisyui注册为插件市场marketplace即把 daisyUI 官方仓库作为插件来源claude plugin install daisyuidaisyui从该市场安装名为daisyui的插件daisyui为市场内作用域标识。对比仓库中 Codex 安装文档/docs/plugin/codex/page.md)Claude Code 与 Codex 的命令参数并不相同Codex 需要--sparse .agents/plugins与codex plugin add因此务必在 Claude Code 中按上文命令执行。2.2 安装后的 Skill 内容插件安装完成后Claude Code 便拥有与仓库 skills/daisyui/SKILL.md 同步的最新 Skill 内容主要包含三部分Skill 模块仓库路径核心作用安装指南skills/daisyui/install/SKILL.mddaisyUI 5 依赖 Tailwind CSS 4指导通过plugin daisyui接入用法规则skills/daisyui/usage/SKILL.md12 条类名使用规则与组件变更方法配置选项skills/daisyui/config/SKILL.md主题、前缀、日志等插件配置语法颜色与主题skills/daisyui/colors/SKILL.md使用 daisyUI 颜色前必须阅读组件文档skills/daisyui/components/60 个组件的独立指南使用对应组件前必须先读三、在 Claude Code 中使用 daisyUI 生成界面安装完成后即可直接向 Claude Code 下达编写 UI 的指令官方文档给出的提示词示例为Make a login form. use daisyUIClaude Code 收到此类请求后会依据 Skill 的组件发现协议Component discovery protocol决策协议要求按顺序执行识别请求中的功能、行为与布局意图不局限于字面词使用 SKILL.md 中的组件清单挑选候选组件若选择不明确先阅读多个候选组件指南再决定将各候选的描述、行为、语法和约束与请求比对选出最佳组件或组合并遵守其全部约束使用所选组件的精确结构与约束。该协议特别强调即使请求用词与组件名不同也必须匹配其含义一个名称不同的组件仍可能是最佳匹配当用户明确点名的组件在清单中存在时优先读取该组件指南。此外Agent 在编写代码时会遵守 usage/SKILL.md 的 12 条规则例如优先使用 daisyUI 类名必要时叠加 Tailwind 工具类如btn px-10CSS 优先级冲突时在工具类末尾加!如btn bg-red-500!用户未指定变体时使用默认变体用btn而非btn btn-primary占位图统一使用 picsum.photos 等。四、Claude Code 实际拿到的技能细节仓库源码级4.1 组件清单与数量Skill 在 SKILL.md 中维护了一份完整的组件清单覆盖 accordion、alert、badge、button、card、carousel、checkbox、collapse、drawer、dropdown、fab、fieldset、file-input、filter、footer、hero、hover-3d、hover-gallery、indicator、input、join、kbd、label、link、list、loading、mask、megamenu、menu、mockup 系列、modal、navbar、otp、pagination、progress、radial-progress、radio、range、rating、select、skeleton、stack、stat、status、steps、swap、tab、table、text-rotate、textarea、theme-controller、timeline、toast、toggle、tooltip、validator 等 60 组件每个组件在 skills/daisyui/components/ 下都有对应.md指南文件。4.2 类名分类体系Skill 将 daisyUI 5 的每个类名划分为 10 类仅用于参考不写入代码component必需组件类、part子部件、style样式、behavior行为、color颜色、size尺寸、placement位置、direction方向、modifier修饰、variant变体前缀语法为variant:utility-class。4.3 配置能力根据 config/SKILL.mddaisyUI 5 通过 CSS 中的plugin daisyui配置。一个带完整默认配置的示例为plugin daisyui { themes: light --default, dark --prefersdark; root: :root; include: ; exclude: ; prefix: ; logs: true; }典型进阶配置启用全部内置主题、以bumblebee为默认主题、synthwave为prefersdark深色主题、排除rootscrollgutter、使用daisy-前缀并关闭日志plugin daisyui { themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk; root: :root; include: ; exclude: rootscrollgutter, checkbox; prefix: daisy-; logs: false; }基座模块properties、rootcolor、scrollbar、rootscrolllock、rootscrollgutter、svg可通过exclude按模块名排除。4.4 安装前提插件生成的代码以 daisyUI 5 Tailwind CSS 4 为前提见 install/SKILL.mdTailwind CSS v4 中tailwind.config.js已废弃安装 daisyUI 5 需执行npm i -D daisyuilatest并在 CSS 中写入import tailwindcss; plugin daisyui;这也意味着使用该插件前你的项目应先按上述方式接入 daisyUI 5。五、与 daisyUI Blueprint MCP 的取舍官方文档在插件页末尾提示追求更高效的 daisyUI 生成与按需组件片段时可改用 daisyUI Blueprint MCP 服务器。插件Skill 方式将整套组件规则塞入上下文而 Blueprint MCP 按需提供组件片段——文档明确指出Blueprint MCP 更省 tokensaves more tokens且对生成代码有更强的控制力more control over the generated code。插件总览页同样说明如果你已经在使用 daisyUI Blueprint MCP则无需再安装本插件。Blueprint MCP 的 Claude 配置示例/blueprint/claude/page.md) 要求配置许可证与可选 Figma Key{ mcpServers: { daisyui-blueprint: { type: stdio, command: npx, args: [-y, daisyui-blueprintlatest], env: { LICENSE: YOUR BLUEPRINT LICENSE KEY, EMAIL: YOUR EMAIL ADDRESS, FIGMA: YOUR FIGMA API KEY (optional) } } } }对应 packages/blueprint/mcp.json 中的声明一致。实际选择建议零配置、开箱即用选插件对 token 成本敏感或需要精确控制组件输出时选 Blueprint MCP。六、常见问题与排查要点命令执行失败确认使用 Claude Code 终端环境且已登录 Claude 账号plugin marketplace add与plugin install两条命令缺一不可。生成的类名不对插件分发的是最新版 Skill当前为 5.7.x若仓库版本更新后行为异常可重新执行claude plugin install daisyuidaisyui拉取最新 Skill 内容。生成代码无法运行检查项目是否已按 daisyUI 5 要求安装npm i -D daisyuilatestplugin daisyuidaisyUI 5 仅支持 Tailwind CSS 4不应再使用tailwind.config.js。不清楚该让 Agent 读什么可直接在提示词中要求 Claude Code 参考 skills/daisyui/ 下的对应模块如usage/SKILL.md、components/button.md获得与官方一致的最新规则。七、小结daisyUI 插件与 Claude Code 的组合本质是把官方维护的 Skill安装、用法、配置、颜色、组件五类知识注入 AI 编码助手使其生成的 UI 代码与 daisyUI 5 当前版本完全对齐。安装只需两条claude plugin命令使用只需在提示词中声明 use daisyUI。若你的场景对 token 消耗与输出控制有更高要求可评估切换到 Blueprint MCP 方案。相关实现与文档均可在仓库内查阅插件总览/docs/plugin/page.md)、Claude Code 安装文档/docs/plugin/claude-code/page.md)、Skill 根文件、Blueprint MCP 配置。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考