让界面变好,先检查每个状态

优化界面细节,包括动画、悬停状态、阴影和排版让它更精致。

make-interfaces-feel-better 是界面细节工程参考,适合处理排版、圆角、阴影、图标、hover/focus、动效、性能和触控热区。先识别项目已有的 Tailwind、CSS 或 CSS-in-JS 体系,在原有系统里改,不要为一次 polish 引入第二套样式方案。

常见细节包括同心圆角、视觉而非几何居中、用阴影表达层次而不是滥用边框、可中断的 transition、进入动效分语义段落、退出更轻、数字使用 tabular-nums、标题 balance、正文 pretty,以及触控至少 44×44px 的热区。图标优先使用 currentColor,一套图标保持一致的描边和状态。

审查时明确 quick 或 full 范围,逐一走 hover、focus、active、loading、empty 和退出状态;动效可在浏览器以 10% 速度检查。不要使用 `transition: all`、滥用 will-change 或把高频交互都做成动画,最后给出实际验证命令和未验证项。

分类:设计创作

来源仓库:jakubkrehel/make-interfaces-feel-better

适合用来做什么

  • 如何优化界面布局以提升用户体验?
  • 有哪些方法可以提高界面的可访问性?

安装 make-interfaces-feel-better

npx skills add https://www.iskills.cc/skills/jakubkrehel/make-interfaces-feel-better/make-interfaces-feel-better/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 make-interfaces-feel-better 的用途与原始说明

浏览全部 Skill 指南