AI智能体界面构建约束规范集

为AI智能体提供结构化UI约束规范，涵盖组件、动画、性能等最佳实践，提升界面一致性与可访问性

基本信息

• 技能名称?Ui Skills
• 中文名称?AI智能体界面构建约束规范集
• 作者?correctroadh
• 分类?专业技能
• 版本?1.0.0
• 标签?ui-design, react, tailwind-css, accessibility, animation, performance, component-libraries, design-systems, ai-assisted-development

使用方法

使用说明
核心用法
UI Skills 是一套面向AI智能体的 观点式界面约束规范 ，旨在指导大语言模型生成高质量、一致性的用户界面代码。它并非可执行代码库，而是一组严格的MUST/SHOULD/NEVER规则集合，覆盖现代React/Tailwind技术栈的完整开发流程。
规范采用分层架构：
Stack层 ：强制使用Tailwind CSS默认设计令牌、motion/react动画库、tw-animate-css微动效
Components层 ：强制采用Base UI/React Aria/Radix等可访问原语，禁止混用不同底层系统
Interaction层 ：规范破坏性操作使用AlertDialog、错误就近展示、禁止阻断粘贴等交互细节
Animation层 ：严格限制动画实现方式——仅允许transform/opacity合成属性，禁止布局属性动画，时长上限200ms，必须支持prefers-reduced-motion
Typography/Layout/Performance/Design层 ：覆盖文本渲染、层级管理、性能优化及视觉设计决策
显著优点

1. 权威性来源 ：规范直接源自现代前端最佳实践（Framer Motion团队、Tailwind Labs、Radix UI设计理念），与业界主流工具链深度对齐
2. 可执行性强 ：规则表述精确（MUST/SHOULD/NEVER），LLM可直接转化为代码审查清单或生成约束
3. 性能优先导向 ：明确禁止布局抖动、强制合成层动画、限制blur/backdrop-filter滥用，契合Core Web Vitals优化目标
4. 可访问性内建 ：强制aria-label、尊重reduce-motion、使用成熟可访问原语，降低合规成本
5. 一致性保障 ：通过"项目既有原语优先""禁止混用系统"等规则，防止技术债务累积
   潜在缺点与局限性
   技术栈锁定 ：深度绑定React+Tailwind生态，对Vue/Svelte/原生CSS项目适配需额外转换成本
   灵活性受限 ："观点式"设计意味着部分决策（如禁止渐变、单强调色限制）可能与品牌需求冲突
   无自动 enforcement ：纯文档规范，依赖LLM自觉遵守或配合lint工具（如eslint-plugin-tailwindcss）实现硬约束
   更新滞后风险 ：motion/react等依赖快速迭代，规范需人工维护同步
   中文/复杂排版场景 ：text-balance/text-pretty等属性在CJK环境兼容性需验证
   适合人群
   AI Agent开发者 ：需为代码生成Agent设定UI输出边界
   全栈工程师 ：寻求React/Tailwind项目快速一致性方案
   设计系统维护者 ：作为代码审查checklist或生成式设计的约束输入
   技术负责人 ：规范团队AI辅助编码的输出质量标准
   常规风险
   误用风险 ：若Agent未正确解析NEVER规则，可能生成违规代码（如动画width/height导致布局抖动）
   过度约束 ：严格规则可能抑制合理例外场景，需人工override机制
   版本漂移 ：Tailwind CSS v4、motion/react新API可能使部分规范过时