前几天分享过 Emil Kowalski 那套界面 Skill,今天这套是另一位设计工程师 Jakub Krehel 写的,切的角度不一样。
Emil 那套主讲动画怎么做,这套把界面拆成 UI 细节、排版、配色、无障碍、布局、文案 6 块,每块一个 Skill,作者办了一本叫 Interfaces 的设计工程杂志。
规则给的都是具体数值。嵌套圆角外圈等于内圈加内边距,按钮按下缩到 0.96,图标切换用透明度加缩放加 4 像素模糊过渡,Agent 照着做就行。
Emil 那套说按下缩到 0.97,这套说 0.96,两位设计工程师差了 0.01,挺有意思。
GitHub:
我最喜欢的是那个叫 break 的 Skill,挑一个组件,它临时起一个页面把这个组件所有状态和边界场景全渲染出来,一屏看完哪里会崩。
还有一个能反查网页上某段动画或某块 UI 是怎么实现的,看到别人家效果好直接问它。
Claude Code 有插件市场入口,其他 Agent 一条命令也能装。前端写完总觉得差口气又说不出差在哪的,让它审一遍。
显示更多