每天一个 Agent Skills：frontend-design — 告别 AI 味，做让人过目不忘的界面
frontend-design是 Claude Code 的前端设计技能，它不只生成代码，更驱动你先思考设计方向，再输出具有独特美学基因的生产级界面。本文介绍它的设计哲学、核心用法，以及如何用它摆脱千篇一律的 "AI 味" UI。
为什么需要这个技能
用 AI 生成前端代码太容易了——一个 prompt，输出一堆紫色渐变卡片 + Inter 字体 + 居中布局，业界称之为 "AI slop"（AI 糊弄美学）。这种界面没有任何上下文灵魂，放到任何项目里都不违和，但也都不出彩。
frontend-design 技能解决的核心问题是：让 AI 生成的前端代码，先有设计意图，再有实现细节。
举个例子： 我让其生成一个个人作品集网站
使用前：
加上skills,提示词加上科技风 使用后
怎么样，是不是酷炫很多！！
设计思维先行
这个技能的核心不在代码，而在动手前的设计决策阶段。它要求你依次回答四个问题：
1. Purpose — 这个界面解决什么问题，谁在用
不是功能清单，是用户场景。比如同样是仪表盘：
- 运维人员看的 → 需要实时状态、一眼可见的异常
- 管理者看的 → 需要趋势、对比、摘要
场景不同，即使数据完全一样，视觉语言也应完全不同。
2. Tone — 选择一个极致的设计调性
技能列出了大量方向可选：
- Brutally Minimal（极简到近乎粗暴）
- Maximalist Chaos（大胆撞色、密集信息）
- Retro-Futuristic（复古 + 科幻的混搭）
- Luxury / Refined（高端品牌质感）
- Organic / Natural（有机曲线、自然纹理）
- Editorial / Magazine（杂志排版风）
- Brutalist / Raw（毛坯工业风）
关键是选一个，然后贯彻到底，而不是均匀地"稍微好看一点"。
3. Constraints — 技术约束
框架选择（React / Vue / 纯 HTML）、性能要求、无障碍需求。
4. Differentiation — 什么让这个设计不可忘记
这是最重要的一问。一个界面必须有一个记忆锚点，是色彩、动效、布局还是交互细节。
设计美学五板斧
设计方向确定后，技能从五个维度落地实现：
字体 — 拒绝 Arial / Inter，选择有性格的字体
| 场景 | 推荐字体方向 | 示例 |
|---|---|---|
| 科技感 | 等宽 + 几何无衬线 | JetBrains Mono + Syne |
| 优雅奢华 | 衬线标题 + 无衬线正文 | Playfair Display + DM Sans |
| 复古印刷 | 强对比衬线 | Bebas Neue + Crimson Pro |
| 自然有机 | 手写感或圆润无衬线 | Caveat + Nunito |
技能特别强调一对配对：一个抓眼球的展示字体 + 一个精致易读的正文字体。
色彩与主题 — 主导色 + 锐利点缀
用 CSS 变量管理一致性。关键是主导色 + 单一强对比色比均匀分布所有颜色要出彩得多。例如主色是深蓝绿，强调色用暖橙色，比所有颜色平分秋色要高级。
动效 — 克制但有力
技能推崇 CSS 优先，React 环境用 Motion 库。核心原则是：
- 页面加载时的交错渐显（staggered reveal）比零散的微交互更让人愉悦
- 滚动触发和悬停状态要有惊喜感，不能只是缩放
- 动画要服务于信息层级，不是装饰
空间布局 — 打破网格
技能鼓励：
- 非对称布局
- 元素重叠
- 斜向流动
- 大面积留白 或 精心控制的密度
不是所有页面都要填满，留白本身就是一种声音。
背景与视觉细节 — 创造氛围而非纯色
优先选择：
- 噪点纹理（grain overlay）
- 渐变网格
- 几何图案
- 层叠透明度
避免纯色背景 + 卡片阴影的俗套组合。
实际效果对比
用同一个需求"展示一个用户数据卡片"，看 AI 默认生成 vs. 用 frontend-design 思考后生成的差异：
AI 默认输出：白色背景、卡片带浅灰阴影、Inter 字体、蓝色主题色、居中布局、hover 缩放 1.02。
frontend-design 输出（假设选择 Brutalist Raw 方向）：
- 深色背景 + 高对比度网格线
- 字体换成 Space Grotesk 展示 + DM Mono 正文
- 卡片无阴影，改用粗边框分割
- 数字用超大字号左侧对齐，配合进度条
- hover 状态用色彩反转（invert），而非缩放
- 背景叠加 SVG 噪点纹理
两个界面数据完全相同，但第二个有设计意图，第一个只是"有了"。
使用方法
在 Claude Code 中直接调用：
/frontend-design
然后描述你的需求——越具体越好。包含：
- 目标用户和场景
- 已有技术栈
- 是否有参考风格
- 是否需要响应式
局限性与取舍
- 设计方向依赖 prompt 质量：如果描述模糊，输出可能还是偏"安全"
- 复杂动效增加代码量：需要权衡维护成本
- 个性化字体依赖 CDN：网络不佳时有字体加载闪烁（FOIT）风险
结语
frontend-design 不是一个"生成更好看代码"的工具，它是一套设计决策框架。它强迫你在写代码前先想清楚：我要做什么风格，为什么，这个风格对这个场景是否合适。
当你真正按这个流程走一遍，你会发现 AI 生成的前端代码开始有了灵魂——不是随机好看的装饰，而是一个有上下文、有意图、有记忆点的界面。
下一步：在你的下一个项目中，试着用 /frontend-design 描述需求时，加上你选择的 Tone 和 Differentiation，看看结果有什么不同。
进一步阅读：
