用途
design-frontend 用于在实现 Web 界面视觉设计时提供设计系统层面的指导，目标是构建一致、可访问、响应式的界面。它适合在搭建或维护组件库的主题与样式体系时使用，尤其涉及 Tailwind CSS v4 的设计令牌与运行时主题能力。
资料给出的正向触发示例是：用户要求“为组件库搭建一套支持暗色模式的 Tailwind 设计令牌系统”。反向示例如“编写一个用于用户认证的 Node.js REST API”，此情境不应使用该技能。
主要能力
资料明确的核心模式包括：
- 设计令牌（design tokens）：颜色、间距、排版，以 @theme 中的 CSS 变量形式定义。
- 响应式断点与容器查询。
- 暗色模式，并强调正确的对比度。
- 组件组合（component composition）。
- 间距尺度（spacing scales）。
规则按关注点组织：
- Layout：最大宽度容器、一致的间距、视觉层级。
- Responsive Design：移动优先方法、断点、容器查询。
- Design Tokens：色阶、间距尺度、字体族。
- Dark Mode：正确的对比度、颜色配对、用于主题化的 CSS 变量。
- Components：触控目标、可供性（affordances）、可访问性。
使用方式
资料描述的工作流如下：
- 定义令牌——将颜色、间距、排版、阴影作为 CSS 变量放在 @theme 中。
- 选择容器——用 @container 包裹组件以启用容器查询。
- 移动优先构建——从移动端布局开始，向上逐级添加断点。
- 测试暗色模式——使用 dark: 变体，并确保对比度。
- 校验触控目标——交互元素最小 44x44px。
- 衡量性能——CSS-in-JS 库会影响绘制时间；Tailwind 为零运行时。
资料的实现模式与示例位于 rules/ 目录。
适用场景
适用于为 Web UI 建立或统一视觉设计系统，包括：用设计令牌管理主题；实现跨断点与容器尺寸的响应式布局；实现可访问的暗色模式；约束组件触控目标尺寸；在样式方案选型中考虑运行时性能（如 Tailwind 的零运行时特性）。
限制与注意事项
资料强调的常见问题包括：
- 在类中硬编码颜色值，导致主题变更需重构；解决方式是使用 @theme 将颜色定义为 CSS 变量，并通过 var(--color-*) 引用。
- 暗色模式发灰、深色背景对比度低；原因是颜色配对未协同设计、误以为直接反转即可；解决方式是测试暗色变体，使用具备正确对比度的色阶。
- 容器查询不生效、元素不随容器尺寸响应；原因是父元素未标记 @container 类；解决方式是为父元素加 @container，并在子元素上使用 @sm:、@md:、@lg: 变体。
- 暗色模式样式未应用、dark: 变体被忽略；原因是未配置暗色模式，需在配置中使用 darkMode: "class" 或 "media"；解决方式是在 tailwind.config.js 或 CSS @custom-variant 中配置暗色模式。
- 触控目标过小、用户难以点击按钮；原因是过度针对桌面优化、假设移动端有鼠标级精度；解决方式是触控目标最小使用 h-11 / w-11（44px）。
关于该技能的收费、价格、支持平台或具体安装命令，资料中暂未提供。