用途：这是一个面向 AI 智能体的前端 UI 设计技能，适用于设计或审查组件（按钮、卡片、表单、导航栏、弹窗）、编写带具体数值的 CSS、评估界面视觉与可用性。触发场景包括“设计某组件”“让界面更好看”“审查我的 UI”“搭建落地页”“如何给某元素写样式”，以及任何涉及视觉设计、CSS 或组件架构的请求。
主要能力与规范： 组件——卡片使用细微边框与 1.25rem 以上内边距，悬停时轻微上移（translateY -2px）加边框发光，文字层级不超过三层，背景比页面背景亮 1-2 档；按钮分主按钮（实心、加粗、轻微阴影）、次按钮（描边、透明背景）、幽灵按钮（无边框、悬停加下划线），均需包含悬停、按下、聚焦状态，最小触控目标 44px；表单标签置于输入框上方而非浮动，输入内边距 0.875rem，聚焦环使用强调色而非浏览器默认，错误状态用粉红/红边框加下方辅助文字，成功用绿色强调并配短暂动画。 布局——使用基于 0.25rem 的间距刻度（xs 0.25rem 至 3xl 4rem），最大内容宽度 1200px，左右内边距 2rem（移动端 1rem），列间距 1.5-2rem，移动端单列；字体：标题加粗、字距 -0.02em，正文 1rem、行高 1.6，小字 0.875rem，代码用等宽字体。 色彩——始终定义 CSS 变量，不硬编码颜色，示例变量含背景、文字、边框、强调色与圆角等；深色模式反转背景层级、保留强调色并略增边框不透明度；主张深色优先。 动效——悬停过渡 0.2-0.25s ease，页面过渡 0.3s ease，UI 动画不超过 0.5s，只使用 transform 与 opacity，避免动画布局属性，频繁动画元素可加 will-change: transform。 发布前检查清单：悬停、聚焦（键盘可达）、按下、加载、空、错误状态，移动端布局（<768px），深色模式兼容。
限制与反模式：禁止文字容器固定像素宽度、!important、z-index 大于 100、对比度不足（至少 WCAG AA）、仅悬停交互（移动端无悬停）、outline: none 而无替代聚焦样式。原资料给出的 CSS 变量示例较长，此处未逐行抄录，使用时可按上述字段名参考原文。其余如收费、平台支持等信息暂未提供。