（10398期）Ui Skills – AI智能体界面构建约束规范集

AI智能体界面构建约束规范集 为AI智能体提供结构化UI约束规范，涵盖组件、动画、性能等最佳实践，提升界面一致性与可访问性 使用说明 核心用法 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层：覆盖文本渲染、层级管理、性能优化及视觉设计决策 显著优点 权威性来源：规范直接源自现代前端最佳实践（Framer Motion团队、Tailwind Labs、Radix UI设计理念），与业界主流工具链深度对齐 可执行性强：规则表述精确（MUST/SHOULD/NEVER），LLM可直接转化为代码审查清单或生成约束 性能优先导向：明确禁止布局抖动、强制合成层动画、限制blur/backdrop-filter滥用，契合Core Web Vitals优化目标 可访问性内建：强制aria-label、尊重reduce-motion、使用成熟可访问原语，降低合规成本 一致性保障：通过"项目既有原语优先""禁止混用系统"等规则，防止技术债务累积 潜在缺点与局限性 技术栈锁定：深度绑定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可能使部分规范过时 原始说明 Opinionated constraints for building better interfaces with agents.