工具集

用 React、Tailwind CSS 与 shadcn/ui 搭建需要状态管理或路由的多组件网页，自带初始化与打包脚本，最终打包成单个 HTML 文件作为 claude.ai Artifact。Anthropic 官方技能。

shadcn/ui 官方技能：让 agent 借助 shadcn CLI 读取项目配置与组件文档，按规范添加、搜索、组合和修复组件，遵守样式、表单与无障碍规则，也能用预设初始化新项目。

shadcn/ui 官方 CLI 内置的 MCP 服务器：让 agent 浏览、搜索任意已配置 registry（含私有组件库）里的组件、区块与模板，并用自然语言把组件安装进项目。项目中需要有 components.json。

shadcn/ui 官方命令行：初始化项目并按需把组件源码加入代码库，可切换预设；v4 起提供 --dry-run、--diff 便于 agent 预览改动，并配套 agent skill。

daisyUI 5 的配置说明：在 CSS 的 daisyUI 插件块中设置启用哪些主题、默认主题与深色模式主题、根选择器、包含或排除的模块、类名前缀和控制台日志，并附完整示例。daisyUI 官方技能的子指南。

daisyUI 5 的颜色规则：说明 primary、base-100、error 等语义色及其 -content 前景色的用途，要求尽量只用语义色、不给它们加 dark: 前缀，并给出启用内置主题、编写自定义主题和修改已有主题的写法。daisyUI 官方技能的子指南。

daisyUI 5 的用法规则：用组件、部件与修饰类名组合样式，类名不够时再补 Tailwind 工具类，实在覆盖不了才用 ! 强制；未指定时用默认变体，布局加响应式前缀，设计决策参考《Refactoring UI》。daisyUI 官方技能的子指南。

daisyUI 官方技能，让 agent 编写 HTML 或 JSX 时使用 daisyUI 5 的组件类名、语义色与主题：先按功能挑选合适的组件并阅读对应文档，再按其结构与约束写代码，附带安装、用法、配置与颜色等子指南。基于 Tailwind CSS 4。

daisyUI 5 的安装说明：必须搭配 Tailwind CSS 4、不再使用 tailwind.config.js，用 npm 安装后在 CSS 中引入插件；也给出 CDN 引入方式，以及 Next.js、Vue、SvelteKit、Laravel 等框架安装指南的链接。daisyUI 官方技能的子指南。

Google Labs 推出的 DESIGN.md 格式与命令行：设计师把配色、字体、间距等视觉规范写成文件交给 agent，lint 检查引用错误与 WCAG 对比度，diff 对比版本，export 导出 Tailwind 等设计令牌。需要 Node.js，格式仍为 alpha。

构建或修改落地页时分两部分工作：先收集目标、受众与证明材料，确定页面结构、版式、转化文案与 SEO；再遵循一套严格的视觉规则，规定字体、Tailwind 字号阶梯、间距、圆角、背景、图标与动效。规则偏主观，例如禁用 Inter 字体与背景渐变。

提供 sm、md、lg 三档现成的 Tailwind 任意值阴影类，用于卡片、表单控件、浮层、主视觉等表面，做出分层的中性灰阴影，并规定不与默认阴影混用、不染色、不叠加多个阴影。

用 Tailwind CSS 实现界面的通用指南：响应式与状态变体、深色模式、克制使用任意值、优先拆组件再用 @apply，以及动态拼接类名导致生产环境缺样式等常见问题，附按钮与首屏版式示例。

用 IntersectionObserver 加 Tailwind 任意值动画类实现元素进入视口时的入场动画，给出关键帧与观察器代码片段，可调整触发阈值、rootMargin、时长、延迟以及是否只播放一次。

UnoCSS 原子化 CSS 引擎的参考：配置、规则、快捷方式、主题与变体，Wind3、Wind4（兼容 Tailwind）、Icons、Attributify 等预设，转换器以及 Vite 与 Nuxt 集成。提醒 agent 写样式前先看项目的 uno.config，配置不明时只用普通 class。由 Anthony Fu 从官方文档生成。

用无头浏览器读取任意网站的设计系统，一条命令导出颜色、字体、间距等设计令牌（DTCG）、Tailwind 配置、Figma 变量和品牌规范手册，还能给配色对比度与多页一致性打分；也可作为 MCP 服务或 Claude Code 插件使用。需要 Node.js，首次要下载 Chromium（也可改用已安装的 Chrome）。

先通过提问了解设计范围、痛点、参考产品、品牌调性与约束，再从项目现有的 Tailwind 配置、CSS 变量或组件库主题中提取视觉语言，在临时路由里生成 5 个不同的界面方案并附带交互式反馈浮层，按反馈迭代后输出实现计划，结束或取消时清理所有临时文件。面向 Next.js、Vite 等 React 项目。

设计令牌命令行工具（原名 Cobalt UI）：读取符合 W3C DTCG 标准的颜色、字体、间距等令牌，校验后通过插件生成 CSS、Sass、JS/TS、Swift、Tailwind 等代码，可放进 CI，让设计规范自动落到代码里。需要 Node.js 项目。

在网页项目中使用 OKLCH 色彩空间：把 hex、rgb、hsl 转成 oklch，生成没有色相漂移的色阶与暗色模式配色，用 APCA 或 WCAG 检查对比度并只调亮度来修正，处理 P3 色域与 sRGB 回退，以及 Tailwind v4 的 @theme 配置；修改结果以前后对照表呈现。

用 Tailwind CSS 实现瑞士国际主义风格的设计系统：12 栏网格与 8px 基准间距、IBM Plex Sans 字体与细字重标题、stone 色板，用不透明度而不是换色区分层级，每个项目只用一种强调色，正文宽度不超过 60ch，移动端优先并支持深色模式。

给卡片、对话框、下拉菜单、提示框等浮起的元素加阴影时，用 smooth-shadow-ring 系列工具类代替边框或 ring 加阴影的写法，避免出现两道边线，并说明描边与阴影的着色、暗色模式和覆盖方式。需要项目里装了 shadow-plugin 这个 Tailwind 插件。

写或评审响应式 Tailwind 代码时，让组件按所在容器的宽度而不是视口宽度调整布局：用 @container 与 @md: 等变体替换 sm:/md:/lg:，说明哪些页面级布局仍应保留视口断点，给出迁移步骤与评审时的常见错误。Tailwind v3 需要额外插件。

在 Next.js App Router 项目中，agent 只改动单个 CSS 值或 Tailwind 类时，页面上会出现浮动调节条，用户用方向键微调数值、切换相关属性，回车复制修改提示、Esc 还原。需在 app/layout.tsx 引入 budge.design 托管的运行时脚本。

修复相邻可交互元素之间的悬停与点击死区：图表柱、列表行、导航项、标签页等用 gap 或 margin 留白时，指针落在间隙里会失效或闪烁；改为让元素紧贴铺满各自的槽位，把视觉间距移到元素内部，附 React/Tailwind 示例。