1. 基本信息
| 项目 | 内容 | 数据来源 |
|---|---|---|
| 名称 | make-interfaces-feel-better | GitHub |
| 作者/维护者 | Jakub Krehel(个人开发者,interfaces.dev 站点作者) | GitHub API |
| 来源链接 | https://github.com/jakubkrehel/make-interfaces-feel-better | — |
| 许可证 | MIT | GitHub API |
| GitHub Stars | 2,625 | GitHub API |
| Forks | 103 | GitHub API |
| 最新版本 | 无正式 Release/Tag,滚动更新于 main 分支,最近一次提交 2026-07-24 | GitHub API |
| 安装方式 | npx skills add jakubkrehel/make-interfaces-feel-better,或手动复制完整技能目录 |
GitHub README |
2. 功能介绍与亮点
make-interfaces-feel-better 专注于界面“手感”上容易被忽略、但决定观感是否精致的具体细节,整理成 19 条可执行规则 + 5 份主题参考文档(排版、表面与阴影、动效、图标、性能)。
主要亮点:
- 规则具体到可直接抄的数值:如“外圈圆角 = 内圈圆角 + 内边距”“按压反馈固定
scale(0.96),不得小于0.95”“图标描边粗细需匹配相邻文字字重”,而非“注意视觉细节”式空话。 - 结构化审查输出:支持
quick/full两种模式,产出按 HIGH/MEDIUM/LOW 分级的发现表格(代码位置、改前改后、原因),附“考虑过但驳回”的候选项与验证结论,明确要求不得为达到发现数量上限而编造问题。 - 要求先复现再下结论:需以 10% 速度回放动画、逐一走查 hover/focus/active/loading/empty 等状态,而非凭截图猜测。
- 框架无关:识别项目已有样式系统(Tailwind/纯 CSS/CSS-in-JS)后顺势应用,不引入第二套方案。
3. 适用场景
所属分类:前端与设计
适合在实现或评审前端界面时,希望把动效、阴影、圆角、图标、排版等“精修细节”标准化、且需要一份可直接生成审查报告的开发者与前端团队使用,尤其适合代码评审(PR review)与自查环节。
4. 跨 Agent 兼容性
| Agent | 结论 | 依据 |
|---|---|---|
| Claude Code | ✅ 原生支持 | README 提供 npx skills add 安装命令,并给出 /make-interfaces-feel-better 触发方式 |
| Codex | ✅ 支持 | README 明确给出 Codex 下 $make-interfaces-feel-better 的触发方式,且技能目录内含 agents/openai.yaml 元数据文件 |
| OpenClaw | ❓ 未验证 | 现有材料未提及 |
| Hermes Agent | ❓ 未验证 | 现有材料未提及 |
5. 推荐理由
把界面精修经验固化成结构化审查清单,输出带位置与验证的整改建议——审代码时最容易被“能跑就行”带过的圆角、阴影、动效、图标细节,这个技能给出了具体数值与判断依据,而不是“再精致一点”这类无法执行的建议。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | 2,625 stars / 103 forks,属独立单一技能仓库(非合集,星数可直接归属该技能本身);作者本人运营配套产品站点 interfaces.dev,并在 skills.sh 第三方技能市场登记 |
| 可用性 | 9 | 一条命令安装,Claude Code 与 Codex 双端明确支持;5 份分主题参考文档 + SKILL.md 结构清晰;4 月至 7 月持续迭代(新增图标章节、澄清规则等),最近一次提交在 30 天以内,零付费依赖 |
| 安全性 | 9 | 见下方检查清单 |
安全检查清单:①无可执行脚本,纯 Markdown 指导内容 ②不含运行时联网请求逻辑 ③不要求 API key 或凭据 ④通读全文未见可疑指令或隐藏外发 ⑤作者持续活跃,运营同名真实产品站点,仓库治理文档齐全,无刷星迹象 ⑥License 为标准 MIT ⑦最近一次提交在 30 天以内
7. 跟同类 Skills 相比的优势
| 竞品 | 定位 | 与 make-interfaces-feel-better 的差异 |
|---|---|---|
| taste-skill(Leonxlnx) | 面向“设计品味”的整体判断框架,纠正 AI 生成界面常见的“AI 脸”套路化审美 | 解决的是宏观设计判断(配色、布局、排版基调是否有品味),本技能解决的是微观执行细节(圆角数值、动效参数、图标状态),两者定位互补而非替代 |
| antfu-design(antfu/skills 合集子技能) | 以 UnoCSS 为中心的语义化设计令牌体系 | 绑定 UnoCSS 技术栈,且作者在 README 中说明其“设计品味”部分内容改编自 taste-skill;本技能框架无关,且圆角/动效/图标细节为独立原创积累 |
| shadcn-skills(mattbx) | 面向 shadcn/ui 生态的组件发现与主题规范核查 | 聚焦“该用哪个 shadcn 组件、是否符合其主题风格”,本技能不绑定具体组件库,聚焦任意界面的手感细节打磨 |
8. 用户评价
该技能作者在其后续维护的同名技能合集仓库中收到过真实用户留言,用户 simpleshadow 评价“this skill is too damn awesome… but seriously, ty :)”(这个技能太赞了……但说真的,谢谢)。除此之外,该技能目前在 Reddit、Hacker News、X/Twitter 等平台尚无更多具名用户评价。
9. 其他补充
作者此后将该技能扩展为一套围绕“更好的界面”主题的技能合集(涵盖排版、配色、无障碍、布局、文案等方向),本技能对应的能力已演进为该合集中的 better-ui 子技能并持续维护;独立仓库本身仍可正常安装使用,两者规则内容高度一致。
10. 安装使用方式
- 推荐方式:
npx skills add jakubkrehel/make-interfaces-feel-better,适用于 Claude Code 等支持 skills CLI 的 agent。 - 手动安装:克隆仓库后,将
skills/make-interfaces-feel-better/整个目录复制进 agent 技能目录;仅复制 SKILL.md 会丢失其相对链接的详细规则。 - 使用:Claude Code 中输入
/make-interfaces-feel-better(默认full)或加quick;Codex 对应命令为$make-interfaces-feel-better,可追加页面/功能名缩小范围。 - 安装后无需重启;触发词包括“界面感觉不对”“让它更精致一点”及圆角、阴影、动效、图标等关键词。
11. 注意事项
- 无正式版本号/Release,滚动更新于 main 分支,使用前建议核对最近提交日期。
- OpenClaw 与 Hermes Agent 上的兼容性尚未有官方材料证实,使用前建议先行验证。
- 技能审查结论依赖 agent 真实走查各交互状态(含以低速回放动画),若 agent 未按说明执行验证步骤,输出质量会打折扣。