工具集

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

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

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、时长、延迟以及是否只播放一次。

用无头浏览器读取任意网站的设计系统，一条命令导出颜色、字体、间距等设计令牌（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 插件。

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

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

把 Paper 设计稿（经 Paper MCP、Viewfinder 或导出的 JSX）实现为 React/Next.js 代码前先梳理层级、识别可复用组件；每个图标单独成组件，任意值收进 globals.css 令牌，优先复用 shadcn 组件，移植真实字体，图表按数据建模。

在保持视觉不变的前提下减少 Tailwind v4 globals.css 中的设计令牌：先建立用法映射算出仍在使用的令牌，删除无用令牌、合并亮暗模式下都相近的值，用脚本统一重命名代码中的类名，每轮跑类型检查、lint 与构建验证。

Prototyper UI 组件库的动效规范：浮层、对话框、侧边面板的进出场类名，按压反馈的缩放比例，状态过渡，缓动令牌与选用决策，用于编写、审查或调试组件动画，并统一用 motion-reduce 处理减少动态效果。

Prototyper UI 组件库的使用指南：基于 @base-ui/react 与 Tailwind CSS v4，以复制源码的方式分发，采用 OKLCH 配色与 CVA 变体。说明安装依赖、令牌文件、组件选型与常用写法，并提醒它不是 Radix，用 render 属性代替 asChild。