一句 界面感觉不对 ，AI就帮你修好！这个技能被装了33000次，开发者集体上头.md11.6 KBit/ai/一句 界面感觉不对 ，AI就帮你修好！这个技能被装了33000次，开发者集体上头.md
--- title: "一句\"界面感觉不对\"，AI就帮你修好！这个技能被装了33000次，开发者集体上头" source_url: "https://mp.weixin.qq.com/s/3VXw1SJebojshART6KtBnA" source_site: "mp.weixin.qq.com" clipped_at: "2026-07-06T10:49:37.196717+00:00" clipper: "aiwiki-url-ingest" extractor: "weixin_static" source_strategy: "normal_web_clip" source_strategy_label: "普通网页抓取" author: "虚拟灵枢" --- # 一句"界面感觉不对"，AI就帮你修好！这个技能被装了33000次，开发者集体上头 2026年6月21日，设计工程师 Jakub Krehel 发了一条推文。 内容很简单：他做的 AI 技能`/make-interfaces-feel-better`，安装量突破了 30000 次。 这条帖子拿到了 6600 多个赞，1 万多收藏，340 万浏览。 ▲ Jakub Krehel 发帖庆祝技能突破 3 万安装，获 6\.6k 赞、1 万\+ 收藏 一个教 AI "怎么把界面做得更好看"的技能包，凭什么让开发者集体上头？ 答案藏在 skills.sh 的实时数据里：**33\.0K 次安装**，16 项经过审计的技术点，全部 PASS。 ▲ skills.sh 注册表数据：33\.0K installs，16 项技术，审计全 PASS ## 这 16 条规则，每条都在修"说不清哪里不对"的 bug 这个技能到底教了 AI 什么？ 说白了：它把设计工程师十几年积累的"肉眼可见但难以描述"的界面打磨技巧，拆成了 16 条可执行的规则。AI 拿到这些规则之后，就能在写前端代码、做 code review、加动画的时候自动套用。 安装方式就一行命令： ``` npx skills add jakubkrehel/make-interfaces-feel-better ``` 装完之后，你在 Claude Code 或 Cursor 里输入`/make-interfaces-feel-better`，或者说一句"这个界面感觉有点怪"，AI 就会自动调用这套规则来检查和修复你的代码。 下面挑几条最有代表性的，看看它到底在修什么。 **同心圆边框：最常"感觉不对"的元凶** 你肯定见过这种情况：一个卡片套一个按钮，外层圆角 12px，内层也是 12px。几何上没问题，但视觉上就是不平衡。 作者的解法简单到让人想拍桌子：**外层圆角 \= 内层圆角 \+ 间距**。 内层 12px，间距 8px，外层就必须是 20px。他说这是"最常让界面感觉 off 的问题"，没有之一。 **光学对齐：几何居中 ≠ 视觉居中** 一个按钮，左边是文字，右边是图标。两边 padding 一样，图标侧就会"看起来偏右"。 修法：图标侧的 padding 比文字侧少 2px。如果用的是三角播放按钮这类不对称图标，还要在 SVG 内部额外向右微调。 很多 icon 包本身已经做了光学修正，但如果没修好，几何中心永远不等于视觉中心。 **用阴影替代边框** 这个技巧在 UI 圈争议不大，但多数人不会这么细致地用。 作者推荐三层 box\-shadow：第一层模拟 1px 边框，第二层加轻微浮起感，第三层加环境深度。三层叠加之后，卡片在任何背景上都能自适应，不像纯色边框在深色/图片背景上会"粘"死。 Hover 时只需要加深 shadow，不用改边框颜色。 **图标切换动画：精确到小数点** 这是整个 skill 里数值最具体的一条。 图标在出现/切换时，不要直接 toggle 显示隐藏。用这三个属性的组合： - **scale**：0\.25 → 1 - **opacity**：0 → 1 - **blur**：4px → 0 如果项目用了 framer\-motion，用 spring 动画，**bounce 必须为 0**。没装 motion 库的话，把两个图标都放在 DOM 里，用绝对定位 \+ CSS 交叉淡入淡出。 他不只告诉你要加动画，还给了精确参数。这种"照着抄就行"的确定性，是 AI Agent 能稳定执行的前提。 **动画必须可打断** 用户改变意图的速度往往快于动画播放速度。 交互状态变化（hover、toggle、开关抽屉）用 CSS transition——它可以在动画中途被打断，平滑切换方向。keyframe 动画走固定时间线，打断了就是从头来或硬切。 iOS 大量使用可打断动画。在桌面端和 web 端，这个细节经常被忽略。 **进入要错开，退出要更轻** 元素进场时，不要整个容器一起飞进来。把标题、描述、按钮拆成独立块，delay 80\-100ms 依次出现。 退出时反过来：用一个小小的 translateY \+ opacity \+ blur 就够了，不要整块滑出屏幕。退出的时长也应该比进入短——用户注意力已经移到下一个目标了，别抢。 ▲ GitHub 仓库主页，1\.5k\+ stars，完整列出所有技巧与审查清单 除了上面这几条，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，我们每个前端任务都用它，连我们自己的网站也是。这真的是个礼物。」—— @TahiGichigi ▲ Mooch 团队开发者表示"每个前端任务都在用"，甚至拿它跟自己网站对标 > "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 就能一次修好，不需要再补充任何上下文。」—— @zajaccount ▲ 用户评价：说"这看起来有点怪"，Agent 就能一次修好，不需要额外上下文 还有更多： - "但凡涉及前端 UI 的任务，它就是我的首选 skill。" - "真的很好用，大部分项目我都装了。" - "我愿意为这个付费。" - "30,001！"（有人调侃式跟帖） - "这么垂直的东西能装 3 万次，说明大家真的想要更好的默认打磨。" 这些反馈分布在 3 月到 6 月之间，证明是持续使用，一次性 hype 做不到。 ## 从一篇文章到一个 3 万安装的 skill Jakub Krehel 做这件事的路径很清晰。 2026 年 3 月 10 日，他先发了一篇长文《Details that make interfaces feel better》，在 X 上拿到 2500\+ 赞、27\.5 万浏览。文章里放了交互 demo，读者可以拖拽滑块看 before/after。 文章火了之后，社区反馈涌入——"能不能把这些技巧做成工具？" 3 月 16 日，他把文章内容打包成了可安装的 AI skill，发推宣布，985 赞。 4 月 19 日，放出演示视频帖，2379 赞、62 万浏览。 6 月 21 日，庆祝突破 3 万安装，6600\+ 赞。 ▲ 技能落地页：npx 一键安装，附带 before/after 对比视频，Claude Code 中使用 /make\-interfaces\-feel\-better 文章→社区反馈→打包成工具→迭代加细节→公开庆祝里程碑。这个循环跑了三个多月，每一步都在积累使用量，每一步都有公开信号。 Jakub 的身份也值得提一句：他是 Interfere 的创始设计工程师，同时运营一本叫*Interfaces*的设计工程杂志。这个 skill 本身也是杂志"agent skills"栏目的内容之一——付费订阅 \+ 开源工具 \+ 社区讨论，形成完整的闭环。 他的其他项目还包括 oklch.fyi（色彩工具）、gestures in motion（手势动画研究），一直在"设计工程"这个细分领域深耕。 ## 这件事更深的信号 33,000 次安装，放在 npm 生态里不算大数字。但放在"设计工程细节"这个极小众的垂直领域，是现象级。 33,000 次安装这个数字背后的信号更值得关注：**在 AI 辅助编码时代，可执行的品味胜过静态的文档。** AI 生成代码的速度已经不是瓶颈。瓶颈变成了"AI 默认写出来的东西好不好看、用得顺不顺手"。大部分 AI 写的前端代码，功能对，但"感觉廉价"——圆角不对、间距不匀、动画生硬、hover 状态缺失。 专业设计工程师的知识长期困在两个地方：要么在个人脑子里（无法 scale），要么在设计系统文档里（没人读、更没人对着写代码）。 这个 skill 找到了第三条路：把隐性知识结构化，让 AI Agent 替你执行。你说"帮我看看这个页面哪里不对"，Agent 自动过一遍 16 条检查清单，输出 Before/After 修改建议。**人类设计师的品味变成了可分发、可版本化、可审计的 prompt 包。** `npx skills add`正在成为 AI 原生开发的"prompt 包管理器"。类似 npm 之于 JavaScript，skill 让设计/工程知识可以一键安装、版本追踪、团队共享。未来可能出现的场景：无障碍审计 skill、暗色模式迁移 skill、性能 budget 检查 skill、动画一致性审查 skill——每个垂直方向都可以出一个"专家级 Agent 配置"。 Jakub 自己也在持续迭代这个 skill。他在帖子里说"会继续改进并添加更多细节"。他的杂志*Interfaces*每个月出新 issue，附带交互 demo 和源码。文章→工具→杂志→社区的飞轮在转。 ## 最后 Jakub 的终端是 light mode。 有人拿这个开玩笑，他说"I know, I know." 一个对界面细节偏执到能写 16 条规则的人，终端是亮色模式。这个反差本身就像一则设计工程寓言：**真正的品味，是知道在哪里较劲——跟审美统一不统一没关系。** 3 万开发者选择安装这个 skill，本质上是在用脚投票：他们不满足于 AI 生成的"凑合能用"，他们想要更好看、更顺手、更专业的东西——哪怕只是改一个圆角、调 2px 间距、给图片加一条 10% 透明的描边。 这些细节单个拆开看都很小。全部加起来，就是用户打开一个产品时心里那句"这东西做得真不错"。 而这句话，现在可以被一个`/make-interfaces-feel-better`命令替你说出来了。