Claude Code 写前端还是AI味？试试这三个Skill组合拳

最近在刷 Twitter 时，看到一个开发者吐槽：现在用 Claude Code 写前端，出来的页面全是「AI 味」——紫蓝渐变、居中大标题、底部虚线框。看起来能跑，但就是很廉价。

然后他测了 5 个目前最流行的前端页面设计 Skill，结果挺有意思的：

ui-ux-pro-max 反而一般，自带太多模版和规则，限制了模型的发挥空间。真正好用的是这三个：

动效方面：emil-design-eng

这个 Skill 来自 Emil Kowalski（动画设计领域很有名的人）。它不只是告诉你「加个动画」，而是灌输了一种设计工程哲学：界面里那些用户根本不会注意到的细节，叠加起来才让软件「感觉对」。

用的时候，它要求 Claude 每次 Review UI 代码，必须用 Before/After 表格输出，不能用列表糊弄。transition 要精确到毫秒和缓动函数，不是笼统写个 all 300ms。

网页规范+无障碍：web-design-guidelines

Vercel 团队开源的这个 Skill，把他们 10 年 React 开发经验打包进去了。100 多条规则，覆盖：

• 无障碍（a11y）：ARIA 标签、键盘导航、屏幕阅读器兼容
• 语义化 HTML：标签用对，结构合理，SEO 友好
• 性能最佳实践：CLS 优化、字体加载、懒加载策略

实测下来，Claude 写组件时自动带上这些检查逻辑，生成的页面不再是「能跑就行」，而是真正可以上生产环境的。

安装方式：

npx skills add vercel-labs/agent-skills
# 或直接装单个
npx skills add vercel-labs/agent-skills/web-design-guidelines

AI 味最小：taste-skill

这个 Skill 的核心理念是「反模板化」——让 AI 生成的界面更像 Linear、Apple、Stripe 这些有设计感的产品，而不是千篇一律的「AI 默认风格」。

它把设计系统拆成可移植的模块：排版、间距、动效、色彩。Claude 接入后，写出来的东西会主动对齐这些高级产品的风格，而不是那股廉价的渐变风。

三个 Skill 配合起来用效果最好：taste-skill 定风格基调，emil-design-eng 打磨动效细节，web-design-guidelines 守住工程底线。这组合拳打下来，Claude Code 生成的前端质量能提升一个档次。

GitHub：https://github.com/vercel-labs/agent-skills

GitHub: https://github.com/vercel-labs/agent-skills