安装
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