用 Agent 写前端功能跑通往往还不够。页面能渲染按钮也能点整屏却还是像同一套模板。紫渐变、大圆角、到处发光间距松一截字号也乱跳。设计师看一眼就知道机器味太重了。最近在 GitHub 上刷到ui-skills维护者是 ibelick。仓库介绍就一行Skills for Design Engineers。写这篇文章时GitHub 上大约7682 Star343 Fork。官网技能目录页写着当前收录269个面向设计工程和前端团队的 skill。作者将研发流程中UI/UE设计师、工程师平时挂在嘴边的规矩拆成 Agent 能按需加载各种 SKILLS。初始阶段skill只会对外暴露 name 和 description。Agent根据name 和 description会将任务匹配到不同的skill匹配成功后才会将完整说明读进上下文免得一上来塞满无关规则。它怎么用起来想试的话装起来很简单在终端执行下面命令。npx ui-skills start npx ui-skills categories npx ui-skills list--categorymotion npx ui-skills get baseline-uistart会先走路由层。Agent会先判断是否跟 UI 有关再按主题、技术栈和意图选着最合适到 1 到多条 skill。项目中负责这个筛选过程的skill 是ui-skills-root。这个skill将这一规则写得很明确优先只加载 1 条最多不超过 3 条。拿不准该用哪条时先用categories和list看分类再get指定 slug。也可以走 MCP。地址是https://www.ui-skills.com/mcp工具就两个list_skills和get_skill。也可以通过官方包安装方式进行一键安装npx skillsaddibelick/ui-skillsskills.sh 目前已经列出了8个 skill总安装量大约7.9 万。官方这几条最常碰到baseline-ui这个skill用来做快速清理。它会将间距、层级、排版、小布局问题都先检查一遍。skill中有不少强制规则比如不能把h-screen改用h-dvh交互动画不能超过 200ms默认不使用紫渐变和发光特效。fixing-accessibility查 ARIA、键盘操作、焦点管理和对比度。表单、对话框、可交互控件非常适用这个技能。fixing-motion-performance盯动画卡顿。布局抖动、合成层属性、滚动联动、大面积模糊这些都会进审查范围。fixing-metadata补 title、Open Graph、canonical、JSON-LD。页面要上线、要分享预览时很实用。另外还有improve-ui和create-design-md这两个技能。improve-ui负责审计、写交接计划它是不会动你仓库中的源码的。create-design-md它能通过某一个github仓库或公开网站反推一份 设计文档DESIGN.md你可以通过这个设计文档复刻出同款网站。官网目录里还能看到 antfu、emilkowalski、shadcn、Anthropic 等作者贡献的 UI skill。按 Accessibility、Motion、Craft、Taste 这些主题筛就行。另有一份Playbook把常用界面经验收成短条目。比如图片预留aspect-ratio标题用text-balance触控目标尽量到 44px。内容都很短正好适合塞进 Agent 的检查清单。写在最后需要注意的是这个技能它解决的是 Agent 的上下文和规范问题。它无法帮你直接生成整套视觉系统更不可能决策你的业务交互对不对这些事情还是你自己干。如果你现在的工作使用了大量AI Coding开发UI但又总觉得做的效率不理想、AI味太重那这个skill你不妨试试。项目地址https://github.com/ibelick/ui-skills一个用AI重塑生产力的程序猿分享AI 技术、开源项目和实用工具感谢关注分享。
