工具集

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

用 HTML 与 CSS 排版并导出 PDF 的渲染引擎，支持分页等打印样式标准，适合批量生成统计报告、发票与票据。Python 实现，依赖系统的 Pango 库。

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

实现无缝循环的跑马灯，用于滚动展示标识、用户评价、截图或标签：复制一份元素序列，用线性 transform 从 0 平移到 -50%，固定元素宽度、边缘渐隐，并照顾 prefers-reduced-motion。

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

用多层 backdrop-filter 与渐变遮罩在页面顶部或底部做出由弱到强的渐进模糊，提供可直接粘贴的 HTML 与 CSS，可调整高度、模糊层级、方向与 z-index，且不拦截点击。

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

在页面内容容器左右边缘画 1px 低透明度的竖向参考线，并在区块角落加小方块，营造精确、有结构感的版式；提供 CSS 变量与伪元素写法，参考线不拦截点击与选中。

打磨已有的动效而不是新增过渡：按 transitions.dev 的动效令牌检查时长、位移、缩放、模糊与缓动五个维度，先判断动画用途再匹配令牌，并给出开合不对称、悬停进出、错开间隔与意图延迟等规则。是 transitions-dev 技能的配套，也可单独用于动效审计。

transitions.dev 时间线检查器里 Refine 按钮的对话内后备方案：agent 轮询本地中继服务领取任务，按 transitions.dev 的动效令牌调整时长、缓动、缩放与模糊，或推荐整套过渡方案，也能扫描源码分组并把接受的修改写回代码。闲置轮询也会消耗对话额度，作者更推荐用 npx transitions-refine live 常驻运行。

按需给 agent 提供现代 Web 平台的实践指南，涵盖 View Transitions、容器查询、Popover、INP 优化、无障碍等，并附浏览器兼容数据，避免写出过时的代码。由 Google Chrome 团队官方维护，目前是预览版。

按《Refactoring UI》书中的具体规则设计和改进界面：间距、字号、颜色、阴影都从事先定好的刻度里取值，用字重与颜色而不是字号建立层级，用模拟光源营造层次；适合界面看着不对劲、显得业余或杂乱时使用。

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

按新工业、编辑式粗野主义风格设计或改造网页界面：先定模式、主视觉动作、网格与单一强调色，再从宏观到细节确定版式、字体层级与图形元素，保留语义 HTML、键盘操作与对比度，并在宽屏与手机宽度下检查渲染效果。只用于明确要求这种风格时。

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

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

给界面加功能性的微动效：悬停与按下反馈、开关、点赞按钮、提示条、抽屉、弹窗、列表增删与排序、共享元素过渡，规定 100–250ms 的时长、进入慢退出快的节奏与缓动曲线，只动 transform 与 opacity，并尊重减少动态效果设置。基于 Framer Motion（motion/react）与现代 CSS。

给 SVG 做动画：描边逐步绘制、路径变形（GSAP MorphSVG 或 Flubber）、沿路径运动、图标状态切换，以及渐变与滤镜动画，按任务在 CSS、SMIL 与 GSAP 之间选择实现方式。

做毛玻璃与「液态玻璃」风格的界面：用 backdrop-filter 模糊、半透明底色、高光边线与多层阴影组成玻璃质感，用 SVG 位移滤镜做折射效果，给悬停、滚动与出现过程加动效，并为「降低透明度」设置提供可读的降级样式。

按改编到网页的迪士尼动画 12 原则审查动效代码，分时长、缓动、物理、编排四类规则检查，例如用户触发的动画须在 300ms 内完成、入场用 ease-out、按压要有缩放反馈，以 file:line 格式输出问题。

提供十二种可直接粘贴的 CSS 过渡：卡片尺寸变化、数字跳入、通知角标、文字切换、下拉菜单、弹窗开合、面板滑入、页面左右切换、图标切换、成功对勾、头像组悬停与错误抖动，用统一的 CSS 变量配置，不依赖框架，均带减少动态效果的处理。

构建紧凑、精致的落地页与产品页骨架：动手前先定好构图、配色、字体、圆角、表面与动效等「设计指纹」，每次换一种视觉方向，突出一个产品本身的演示件，首屏放主要操作；动效只用 transform、opacity 与 filter，保证零布局偏移，兼顾移动端、键盘焦点与减少动态效果设置。

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

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