跳转到使用指南
make-interfaces-feel-better作者 Jakub Krehel

Make Interfaces Feel Better Skill.

用于 UX 研究的 Claude Code 和 Codex skill:针对悬停、阴影、边框、图标、字体和微交互细节的设计工程原则。

  • UX & Research
jakubkrehel/make-interfaces-feel-better · skills/make-interfaces-feel-better/SKILL.mdSKILL.md
--- name: make-interfaces-feel-better description: - Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border … --- ## Core Principles ## Common Mistakes ## Review Output Format
前言和章节标题读取自上游文件,2026-09-14 · 完整 11,798 字符

01 功能说明

make-interfaces-feel-better Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

面向任何构建 UI 组件或审查前端代码的人所写的设计工程原则,用于让界面感觉更精致:悬停状态、阴影、边框、字体排印、图标、微交互以及进入/退出动画。

它包含十九条带有硬性默认值的编号核心原则——同心圆边框半径、光学对齐、分层阴影(而非伪造层级的边框)、可中断的 CSS 过渡、约 100ms 的交错动画、抗锯齿文本、等宽数字、纯黑或纯白的图片轮廓、按压时的 scale(0.96)、44×44px 的点击区域,以及与文本粗细匹配的图标描边。两种审查模式——快速与完整——会生成一个按原则分组、上限为 5 或 15 条发现的 Severity/Location/Before/After/Why 表格,并以 Block、Needs changes 或 Approve 结尾。

它产出什么

  • 一份预先说明检查范围的审查报告,绝不暗示未检查的部分已被覆盖。
  • 按原则分组的发现,列在一个 Severity、Location、Before、After、Why 表格中,列出所有已做出或建议的更改,而非其中一部分。
  • 一个“已考虑但被否决”的表格,快速模式下包含 1–3 个真实候选方案,完整模式下包含 2–5 个,每个都附有被否决的原因。
  • 一个验证部分,列出实际运行的命令或交互及其观察结果,随后给出结论。
查看示例提示词 ↗

工作方式

  1. 01
    用项目自身的样式系统表达修复方案

    在提出或编写任何修复方案之前,先弄清项目已有的样式方式,并用该体系来表述改动——Tailwind 项目用 Tailwind,CSS 项目用纯 CSS,或遵循既有的 CSS-in-JS 方案。

  2. 02
    放慢界面速度

    审查时,在浏览器的 Animations 面板中以 10% 速度回放动效,因为在 10% 速度下看起来不对的地方,正是全速下微妙出错的地方。

  3. 03
    默认采用完整模式

    未指定审查模式时默认使用完整模式;快速模式必须明确要求才会启用。

  4. 04
    以固定表格格式写下发现

    按原则将发现分组,用带 Severity、Location、Before、After 和 Why 列的 markdown 表格呈现;Location 引用 path/to/file:line。

  5. 05
    覆盖全部五个类别

    范围表必须涵盖 Quick Reference 中全部五个类别,未检查的部分绝不能被暗示为已审查。

  6. 06
    以验证与结论收尾

    存在 HIGH 级发现时结论为 Block;仅存在 MEDIUM 或 LOW 级发现时为 Needs changes;没有任何可操作项时才为 Approve。

02 找到适合场景

何时使用 make-interfaces-feel-better Skill

当任务是此类 UX research 时,在 Claude Code 或 Codex 中使用 make-interfaces-feel-better skill。以下适用范围和限制来自该 skill 自己的文件。

适合场景

  • 在构建或审查视觉细节重要的 UI 组件时:动画、悬停状态、阴影、边框、字体排版、图标、微交互以及进入/退出过渡。
  • 对主要用户路径和高流量状态进行快速检查,只报告 HIGH 和 MEDIUM 级问题。
  • 对整个请求范围内的字体排版、界面、动画、图标和性能进行全面审查。
  • 已有样式约定的项目,让优化修复恰当地落入 Tailwind、纯 CSS 或 CSS-in-JS。

了解边界

  • 它不会为了交付一次优化修复而给项目额外添加第二套样式体系。
  • 它拒绝在高频交互上使用自定义动画,因为注意力成本会随每次触发而重复累积。
  • 它不会对日常交互做错落延迟,只在不常见的分阶段入场动效中使用。
  • 仅用来假装层次感的边框应替换为叠加的透明 box-shadow 值;结构性和状态性边框保留。

需要提供的信息

  • package.json用来决定图标动画的实现路径:检查是否安装了 motion 或 framer-motion,并匹配已有的导入路径。
  • 源文件或确切界面发现会引用 path/to/file:line;若产物没有源文件,则改为引用确切的界面和组件。
  • 模式、范围与框架上下文说明模式、确切范围、框架、样式约定以及任何审查边界,以便报告能体现实际检查了什么。

03 Skill 内部

make-interfaces-feel-better Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 计算同心半径

    嵌套圆角必须同心:外半径等于内半径加内边距。

  2. 按压始终使用 0.96

    点击缩放固定为 scale(0.96),绝不小于 0.95;更小的数值会显得夸张。当动效会分散注意力时,可用静态 prop 禁用它。

  3. 图像描边保持纯粹的中性色

    1px 低透明度的图像描边在浅色模式下必须是纯黑,在深色模式下必须是纯白——绝不能是带色调的中性色(如 slate 或 zinc),否则会带上表面颜色,看起来像脏污。

  4. 绝不要对所有属性做过渡

    列出精确的属性,例如 transition-property: scale, opacity。Tailwind 的 transition-transform 覆盖 transform、translate、scale 和 rotate。

  5. 图标描边粗细要匹配文字字重

    1.5px 描边搭配常规 400 字重文字,2px 搭配半粗 600 字重。每个图标集只保留一种描边粗细,且绝不在同一界面上混用不同图标库。

  6. 使用精确的图标动画数值

    上下文相关的图标切换应基于 scale、opacity 和 blur 做动画,而不是 visibility ——且这些数值是固定的,而非随意设定的。

  7. 仅对不常见的入场做错落处理

    将分阶段的入场拆分为语义化的分块,并以大约 100ms 的间隔错落展现,而不是对单一容器整体做动画。频繁发生的常规交互不应做错落处理。

  8. 有意识地设定点击区域大小

    触控或移动端优先使用 44×44px 的点击区域,密集的桌面界面中至少 40×40px,可用伪元素扩展较小的可见元素。

04 投入使用

在 Claude Code 或 Codex 中安装 make-interfaces-feel-better

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 make-interfaces-feel-better 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better

针对 skills/make-interfaces-feel-better/SKILL.md 的通用 skills CLI 形式;仓库可能会记录其自身的路径。

给 Skill 第一个 UX 研究任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Review [src/components/] in full mode. The card and its inner button both use rounded-xl, the counter shifts when the value changes, and the outline-to-fill icon swap exits with a jarring fade. Express every fix in [our existing styling system] and give me a Severity/Location/Before/After/Why table.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 遍历界面的每一种状态——hover、focus、active、loading 和空状态——作为审查的一部分。
  • 在结论旁列出每一项未执行的检查,标注为 Not verified,并说明尚待完成的内容。
  • 应用 initial={false} 时,确认它不会破坏有意为之的入场动画。
  • 不要为凑够发现数量上限而填充报告,没有发现的原则应予省略。

在 OpenDesign 中通过其 SKILL.md 链接导入 make-interfaces-feel-better:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Skill 文件
skills/make-interfaces-feel-better/SKILL.md 验证时已记录内容校验和;提交 35545ea
License
MIT 来自 LICENSE。
仓库星标数
3,433 GitHub 快照拍摄于 2026-09-14,针对整个 jakubkrehel/make-interfaces-feel-better 仓库。不代表 make-interfaces-feel-better 的评分或使用量。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 快速参考五大类别——排版、表面、动画、图标、性能——每一类都对应各自的使用场景。
  2. 核心原则十九条编号规则,从同心圆角到动效克制,均附带精确的默认值。
  3. 常见错误表格将每个常见错误与其修复方式配对,例如 transition: all 和过小的点击区域。
  4. 评审输出格式模式、覆盖范围、发现数量上限、严重程度定义以及所需的报告结构。
  5. 范围与覆盖说明模式、范围、框架和约定;列出全部五个类别,附检查证据与结果。
  6. 发现项按原则分组,用严重程度、位置、修改前、修改后、原因的表格覆盖每一处改动。
  7. 示例针对同心圆角、等宽数字和按压时缩放的实例表格。
  8. 已考虑但被拒绝真实边界候选项被拒绝的表格,附拒绝原因。
  9. 验证与结论列出已运行的命令或交互,标记未验证的检查项,随后给出阻止、需要修改或通过的结论。
Skill 自身的描述
「设计工程原则,使界面感觉更精致。用于构建 UI 组件、审查前端代码、实现动画、悬停状态、阴影、边框、排版、图标、微交互、进入/退出动画或任何视觉细节工作时。支持快速和完整审查模式。触发条件:UI 打磨、设计细节、"让它感觉更好"、"感觉不对"、交错动画、边框圆角、光学对齐、字体平滑、表格数字、图像轮廓、盒阴影、图标、图标描边粗细、图标状态、动效克制。」

来自 SKILL.md 的前置描述。完整文件约 11,798 字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 make-interfaces-feel-better Skill 的问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

上下文图标动画需要动效库吗?

不需要。如果未安装动效库,该文件会在 DOM 中保留两个图标,其中一个设为绝对定位,并用 CSS 过渡实现交叉淡入淡出,从而在没有任何依赖的情况下实现出入场动画。

页面加载时会播放入场动画——这是如何处理的?

该文件通过在 AnimatePresence 上设置 initial={false} 来阻止这一情况,这会在首次渲染时禁用入场动画,然后要求你确认这不会破坏有意为之的入场动画。

评审也会涉及性能吗?

是的,性能是五个快速参考类别之一,重点关注过渡的特异性和 will-change 的使用。will-change 仅限于 transform、opacity 和 filter——这些是 GPU 可以合成的属性,绝不会使用 will-change: all。

Make Interfaces Feel Better

在真实的 UX 研究任务中运行 make-interfaces-feel-better。

下载 OpenDesign,从其 SKILL.md 链接导入 make-interfaces-feel-better,粘贴上述提示词,并在查看结果前阅读计划。

终端
npx skills add https://github.com/jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows