AI 写的界面越来越多为什么看起来还是很廉价一个开源项目给出了答案一、先说痛点AI 能写代码但写不出好看的界面如果你最近在用 Claude Code、Cursor、Codex 这类 AI 编程助手做前端开发大概率遇到过这样的场景功能逻辑对了页面也能跑起来但整体观感就是透着一股AI 味——间距忽大忽小、字体层级混乱、按钮和输入框风格不统一、动画卡顿生硬、无障碍访问accessibility基本为零……业内把这种现象戏称为“UI slop”界面糊状物。根本原因不难理解AI 编程助手擅长的是让代码跑起来但界面设计里那些不成文的规矩——比如间距要用 4/8 的倍数“动画时长该多长”“哪些元素必须支持键盘操作”——很少被写进训练数据里更不会被 AI 自动执行。结果就是代码生成得越快界面质量的平均线拉得越低。ui-skills这个开源项目作者 ibelickGitHub 上已获得 5000 Star正是冲着这个问题去的。二、它是什么给 AI 装上设计工程师的经验包ui-skills的定位很直接——Skills for Design Engineers写给设计工程师的技能包。它不是一个组件库不提供现成的按钮、卡片这些 UI 组件也不是一个新的框架。它更像是一套可插拔的规则文档专门喂给 AI 编程助手让它在写界面代码时自动遵守一线设计工程师总结出来的最佳实践。这套技能包目前已经覆盖了几个高频痛点比如baseline-ui快速去 AI 味修正间距、层级、字体、布局这些基础问题防止界面显得敷衍fixing-accessibility审查并修复无障碍问题包括 ARIA 标签、键盘导航、焦点管理、颜色对比度、表单报错提示等fixing-metadata修正页面元信息包括标题、描述、Open Graph、Twitter 卡片、canonical 链接、结构化数据解决 SEO 和社交分享预览的问题fixing-motion-performance排查并修复动画性能问题比如布局抖动、该用合成层属性却没用、滚动联动动画卡顿等improve-ui对已有产品界面做审计找出真实存在的问题并输出可执行的改进方案每个技能都对应一份SKILL.md文档里面用 MUST / SHOULD / NEVER 这样接近工程规范的语气把该做什么、不该做什么写得清清楚楚AI 读完之后就会按这套标准去写代码或做审查。有意思的是ui-skills本身还内置了一个路由层技能ui-skills-root。它的作用是当你告诉 AI “帮我优化一下这个页面时AI 会先判断这是不是 UI 相关任务再自动识别应该调用哪个具体技能、加载多少上下文避免一股脑塞给模型一堆规则”。项目文档里给出的选择原则也很克制优先只用 1 个技能最多不超过 3 个避免上下文过载。三、怎么用三行命令就能接入ui-skills主打开箱即用通过npx命令行工具管理不需要额外安装。第一步让 AI 自动路由到合适的技能npx ui-skills start这条命令会加载路由技能AI 会根据你当前的任务比如这个按钮动画很卡自动判断该用哪个技能包。第二步按需查看技能分类和列表npx ui-skills categories npx ui-skills list--categorymotion第三步单独安装某个具体技能如果你已经明确知道自己要解决什么问题也可以直接安装某一个技能比如给界面做一次去 AI 味清理npx ui-skillsaddbaseline-ui或者一次性修复无障碍访问问题npx ui-skillsaddfixing-accessibility想把所有技能都装上也可以npx ui-skillsadd--all安装完成后技能会以 Markdown 文档的形式加入到你的 AI 编程助手Claude Code、Cursor、Codex 等的上下文里之后每次相关的 UI 任务AI 都会自动参照这些规则来执行。比如装了baseline-ui之后在对话里输入/baseline-ui 文件路径AI 就会拿这份文件去对照所有约束条件逐条检查并输出修改建议。四、总结ui-skills解决的不是AI 会不会写界面的问题而是AI 写出来的界面能不能达到专业水准的问题。它把设计工程师脑子里那些琐碎但关键的经验——间距该怎么留白、动画该怎么克制、无障碍该怎么保底——沉淀成结构化的规则文档让 AI 编程助手在生成或审查代码时有据可依而不是全凭感觉。对前端开发者、独立开发者尤其是大量依赖 AI 编程助手出活的团队来说这类技能包式的开源项目其实代表了一个越来越明显的趋势未来提升 AI 产出质量的关键可能不在模型本身而在于我们能不能把行业经验写成 AI 看得懂、用得上的说明书。如果你也在被 AI 生成的廉价感界面困扰不妨花几分钟试试这套工具——项目地址github.com/ibelick/ui-skills。