AI 写的界面越来越多，为什么看起来还是很“廉价“？一个开源项目给出了答案！

AI 写的界面越来越多，为什么看起来还是很"廉价"？一个开源项目给出了答案

一、先说痛点：AI 能写代码，但写不出"好看"的界面

如果你最近在用 Claude Code、Cursor、Codex 这类 AI 编程助手做前端开发，大概率遇到过这样的场景：

功能逻辑对了，页面也能跑起来，但整体观感就是透着一股"AI 味"——间距忽大忽小、字体层级混乱、按钮和输入框风格不统一、动画卡顿生硬、无障碍访问（accessibility）基本为零……业内把这种现象戏称为“UI slop”（界面糊状物）。

根本原因不难理解：AI 编程助手擅长的是"让代码跑起来"，但界面设计里那些不成文的规矩——比如"间距要用 4/8 的倍数"“动画时长该多长”“哪些元素必须支持键盘操作”——很少被写进训练数据里，更不会被 AI 自动执行。结果就是，代码生成得越快，界面质量的"平均线"拉得越低。

ui-skills这个开源项目（作者 ibelick，GitHub 上已获得 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。