AI-Wiki

文档概览

这篇文章介绍的是一个面向 AI 编程助手的界面打磨 skill：/make-interfaces-feel-better。它不是泛泛而谈的设计建议，而是把设计工程师长期依赖经验判断的 UI 细节，拆成 16 条可执行规则，让 AI 在写前端代码、做 code review、补动画、修交互时能够按清单自动检查与修改。

文章的核心论点有两层：

第一层是工具层：这个 skill 已被安装约 3.3 万次，且在 skills.sh 注册表中显示为 16 项技术点、审计全 PASS，说明它已经从个人经验帖变成被大量开发者实际采用的可安装能力包。
第二层是方法层：与静态文档相比，把“品味”“手感”“视觉修正”写成 AI 可调用规则，更适合 AI 辅助编码时代，因为开发者只要说“这个界面感觉不对”，Agent 就能据此执行具体修复。

关键事实

skill 的用途与安装方式

文中给出的安装命令只有一行：

npx skills add jakubkrehel/make-interfaces-feel-better

安装后可在 Claude Code 或 Cursor 中直接输入 /make-interfaces-feel-better 调用；也可以只给一句自然语言描述，例如“这个界面感觉有点怪”，AI 就会自动套用这套规则去检查和修复前端代码。

这个 skill 的定位非常明确，不是生成完整设计稿，也不是替代设计系统，而是修复那些“功能没错但视觉和交互上总觉得哪里不对”的问题，包括圆角、间距、光学居中、阴影、动画、排版、点击热区、性能相关 CSS 用法等。

安装量与公开传播信号

文章记录了多个可量化传播信号：

2026 年 6 月 21 日，Jakub Krehel 发帖庆祝该 skill 安装量突破 30000 次。
文中引用 skills.sh 实时数据，显示安装量为 33.0K。
同一处数据还显示该 skill 包含 16 项技术点，并且 全部审计 PASS。
庆祝安装量破 3 万的帖子获得 6600+ 赞、1 万+ 收藏、340 万浏览。
GitHub 仓库主页显示 1.5k+ stars。

这些数字共同说明，这不是只在小圈子里传播的冷门提示词，而是已经进入前端与 AI 编程用户的公共视野。

从文章到工具的演化路径

文章把这个项目的发展过程梳理得很清楚：

2026-03-10：Jakub Krehel 先发布长文《Details that make interfaces feel better》。
这篇长文在 X 上获得 2500+ 赞、27.5 万浏览。
长文内包含交互 demo，读者可以通过拖拽滑块看 before/after，对“修在哪里、为什么更好”形成直观理解。
文章走红后，社区开始反馈：能不能把这些技巧做成工具。
2026-03-16：他把文章内容打包成可安装 AI skill 并公开宣布，该帖获得 985 赞。
2026-04-19：发布演示视频帖，获得 2379 赞、62 万浏览。
2026-06-21：公开庆祝安装量突破 3 万，获得更大规模传播。

这条路径很重要，因为它不是先做技术再找场景，而是“文章提出规则 → 社区验证需求 → 打包成安装式工具 → 持续传播与迭代”。文章认为，这种飞轮正是该 skill 能迅速扩散的原因。

重要细节

16 条规则的代表案例

原文没有逐条完整列出全部 16 条，但提炼了若干最具代表性的规则，并给出具体修法、参数和边界。

1. 同心圆边框规则：外层圆角 = 内层圆角 + 间距

这是文中最强调的视觉问题之一。典型错误是：卡片包按钮，外层圆角 12px，内层圆角也 12px。几何上看没错，但视觉上会失衡，容易让人觉得界面“off”。

作者给出的修正规则非常具体：

外层圆角 = 内层圆角 + 两层之间的间距
示例：内层 12px，间距 8px，则外层应为 20px

文中直接把它称作“最常让界面感觉 off 的问题”，说明它是高频、低可见、但一旦修正会显著提升质感的典型案例。这条规则也是界面打磨规则集与光学对齐类知识中的代表性设计工程经验。

2. 光学对齐：几何居中不等于视觉居中

另一个高频问题出现在“文字 + 图标”的按钮上。若左右 padding 完全相同，图标那一侧经常会看起来偏重、偏右，即使数学上已经居中。

具体修法包括：

图标侧 padding 比文字侧少 2px
对三角播放按钮这类天然不对称的 icon，还要在 SVG 内部额外向右微调
有些 icon 包已经内置光学校正，但如果原始图标没处理好，几何中心仍然无法自动变成视觉中心

这条规则的价值在于，它把“总感觉按钮不平衡”这种主观反馈，落成了 AI 可以执行的微调策略。相关文章可关联光学对齐。

3. 用三层阴影替代纯边框

作者不推荐依赖单一纯色边框去定义卡片层级，而建议使用三层 box-shadow：

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

这样做的原因是，三层阴影叠加后，卡片在不同背景上都更容易自适应；而纯边框在深色背景或图片背景上容易显得“粘”住背景，层次感不足。

交互上，hover 时也不需要改边框颜色，只要加深 shadow 即可。这类做法适合被 AI 稳定复用，因为它把“更高级的卡片质感”转译成了明确 CSS 策略。

4. 图标切换动画参数必须具体

文中特别强调，图标出现或切换时，不要直接显示/隐藏，而应组合使用三种属性过渡：

scale: 0.25 → 1
opacity: 0 → 1
blur: 4px → 0

如果项目使用 framer-motion，则建议：

使用 spring 动画
bounce 必须为 0

如果没有 motion 库，则替代做法是：

两个图标都保留在 DOM 中
通过绝对定位叠放
用 CSS 做交叉淡入淡出

这里最关键的不是“要加动画”，而是参数足够明确，AI 可以直接照着实现，而不是生成一套风格漂移很大的动画方案。

5. 动画必须可打断

文章指出，用户改变意图的速度经常快于动画播放速度，因此交互状态变化应该优先使用可以中途反向或重定向的动画机制。

具体建议是：

hover、toggle、抽屉开关等状态变化优先使用 CSS transition
尽量不要对这些状态变化使用固定时间线的 keyframe 动画

原因在于：

transition 可以在途中被打断，并平滑切换方向
keyframe 通常沿固定时间线运行，中断后容易出现从头开始或硬切问题

文章还举出平台经验：iOS 已经大量使用这种可打断思路，而桌面端与 Web 端经常忽略这一点。该条可直接关联可打断动画。

6. 进入动画要错开，退出动画要更轻更短

对于成组内容进出场，作者反对“整块内容一起飞入或一起滑出”的做法。

进入时建议：

将标题、描述、按钮拆成独立块
采用 80–100ms 的 stagger delay 依次出现

退出时建议：

使用轻量的 translateY + opacity + blur 即可
不要让整个模块大幅滑出屏幕
退出时长应 短于进入时长

背后的判断是：进入阶段需要引导用户建立内容层次，退出阶段用户注意力往往已经转向下一个目标，因此不要用过重动画抢夺注意力。

其他被点名的规则类型

文章还列出一些未展开为长案例、但足以说明 skill 覆盖面的规则：

文本排版：使用 text-wrap: balance、text-wrap: pretty、antialiased
数字显示：使用 tabular-nums，避免数字变化导致布局抖动
图片描边：为图片加入极淡的轮廓，例如 outline: 1px solid rgba(0,0,0,0.1)
最小点击区域：保持 40×40px
禁止使用 transition: all
will-change 要谨慎使用，不应滥加

这些点都很细，但都属于“开发者平时知道一点、执行时常漏掉、AI 默认更容易忽略”的类别，因此适合做成规则集供 Agent 统一调用。

skill 的输出形式不是抽象建议，而是对照式修复

文中明确提到，每条规则都带有“常见错误 → 修复方案”的对照，AI 做 code review 时会直接输出 Before/After 对比。这意味着它并不只是把一堆设计原则塞进提示词，而是尽量把规则改写为可检查、可解释、可修改代码的执行格式。

这也是它能在“你只说一句看起来不对”时仍然产生稳定输出的重要前提。