技能包

make-interfaces-feel-better:先对照细节清单再改界面手感

适合要让智能体打磨界面手感的人;用官方 npx 安装后先做只读对照,确认动效、悬停和热区等问题后再改代码。

官方来源 · make-interfaces-feel-better

安装

npx skills add jakubkrehel/make-interfaces-feel-better

适合谁

这份指南面向界面已经能用、但总觉得「差点手感」,希望智能体按一份专注小细节的技能来对照的人。官方把它写成关注让界面更好用的那些细节。仓库见

https://github.com/jakubkrehel/make-interfaces-feel-better

技能正文在

https://github.com/jakubkrehel/make-interfaces-feel-better/blob/main/skills/make-interfaces-feel-better/SKILL.md

材料写明覆盖动画、字体排版、图标、悬停态、光学对齐、同心圆角、阴影、热区等。它适合你已有可预览的界面,只想打磨这些点。它不适合还没有界面、却想让智能体凭空设计一整套视觉系统的人。现有材料没有点名必须支持的客户端,也不要推断只有某一家能装。

仓库以 MIT 许可发布,说明见

https://github.com/jakubkrehel/make-interfaces-feel-better#MIT-1-ov-file

3 分钟完成第一次尝试

只走官方推荐的一条路径。

前置条件:本机可运行 npx,并且工作区里有可打开的界面代码或预览。执行前确认当前项目就是要写入技能的位置。

安装位置:由 npx skills add 处理。材料没有写出目标文件夹,不要手补未出现的路径。技能文件的官方位置是上面的 SKILL.md。

复制并执行:

npx skills add jakubkrehel/make-interfaces-feel-better

成功信号:命令正常结束,智能体能引用动画、悬停态或热区等条目。先做只读对照:指定一个已有页面,请它只列出可能的手感问题,明确禁止改文件。能按技能里的类别(而不是空泛说「不好看」)指出问题,说明已加载。

改样式会动仓库。确认要改的文件和范围之前,不要授权写入。

使用案例

案例一:先查悬停态和热区。对应技能覆盖的 hover states 与 hit areas。适合按钮或链接已经能点,但总觉得不好点或没有反馈。先只要问题清单。成功时,意见落在悬停和可点范围,而不是重做整页。材料没有给出最小热区尺寸或具体 CSS。

案例二:对照排版、光学对齐和同心圆角。对应 typography、optical alignment、concentric border radius。适合布局已定,只想修字距、对齐和圆角是否同心。先截一张当前界面或指出组件,要求只评这三项。成功时,建议能对上这几类,而不是另起一套设计。材料没有给出数值规范;缺了的部分到此为止。

使用边界

现有材料只证明这一条 npx 安装命令和上述主题列表。不要编造其他技能名、命令或设计 token。标题里的「and more」没有展开,不要把未写出的主题当成已有清单。

材料没有规定语言或框架。不要从示例推断只支持某一栈。动画、阴影和圆角改动都可能影响已有视觉,先对照再改。更多说明以官方仓库为准:

https://github.com/jakubkrehel/make-interfaces-feel-better