智能体界面规范

技能简介

ui-skills 是一套面向智能体（Agent）的界面开发约束规范，提供从组件选型、动画策略到布局与性能的完整指导原则，帮助开发者构建一致、可访问且高性能的用户界面。

业务背景

智能体界面规范为前端团队提供统一的开发标准，确保AI产品界面在视觉一致性、交互流畅度和无障碍体验上达到专业水准。通过约束组件选型与动画策略，减少设计决策成本，让业务人员获得响应迅速、易于使用的智能体应用界面。

落地案例：某企业开发客户服务智能体时，采用该规范统一使用Tailwind CSS构建对话界面，规范微交互动画时长控制在200ms内，并内置减弱动效适配。开发团队无需反复讨论技术方案，直接依据约束规则完成组件选型与性能优化，确保最终交付的聊天窗口加载流畅、键盘操作完备，满足不同用户的无障碍访问需求。

能做什么

• 强制使用 Tailwind CSS 默认设计系统，减少自定义值滥用
• 规范动画实现方式，优先使用 GPU 加速属性
• 确保组件无障碍支持，避免手动重建键盘行为
• 统一项目技术栈选择，降低维护成本
• 提供性能优化 checklist，避免常见渲染瓶颈

使用说明

本技能为规范文档型技能，无需安装。使用时将相关约束直接应用于项目：

1. 在项目中引入 motion/react 处理 JavaScript 动画
2. 配置 tw-animate-css 实现入场微动画
3. 使用 cn 工具函数（clsx + tailwind-merge）管理类名逻辑
4. 组件层优先选用 Base UI、React Aria 或 Radix 等无障碍原语
5. 遵循固定 z-index 层级体系，禁用任意值如 z-50

输入与输出

见下方输入与输出表格。

风险提示

• 禁止混用多套组件原语系统于同一交互区域
• 动画时长超过 200ms 可能导致交互反馈迟钝
• 忽略 prefers-reduced-motion 可能造成可访问性违规
• 手动实现键盘行为易引入兼容性缺陷

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/correctroadh/ui-skills/SKILL.md
来源类型：GitHub 仓库文档