让 Claude 告别「AI 模板脸」

用 Claude Code 生成前端页面时，你有没有发现——出来的界面总是似曾相识？Inter 字体、白底紫渐变、圆角卡片、居中布局……一看就是 AI 写的。

Claude Code 内置了一个 frontend-design 技能，专门解决这个问题。它是一个设计 manifesto，指导 Claude 生成有辨识度、有设计感的前端界面，而不是安全但平庸的模板。

该技能来自 Claude Code 仓库（128,000 ★），是官方内置的插件技能之一。

设计理念

在写任何代码之前，先思考四个问题：

• Purpose——解决什么问题？为谁而做？
• Tone——选择一个极端的美学方向：极简、混乱、复古未来、有机/自然、奢华、玩趣、编辑风、粗野主义、装饰艺术、柔和、工业风……
• Constraints——框架、性能、可访问性等技术要求
• Differentiation——「什么让这个设计令人难忘？」——找一个记忆点

"Bold maximalism and refined minimalism both work — the key is intentionality, not intensity."

六大设计准则

1. 字体

明确禁止使用 Inter、Roboto、Arial、system-ui 等泛化字体。选择有性格的字体，搭配一种展示字体 + 一种精致正文字体。特别警告：不要所有生成都用 Space Grotesk。

2. 色彩

使用 CSS 变量保持一致性。「强主导色 + 锐利强调色」远胜于「均匀分布、毫无重点的调色板」。特别禁止：紫色渐变 + 白色背景。

3. 动效

纯 HTML 用 CSS 动画，React 用 Motion 库。重点放在高光时刻：staggered reveals、滚动触发、惊喜悬停效果。

4. 空间构图

打破网格——不对称布局、重叠、对角线动势、元素出格。大胆运用留白或刻意密度。

5. 背景与细节

不要用纯色背景。渐变网格、噪点纹理、几何图案、透明叠加、戏剧性阴影、装饰性边框、自定义光标、颗粒覆盖。

6. 反模式

以下特征会被标记为「AI 生成」：Inter/Roboto/Arial 字体、紫色渐变 + 白底、可预测的布局和组件模式、缺乏上下文的通用设计。

如何使用

在 Claude Code 中启用 frontend-design 插件后，当你说「帮我写一个落地页」「创建一个仪表盘组件」时，Claude 会自动应用这套设计规则，生成更有个性的界面。

技能文件位于仓库：plugins/frontend-design/skills/frontend-design/SKILL.md

总结

Frontend Design Skill 是 Claude Code 最有价值的原生技能之一。它不教 Claude 写代码——而是教 Claude 做设计。如果你用 Claude Code 生成前端页面，装上这个技能，输出质量会有明显提升。

▶ 查看 SKILL.md · Claude Code 128,000 ★