一句 界面感觉不对 ，AI就帮你修好！这个技能被装了33000次，开发者集体上头 摘要

文档概览

这篇来源文把一个很具体的前端 UI 打磨 skill 写成了一个更大的信号案例：Jakub Krehel 把设计工程里“肉眼能感觉到、但平时很难准确描述”的界面经验，整理成 16 条可执行规则，封装成 AI 可调用的 skill，供 Claude Code 或 Cursor 在生成、审查、修复前端代码时直接使用。

文章强调，这不是泛泛的“设计建议”，而是可以被 Agent 执行的规则集：有安装命令，有明确触发方式，有具体参数，有 Before/After 审查模式，也有公开可见的安装量、审计状态和社区反馈。

核心对象

skill 是什么

• 名称：/make-interfaces-feel-better
• 制作者：Jakub Krehel
• 安装命令：npx skills add jakubkrehel/make-interfaces-feel-better
• 使用环境：可在 Claude Code 或 Cursor 中调用
• 触发方式：
• 直接输入 /make-interfaces-feel-better
• 或用自然语言表达类似“这个界面感觉有点怪”，让 Agent 依据规则检查并修复代码

来源文的中心论点是：这个 skill 实际上把Design Engineering Heuristics转成了机器可执行的工作流。它不只是“教人怎么设计”，而是在 AI 写前端、审代码、补动画时，给出稳定可重复的判定标准。

关键事实

安装量、审计与仓库数据

• skills.sh 显示安装量约为 33.0K installs
• skills.sh 显示该 skill 含 16 项技术点
• 审计状态：全部 PASS
• GitHub 仓库约 1.5k+ stars
• 来源文把这几个数字放在一起，用来说明这不是短暂噱头，而是已经形成开发者持续安装与使用的工具对象

传播时间线

2026-03-10：先发文章

• Jakub Krehel 先发布长文《Details that make interfaces feel better》
• 该文在 X 上获得 2500+ 赞、27.5 万浏览
• 文中包含交互 demo，读者可通过拖拽滑块查看 before/after 对比

2026-03-16：从文章打包成 skill

• 社区在文章传播后提出“能不能把这些技巧做成工具”
• 于是他在 3 月 16 日将文章内容打包成可安装 AI skill
• 发帖宣布时获得 985 赞

2026-04-19：演示视频传播

• 4 月 19 日发布演示视频帖
• 该帖获得 2379 赞、62 万浏览

2026-06-21：庆祝破 3 万安装

• 2026 年 6 月 21 日，Jakub Krehel 发帖庆祝该 skill 安装量突破 30000
• 该帖获得 6600+ 赞、1 万+ 收藏、340 万浏览

来源文据此总结出一条清晰路径：文章 → 社区反馈 → 工具化封装 → 演示传播 → 里程碑庆祝。整个循环持续三个多月，且每一步都有公开可见的传播信号。

重要细节

16 条规则在解决什么问题

来源文的概括非常明确：这 16 条规则主要是在修复那些“说不清哪里不对”的 UI bug。它们不是功能性错误，而是视觉、交互、排版、节奏与可点击性层面的质量问题。

文章特别强调，这类知识以往常常存在于资深设计工程师脑中，或者沉在设计系统文档里；而 skill 的价值在于把这些隐性知识做成可执行清单，让 Agent 在产出代码时直接应用。

代表性规则示例

同心圆边框

这是来源文最先强调的一条，也是被称为“最常让界面感觉 off 的问题”。

• 常见问题：卡片套按钮时，外层圆角和内层圆角做成相同值，例如都为 12px
• 几何上没错，但视觉上会失衡
• 规则：外层圆角 = 内层圆角 + 间距
• 例子：内层 12px、间距 8px，则外层应为 20px

这条规则的价值在于，它把原本靠经验感受的圆角关系，变成了可计算、可检查的公式。

光学对齐

来源文强调：几何居中不等于视觉居中。

• 场景：按钮中左边是文字，右边是图标
• 如果左右 padding 完全一样，图标侧常会“看起来偏右”
• 修法：图标侧 padding 比文字侧少 2px
• 若图标本身是不对称形状，如三角形播放按钮，还需要在 SVG 内部进一步向右微调
• 例外：有些 icon 包已经做过光学校正，但如果图标资源本身没处理好，单纯几何居中仍会显得偏

这类规则非常适合 AI 执行，因为它把“看起来怪”分解成了可检查的结构与微调方向。

用阴影替代边框

来源文提到，作者推荐用 三层 box-shadow 替代简单描边：

• 第一层：模拟 1px 边框
• 第二层：提供轻微浮起感
• 第三层：增加环境深度

这样做的理由是：

• 卡片在不同背景上更容易自适应
• 不会像纯色边框那样在深色背景或图片背景上显得“粘死”
• Hover 时只需加深 shadow，不必再改边框颜色

这反映出该 skill 不是只给“是否加阴影”的抽象建议，而是给出层次结构与交互时的处理原则。

图标切换动画参数

这是来源文认为“数值最具体”的一条。它不是说“加点动效”，而是给出明确属性组合：

• scale：0.25 → 1
• opacity：0 → 1
• blur：4px → 0

并且还有工具约束：

• 如果项目使用 framer-motion，应使用 spring 动画
• 且 bounce 必须为 0
• 如果没有 motion 库，则把两个图标都保留在 DOM 中
• 用绝对定位 + CSS 做交叉淡入淡出，而不是简单 toggle 显示隐藏

来源文特别指出，这种“参数级确定性”正是 AI Agent 能稳定执行的前提。

动画必须可打断

这条规则与 Interruptible Animation 直接相关。来源文给出的原则是：

• 用户改变意图的速度，往往快于动画本身播放速度
• 对 hover、toggle、抽屉开关等交互状态变化，应优先使用 CSS transition
• 原因是 transition 可以在中途被打断，并平滑改向
• 不推荐在这些场景使用固定时间线的 keyframe 动画
• 因为 keyframe 被打断时，常会出现从头重来或硬切问题

文中还指出：

• iOS 大量使用可打断动画
• 但桌面端与 Web 端常忽略这个细节

进入与退出的动效节奏

来源文给出的是进入/退出不对称原则：

• 元素进入时，不要让整个容器整块一起飞入
• 应拆成标题、描述、按钮等独立块
• 依次错开出现，delay 约 80–100ms
• 退出时则应更轻量
• 可使用小幅 translateY + opacity + blur
• 不建议整块滑出屏幕
• 退出时长也应比进入更短，因为用户注意力已转向下一个目标

这里保留了节奏上的边界条件：进入强调层次与建立注意，退出则强调别抢用户注意力。

其他被点名的规则范围

来源文还列举了 skill 覆盖的其他细节，虽然未逐条展开，但明确给出技术点与目的：

• 文字排版：text-wrap: balance、pretty、antialiased
• 数字排版：tabular-nums，用于防止数字变化造成布局抖动
• 图片描边：极淡 outline，例如 1px solid rgba(0,0,0,0.1)
• 最小点击区域：40×40px
• 禁止使用 transition: all
• 谨慎使用 will-change

来源文还说明，每条规则都附有“常见错误 → 修复方案”的对照格式，因此 AI 在 code review 场景里可直接输出 Before/After 建议。

用户反馈

文章没有把传播只归因于作者个人影响力，而是列出真实用户反馈，说明它被持续用于实际开发流程中。

代表性反馈

“At Mooch, we use it for every piece of frontend work we do (even our own website) … It's a real gift.”

可归纳为：

• Mooch 团队把它用于每个前端任务
• 连自家官网也使用该 skill 作为对标或辅助
• 用户评价其为“真正的礼物”

“One of my favourite skills to use, a rare instance where saying ‘this looks off’ makes the agent actually one shot a fix without specifying any other context.”

这段反馈的重点是：

• 它是用户最喜欢的 skill 之一
• 只需说一句“这看起来有点怪”
• Agent 就能one shot 一次性修好
• 不需要额外补充上下文

其他反馈趋势

来源文还列出多条简短评价：

• 只要涉及前端 UI 任务，它就是首选 skill
• 大多数项目都会安装
• 有用户明确表示愿意为它付费
• 还有人以“30,001!”的方式跟帖庆祝
• 也有人指出：这样一个高度垂直的工具能到 3 万安装，说明大家确实想要更好的默认打磨

反馈时间分布

• 用户反馈持续出现在 3 月到 6 月
• 来源文借此强调：这不是一次性 hype，而是持续使用的结果

作者背景

来源文对 Jakub Krehel 的介绍包含几个关键身份点：

• Interfere 的创始设计工程师
• 运营 Interfaces 杂志
• 该 skill 也是 Interfaces “agent skills”栏目中的内容之一
• 相关项目包括 oklch.fyi 与 gestures in motion

文章借这些背景说明：这不是一个偶然的爆款 prompt，而是一个长期深耕“设计工程”细分方向的人，把自己的方法论进一步工具化。

文章主张与意义

从隐性品味到可执行知识

来源文最核心的判断是：在 AI 辅助编码时代，瓶颈不再只是“能不能写出代码”，而变成“默认写出来的东西是否足够好看、顺手、专业”。

它指出，大部分 AI 前端代码常见问题不是功能错，而是：

• 圆角关系不对
• 间距不匀
• 动画生硬
• hover 状态缺失
• 整体感觉“廉价”

而专业设计工程师的知识长期存在两个问题：

• 在个人脑中，难以 scale
• 在设计系统文档中，通常没人认真读，更少有人直接据此写代码

skill 的出现提供了第三条路：

• 把隐性知识结构化
• 让 AI Agent 自动执行
• 使经验可分发、可版本化、可审计

npx skills add 的意义

来源文把 npx skills add 类比为 AI 原生开发中的“prompt 包管理器”。其隐含意义包括：

• 像 npm 分发 JavaScript 包那样分发专家经验
• 团队可以一键安装与共享约定
• 规则可以版本追踪
• 审查逻辑可以标准化

文章还进一步推演了潜在方向：

• 无障碍审计 skill
• 暗色模式迁移 skill
• 性能 budget 检查 skill
• 动画一致性审查 skill

即：每个垂直方向都可能出现一个“专家级 Agent 配置包”。这与 Executable Taste 的方向高度一致——将主观品味尽可能转成可执行、可复用的判断规则。

持续迭代的飞轮

来源文指出，Jakub Krehel 并未把 skill 视为一次性发布物，而是明确表示会继续改进并加入更多细节。

文章总结出的飞轮是：

• 文章输出方法论
• 工具把方法论变成工作流
• 杂志继续提供新 issue、交互 demo 与源码
• 社区讨论再反哺规则迭代

这使 skill 不只是单个命令，而是一个可持续演化的知识产品。

边界、条件与例外

来源文虽然整体立场积极，但实际保留了不少可操作边界：

• 光学对齐不等于统一减 2px；若图标资源已经做过校正，则还要根据实际图形判断
• 图标切换动画若无 motion 库，需用 DOM 常驻 + 绝对定位 + CSS 淡入淡出替代
• 可打断动画这一原则主要针对 hover、toggle、抽屉等交互状态变化，不是说所有动画都不用 keyframe
• 退出动效不是完全不要位移，而是要更轻、更短，避免抢走用户已经转移的注意力
• 阴影替代边框强调的是跨背景适应性，并不意味着所有边框都绝对不该使用

这些约束说明，该 skill 虽然能执行，但并不是僵硬模板，而是带有场景判断的规则系统。

来源文中的结尾观点

来源文最后借一个轻松细节收束：有人拿 Jakub Krehel 使用 light mode 终端开玩笑，他回应 “I know, I know.”

文章借此提出一个颇有象征性的结论：真正的品味，不在于表面审美阵营一致，而在于知道应该在哪些地方较劲。开发者之所以愿意安装这个 skill，本质上是在为“不要只满足于 AI 生成的凑合能用”投票。

换言之，这 3 万多次安装不仅是工具分发成绩，也是在证明：前端质量中的那些小处——圆角、2px 间距、10% 透明描边、hover 节奏、退出时长——已经开始被打包成 AI 可执行的专业资产。

相关条目

• make-interfaces-feel-better
• Jakub Krehel
• Design Engineering Heuristics
• Interruptible Animation
• Executable Taste
• Claude Code