daisyUI 免费 Claude Code 设计技能Skill安装与使用指南用更少的重复提示词生成规范的 Tailwind CSS UI【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui本文基于 daisyUI 仓库的官方文档页面 free-design-skill/page.md/(marketing)/(groups)/claude-code/free-design-skill/page.md) 编写。daisyUI 为 Claude Code 提供了一款免费的设计技能design skill它把 Tailwind CSS 组件类名、主题语义与常见界面模式的可复用指令打包给 Claude让你在生成登录页、仪表盘、表单、设置页等界面时免去大量重复的提示词。读完本文你将掌握该技能的本质作用、在 Claude Code 中的一条命令安装方法、正确的使用姿势与提示词示例并了解其与 daisyUI 本身安装、MCP 服务方案之间的关系。技能是什么教你写类名而不是替你装 CSS文档开门见山指出一个免费设计技能的价值在于减少重复提示。daisyUI skill 为 Claude 提供了一组可复用的指令覆盖 Tailwind CSS 组件类名、主题themes以及界面模式interface patterns使其能按 daisyUI 的规范产出标记markup。需要注意一个关键边界——技能只负责教会 Claude 怎么写 daisyUI 标记它并不会在你的应用里安装任何 CSS。要让这些类名真正渲染出样式你的项目仍然必须自行安装 daisyUI或通过 CDN 引入。这一点文档中特别强调也意味着技能是生成代码阶段的辅助而非运行时依赖。从仓库中的技能本体也能印证这一点。skills/daisyui/SKILL.md 的元信息将其描述为 Official daisyUI component-library skill for Tailwind CSS并在When to use this skill一节要求每当编写 HTML 或 JSX 代码、从事一切 Tailwind CSS UI 工作时都应使用该技能涉及 daisyUI、component、UI、Tailwind、layout、template、theme、color、design 等词汇时也应自动启用——即便用户没有显式要求也要用。也就是说安装后技能在 Agent 会话中具备很高的主动性这正是它能削减重复提示的基础。该技能文件还维护了一份完整的组件索引从 accordion、alert、button 到 validator 等 70 余个并定义了组件发现协议Component discovery protocol先识别需求意图再在组件列表中挑选候选必要时阅读多个候选组件指南比对行为与语法约束最后按选中组件的精确结构与约束书写代码并要求按语义匹配而非按字面对齐。为什么能避免AI 味AI slop许多 AI 生成界面的廉价感来自模型凭空发明控件与不规范类名。daisyUI skill 的规避思路很朴素与其让 Claude 自行发明控件不如直接给它真实存在的组件名。文档给出的对比示例是一个带验证的邮箱输入框label classinput validator spanEmail/span input typeemail required / /label这里的input是 daisyUI 的输入框组件类名validator则是配合 HTML 表单校验typeemail、required显示状态的组件类名两者在源码中都有真实对应的组件样式文件packages/daisyui/src/components/input.css 与 packages/daisyui/src/components/validator.css。技能仓库中也各自维护了用法说明 skills/daisyui/components/input.md 和 skills/daisyui/components/validator.md。由于 Claude 拿到的是一份查得到、说得清的类名与结构清单而不是靠猜测拼凑生成的表单标记往往更短、更贴近组件规范也就更容易复查和修订——这正是文档所说的 That keeps form markup shorter and easier to revise。安装到 Claude Code在项目目录执行下面的命令即可把 daisyUI skill 安装到 Claude Codenpx skills add saadeghi/daisyui --agent claude-code --yes这条命令并非页面手写的静态文本而是由仓库的文档站点动态生成。查看 packages/docs/src/routes/(routes)/docs/skill/[slug]/page.server.js 可见其组装逻辑installCommand: npx skills add saadeghi/daisyui --agent ${editor.agent} --yes,其中 Claude Code 对应的 agent 标识来自 packages/docs/src/lib/data/codingTools.js{ name: Claude Code, slug: claude-code, agent: claude-code }。同一套 skill 通过替换--agent参数即可适配 Codex、Cursor、VSCode Copilot、OpenCode 等其他编辑器/Agent各家的完整引导页面由 packages/docs/src/routes/(routes)/docs/skill/[slug]/page.md 统一渲染。安装完成后进入 Claude Code 的Agent ModeAgent 模式即可在提示词中直接点名使用 daisyUI skill例如Make a login form. use daisyUI skill官方页面给出的一个更完整的实战提示词是Build a responsive login page with daisyUI skill. Include error, loading, and success states.带完整分步演示的技能页面见仓库内 docs skill 专区/docs/skill/)其中 claude-code 一条即对应上述安装命令。先决条件项目里仍要装好 daisyUI再次强调技能与运行环境的边界类名只有在项目真正引入 daisyUI 后才会渲染。如果项目尚未安装可参考技能自带的安装指南 skills/daisyui/install/SKILL.md要点如下以当前仓库所描述的 daisyUI 5 / Tailwind CSS 4 为准daisyUI 5 要求配合 Tailwind CSS 4 使用Tailwind CSS v4 已废弃tailwind.config.js不要把 daisyUI 配进旧式配置文件。通过 npm 安装并注册为 CSS 插件npm i -D daisyuilatestimport tailwindcss; plugin daisyui;若希望零构建直接用 CDN会同时引入 Tailwind 浏览器运行时加载预编译样式link hrefhttps://cdn.jsdelivr.net/npm/daisyui5 relstylesheet typetext/css / script srchttps://cdn.jsdelivr.net/npm/tailwindcss/browser4/script其中主 CDN 文件默认只含 light/dark 两套主题如需全部内置主题可改用daisyui5/themes.css。技能教会 Claude 的规范从哪来skills/daisyui/SKILL.md 是技能的总入口它要求 Claude 在动手前先阅读分册仓库中对应的分册包括主题技能文件说明安装skills/daisyui/install/SKILL.md项目没有 daisyUI 时先读它类名用法skills/daisyui/usage/SKILL.md使用 daisyUI 类名前必读插件配置skills/daisyui/config/SKILL.md主题、前缀、日志等高级选项颜色与主题skills/daisyui/colors/SKILL.md使用语义色前必读组件skills/daisyui/components/按需阅读候选组件说明以 skills/daisyui/usage/SKILL.md 为例其中固化了一批生成纪律例如给元素加类名时应同时给出组件类、部件类与修饰类daisyUI 类名无法满足时再叠加 Tailwind 工具类如btn px-10确因优先级问题才允许!后缀如btn bg-red-500!且不可滥用daisyUI 没有对应组件时才用 Tailwind 工具类自行组合未要求变体/配色时一律用默认态如用btn而非btn btn-primary。类名按 component / part / style / color / variant 等类别解释Claude 输出时会遵守这套约定。这些规则叠加组件指南accordion、button、card、modal、navbar、validator 等数十个均在 skills/daisyui/components/ 目录下与色彩/主题分册共同构成 Claude 在生成 daisyUI 代码时的知识底座。适用场景与进阶建议文档建议在使用技能的场景是常见的业务型界面登录页login pages、仪表盘dashboards、表单forms、设置界面settings screens、定价区块pricing sections以及后台数据表格admin tables。这类页面组件组合固定、状态多error / loading / success正适合用确定性的组件类名去约束生成结果。进阶层面仓库文档站点在 docs skill 页面/docs/skill/[slug]/page.md) 给出了一个值得注意的取舍若想进一步节省 LLM token 并换取更快响应官方更推荐改用MCP 服务器方式接入 daisyUI——MCP 按需提供上下文而不是像技能文件那样一次性把静态文档喂给模型因此效率更高、成本更低。技能适合一次性让 Agent 拿到完整规范的简单接入而高频、长会话的开发流程可评估 MCP 方案对应引导入口见仓库的 packages/docs/src/routes/(routes)/docs/mcp//docs/mcp/) 目录及 packages/blueprint/mcp.json。小结daisyUI 的 Claude Code 免费设计技能可以概括为三条事实它是一份可复用指令集以 skills/daisyUI 技能目录 为底座教会 Claude 按真实存在的 daisyUI 类名、主题与组件约束生成标记从源头减少编造控件式的 AI 味输出一条命令即可接入npx skills add saadeghi/daisyui --agent claude-code --yes安装后直接以 use daisyUI skill 的形式在 Agent Mode 中调用它不替代 CSS 安装项目仍需通过plugin daisyui或 CDN 引入 daisyUI才能让生成的类名真正生效若追求更低 token 开销可转向官方 MCP 服务器方案。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考