界面打磨规则集

定义

界面打磨规则集指一组把界面审美与交互打磨经验结构化后的可执行规则，用来修复那类“功能没错，但看起来就是不对”的 UI 问题。

在本文档语境里，它特指设计工程师 Jakub Krehel 在 make-interfaces-feel-better 中整理出的 16 条可执行规则，而不是宽泛的设计哲学、灵感清单或抽象原则。

这组规则的关键特点有三点：

• 数量明确：是 16 条规则，不是模糊的“若干建议”。
• 执行方式明确：可直接用于前端实现、Code Review、动效修正与 AI Agent 自动改代码。
• 输出形式明确：每条都带“常见错误 → 修复方案”的对照，而不是只告诉你“应该更精致一点”。

它的目标不是决定产品要做什么，而是把“几何上成立、观感上失衡”的问题转成可操作修复项。

在本文档中的语境

本文把这套规则放在 Executable Taste 的背景下讨论：过去依赖资深设计工程师肉眼判断的细节，被整理成 AI 可调用、团队可共享、结果可审计的技能包。

对应的公开信号包括：

• 2026 年 6 月 21 日，Jakub Krehel 发帖庆祝 /make-interfaces-feel-better 安装量突破 30000。
• skills.sh 注册表显示该技能约 33.0K installs。
• 注册表列出 16 项技术点，审计结果为 全部 PASS。
• 这说明它不是一篇读后即弃的设计文章，而是一个被持续安装、持续调用的执行型规则集。

因此，界面打磨规则集 在这里更接近“可安装的界面审查与修复能力”，而非普通文档。

关键机制

1. 把“感觉不对”拆成检查项

这套规则处理的不是明显 bug，而是以下这类高频问题：

• 圆角数值都合法，但层级关系看起来别扭。
• 按钮左右 padding 一样，图标却显得偏一边。
• 卡片边框存在，但在不同背景上要么太硬、要么像粘在底图上。
• 图标切换有动画，但显得廉价、生硬或延迟感强。
• hover、toggle、抽屉等状态变化，在用户快速反复操作时卡住、重播或硬切。

规则集的作用就是把这些问题变成具体检查条件和修复步骤。

2. 每条规则都带常见错误与修复方案

本文明确指出，这 16 条规则不是只有标题，而是都带有“常见错误 → 修复方案”的对应关系。AI 在做审查时，会直接给出 before/after 级别的修改建议。

这点很重要，因为 AI 稳定执行的前提不是“知道一个概念”，而是拿到可照抄的判断方式、参数与替代实现。

3. 作为 AI skill 被直接调用

该规则集被封装进 npx skills add jakubkrehel/make-interfaces-feel-better 可安装的 skill 中。安装后，开发者可以直接在支持环境里调用 /make-interfaces-feel-better，或者用一句“这个界面感觉有点怪”来触发它。

这意味着它不是要求开发者先记住 16 条规则再手工检查，而是让 Agent 自动套用规则集。

核心规则与代表性细节

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

这是文中被强调为最常见、也最容易让界面“感觉 off”的问题之一。

常见错误是：

• 一个外层卡片包着内层按钮或面板。
• 外层圆角 12px，内层圆角也 12px。
• 从几何数据看没有冲突，但视觉上会显得层级不协调、边缘关系不顺。

修复规则是：

• 外层圆角 = 内层圆角 + 间距。
• 例如内层圆角为 12px、内外间距为 8px，则外层圆角应为 20px。

它本质上是一条同心圆边框规则：当两个圆角矩形存在包裹关系时，外层的曲率应把中间留白算进去，才能形成更自然的同心感。

这不是审美偏好，而是非常具体的数值修正法。

2. 图标与文字组合中的 光学对齐

文中给出的典型场景是按钮中文字与图标并列时，几何对称不等于视觉居中。

常见错误是：

• 左右 padding 写成完全相同。
• 文字在一边、图标在另一边。
• 结果图标侧在视觉上会显得更重，整个内容看起来偏移。

修复方案是：

• 图标一侧的 padding 通常比文字侧 少 2px。
• 如果图标本身不对称，例如播放三角形这类形状，还需要在 SVG 内部继续微调，而不是只改容器 padding。

这说明 光学对齐 不能只停留在盒模型层面。对于不对称图标，即使外部间距已经调整，图形本体仍可能造成视觉偏移，因此要在 SVG 内容内部做补偿。

文中同时指出，部分 icon 包已经预先做过光学校正；但如果图标资源本身没有处理好，几何中心永远不等于视觉中心。

3. 用三层 box-shadow 取代纯边框

这条规则不是简单地说“多用阴影”，而是明确提出以 三层 box-shadow 替代单一边框。

推荐做法包括三层职责分离：

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

这种做法相对纯色边框的优势在于背景自适应：

• 在浅色背景下仍能保留清晰边界。
• 在深色背景或图片背景上，不会像纯边框那样显得“粘死”在底图上。
• hover 时只要加深 shadow 即可，不必再专门切换边框颜色。

因此，这条规则既是视觉优化，也是状态设计优化：它减少了边框色在不同背景和状态之间来回调整的负担。

4. 图标切换动画的精确参数

这是整套规则里参数最明确的一条，强调动画不应只靠“感觉调”，而应给出可直接复现的数值。

图标出现或切换时，推荐组合为：

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

如果项目使用 framer-motion，则文中要求：

• 使用 spring 动画。
• bounce = 0。

这里的边界很明确：不是任何 spring 都行。若保留 bounce，图标切换会产生不必要的弹性反馈，容易显得轻浮或噪声过多。

若项目没有 motion 库，替代做法也被写明：

• 两个图标都保留在 DOM 中。
• 使用绝对定位叠放。
• 通过 CSS 做交叉淡入淡出，而不是直接 toggle 显隐。

这使规则可以跨技术栈执行，而不依赖特定动画库。