Using UI Stack 是一个面向 UI 生成过程的设计系统约束技能，目标是在生成每个 UI 组件时应用一套结构化设计系统，从而防止出现内边距不一致、颜色不匹配以及悬停状态被遗忘等问题。
用途 该技能用于在生成 UI 时强制执行配置驱动的设计系统，确保间距、颜色、排版、暗色模式、交互和无障碍等方面保持一致。
主要能力
- 间距：遵循 8px 网格，所有间距（padding、margin、gap）使用 8 的倍数。具体包括：4px 仅用于紧凑的内部内边距；8px 用于行内间隙、图标间距；16px 用于标准内边距、卡片间隙；24px 用于区块内边距；32px 用于大区块间隙；48px / 64px 用于页面级间距。
- 颜色：采用 60-30-10 规则，即 60% 中性/背景色、30% 主品牌色、10% 强调色用于 CTA 和高亮。语义颜色包括成功（绿色）、警告（琥珀色）、错误（红色）、信息（蓝色）。暗色模式绝不使用纯黑（#000），而使用 slate-950 或类似颜色。
- 排版：使用 1.25 比例尺度，具体为 text-xs: 12px / 16px；text-sm: 14px / 20px；text-base: 16px / 24px；text-lg: 18px / 28px；text-xl: 20px / 28px；text-2xl: 24px / 32px；text-3xl: 30px / 36px；text-4xl: 36px / 40px。标题使用 font-semibold 或 font-bold；正文使用 font-normal，行高 1.5–1.75；等宽字体用于代码、ID、数值数据。
- 暗色模式：为每个颜色令牌提供完整的明暗映射。背景：white → slate-950，而非黑色；文本：slate-900 → slate-100；边框：slate-200 → slate-800。
- 五态交互：每个交互元素必须具备默认（基础外观）、悬停（细微颜色变化或阴影）、按下（稍暗或缩小）、聚焦（可见环，ring-2 ring-offset-2）、禁用（降低不透明度，cursor-not-allowed）五种状态。
- 无障碍：文本对比度 ≥ 4.5:1，大文本 ≥ 3:1；触控目标 ≥ 44×44px；使用语义化 HTML（用 button 而非 div，使用 nav、main 等）；键盘可导航，所有交互可通过 Tab/Enter/Escape 到达；动画尊重 prefers-reduced-motion。
- 动画：微交互时长 150–300ms；缓动：进入用 ease-out，退出用 ease-in；将动效包裹在 motion-safe: 中或检查 prefers-reduced-motion。
- 覆盖层 Z-Index 尺度：dropdown: z-10；sticky: z-20；overlay: z-30；modal: z-40；toast: z-50；tooltip: z-60。
使用方式 工作流程为：生成 UI 前，检查项目是否已有 ui-stack 配置或设计令牌；如果没有，则应用上述默认规则；对每个组件，验证间距是否在 8px 网格上、颜色是否遵循 60-30-10、是否具备全部五种交互状态；通过切换 class/attribute 测试暗色模式，确认所有令牌映射正确。
适用场景 适用于在生成 UI 组件时希望保持设计一致性的开发与设计场景，尤其是需要统一间距、颜色、排版、暗色模式、交互状态和无障碍标准的项目。
限制 资料未提供该技能的具体安装命令、支持的平台、收费方式或价格信息。参考资料包括 ui-stack.dev（交互式配置器和完整文档）以及 GitHub 仓库 rashoodkhan/ui-stack。