这个技能会读取你的代码仓库的设计上下文：DESIGN.md、CSS、共享组件等等，然后找出 UI 违反自身规则的地方，并制定修复方案。
AI写代码的速度已经让程序员头皮发麻，但AI设计出来的网页界面，经常让人怀疑它是不是对“好看”有什么误解。ibelick/ui-skills这个项目，就是专门给AI编程代理装上的一套设计紧箍咒，让机器在生成React、Next.js和Tailwind CSS界面时，能稍微有点设计师的审美底线。
这个技能库不提供任何组件，只提供让AI遵守的设计规则，专门解决AI写界面时那种“功能全对，审美全废”的尴尬局面。
设计经验变成机器规则
现在的AI编程工具写代码厉害得很，你输入一句“做个类似Notion的笔记软件”，它能几秒钟吐出一大堆文件。但是你仔细看那些界面，总感觉哪里不对劲。按钮位置好像都对了，卡片圆角也有了，颜色也没用特别离谱的搭配，但整体看起来就是像一个刚刚学会拼积木的小孩，把所有零件随意堆在一起。
问题出在AI特别擅长复制表面特征，它看过几百万个网页，知道卡片要有圆角，导航要在顶部，表格要有边框。但它完全不懂这些东西为什么这样设计，那些藏在表面底下的设计经验，比如为什么标题和正文之间必须空24像素，为什么按钮高度一定是固定值而不是百分比，为什么动画超过300毫秒就会让用户觉得卡顿，这些经验从来没有被写进代码语法里。
ui-skills做的事情特别直接，就是把设计师脑子里的那些隐性经验，一条一条翻译成AI能读懂的规则。这个技能库本质上是一套给AI代理看的设计约束文档，告诉AI什么能做，什么不能做，什么情况下必须怎么做。它不是那种“你觉得这样好看吗”的主观建议，而是“你这样写代码，用户可能根本用不了”的硬性规定。
廉价感是怎么被消灭的
AI生成界面最大的毛病就是廉价感，那种一眼就能看出来是机器随便凑出来的感觉。baseline-ui这个技能专门对付这个问题，它盯着AI最容易犯的各种低级错误。
比如说z-index这个属性，AI特别爱用超大数字。元素被挡住了，AI的第一反应就是“加大z-index！”。结果就是整个页面的层级像一栋盖歪了的楼，为了修正一个问题创造出三个新问题。baseline-ui会限制这种行为，强制AI使用合理的层级体系，比如模态框用50，下拉菜单用40，普通元素永远不超过10。这个规则看起来简单，但能避免百分之九十的层级混乱。
还有一个经典错误是滥用100vh。AI觉得全屏高度就用100vh，完全不管移动浏览器地址栏伸缩带来的问题。在手机上，浏览器地址栏缩回去的时候，100vh会突然变高，产生一大块空白，用户往下滑的时候感觉页面像被撕开了一样。baseline-ui强制AI使用100dvh，这个单位会随着可视区域变化自动调整，彻底解决移动端的奇怪空白问题。
排版层级和间距系统也是重灾区。AI生成的设计稿里，标题大小经常是随便填的，text-2xl和text-3xl混着用，间距更是随心所欲，有时候margin是4，有时候是6，完全看不出任何规律。baseline-ui要求AI遵循严格的间距体系，所有间距必须是4的倍数，标题大小必须按照固定的层级递进。这样改完之后，页面虽然谈不上惊艳，但至少看起来像是一个有强迫症的人做的。
让屏幕阅读器读懂你的页面
很多开发者觉得无障碍设计是锦上添花的东西，项目做完了有空就搞搞，没空就算了。但真实世界里，有大量用户依赖键盘操作和屏幕阅读器访问网页，如果你的页面不支持这些工具，这部分用户就直接被挡在门外了。
fixing-accessibility这个技能专门检查AI生成代码里的无障碍问题。AI最常见的错误是生成只有图标的按钮，比如一个搜索按钮里面只放了一个放大镜SVG。人眼看到放大镜就知道这是搜索，但屏幕阅读器读到的是一个没有任何文字信息的按钮，它会直接告诉用户“按钮”，用户完全不知道这个按钮是干嘛的。
正确的写法是加上aria-label属性，给按钮一个明确的文字标签。看起来只是多了一行代码，但对于依赖屏幕阅读器的用户来说，这行代码决定了他们能不能正常使用你的产品。这个技能还会检查键盘导航的顺序对不对，焦点切换的时候会不会卡住，表单报错的时候屏幕阅读器能不能正确读出错误信息。
颜色对比度也是容易被忽略的地方。AI喜欢用浅灰色文字放在浅色背景上，觉得这样看起来很柔和很高级。但对于视力不好的用户来说，这种低对比度的文字几乎看不见。fixing-accessivity会强制检查所有文字和背景的对比度比例，确保达到WCAG标准的最低要求。
动画太多就像喝了三杯咖啡
AI对动画有一种特殊的迷恋，只要有机会就要加各种动效。按钮悬停要弹一下，卡片出现要飞进来，页面切换要转场，背景还要时不时飘几个粒子。一个页面如果全是这种动画，用户打开的时候感觉整个屏幕都在跳舞，根本不知道眼睛该往哪里看。
fixing-motion-performance这个技能专门整治动画滥用。它会检查每一个动画是否真的有必要，如果某个动画只是为了炫技而没有实际功能价值，就直接砍掉。对于保留的动画，它会限制持续时间，大多数交互反馈动画不应该超过200毫秒，超过这个时间用户就会感觉到延迟。
性能问题也是动画的大坑:AI经常用transform和opacity之外的属性做动画，比如改变width或者height，这些属性会触发浏览器的布局计算，消耗大量性能。fixing-motion-performance强制AI使用GPU加速的属性，确保动画跑起来流畅不卡顿。
blur滤镜是另一个性能杀手，AI喜欢在背景或者模态框上加模糊效果，觉得这样看起来很高级。但blur的计算量特别大，尤其是在移动设备上，一个模糊效果就能让帧率掉到三十以下。这个技能会严格限制blur的使用场景和范围，避免因为过度设计影响用户体验。
给AI装上一双设计的眼睛
ui-skills真正的价值不在于它提供了多少规则，而在于它开创了一种全新的工作方式。以前是人教机器怎么写代码，现在是机器学会了代码之后，人再教机器应该遵守什么标准。这种转变看起来很小，但本质上是把AI从代码生成器升级成了产品构建者。
没有规则的AI就像一个速度极快但毫无经验的新员工，一天能写十万行代码，然后团队花三天时间修复它留下的各种设计问题。加载了ui-skills的AI，相当于有了几年设计经验的积累，写出来的东西虽然不一定惊艳，但至少不会犯那些低级的设计错误。
对于前端开发者来说，这个技能库省掉了大量重复的代码审查工作。以前写完页面要自己检查间距对不对、层级乱不乱、动画合不合理、无障碍有没有遗漏。现在让AI自己跑一遍skill检查，大部分问题都能自动修复，开发者只需要关注那些真正需要创意和判断的部分。
对于AI产品开发者来说，ui-skills提供了一个很好的模板。未来每个团队都可以构建自己的技能库，比如React编码规范、数据库设计规范、安全审查规范、设计系统规范。AI代理的能力差距会越来越取决于它加载了什么样的技能，而不是它用了什么模型。同样的模型，一个有设计规范技能，一个没有，最后产出的产品质量会像两个完全不同水平的开发团队。
技能库正在成为AI时代的经验包，模型负责思考，技能负责标准，代码负责执行。这三样东西组合在一起，AI才能从会写代码变成会做产品。
AI写代码的速度越来越快，但设计审美这件事，还得靠人类给它装上一双眼睛。技能库装得越多，机器离真正懂产品就越近。