前端设计 (frontend-design)

前端设计（frontend-design）

概述

frontend-design 是 Anthropic 官方提供的前端界面设计技能。它的核心是：创建独特、生产级的前端界面，避免通用的”AI slop”美学。

作为前端开发者/设计师，你可能遇到过：

“AI 生成的前端代码太千篇一律”
“配色都是紫色渐变”
“布局太普通，没有设计感”

frontend-design 就是解决这些的。

核心理念

避免 AI Slop

AI 生成的设计通常有以下问题：

❌ 常见问题：
- 使用 Inter、Roboto、Arial 等通用字体
- 紫色渐变 + 白色背景
- 可预测的布局和组件模式
- 缺乏上下文特性的"饼干模具"设计

✅ frontend-design 追求：
- 独特、有辨识度的设计
- 生产级可用的代码
- 视觉上令人印象深刻
- 注重细节的精致感

设计思维

1. 理解上下文

在写代码之前，先理解：

目的：

这个界面解决什么问题？
谁是目标用户？
使用场景是什么？

风格方向：选择一个极端的方向：

极简主义（brutally minimal）
极繁主义（maximalist chaos）
复古未来（retro-futuristic）
有机自然（organic/natural）
奢华精致（luxury/refined）
活泼俏皮（playful/toy-like）
杂志风格（editorial/magazine）
粗野主义（brutalist/raw）
装饰艺术（art deco/geometric）
柔和粉彩（soft/pastel）
工业实用（industrial/utilitarian）

限制：

技术要求（框架、性能、可访问性）
浏览器支持
性能预算

差异化：

什么让这个设计难忘？
用户会记住什么？

2. 实施原则

关键原则：
- 选择清晰的设计方向并精准执行
- 极繁主义和精致极简都可以
- 关键是**意图性**，不是强度

代码要求：
- 生产级可用
- 视觉上令人印象深刻
- 有清晰的美学观点
- 在每个细节上精炼

设计指南

1. 字体排版

选择原则：

❌ 避免：
- Inter
- Roboto
- Arial
- 系统默认字体

✅ 推荐：
- 有特色的显示字体
- 优雅的正文字体
- 配对使用

示例：
- 显示字体：Playfair Display, Baskerville, Futura
- 正文字体：Source Serif, Crimson Text, Charter

2. 颜色与主题

配色原则：

❌ 避免：
- 均匀分布的配色
- 过于保守的颜色
- 紫色渐变 + 白色背景

✅ 推荐：
- 主色调 + 锐利点缀色
- 使用 CSS 变量保持一致性
- 信任你的配色选择

色彩组合示例：
- 黑色 + 橙色 + 白色
- 深绿 + 奶油色 + 金色
- 海军蓝 + 珊瑚红 + 米色

3. 动效

动效原则：

优先级：
1. CSS-only 方案（HTML）
2. Motion 库（React）

高 Impact 时刻：
- 一个精心编排的页面加载动画
- 交错揭示效果（animation-delay）

使用场景：
- 滚动触发
- 悬停状态
- 页面过渡

4. 空间布局

突破常规：

- 不对称布局
- 元素重叠
- 对角线流动
- 打破网格
- 大胆留白 OR 紧凑密度

不要：
- 总是居中对齐
- 总是均匀分布
- 总是网格排列

5. 背景与细节

创造氛围：

❌ 避免：
- 默认纯色背景
- 无纹理

✅ 推荐：
- 渐变网格
- 噪点纹理
- 几何图案
- 层叠透明度
- 戏剧性阴影
- 装饰性边框
- 自定义光标
- 颗粒叠加

目标：创造深度和氛围

实践案例

案例 1：仪表盘设计

需求：数据仪表盘

设计方向：深色 + 霓虹点缀 + 工业风

实现：

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #14141f;
  --accent-cyan: #00fff5;
  --accent-pink: #ff00aa;
  --text-primary: #ffffff;
  --text-secondary: #8888aa;
}

.dashboard {
  background: var(--bg-primary);
  font-family: 'JetBrains Mono', monospace;
}

.card {
  background: var(--bg-secondary);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
  box-shadow: 0 0 20px rgba(0,255,245,0.1);
}

.metric {
  color: var(--accent-cyan);
  text-shadow: 0 0 10px var(--accent-cyan);
}

案例 2：落地页设计

需求：产品介绍页面

设计方向：杂志风格 + 粗野主义

实现：

:root {
  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --color-ink: #1a1a1a;
  --color-paper: #f5f0e8;
  --color-accent: #ff4400;
}

.hero {
  font-family: var(--font-display);
  background: var(--color-paper);
  color: var(--color-ink);
}

.headline {
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.accent-box {
  background: var(--color-accent);
  color: white;
  padding: 2rem;
  transform: rotate(-2deg);
}

案例 3：电商卡片

需求：产品卡片

设计方向：奢华 + 极简

实现：

.product-card {
  background: #fff;
  border-radius: 2px;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.08),
    0 20px 40px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 4px 6px rgba(0,0,0,0.04),
    0 30px 60px rgba(0,0,0,0.08);
}

.product-image {
  aspect-ratio: 4/5;
  object-fit: cover;
}

.product-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 500;
}

检查清单

设计方向

有清晰的设计风格？
风格适合目标用户？
有差异化？

字体

使用特色字体？
避免通用字体？
字体配对合适？

颜色

配色独特？
有主次之分？
使用 CSS 变量？

动效

有高 Impact 时刻？
性能良好？
增强体验？

布局

有创意？
不是千篇一律？
留白/密度合适？

速查卡片

核心理念

避免 AI slop
独特设计
生产级代码

设计方向

极简/极繁
复古/未来
杂志/粗野

字体

特色显示字体
优雅正文字体
避免 Inter/Roboto

颜色

主色 + 点缀色
CSS 变量
避免紫色渐变

与其他技能

theme-factory - 主题工厂
web-artifacts-builder - Web 产物构建
canvas-design - Canvas 设计

查看源文件: GitHub原始文件