AI 生成界面千篇一律？这个 Skill 强制你先把美术方向定清楚

你有没有这种感觉——AI 生成的界面全都长得差不多？

Inter 字体、紫蓝渐变、圆角卡片、居中 Hero，闭着眼都能画出来。不是设计师不努力，是模型太容易滑进最省力的”安全选项”。

法国独立开发者 Christopher Louët 写的 dev-frontend-design，干的就是这件事：不给 AI 留那条退路。

核心理念：先定方向，再写代码

这个 Skill 的 workflow 很简单，但反常识：

它要求在写任何前端代码之前，必须先确认一个美术方向。不是”你想要什么风格”，而是给 AI 划定六条明确的路：

• terminal：等宽字体 + 黑色/霓虹绿 + 锐利边缘 → 适合开发者工具、命令行界面
• cockpit：高密度面板 + 实时指示器 → 适合仪表盘、监控系统
• vitality：高饱和彩色 + 弹跳动效 + 圆润边角 → 适合 B2C 应用、游戏化产品
• editorial：衬线字体 + 米白纸张质感 → 适合博客、长文阅读
• glass：玻璃拟态 + 渐变背景 + 景深 → 适合高端现代应用
• signal：极简灰白 + 功能色标 → 适合效率工具

方向不是建议，是强制。你不选，它会追着你问。

字体禁区 & 配色禁区

这个 Skill 真正狠的地方在这里——它列出了一份AI 默认字体黑名单：

禁止：Inter、Roboto、Arial、Space Grotesk

理由很简单：这些字体在 AI 界面里出现频率太高，高到已经是”没有设计”的信号。

每种方向都有对应的字体推荐：terminal 用 JetBrains Mono / Fira Code，vitality 用 Nunito / Bricolage Grotesque，editorial 用 Playfair Display + 无衬线组合。选什么字体是方向决定的，不是模型拍脑袋的。

配色同样——AI 最爱 #6366f1 + #8b5cf6 的紫蓝渐变，这条路也被堵死了。terminal 只能用单一霓虹色，vitality 要三到四个高饱和色，editorial 则回归黑白/米白 + 一个点缀色。

圆角是签名，不是装饰

这个观点我第一次看到时愣了一下：

「Do NOT use rounded-xl / rounded-2xl by default “because it looks nice”. Radius is a signature.」

圆角不是”看起来顺眼就加上”，而是你方向的一部分。terminal 是 0-4px 的锐利，glass 是 12-16px 的流体，vitality 是更宽的 12-16px。AI 默认什么都是大圆角，这个 Skill 强制你反思这个选择。

安装方式

Skill 在 christopherlouet/claude-base 仓库里，结构非常完整：

https://github.com/christopherlouet/claude-base

路径：.claude/skills/dev-frontend-design/SKILL.md

配合作者的 design-style.md 规则文件，美术方向系统相当详尽。作者在 Skill 文档里也提到，和 Anthropic 官方的 frontend-design 是互补关系——那个解决”怎么写代码”，这个解决”先走哪条路”。

如果你经常用 AI 生成前端界面，装上这个 Skill，它会逼你在动手之前先想清楚：我要做的是什么类型的界面？用哪种语言说话？

这个停顿，才是设计的开始。

GitHub: https://github.com/christopherlouet/claude-base