UI Design Skill (Web)——该技能用于指导 Web 界面的视觉与无障碍设计，核心约束是强制符合 WCAG 2.1 AA 标准。资料将无障碍要求列为不可协商的规则，逐项规定了颜色对比度、可见性、焦点状态与暗黑模式对比的门槛。
【无障碍规则】 颜色对比度：普通文本（小于 18px）最低 4.5:1；大号文本（18px 粗体或 24px 以上）最低 3:1；UI 组件（按钮、输入框）最低 3:1；焦点指示器最低 3:1。资料明确列出不可用组合，例如白底上的 gray-400（#9CA3AF on #FFFFFF，2.6:1，不合格）、白底上的 gray-500（4.6:1，勉强通过）、黄底白字、白底浅蓝文字；并给出安全组合，如白底 gray-700（9.2:1）、gray-600（6.4:1）、gray-900（16:1），以及 gray-900、blue-600、green-700 上的白字。 可见性规则：所有按钮必须有可见背景色或至少 1px 的可见边框，文字与背景须有对比，最小高度 44px（触控目标），内边距至少 px-4 py-2；禁止透明背景且无边框的按钮、文字与背景同色、无可见边框的幽灵按钮、浅色背景上的白字、深色背景上的深色文字。 焦点状态：每个可交互元素都需要可见焦点，示例为 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2；禁止在没有替代方案时单纯使用 outline-none。 暗黑模式对比：文字须为浅色（gray-100 至白色）配深色背景，边框需可见（gray-700 或更浅），禁止 gray-900 背景上的 gray-400 文字；安全组合如 gray-900 底白字、gray-800 底 gray-100、gray-900 底 gray-200；不安全组合如 gray-900 底 gray-500（2.4:1）、gray-800 底 gray-400（3.1:1）。
【设计原则】 视觉层级分为主操作（醒目高对比）、次操作（低调低对比）、三级/链接（极简文本样式）。间距采用 8px 网格，给出 xs 到 2xl 的 Tailwind 对应值（p-1 至 p-12），并强调留白越多越显高级、一致间距优于绝对完美。字体层级限制每页 3 至 4 个字号，配方为 hero（text-4xl md:text-5xl font-bold tracking-tight）、heading、subheading、body、caption；字体家族不超过两种，正文行高 1.5 至 1.7。
【玻璃拟态】 资料给出基础玻璃卡片与浅色玻璃、深色玻璃、磨砂侧边栏、浮动操作玻璃等变体代码，典型组合为 backdrop-blur-xl、bg-white/10、border border-white/20、rounded-2xl 加阴影。适用场景包括有背景图的 hero 区、渐变上的浮动卡片、模态遮罩、导航栏（克制使用）、特色高亮；不适用场景包括每张卡片都用、文本密集区、表单（降低对比）和数据表格。
【颜色系统与组件】 语义色定义包括 primary（bg-blue-600）、secondary、danger、success，以及背景、表面、抬升表面和三级文本色。渐变示例有网格渐变、鲜艳 hero 渐变和径向光晕。组件模式覆盖主按钮、次按钮、幽灵按钮、卡片、可交互卡片、带标签和错误态的输入框，均提供完整 Tailwind 类名示例。
【微交互与布局】 过渡时长分为 fast 150ms、normal 200ms、slow 300ms、spring 500ms ease-out，规则是交互元素都应有过渡，150 至 300ms 感觉响应灵敏，超过 500ms 显得拖沓。悬停效果包括缩放、抬升、光晕和边框高亮。加载状态提供骨架屏、旋转加载器和按钮加载态。布局包含统一 max-w-7xl 容器、py-16 md:py-24 的分节间距、响应式功能网格和 bento 网格。
【暗黑模式与无障碍实现】 给出主题切换组件示例与明/暗色配对表（如 white 对 gray-950、gray-50 对 gray-900、gray-900 文本对 white 文本）。无障碍部分再次强调 WCAG AA/AAA 对比要求、焦点环、屏幕阅读器技巧（srOnly 类、图标按钮需 aria-label、role=status 与 aria-live 播报动态内容）。
【反模式】 资料列出的禁止项包括：一页超过 3 个字号、随机间距、纯黑配纯白、未检查对比度的彩色文字叠彩色背景、UI 动画超过 500ms、到处使用玻璃拟态、给所有元素加投影、文字使用渐变、无法停止的自动播放动画、移除焦点指示、对比度低于 4.5:1 的灰色文字、小于 44px 的点击目标；还提示避免叠加多种阴影、圆角不统一、多个焦点竞争、过度装饰。
【快速参考】 现代默认值：圆角 12 至 16px、阴影微妙、字体 Inter/SF Pro/system-ui、主色为近黑或品牌色、过渡 200ms ease-out、间距为 8px 网格。高级感清单涵盖充裕留白、柔和阴影、平滑过渡、一致圆角、有限配色（最多 2 至 3 色）、字体层级（最多 3 号）、高质量图像、悬停/焦点微交互与暗黑模式支持。