4.8K Star！一套规则让 AI 帮你写出“像人写的”前端代码

4.8K Star！一套规则让 AI 帮你写出"像人写的"前端代码

让 AI 写前端代码已经不是什么新鲜事了。但问题在于------AI 写出来的代码，总是"差点意思"：样式乱用、无障碍属性缺失、动画卡顿、元数据不全、Tailwind 类名随手乱写。不是 AI 能力不够，是没人告诉 AI 什么是对的。

最近有个叫 ui-skills 的项目火了，4.8K Star ，GitHub 趋势榜多次上榜。它不写代码、不生成组件，只做一件事------把前端开发的最佳实践，翻译成 AI 能理解和执行的规则。

一、AI 写前端代码，最大的问题不是"能不能写"，而是"写得对不对"

如果你最近在用 Cursor 或 Claude Code 写前端，大概率遇到过这种情况：

让 AI 写一个登录表单。代码跑起来了，功能也正常。但你仔细一看：h-screen 用在移动端滚动容器里------某些浏览器上会多出一截滚动条。按钮点击没有焦点管理，键盘用户根本不知道点没点上。动画用了 width 和 height 过渡，每帧都在触发重排，低端机上直接卡成 PPT。页面标题和 description 没有配置------发到社交媒体上就是一片空白预览。

功能正常，体验稀烂。

这不是 AI 的能力问题------是 AI 不知道什么叫"好"。大模型看过几百万个网页，但它分不清哪些是"能跑的代码"，哪些是"经得起推敲的工程代码"。

这就是 ui-skills 诞生的原因。

二、ui-skills 是什么？

ui-skills 是由开发者 ibelick 创建的一套面向设计工程师的 UI 技能集合。

它的核心目标非常直接：把界面实现与审查中的经验约束，转化为 AI 编码智能体可以理解和执行的规则。

它不是组件库，而是一个"规则层"------你可以把它理解成一份写得极其详细的《前端代码规范》，但不是给人看的文档，而是专门给 AI 读的、能直接执行的指令集。

截至目前，该项目已获得超过 4.8k Stars，在 GitHub 趋势榜上多次上榜。

三、它解决了什么问题？

大多数人让 AI 写前端的时候，都是直接把需求丢过去："帮我写一个登录页"。AI 按照训练数据里的"平均水准"生成代码------能跑，但质量参差不齐。

不同开发者的代码风格五花八门。同一个团队里，A 的组件用了 h-dvh，B 的组件还在用 h-screen；C 的按钮用了 AlertDialog 做删除确认，D 的直接 onClick 就删了。

维护成本居高不下，因为没有人给 AI 立规矩。

ui-skills 做的就是这件事：把"好代码长什么样"定义成明确的规则，让 AI 在写代码之前先读一遍规则，写完之后再自查一遍。

四、它和 Rules、Skills 有什么区别？

很多人会问：这不就是 Cursor Rules 吗？不就是一个 Skill 吗？

确实有关系，但不是一回事。

概念	作用	类比
Cursor Rules	项目级约束------"别用 any""用 pnpm"	公司规章制度
通用 Skills	某个领域的操作手册------"怎么处理 PDF"	岗位操作指南
ui-skills	前端 UI 的"质量标准" ------"什么算好代码"	行业 ISO 认证标准

ui-skills 更像是一个**"前端代码的 ISO 标准"** 。它不是针对某个项目的约束，也不是针对某个任务的指南，而是一套通用的、经过实战验证的 UI 开发规范。

而且它遵循标准的 SKILL.md 格式，可以被 Claude Code、Cursor、GitHub Copilot、OpenClaw、Windsurf、Cline 等任何支持技能协议的 AI 智能体加载和使用。

五、四大核心技能：覆盖前端开发全链路

ui-skills 提供了四个核心技能模块，覆盖前端开发的关键环节：

1. baseline-ui：统一界面基线

这是最基础的技能，规范了：

• Tailwind CSS 的使用方式------类名怎么组合、响应式怎么写
• 组件原语的选择------用 Radix UI / Base UI / React Aria 而不是自己造轮子
• 排版和布局的通用规范
• 常见 UI 模式的标准化实现

2. fixing-accessibility：审计和修复无障碍问题

无障碍（a11y）是 AI 最容易忽略的领域。这个技能专门解决：

• ARIA 标签的缺失或错误使用
• 键盘导航的焦点管理
• 表单元素的正确标记
• 语义化 HTML 的使用

3. fixing-metadata：检查和完善页面元数据

SEO 和社交分享的元数据配置：

• 页面标题和描述
• Open Graph 标签（og:title、og:description、og:image）
• Twitter Card 配置
• 结构化数据

4. fixing-motion-performance：优化动画性能

动画是另一个 AI 容易翻车的领域：

• 只使用 transform 和 opacity 做动画（GPU 加速，不触发重排）
• 禁止用 width、height、top、left 等触发重排的属性做动画
• 滚动关联动画的性能优化
• 布局抖动的预防

此外还有 improve-ui 技能，用于持续改进 UI 质量。

六、规则是可执行的，不是笼统的建议

ui-skills 和其他规范文档最大的区别是：它的规则是可执行的。

普通的规范文档会说："要注意性能""要关注无障碍""要保证代码质量"。AI 读了跟没读一样------它不知道怎么执行。

ui-skills 的规则长这样：

• ✅ 动画只能 使用 transform 和 opacity 属性
• ❌ 禁止使用 h-screen，改用 h-dvh
• ✅ 破坏性操作必须 使用 AlertDialog 确认
• ✅ 固定元素要 尊重 safe-area-inset
• ✅ 表单元素必须有正确的 ARIA 属性和键盘导航支持

每一个规则都是明确的、二进制的、AI 能直接判断"对还是错"的。

七、审查输出：不是"你错了"，是"这里有问题，建议这样改"

ui-skills 审查代码时，输出的是结构化的审计报告，逐项列出：

• Critical Violations：严重违规，必须修复
• Warnings：警告，建议修复
• ✅ 通过项

每一项都包含：

• 违规代码的位置和内容
• 为什么这是问题（影响说明）
• 具体的代码级修复建议

这种输出格式非常适合：

• PR 提交前的集中检查
• 团队代码评审
• 新人 onboarding 时的质量守门员

八、怎么用？三步上手

ui-skills 提供了多种使用方式，最简单的就是用 npx 直接运行：

npx ui-skills start

这会启动一个交互式界面，让你选择当前的任务类型，然后自动加载对应的技能集。

其他常用命令：

npx ui-skills categories              # 查看所有技能分类
npx ui-skills list --category motion   # 列出特定分类的技能
npx ui-skills get baseline-ui          # 获取指定技能的完整上下文

如果想把技能安装到项目中：

npx ui-skills init

这会安装到项目并在支持的工具中注册命令。

也可以单独安装某个技能：

npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

或者手动安装：

curl -o SKILL.md https://github.com/ibelick/ui-skills/raw/main/SKILL.md

九、适用场景：谁最需要它？

场景一：用 AI 写前端但总觉得质量不稳的开发者。 装上 ui-skills，AI 生成代码时会自动遵守规则，输出质量大幅提升。

场景二：团队有多人用 AI 写代码但风格不统一。 ui-skills 可以作为团队的"AI 代码规范"，确保所有人（和所有 AI）输出的代码风格一致。

场景三：做 Code Review 但不想每次都重复同样的意见。 让 ui-skills 先跑一遍审计，把基础问题筛掉，人工只需要关注架构和业务逻辑层面的问题。

场景四：对无障碍、性能、SEO 有要求但团队经验不足的项目。 ui-skills 相当于请了一个"前端质量专家"坐在你旁边，随时帮你检查代码。

写在最后

2026 年的前端开发，AI 写代码已经不是问题了。问题变成了 "AI 写的代码质量怎么样" 。

ui-skills 解决的就是这个问题------把"好代码"的定义，从人类的经验变成了 AI 可以执行的规则。

它不是让你放弃 Code Review，而是让你把 Code Review 的时间花在更有价值的事情上------架构设计、业务理解、用户体验------而不是一遍又一遍地指出"这里少了 aria-label""那里用了 h-screen"。

规则是可执行的，建议是具体的，输出是结构化的。

如果你在用 AI 写前端，ui-skills 值得一试。

GitHub: github.com/ibelick/ui-... 官网: ui-skills.com

评论区聊聊：你用 AI 写前端时最常遇到什么质量问题？你觉得这种"规则层"的方式能解决吗？