为什么AI写的UI总有一股塑料感？

为什么 AI 写的 UI 总有一股「塑料感」

用 Claude Code 或者 Cursor 跑过前端项目的，大概都见过那种感觉——界面能用，但就是哪里不对劲。按钮的弧度看起来怪，阴影像是贴上去的，动画有种说不出的僵硬。不是说 AI 写的不对，而是差了一堆「看不见的细节」。

一个叫 make-interfaces-feel-better 的 Skill，就专门来解决这个问题。

16 个细节，把 UI 从「能看」拉到「好用」

这个 Skill 收录了 16 条设计原则，条条都针对 AI 生成界面时最常踩的坑。比如：

• 同心圆角：外层圆角 = 内层圆角 + padding，嵌套元素的圆角不匹配是 UI 看起来「不对劲」最常见的原因
• 光学对齐而非几何对齐：图标按钮如果用几何居中，看起来永远偏了，需要肉眼调
• 阴影用来提升层次，边框用来表示结构：按钮和卡片用阴影表达立体感，只有分隔线才用边框
• 动画要能打断：用 CSS transition 而不是 keyframes，这样交互状态变化可以随时停住
• 入场动画要分段+错开：把内容按语义分组，每组延迟 100ms 进入，高频交互不用
• 按压下缩放比例锁定 0.96：太小显得夸张，太大没感觉，0.96 是经过测试的黄金值
• tabular numbers：动态更新的数字用等宽字体，防止数字跳位时界面抖

不只是规则，是一套工程化思维

这个 Skill 的核心逻辑是：先识别项目的样式系统（Tailwind / CSS / CSS-in-JS），然后把修改表达在那个系统里——不要为了修一个细节引入第二套样式系统。审核界面的时候，建议用浏览器 Animation 面板把动画降到 10% 速度播放，观察 hover / focus / active / loading / empty 每个状态，10% 速度下看着别扭的地方就是真正的问题。

技能作者是 Jakub Krehel，就是「Details that make interfaces feel better」那篇设计文章的作者——这篇东西在设计圈流传很广，现在他把内容做成了一个 AI 可以执行的 Skill，让 AI 也能照着修。

为什么这个 Skill 值得关注

它解决了一个真实断层：设计师知道「应该怎么调」，AI 能「执行改动」，但两者之间缺一个精确的翻译层。这个 Skill 就是那个翻译层——不是「建议提升设计感」，而是「内圆角 = 外圆角 + padding，请按这个规则改」。

背后还有个更大的信号：AI 生成代码的竞争正在从「能不能跑」升级到「好不好用」。下一个分水岭，是谁能补上那些 AI 懒得写、设计规范里也找不到的微小细节。

GitHub：https://github.com/jakubkrehel/make-interfaces-feel-better

GitHub: https://github.com/jakubkrehel/make-interfaces-feel-better