用AI写前端界面的人都知道一个痛点:AI生成的代码功能没问题,但界面看起来总是差点意思——动画生硬、交互细节粗糙、整体质感像模板拼出来的。Linear的设计师Emil Kowalski做了一组AI Agent Skills,专门解决这个问题。
项目地址:github.com/emilkowalski/s…
GitHub Star数接近4万,说明确实有不少人在用。我昨天试了一下,体验确实不错。它不是那种泛泛的设计规范文档,而是针对AI Agent优化的指令集,让AI在生成界面时能自动遵循设计原则。
最让我惊喜的是Apple Design这个Skill。它把Apple WWDC设计分享中的界面与动效原则整理成指导,帮助改善界面层级、反馈和整体连贯性。我有个做独立开发的朋友,他之前用AI生成的界面总是像安卓风格,用了这个Skill后,生成的界面确实有苹果原生App的味道了。
除了Apple Design,还有好几个都很实用。比如animate这个Skill,它会先判断是否有必要加动画,再决定动画目的、实现方式、属性、曲线和时长。不是那种所有地方都加动画的暴力方案,而是让动效真正帮助用户理解操作反馈。
review-animations和improve-animations这两个Skill也挺有意思的。前者检查已有动画是否合理,比如是否多余、速度是否拖沓、缓动是否合适;后者检查整个项目的动画,整理出可执行的改进建议。我试了一下,确实比自己手动检查要高效很多。
还有mobile-native这个Skill,帮助网页在手机上更像原生应用,关注安全区、触控反馈、输入框缩放和移动端视口等细节。我之前做移动端网页时,这些细节经常被忽略,用了这个Skill后,体验确实提升了不少。
如果你也在用AI做前端界面,可以试试这组Skills。特别是那些需要快速出原型的项目,用这些Skills能省不少时间在设计细节上。
21 浏览 0 评论
0 反应














