UI Skills Tailwind CSS 类规则集详解从MUST到NEVER的完整指南【免费下载链接】ui-skillsSkills for Design Engineers项目地址: https://gitcode.com/GitHub_Trending/ui/ui-skillsUI Skills 是一个面向设计工程师的 AI 技能集合其中最核心的baseline-ui 技能用一套从 MUST必须到 NEVER严禁的三级 Tailwind CSS 类名规则帮助 AI 写出不油腻的整洁界面。本文带你 5 分钟读懂这套规则集的核心用法。为什么需要一套 UI 类名规则如果你用 AI 生成过前端界面大概率见过这类AI 味紫色渐变、炫光效果、乱飞的动画、h-screen撑爆页面……问题不在模型而在于缺少明确的约束。UI Skills 的思路是把资深工程师的审美判断写成机器可执行的规则用三个层级表达层级含义例子✅MUST必须遵守标题用text-balance数据用tabular-numsSHOULD建议采用入场动画用ease-outNEVER绝对禁止禁止用h-screen应改用h-dvh这套规则完整定义在 skills/baseline-ui/SKILL.md 中约 30 条全部聚焦快速打磨界面这一件事。快速上手两条命令加载技能规则再好也要会用。UI Skills 提供了 CLI让 Codex、Cursor、Claude Code 等 AI 工具自动找到正确的技能集npx ui-skills start # 让 AI 自动路由到合适的技能 npx ui-skills get baseline-ui # 单独获取本规则集在对话中直接输入/baseline-ui规则就会应用到当前所有 UI 工作输入/baseline-ui 文件则会对指定文件做一次违规检查输出每条违规的行、原因和具体修复建议。MUST 清单那些必须遵守的硬约束MUST 规则占规则集的大头也是最容易立竿见影的部分技术栈MUST 使用 Tailwind CSS 默认值除非项目已有自定义值类名组合逻辑 MUST 用cn工具函数clsxtailwind-merge无障碍MUST 使用成熟的可访问组件原语Base UI、React Aria、Radix 等纯图标按钮 MUST 加aria-label交互破坏性操作 MUST 用AlertDialog确认错误提示 MUST 显示在操作发生的位置排版标题 MUST 加text-balance自动平衡断行正文 MUST 加text-pretty数字数据 MUST 加tabular-nums防止跳动性能MUST 只动画合成器属性transform、opacity循环动画离开视口时 MUST 暂停一句话总结MUST 规则保证下限——就算什么都不懂照着做也不会翻车。NEVER 红线AI 生成界面的重灾区NEVER 规则针对的是 AI 最爱犯的几个错误值得逐条细看布局红线 禁止h-screen改用h-dvh动态视口高度移动端更准确 禁止随意的z-*值必须使用固定 z-index 刻度正方形元素 SHOULD 用size-*一个类代替w-*h-*两个类动画红线 没有明确要求就不要加任何动画 禁止动画布局属性width、height、top、left、margin、padding——这是掉帧的元凶 交互反馈动画不得超过200ms 禁止擅自引入自定义缓动曲线设计红线 禁止渐变除非明确要求尤其禁止紫色/多彩渐变 禁止用发光效果作为主要交互提示 禁止修改letter-spacingtracking-*这些红线正好对应项目自身的 DESIGN.md 设计语言安静、编辑感、代码优先中性调色板不用装饰性颜色和渐变——规则集与项目审美完全自洽。配套技能规则之外的补强baseline-ui 不是孤军作战。UI Skills 按主题拆分了多个技能路由层 skills/ui-skills-root/SKILL.md 会按主题 → 技术栈 → 具体程度选择最少可用技能最多 3 个动画性能skills/fixing-motion-performance/SKILL.md —— 修复卡顿动画、布局抖动、滚动联动含 9 个优先级分类无障碍skills/fixing-accessibility/SKILL.md —— 从可访问名称、键盘操作到焦点管理元数据skills/fixing-metadata/SKILL.md —— 标题、OG 标签、canonical 等 SEO 元信息设计文档skills/create-design-md/SKILL.md —— 从现有代码库自动提炼 DESIGN.md每个技能都遵循同一套使用方式不带参数即应用约束带文件名即审查并给出修复。总结从AI 味到工程感的三步加载规则npx ui-skills start让 AI 先学会规矩对照三级规则写代码MUST 保底、SHOULD 加分、NEVER 避坑用专项技能做体检动画卡跑fixing-motion-performance表单报错跑fixing-accessibility整套技能清单和分类可以通过 README.md 中的npx ui-skills categories命令查看。这套规则集的价值在于把好界面长什么样从玄学变成了可执行清单——对新手尤其友好。【免费下载链接】ui-skillsSkills for Design Engineers项目地址: https://gitcode.com/GitHub_Trending/ui/ui-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
UI Skills Tailwind CSS 类规则集详解从MUST到NEVER的完整指南【免费下载链接】ui-skillsSkills for Design Engineers项目地址: https://gitcode.com/GitHub_Trending/ui/ui-skillsUI Skills 是一个面向设计工程师的 AI 技能集合其中最核心的baseline-ui 技能用一套从 MUST必须到 NEVER严禁的三级 Tailwind CSS 类名规则帮助 AI 写出不油腻的整洁界面。本文带你 5 分钟读懂这套规则集的核心用法。为什么需要一套 UI 类名规则如果你用 AI 生成过前端界面大概率见过这类AI 味紫色渐变、炫光效果、乱飞的动画、h-screen撑爆页面……问题不在模型而在于缺少明确的约束。UI Skills 的思路是把资深工程师的审美判断写成机器可执行的规则用三个层级表达层级含义例子✅MUST必须遵守标题用text-balance数据用tabular-numsSHOULD建议采用入场动画用ease-outNEVER绝对禁止禁止用h-screen应改用h-dvh这套规则完整定义在 skills/baseline-ui/SKILL.md 中约 30 条全部聚焦快速打磨界面这一件事。快速上手两条命令加载技能规则再好也要会用。UI Skills 提供了 CLI让 Codex、Cursor、Claude Code 等 AI 工具自动找到正确的技能集npx ui-skills start # 让 AI 自动路由到合适的技能 npx ui-skills get baseline-ui # 单独获取本规则集在对话中直接输入/baseline-ui规则就会应用到当前所有 UI 工作输入/baseline-ui 文件则会对指定文件做一次违规检查输出每条违规的行、原因和具体修复建议。MUST 清单那些必须遵守的硬约束MUST 规则占规则集的大头也是最容易立竿见影的部分技术栈MUST 使用 Tailwind CSS 默认值除非项目已有自定义值类名组合逻辑 MUST 用cn工具函数clsxtailwind-merge无障碍MUST 使用成熟的可访问组件原语Base UI、React Aria、Radix 等纯图标按钮 MUST 加aria-label交互破坏性操作 MUST 用AlertDialog确认错误提示 MUST 显示在操作发生的位置排版标题 MUST 加text-balance自动平衡断行正文 MUST 加text-pretty数字数据 MUST 加tabular-nums防止跳动性能MUST 只动画合成器属性transform、opacity循环动画离开视口时 MUST 暂停一句话总结MUST 规则保证下限——就算什么都不懂照着做也不会翻车。NEVER 红线AI 生成界面的重灾区NEVER 规则针对的是 AI 最爱犯的几个错误值得逐条细看布局红线 禁止h-screen改用h-dvh动态视口高度移动端更准确 禁止随意的z-*值必须使用固定 z-index 刻度正方形元素 SHOULD 用size-*一个类代替w-*h-*两个类动画红线 没有明确要求就不要加任何动画 禁止动画布局属性width、height、top、left、margin、padding——这是掉帧的元凶 交互反馈动画不得超过200ms 禁止擅自引入自定义缓动曲线设计红线 禁止渐变除非明确要求尤其禁止紫色/多彩渐变 禁止用发光效果作为主要交互提示 禁止修改letter-spacingtracking-*这些红线正好对应项目自身的 DESIGN.md 设计语言安静、编辑感、代码优先中性调色板不用装饰性颜色和渐变——规则集与项目审美完全自洽。配套技能规则之外的补强baseline-ui 不是孤军作战。UI Skills 按主题拆分了多个技能路由层 skills/ui-skills-root/SKILL.md 会按主题 → 技术栈 → 具体程度选择最少可用技能最多 3 个动画性能skills/fixing-motion-performance/SKILL.md —— 修复卡顿动画、布局抖动、滚动联动含 9 个优先级分类无障碍skills/fixing-accessibility/SKILL.md —— 从可访问名称、键盘操作到焦点管理元数据skills/fixing-metadata/SKILL.md —— 标题、OG 标签、canonical 等 SEO 元信息设计文档skills/create-design-md/SKILL.md —— 从现有代码库自动提炼 DESIGN.md每个技能都遵循同一套使用方式不带参数即应用约束带文件名即审查并给出修复。总结从AI 味到工程感的三步加载规则npx ui-skills start让 AI 先学会规矩对照三级规则写代码MUST 保底、SHOULD 加分、NEVER 避坑用专项技能做体检动画卡跑fixing-motion-performance表单报错跑fixing-accessibility整套技能清单和分类可以通过 README.md 中的npx ui-skills categories命令查看。这套规则集的价值在于把好界面长什么样从玄学变成了可执行清单——对新手尤其友好。【免费下载链接】ui-skillsSkills for Design Engineers项目地址: https://gitcode.com/GitHub_Trending/ui/ui-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
