make-interfaces-feel-better
定义与身份
make-interfaces-feel-better 是由 Jakub Krehel 发布的一个 AI skill，目标不是新增业务功能，而是把“界面几何上没错、观感上却不对”的那部分设计工程经验，整理成可被 AI Agent 直接执行的规则。
它主要面向 Claude Code、Cursor 一类 AI 编码环境。安装后，Agent 在前端代码生成、Code Review、样式修正、动画优化等场景中，可以调用这套规则自动检查并修复 UI 细节问题。
从知识类型上看，它是 界面打磨规则集 的可执行封装，也是 Executable Taste 的代表性实例：把原本依赖资深设计工程师直觉判断的经验，变成可分发、可版本化、可审计、可团队共享的 skill 包。
安装与调用方式
安装命令是一行：
npx skills add jakubkrehel/make-interfaces-feel-better
安装后，可以在 Claude Code 或 Cursor 中直接使用 /make-interfaces-feel-better 调用它。
它的一个典型特点是支持非常模糊的触发语境。用户不一定要给出精确的修复要求，只要说“这个界面感觉有点怪”或英文的 “this looks off”，Agent 就可以调用该 skill，按规则清单检查并给出修正。
这也是它和普通 UI 提示词的重要区别：它并不要求调用者先准确说出“圆角不对”“图标偏了”“动画太硬”，而是允许用户只表达一种含糊的主观不适感，然后由 Agent 代为展开具体检查。
能力范围
make-interfaces-feel-better 覆盖的不是视觉稿生成，而是前端实现阶段的界面打磨，主要包括：
- 前端代码生成时默认套用更合理的界面细节规则
- Code Review 时指出“看起来不对”的具体 UI 问题
- 样式修正，包括圆角、间距、阴影、描边、排版、点击区域等
- 动画优化，包括图标切换、状态过渡、进出场节奏与可打断性
原文明确指出，AI 拿到这套规则后，可以在“写前端代码、做 code review、加动画”的过程中自动套用，而不是只在某个单一环节工作。
规则结构与可执行性
该 skill 的核心是一组 16 条可执行技术点。根据 skills.sh 的注册表数据，它显示为 33.0K installs，且 16 项技术点审计结果全部 PASS。
这里的关键不是“有 16 条建议”，而是每条规则都被写成 AI 可以直接执行的操作逻辑，通常包含“常见错误 → 修复方案”的对应关系，因此 Agent 做 Code Review 时可以直接输出 Before/After 级别的修改建议。
这也是它能稳定工作的基础：规则不是抽象审美判断，而是尽量落到数值、条件、实现方式与适用边界上。
代表性规则
同心圆边框
这条规则专门处理“嵌套圆角几何上正确、视觉上却不协调”的问题。典型情形是卡片里再套按钮，外层圆角和内层圆角设成相同数值，例如都为 12px，结果会显得不平衡。
该 skill 给出的修法很明确：外层圆角 = 内层圆角 + 间距。
例如内层圆角 12px、两层之间间距 8px，则外层圆角应为 20px，而不是继续使用 12px。原文把这类问题称为最常让界面“感觉 off”的元凶之一。
光学对齐
这条规则强调几何居中不等于视觉居中。典型案例是按钮中“文字 + 图标”的组合：即便左右 padding 数值完全相同，图标侧仍常常会显得偏重、偏移。
可执行修法是：图标侧 padding 比文字侧少 2px。如果使用的是播放三角形这类不对称图标，还需要在 SVG 内部继续做额外微调。
它也承认边界条件：部分 icon 包本身已经做过光学修正，因此不是所有图标都要重复修；但如果图标资源本身没处理好，仅靠几何中心无法获得真正的视觉中心。
用阴影替代生硬边框
在卡片和面板类组件中，该 skill 倾向于用三层 box-shadow 来代替单一纯色边框：
- 第一层模拟 1px 边框
- 第二层增加轻微浮起感
- 第三层提供环境深度
这样做的目的，是让组件在浅色、深色或图片背景上都能更自然地自适应，而不是像纯色边框那样“粘”在背景上。
对应的交互建议也很具体：hover 时优先加深 shadow，而不是修改边框颜色。
图标切换动画
这是数值最明确的一类规则之一。图标出现或切换时，不建议简单地直接显示/隐藏，而是组合三个属性一起过渡：
scale: 0.25 → 1opacity: 0 → 1blur: 4px → 0
如果项目使用 framer-motion，则建议使用 spring 动画，并要求 bounce 必须为 0，避免图标弹跳得轻浮或廉价。
如果项目没有 motion 库，则不要放弃这类过渡，而是把两个图标同时保留在 DOM 中，用绝对定位加 CSS 交叉淡入淡出实现切换。
这条规则的价值在于它不仅说“应该做动画”，而且把参数范围和替代实现都给出来，降低了 AI 执行时的模糊性。
可打断动画 / Interruptible Animation
该 skill 明确反对把所有交互变化都做成固定时间线动画。对于 hover、toggle、开关、抽屉等状态切换，优先使用 CSS transition，因为它可以在动画中途被平滑打断并转向新的目标状态。
相对地，固定 keyframe 动画因为沿着预设时间线播放，在用户中途改变意图时容易出现从头重来、硬切或状态脱节的问题。
这条规则特别适用于高频交互状态变化，而不是所有复杂叙事动画。原文也提到 iOS 大量采用这类可打断动画，但 Web 和桌面前端里常被忽略。
进入与退出动效节奏
skill 对进出场动画的建议也很细：
- 进入时不要让整个容器整体飞入
- 标题、描述、按钮等内容块应拆开，按 80–100ms 的 delay 依次出现
- 退出时要更轻，只用少量
translateY + opacity + blur即可 - 退出时长应比进入更短
其背后的判断是：进入阶段用户需要建立界面层级，适合轻微错开；退出阶段用户注意力通常已转移，不应让离场动画继续抢注意力，更不应整块滑出屏幕。
其他覆盖规则
除上面几类代表性规则外，原文还明确提到该 skill 覆盖以下技术点：
- 文字排版：使用
text-wrap: balance、text-wrap: pretty、antialiased - 数字排版：使用
tabular-nums，减少数字变化导致的布局抖动 - 图片处理：增加极淡描边，例如
outline: 1px solid rgba(0,0,0,0.1) - 点击热区：最小点击区域保持在
40×40px - 动画约束：避免使用
transition: all - 性能边界：谨慎使用
will-change
这些规则共同说明，它不只盯着“好不好看”，还覆盖可读性、交互稳定性、性能与实现习惯的边界条件。
传播数据与项目热度
该 skill 的传播数据在 2026 年 6 月已经非常突出。
- skills.sh 注册表显示安装量为
33.0K - 审计信息显示共有
16项技术点，结果全部PASS - 2026 年 6 月 21 日，Jakub Krehel 发帖庆祝安装量突破 3 万
- 这条庆祝帖获得
6600+赞、1万+收藏、340万浏览 - GitHub 仓库达到
1.5k+ stars
这些数字说明它不只是小圈子内部转发的技巧帖，而是已经从设计工程社区扩散到更广泛的 AI 编码用户群体。
发布路径与增长过程
make-interfaces-feel-better 不是凭空出现的，它来自一条很清晰的内容产品化路径。
2026 年 3 月 10 日，Jakub Krehel 先发布长文《Details that make interfaces feel better》。这篇文章在 X 上获得 2500+ 赞和 27.5万 浏览，并通过交互 demo 展示 before/after 差异。
在社区开始追问“能不能把这些技巧做成工具”之后，他于 3 月 16 日把文章内容打包成可安装 skill，并发帖宣布，相关帖子获得 985 赞。
随后在 4 月 19 日，他又发布演示视频帖，获得 2379 赞和 62万 浏览。
到 6 月 21 日，项目进入公开庆祝 3 万安装的阶段，随后相关注册表数据进一步显示为 33.0K 安装。
这条时间线表明，该 skill 的增长来自“文章传播 → 社区反馈 → 工具化 → 视频演示 → 持续迭代 → 里程碑传播”的连续飞轮，而不是一次性流量爆发。
社区使用反馈
社区反馈是这个项目的重要证据，因为它证明 skill 被用于真实工作流，而不是只被当作演示收藏。
原文列出的典型评价包括：
- 有团队表示“每个前端任务都在用它”，甚至包括自己官网在内
- 有用户称它是“最喜欢的 skill 之一”
- 有用户强调，只说一句 “this looks off”，Agent 就能在不给更多上下文的情况下“一次修好”
- 还有用户表示“但凡涉及前端 UI 的任务，它就是首选 skill”
- 有人说“大部分项目我都装了”
- 也有人直接表示“我愿意为这个付费”
这些反馈覆盖 3 月到 6 月，不像短期 viral 帖子的情绪性跟风，更像持续复用后的工作流评价。
角色职责与边界
作为一个实体，make-interfaces-feel-better 的职责不是替代设计师完成完整视觉设计，也不是自动生成品牌系统、信息架构或复杂交互规范。
它更适合承担以下职责：
- 在现有前端实现上发现“感觉不对”的细节问题
- 把含糊的界面主诉拆解成可执行的修复建议
- 让 AI 在默认输出时减少廉价感、僵硬感和粗糙感
- 把设计工程中的隐性经验稳定迁移到团队协作与 AI 工作流里
它的边界也很明确：
- 它解决的是打磨与实现质量问题，不是业务功能缺失
- 它偏向通用界面细节，不等于完整品牌设计方法论
- 它依赖调用环境中的 Agent 去读取、理解并修改实际前端代码
- 对已经做过充分光学校正、动画系统化封装的项目，部分规则可能只需选择性应用，而不是机械全套覆盖
关联意义
make-interfaces-feel-better 常被用来说明一个更大的趋势：AI 编码时代的瓶颈，正从“能不能生成功能”转向“默认产出是否足够好用、好看、顺手”。
它展示了 Executable Taste 的一个具体落地方式：把专家的品味、经验和修正习惯，压缩成团队可安装、Agent 可执行、社区可传播的 skill。
在这个意义上，它不仅是一个前端 UI skill，也是一种知识产品形态：设计工程经验不再只存在于个人脑中或静态文档里，而是变成可运行的规则包。