AI生成的页面总是”AI味”？试试这个官方设计Skill

你有没有这种感觉——AI 生成的前端页面怎么看起来都差不多？

深色背景 + 荧光绿点缀、大字标题配渐变、圆角卡片堆成一排……看一眼就知道是 AI 做的，不是人设计的。这就是大家常说的”AI 味”。

Anthropic 官方推出的 frontend-design Skill，就是来解决这个问题的。

它到底强在哪？

一句话概括：让你告诉 Claude“给我做个好看的页面”，然后真的得到一个独特的、有辨识度的设计稿，而不是又一张模板网页。

它的核心思路是让 Claude 像一个小型设计工作室的主创一样思考——每个项目都要有它独特的视觉身份，不能套模板。

具体做了三件事：

① 定美学方向再动手
写代码之前，Claude 会先确定这个页面的调性：是极简、复古未来感、还是野兽派？然后围绕这个方向选字体、配色、动效。不是先画再说，而是先想清楚再做。

② 打字要有灵魂
字体配对有讲究——不会上来就 Inter + Arial。会选择有个性的展示字体搭配精致的正文字体，并且设定清晰的层级和间距。

③ 克制但有记忆点
整个设计会有一个”签名元素”——一个让人记住这个页面的细节。其他部分则保持克制和精准，不会堆砌装饰。

安装超简单

Claude Code 用户直接跑：

claude code skills add frontend-design

然后直接跟 Claude 说”帮我做一个 Landing Page”，它就会自动调用这个 Skill。

什么场景用？

• 从零搭建高保真 React 组件或静态页面
• 设计产品 Landing Page、数据看板等完整 Web 应用
• 给现有页面做设计评审和优化

实际体验

我试过让 Claude 用这个 Skill 做一个科技公司介绍页，它没有走”深色 + 绿色”的老套路，而是选了一个偏报纸编辑风格的排版——大字标题、等线装饰、微妙的暖白背景。整个过程 Claude 会先输出设计思路，确认方向后再动手，不是上来就喷代码。

小结

如果你经常用 Claude Code 做前端，或者对 AI 生成界面的”设计感”有要求，这个 Skill 值得装上试试。至少下次你给客户或老板演示的时候，不用再解释说”这是 AI 生成的所以看起来有点……那个”。

GitHub 地址：https://github.com/anthropics/skills（frontend-design 是其中最受欢迎的 Skill 之一）

GitHub: https://github.com/anthropics/skills