这是一个写给 AI 代理使用的界面开发约束集合，目标是让代理在构建界面时遵循统一、有主张的规则，而不是随意发挥。
技术栈方面：优先使用 Tailwind CSS 默认值（间距、圆角、阴影）再考虑自定义值；需要 JavaScript 动画时使用 motion/react（原 framer-motion）；Tailwind 中的入场与微动画建议用 tw-animate-css；类名逻辑必须使用 cn 工具（clsx + tailwind-merge）。
组件方面：任何涉及键盘或焦点行为的部分，必须使用可访问的组件原语（Base UI、React Aria、Radix）；优先使用项目已有的组件原语；同一交互面内不得混用不同原语体系；新原语若与栈兼容建议优先 Base UI；纯图标按钮必须加 aria-label；除非明确要求，不得手动重建键盘或焦点行为。
交互方面：破坏性或不可逆操作必须用 AlertDialog；加载状态建议用结构性骨架屏；禁止使用 h-screen，改用 h-dvh；固定元素必须尊重 safe-area-inset；错误需显示在操作发生的位置附近；不得阻止在 input 或 textarea 中粘贴。
动画方面：除非明确要求，不添加动画；只动画合成器属性（transform、opacity）；不动画布局属性（width、height、top、left、margin、padding）；避免动画绘制属性（background、color），除非是文本、图标等小型局部 UI；入场建议 ease-out；交互反馈不超过 200ms；离屏时暂停循环动画；必须尊重 prefers-reduced-motion；除非明确要求，不引入自定义缓动曲线；避免动画大图或全屏表面。
排版与布局：标题用 text-balance，正文段落用 text-pretty；数据用 tabular-nums；密集 UI 建议用 truncate 或 line-clamp；除非明确要求，不改字距（tracking-）；使用固定 z-index 层级，不用任意 z-x；方形元素建议用 size-x 而非 w-x + h-x。
性能方面：不动画大面积 blur() 或 backdrop-filter；will-change 只在动画激活期间使用；能用渲染逻辑表达的，不用 useEffect。
设计方面：除非明确要求，不用渐变；不用紫色或多色渐变；不用发光效果作为主要可供性；阴影优先 Tailwind 默认尺度；空状态必须给出一个明确的下一步操作；每个视图建议只用一个强调色；优先使用既有主题或 Tailwind 颜色 token。