mcpField
M
make-interfaces-feel-better

make-interfaces-feel-better

github.com/hachej设计与 UI160 次安装2 天前更新
代码仓库

关于 make-interfaces-feel-better

用于完善界面细节的设计技能，涵盖字体、表面样式、动效与点击区域等原则，适合构建或审查界面代码的开发者。

主要功能

  1. 01嵌套圆角设计指南
  2. 02视觉对齐建议
  3. 03分层阴影技巧
  4. 04动效与过渡模式
  5. 05字体与数字格式规范
  6. 06最小点击区域建议

适用场景

  1. 01检查界面代码的细节
  2. 02改进按钮与图标反馈
  3. 03减少数字变化造成的布局偏移
  4. 04优化文本与图片呈现

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/hachej/boring-stack --skill make-interfaces-feel-better

安装后在 Claude Code 中输入/make-interfaces-feel-better确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE
references/
animations.md
performance.md
surfaces.md
typography.md

详细介绍

让界面体验更好的细节

优秀的界面很少只靠某一项设计实现。通常是许多细节共同作用，最终带来出色的体验。构建或审查 UI 代码时，请遵循以下原则。

快速参考

类别适用场景
字体排印文本换行、字体平滑、等宽数字
表面边框圆角、视觉对齐、阴影、图像轮廓、点击区域
动画可中断动画、进入/退出过渡、图标动画、按压缩放
性能过渡属性精确指定、will-change 的使用

核心原则

1. 同心边框圆角

外层圆角 = 内层圆角 + 内边距。嵌套元素的圆角不匹配，是界面显得不协调的最常见原因。

2. 优先考虑视觉对齐，而非几何对齐

几何居中看起来不对时，应按视觉效果对齐。带图标的按钮、播放三角形和不对称图标都需要手动调整。

3. 用阴影代替边框

叠加多个透明的 box-shadow 值，营造自然的层次感。阴影适用于任何背景，而纯色边框则不然。

4. 使用可中断动画

交互状态变化应使用 CSS 过渡——动画进行到一半时可以被中断。关键帧应留给只运行一次的分阶段动画序列。

5. 拆分并错开入场动画

不要给整个容器添加动画。应将内容拆分为语义明确的部分，并分别错开约 100ms。

6. 使用轻柔的退场动画

使用较小的固定 translateY，不要使用完整高度。退场动画应比入场动画更柔和。

7. 使用符合情境的图标动画

使用 opacity、scale 和 blur 为图标添加动画，而不是切换可见性。请严格使用以下数值：scale 从 0.25 变为 1，opacity 从 0 变为 1，blur 从 4px 变为 0px。如果项目的 package.json 中包含 motion 或 framer-motion，请使用 transition: { type: "spring", duration: 0.3, bounce: 0 }——bounce 必须始终为 0。如果没有安装动画库，请让两个图标都保留在 DOM 中（其中一个使用绝对定位），并通过 CSS 过渡使用 cubic-bezier(0.2, 0, 0, 1) 实现交叉淡入淡出——无需依赖项即可同时实现进入和退出动画。

8. 字体平滑

在 macOS 上，为根布局应用 -webkit-font-smoothing: antialiased，让文本显示更清晰。

9. 等宽数字

对于任何动态更新的数字，使用 font-variant-numeric: tabular-nums，防止布局偏移。

10. 文本换行

在标题上使用 text-wrap: balance。在正文中使用 text-wrap: pretty，避免出现孤行。

11. 图像轮廓

为图像添加低不透明度的细微 1px 轮廓，以保持层次感一致。

12. 按压缩放

点击时轻微缩放至 scale(0.96)，能让按钮带来触感反馈。始终使用 0.96。绝不要使用小于 0.95 的值——低于这个值会显得过于夸张。添加 static 属性，在动画可能造成干扰时将其禁用。

13. 跳过页面加载时的动画

在 AnimatePresence 上使用 initial={false}，防止首次渲染时播放入场动画。请确认这不会破坏有意设置的入场动画。

14. 绝不使用 transition: all

始终明确指定具体属性：transition-property: scale, opacity。Tailwind 的 transition-transform 会涵盖 transform, translate, scale, rotate。

15. 谨慎使用 will-change

仅用于 transform、opacity、filter——这些属性可由 GPU 合成。绝不要使用 will-change: all。只有发现首帧卡顿时才添加。

16. 最小点击区域

交互元素的点击区域至少需要达到 40×40px。如果可见元素较小，请使用伪元素扩展点击区域。绝不要让两个元素的点击区域重叠。

常见错误

错误修正方法
父元素和子元素使用相同的边框半径计算 outerRadius = innerRadius + padding
图标看起来不居中通过内边距进行视觉调整，或直接修正 SVG
区块之间的边框生硬使用带透明度的分层 box-shadow
进入／退出动画突兀拆分动画、错开播放，并让退出效果保持轻柔
数字导致布局偏移应用 tabular-nums
macOS 上文本显得粗重在根元素上应用 antialiased
页面加载时播放动画在 AnimatePresence 上添加 initial={false}
元素使用 transition: all指定确切的属性
动画首帧卡顿添加 will-change: transform（谨慎使用）
小控件的点击区域过小使用伪元素将点击区域扩展至 40×40px

检查清单

  • 嵌套的圆角元素使用同心边框半径
  • 图标在视觉上居中，而不只是几何居中
  • 适合的场景使用阴影而非边框
  • 进入动画经过拆分并错开播放
  • 退出动画保持轻柔
  • 动态数字使用 tabular-nums
  • 已应用字体平滑处理
  • 标题使用 text-wrap: balance
  • 图片带有细微描边
  • 适合的场景下，按钮按下时会缩放
  • 默认状态的元素在 AnimatePresence 上使用 initial={false}
  • 不使用 transition: all——只指定特定属性
  • will-change 仅用于 transform/opacity/filter，绝不用于 all
  • 交互元素的点击区域至少为 40×40px

评论

支持 Markdown