233k星的界面手感修复术！AI生成UI自动变精致

你有没有这种感觉——明明功能一样，但有些产品用起来就是「更顺手」？按钮大一分、间距松一行、动画快半拍……这些细节说不清，但一用就知道。

这就是「界面手感」。

最近挖到一个超硬核的开源 Skill——make-interfaces-feel-better，来自 233k ⭐ 的巨型仓库 ECC（expert-ai-coach）。作者是 affaan-m，专门解决一件事：怎么让 AI 生成的界面，真正摸起来像人精心打磨过的。

它能做什么？

这个 Skill 不是设计指南，而是一份界面手感清单。它会在你写完 UI 代码之后，自动做一轮细节修复，覆盖这些维度：

• 间距（Spacing）：元素之间松紧是否合理，视觉重心稳不稳
• 字体（Typography）：字号、行高、字重的组合是否构成层次
• 边框与阴影：层次感够不够，有没有「假立体」感
• 动效（Motion）：过渡是否自然，有没有突兀的跳帧
• 热区（Hit Areas）：按钮点击区域够不够大，移动端友好吗
• 图标与文字包装：图标风格是否统一，文字有没有被截断
• 交互状态：hover、active、disabled、loading 状态是否完整

实际体验

我拿一个 Claude Code 生成的数据看板跑了一遍。原始输出功能齐全，但用起来总觉得「干巴巴的」——套了这个 Skill 之后，它自动给表格加了斑马纹、给按钮组调了 border-radius 统一感、在卡片 hover 时加了微妙的 shadow 提升、把分页器热区从 36px 放大到 44px……这些改动不大，但整个界面立刻「活」了起来。

最妙的是它不改变你的功能逻辑，只是在你写完之后自动补手感，就像请了个资深 UI 工程师帮你 Review 一遍。

适合谁用？

如果你在用 Claude Code / Codex 做前端开发，这个 Skill 直接装上就能用——每次生成 UI 后触发，帮你做最后一公里的细节打磨。它适合：

• AI 代码生成流程的前端开发者
• 想快速给原型提升质感的设计师
• 需要保证交付质量的 Dev Agency

怎么装

直接用 Claude Code 跑：

npx skills add https://github.com/affaan-m/ECC/tree/main/skills/make-interfaces-feel-better

或者去 SkillsMP 页面一键导入。仓库目前 233k ⭐，更新非常活跃，质量有保证。

GitHub 链接：https://github.com/affaan-m/ECC/tree/main/skills/make-interfaces-feel-better

GitHub: https://github.com/affaan-m/ECC/tree/main/skills/make-interfaces-feel-better