基准 UI

Baseline UI

使用场景

当你需要通过修复间距、层级、排版和微小的布局问题来快速清理 UI 代码时，请使用此技能。适用于界面需要快速清理或润色时。

强制执行一套具有主见的 UI 基准，以防止 AI 生成的界面出现混乱（slop）。

如何使用

• /baseline-ui

将这些约束应用于本次对话中的所有 UI 工作。

• /baseline-ui <file>

根据以下所有约束审查文件并输出： - 违规项（引用具体行/代码片段） - 影响原因（一句简短的话） - 具体修复方案（代码级建议）

技术栈

• 除非已存在自定义值或有明确要求，否则必须使用 Tailwind CSS 默认值

• 需要 JavaScript 动画时，必须使用 motion/react（原 framer-motion）

• 在 Tailwind CSS 中，入场动画和微动画建议使用 tw-animate-css

• 类名逻辑必须使用 cn 工具函数（clsx + tailwind-merge）

组件

• 任何具有键盘或焦点行为的组件必须使用无障碍组件原语（Base UI、React Aria、Radix）

• 必须优先使用项目中现有的组件原语

• 同一个交互界面内绝不能混用不同的原语系统

• 如果与技术栈兼容，新原语建议优先使用 Base UI

• 仅包含图标的按钮必须添加 aria-label

• 除非明确要求，否则绝不要手动重新构建键盘或焦点行为

交互

• 破坏性或不可逆的操作必须使用 AlertDialog

• 加载状态建议使用结构化骨架屏（skeletons）

• 绝不要使用 h-screen，请使用 h-dvh

• 固定元素必须尊重 safe-area-inset

• 错误信息必须显示在操作发生的位置旁边

• 绝不要在 input 或 textarea 元素中禁用粘贴

动画

• 除非明确要求，否则绝不要添加动画

• 必须仅对合成属性（transform、opacity）进行动画处理

• 绝不要对布局属性（width、height、top、left、margin、padding）进行动画处理

• 除非是微小的局部 UI（文本、图标），否则应避免对绘制属性（background、color）进行动画处理

• 入场动画建议使用 ease-out

• 交互反馈时间绝不能超过 200ms

• 循环动画在离开屏幕时必须暂停

• 应尊重 prefers-reduced-motion（减少动态效果）设置

• 除非明确要求，否则绝不要引入自定义缓动曲线

• 应避免对大图或全屏表面进行动画处理

排版

• 标题必须使用 text-balance，正文/段落必须使用 text-pretty

• 数据必须使用 tabular-nums

• 密集 UI 建议使用 truncate 或 line-clamp

• 除非明确要求，否则绝不要修改字间距（tracking-*）

布局

• 必须使用固定的 z-index 阶梯（不要使用任意的 z-*）

• 正方形元素建议使用 size-* 而非 w-* + h-*

性能

• 绝不要对大面积的 blur() 或 backdrop-filter 表面进行动画处理

• 绝不要在非活动动画之外应用 will-change

• 凡是可以用渲染逻辑表达的，绝不要使用 useEffect

设计

• 除非明确要求，否则绝不要使用渐变色

具体要求

• 绝不要使用紫色或多色渐变

• 绝不要将发光效果作为主要交互暗示

• 除非有明确要求，否则应使用 Tailwind CSS 默认的阴影比例

• 必须为空白状态提供一个明确的下一步操作

• 每个视图中的强调色应限制在一种

• 在引入新颜色之前，应优先使用现有主题或 Tailwind CSS 颜色令牌

局限性

• 仅在任务与上游来源及本地项目上下文明确匹配时使用此技能。

• 在应用更改前，请验证命令、生成的代码、依赖项、凭据以及外部服务的行为。

• 不要将示例视为环境特定测试、安全审查或破坏性/高成本操作用户确认的替代方案。