为什么 Claude 写前端总有一股”AI 味”？Anthropic 官方这个 Skill 直接治本

为什么 Claude 写出来的前端页，总有一股”AI 味”？那个米白底+橘色点缀、Inter 字体满天飞、卡片阴影软绵绵的”硅谷创业团队官网”既视感——你大概率遇到过。

Anthropic 官方仓库里藏了一个叫 frontend-design 的 Skill，专门治这个毛病。它不教你写代码，而是给 Claude 装上一套”美学总指挥”的人设：当一家以视觉识别闻名的设计工作室的首席设计总监，接到一个对”模板感”零容忍的客户。

它做对了哪几件事

第一，把 AI 最容易翻车的 9 种模板美学点名挂出来。比如奶油底（#F4F1EA）配陶土橘（#D97757），或者纯黑底 + 酸性绿/朱红，又或者”SaaS 卡片套件”——所有元素统一圆角、统一灰阴影、渐变当装饰。Skill 直接告诉你：这些不是错，但它们是”懒人默认”。当你做的是面向特定主题的设计（比如儿童玩具、量化金融、海洋环保），就别再回到这九宫格里挑颜色。

第二，强制走”先规划、后实现”两遍稿。第一遍只输出设计计划：4-6 个色值的色板、字体角色、一句话布局概念 + ASCII 线框图、设计原则。第二遍在写代码前，先拿计划对照需求自查——这一遍不是流程礼仪，是真正挑刺：”这个配色是我为这单项目选的，还是我会给任何类似需求都这么配？”如果答案是后者，就改。

第三，把”克制”当核心 KPI。它引用可可·香奈儿的那句”出门前照镜子，取下一件饰品”——一页上只允许有一个”记忆点”，其他元素全部退到背景里去装饰。

我看到的几个反常识细节

• 字号不是越大越好，但在有疑虑时选大。这条对海报和落地页尤其救命。
• 数字编号（01/02/03）只在内容确实是序列时用，比如时间线、流程步骤。装饰性编号 = AI 痕迹。
• 全大写字母标签、虚线分割、单字加粗高亮——三大”AI 味儿”排版硬伤，Skill 直接拉黑。
• 文案和设计是同一件事：CTA 按钮说”保存修改”不说”提交”，错误提示说明原因和怎么修，空状态是邀请而不是抱歉。

怎么用起来

直接装到 Claude Code 里（npx skills add https://github.com/anthropics/skills --skill frontend-design），然后在 prompt 里描述你要做的页面主题、用户、核心任务。Skill 会先给你一段设计宣言，再用文字线框 + 色板定稿，最后才写代码。

适合任何对”别再给我紫渐变 + Inter”有意见的人。

GitHub：https://github.com/anthropics/skills/tree/main/skills/frontend-design

GitHub: https://github.com/anthropics/skills/tree/main/skills/frontend-design