Make Interfaces Feel Better 是一个聚焦设计工程细节的技能，用于把那些零散却会不断叠加的小问题处理掉，从而让界面显得更完整、更精致。它适用于以下场景：用户反馈 UI 感觉别扭、扁平、通用、拥挤、跳动或未完成；你正在构建控件、卡片、列表、仪表盘、导航、表单或工具栏；某个组件需要 hover、active、focus、enter、exit、loading 或 empty 状态；前端评审需要给出具体的改动前后建议。
核心原则
同心圆角：对于相邻的嵌套圆角表面，外层圆角 = 内层圆角 + 内边距。如果内边距较大，应把各层视为独立表面，而不是强行套用公式。目标是视觉上协调一致，而非机械遵守公式。
光学对齐：几何居中并不总是视觉居中。图标按钮、播放三角、箭头、星形以及不对称图标通常需要小幅偏移。能修 SVG 就修 SVG，否则用像素级的 margin 或 padding 调整。
阴影与边框：用边框做分隔和焦点环；当卡片、按钮、下拉菜单或浮层需要纵深感时，使用分层阴影。阴影应保持透明且足够细腻，以适配不同背景。
文本换行：标题和短标题使用 text-wrap: balance；短到中等长度的正文、说明文字、描述和列表项使用 text-wrap: pretty；长文、代码和预格式化内容两者都避免使用。计数器、计时器、价格、表格以及其他会变化的数字应使用 font-variant-numeric: tabular-nums。
字体平滑：在 macOS 上，如果项目尚未处理，应在根布局启用抗锯齿字体平滑：
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
图片描边：图片通常需要细微的内嵌描边，避免边缘与背景糊在一起。
img { outline: 1px solid rgba(0, 0, 0, 0.1); outline-offset: -1px; }
@media (prefers-color-scheme: dark) { img { outline-color: rgba(255, 255, 255, 0.1); } }
使用中性黑或白的透明描边，不要用品牌色给图片描边上色。
动效：交互状态变化使用 CSS 过渡，因为用户中途改变意图时过渡可以重新指向目标；关键帧仅保留给分阶段的一次性入场或加载序列。良好的动效默认值包括：入场可组合透明度、小幅 translateY，以及可选的模糊；退场应比入场更短更轻，通常为 150ms；按压时按钮使用 scale(0.96) 提供触感，并在该移动会造成干扰时提供关闭方式；图标切换使用透明度、缩放和模糊的交叉淡入淡出，而不是瞬间显示/隐藏切换。
过渡范围：绝不要使用 transition: all，应明确指定发生变化的属性：
.button { transition-property: transform, background-color, box-shadow; transition-duration: 150ms; transition-timing-function: ease-out; }
仅在合成器友好属性（如 transform、opacity、filter）出现首帧卡顿时使用 will-change，绝不要使用 will-change: all。
命中区域：交互控件至少应有 40x40px 的命中区域，布局允许时最好为 44x44px。当可见图标较小时，用伪元素扩展，但不要让扩展后的命中区域互相重叠。
评审输出：进行 UI 打磨评审时，用改动前/改动后对照行报告具体修改，包含原则、改动前、改动后三列，例如：同心圆角（父与子使用相同圆角 → 父级圆角计入内边距）、表格数字（数字变化时计数器跳动 → 计数器使用 tabular-nums）、过渡范围（transition: all → 明确指定过渡属性）。当文件路径和属性不易从代码片段看出时，应一并给出。已检查但未修改的原则可省略。
检查清单
嵌套圆角元素在视觉上协调一致。 图标在视觉上居中。 按钮、卡片和浮层的边框或阴影使用理由正确。 标题和短文本避免尴尬换行。 动态数字使用表格数字。 图片在需要时有中性描边。 入场和退场动画分离、细微，并在适当情况下可中断。 按钮具有触感明确的 active 状态，且动作不过分夸张。 transition: all 与 will-change: all 均不存在。 小型控件仍有可用的命中区域。