mcpField
M
make-interfaces-feel-better

make-interfaces-feel-better

github.com/watermeloncorp设计与 UI11940 次安装1 天前更新
代码仓库

关于 make-interfaces-feel-better

make-interfaces-feel-better 技能用于构建或审查 UI 代码时改进视觉、动效和性能细节。它提供具体的 CSS 与动画原则，并要求用表格整理变更。

主要功能

  1. 01应用同心圆角规则
  2. 02改善视觉对齐与表面层次
  3. 03设计可中断和分段动画
  4. 04优化排版与数字布局
  5. 05限制过渡属性和 will-change 用法
  6. 06用变更前后表格记录审查结果

适用场景

  1. 01润饰嵌套卡片和控件
  2. 02改善动态计数器与文本换行
  3. 03审查动画和交互细节
  4. 04记录供代码审查的 UI 变更

安装

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

$npx skills add https://github.com/watermeloncorp/watermelon-platform --skill make-interfaces-feel-better

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

包含的文件

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

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 为图标添加动画，而非切换可见性。请严格使用以下数值：缩放从 0.25 到 1，不透明度从 0 到 1，模糊从 4px 到 0px。如果项目的 package.json 中包含 motion 或 framer-motion，请使用 transition: { type: "spring", duration: 0.3, bounce: 0 }——bounce 必须始终为 0。如果没有安装动画库，请将两个图标都保留在 DOM 中（其中一个采用绝对定位），并使用 cubic-bezier(0.2, 0, 0, 1) 通过 CSS 过渡实现交叉淡化——这样无需依赖任何库，就能同时实现进入和退出动画。

8. 字体平滑

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

9. 等宽数字

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

10. 文本换行

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

11. 图像轮廓

为图像添加低不透明度的细微 1px 轮廓，以保持层次感一致。浅色模式下必须使用纯黑色（rgba(0, 0, 0, 0.1)），深色模式下必须使用纯白色（rgba(255, 255, 255, 0.1)）——不要使用 slate、zinc 等近黑色或任何带色调的中性色。带色调的轮廓会吸收下方表面的颜色，在图像边缘看起来像污渍。

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

仅用于 GPU 可以合成的属性：transform、opacity、filter。绝不使用 will-change: all。只有在注意到首帧卡顿时才添加。

16. 最小点击区域

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

常见错误

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

审查输出格式

始终使用带有 Before 和 After 列的 Markdown 表格展示更改。列出你所做的每一项更改，不要只列出其中一部分。切勿在表格之外用单独的“Before:”／“After:”行列出问题。按原则分组，在每个表格上方添加标题；每行只聚焦于一处差异，让读者能够快速浏览完整列表。

示例
同心圆角
BeforeAfter
卡片和内部按钮（p-2）均使用 rounded-xl卡片使用 rounded-2xl（12 + 8），内部按钮使用 rounded-lg
两个嵌套表面均使用 border-radius: 16px外层使用 24px，内层使用 16px，内边距为 8px
等宽数字
BeforeAfter
动画计数器使用 <span>{count}</span>使用 <span className="tabular-nums">{count}</span>
计时器使用默认数字在根元素添加 font-variant-numeric: tabular-nums
按压时缩放
BeforeAfter
<button className="...">添加 active:scale-[0.96] transition-transform
按压时使用 scale(0.9)提高到 scale(0.96)——低于 0.95 会显得夸张

如果某项改动不明显，表格行应注明具体文件和更改的具体属性。如果审查了某个原则但无需更改，则省略相应表格；空表格会造成干扰。

审查清单

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

参考文件

  • typography.md — 文本换行、字体平滑、等宽数字
  • surfaces.md — 圆角、视觉对齐、阴影、图片描边
  • animations.md — 可中断动画、入场／退场过渡、图标动画、按压时缩放
  • performance.md — 过渡属性的指定、will-change 的使用

评论

支持 Markdown