前端美学设计Skill frontend-aesthetics

---

name: frontend-aesthetics description: 在创建UI设计时使用，避免通用的“AI垃圾”美学。强制使用独特的字体、统一的色彩系统、有目的性的动效和氛围感背景。对于落地页、仪表板和品牌界面至关重要。 allowed-tools: Read, Grep, Glob

前端美学技能

何时使用

始终在以下情况使用此技能：

• 创建落地页或营销网站
• 设计仪表板或管理界面
• 构建品牌化UI组件
• 审查设计的独特性
• 实现视觉润色和动画效果

不要在以下情况使用：

• 处理后端/API代码
• 编写测试
• 不会上线的快速原型

问题：分布趋同

Claude默认采用通用设计，因为安全、普遍可接受的选择主导了训练数据。这导致了“AI垃圾美学”：

• 到处都是Inter/Roboto字体
• 紫色/蓝色渐变
• 极简动画
• 扁平、无生气的背景
• 均匀分布的色彩调色板

此技能提供具体的替代方案以打破默认模式。

核心原则

• 真正的深色主题（不是灰色 - 真正的深色调）
• 单一强调色 - 选择一个并一致使用
• 专业、可操作的UI - 数据密集，而非装饰性
• 微妙的深度 - 分层背景，非扁平化

四个设计维度

1. 字体排版

避免： 将Inter、Roboto、Arial作为主要字体（它们作为后备字体没问题）

独特替代方案：

/* 标题：粗体、独特 */
--font-heading: 'Plus Jakarta Sans', 'Bricolage Grotesque', sans-serif;

/* 正文：清晰、易读 */
--font-body: 'Inter Variable', system-ui;

/* 代码/数据：有特色的等宽字体 */
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

/* 其他独特选项 */
/* 现代/科技：Space Grotesk, Outfit, Manrope */
/* 高端：Playfair Display, Cormorant */
/* 友好：Nunito, Quicksand, Poppins */

字重对比：

// 要：极端的字重变化
<h1 className="text-4xl font-black">仪表板</h1>  // 900
<p className="text-base font-light">副标题</p>    // 300

// 不要：最小的变化
<h1 className="text-2xl font-semibold">仪表板</h1>  // 600
<p className="text-base font-medium">副标题</p>      // 500

尺寸层级：

// 要：清晰的视觉层级
<h1 className="text-5xl">主标题</h1>   // 48px
<h2 className="text-2xl">章节</h2>        // 24px
<p className="text-sm">正文</p>         // 14px

// 不要：不清晰的层级
<h1 className="text-xl">主标题</h1>    // 太小
<h2 className="text-lg">章节</h2>         // 太相似

2. 色彩系统

原则：

• 真正的深色基底 - 使用接近黑色，而非灰色（避免gray-900, slate-900）
• 单一强调色 - 选择一个品牌色用于主要操作
• 语义化颜色 - 绿色=成功，琥珀色=警告，红色=错误
• 文本层级 - 主要（明亮），次要（柔和），禁用（暗淡）

色彩应用：

// 要：主导背景 + 单一强调色
<div className="bg-neutral-950">
  <Button className="bg-brand-500 hover:bg-brand-400">
    主要操作
  </Button>
</div>

// 不要：均匀分布的颜色（彩虹汤）
<div className="bg-gray-900">
  <Button className="bg-blue-500">操作1</Button>
  <Button className="bg-green-500">操作2</Button>
  <Button className="bg-purple-500">操作3</Button>
</div>

// 要：为你的品牌定义CSS变量
:root {
  --bg-base: /* 你的真正深色 */;
  --bg-surface: /* 稍亮一些 */;
  --accent: /* 你的品牌色 */;
  --accent-hover: /* 更亮的变体 */;
}

3. 动效与动画

原则：

• 使用CSS进行简单过渡
• 使用Framer Motion进行编排动画
• 聚焦于高影响力时刻（页面加载、状态变化）
• 列表交错显示

纯CSS模式：

// 要：平滑、有目的的过渡
<Button className="transition-all duration-200 ease-out hover:scale-105 hover:shadow-lg hover:shadow-brand-500/20">
  悬停我
</Button>

// 要：交错列表显示
<div className="animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100">
  项目1
</div>
<div className="animate-in fade-in slide-in-from-bottom-4 duration-500 delay-200">
  项目2
</div>

Framer Motion模式：

import { motion } from 'framer-motion'

// 要：编排的页面加载
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
}

<motion.div variants={container} initial="hidden" animate="show">
  {items.map(i => (
    <motion.div key={i} variants={item}>{i}</motion.div>
  ))}
</motion.div>

// 不要：静态、无生气的页面
<div>{items.map(i => <div key={i}>{i}</div>)}</div>

4. 背景与深度

避免： 纯色、扁平背景

模式：

// 要：具有氛围深度的分层渐变
<div className="relative bg-neutral-950">
  {/* 使用品牌色的渐变球体 */}
  <div className="absolute top-0 right-0 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl" />

  {/* 次要微小球体 */}
  <div className="absolute bottom-0 left-0 w-64 h-64 bg-brand-500/5 rounded-full blur-2xl" />

  {/* 内容 */}
  <div className="relative z-10">
    {children}
  </div>
</div>

// 要：微妙的网格图案
<div className="bg-neutral-950 bg-[linear-gradient(to_right,rgb(255_255_255/5%)_1px,transparent_1px),linear-gradient(to_bottom,rgb(255_255_255/5%)_1px,transparent_1px)] bg-[size:64px_64px]">
  {children}
</div>

// 要：带发光效果的卡片提升
<Card className="bg-neutral-900 border border-white/5 shadow-xl shadow-black/50 hover:shadow-brand-500/10 transition-shadow">
  {content}
</Card>

反模式（“垃圾”列表）

永远不要做这些：

反模式	为什么不好	应该做什么替代
到处用Inter字体	通用，立即被识别为AI	使用独特字体（Plus Jakarta Sans等）
bg-gray-900	灰色，不是真正的深色	使用bg-neutral-950或自定义真正深色
紫色/蓝色渐变	过度使用的AI美学	使用单一品牌强调色、纯色
均匀色彩分布	没有视觉层级	主导色 + 一个强调色
没有动画	无生气、静态	添加有目的的微交互
到处用rounded-full	幼稚、不专业	混合rounded-lg和锐角
深色背景上的白色卡片	对比度过高	使用带柔和边框的微妙提升
通用图标	没有品牌标识	使用具有一致描边宽度的Lucide图标

组件样式示例

仪表板卡片

// 专业仪表板样式（使用你的品牌色作为强调色）
<Card className="bg-neutral-900 border border-white/5 rounded-xl p-6 hover:border-brand-500/20 transition-colors">
  <CardHeader className="pb-2">
    <CardTitle className="text-lg font-semibold text-white flex items-center gap-2">
      <Activity className="w-5 h-5 text-brand-400" />
      系统状态
    </CardTitle>
  </CardHeader>
  <CardContent>
    <div className="text-3xl font-bold text-white">98.7%</div>
    <p className="text-sm text-zinc-400">本月正常运行时间</p>
  </CardContent>
</Card>

按钮层级

// 主要 - 品牌色，突出
<Button className="bg-brand-500 hover:bg-brand-400 text-white font-medium">
  创建项目
</Button>

// 次要 - 幽灵按钮带边框
<Button variant="outline" className="border-white/10 hover:bg-white/5 text-zinc-300">
  取消
</Button>

// 破坏性 - 红色，严肃（语义化颜色）
<Button variant="destructive" className="bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20">
  删除
</Button>

数据表格

// 专业数据显示
<Table className="bg-neutral-900 rounded-xl border border-white/5">
  <TableHeader>
    <TableRow className="border-white/5 hover:bg-white/5">
      <TableHead className="text-zinc-400 font-medium">项目</TableHead>
      <TableHead className="text-zinc-400 font-medium">状态</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow className="border-white/5 hover:bg-white/5">
      <TableCell className="text-white font-medium">我的项目</TableCell>
      <TableCell>
        <Badge className="bg-green-500/10 text-green-400 border-green-500/20">
          活跃
        </Badge>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

验证清单

在完成任何UI工作之前，验证：

• [ ] 字体排版：没有使用Inter/Roboto作为主要字体
• [ ] 色彩：使用真正的深色，不是灰色（gray-900, slate-900）
• [ ] 强调色：单一品牌色一致用于操作
• [ ] 动效：页面至少有一个有意义的动画
• [ ] 深度：背景有渐变或图案，非扁平
• [ ] 层级：清晰的视觉权重差异（文本、按钮）
• [ ] 一致性：所有组件遵循既定的设计系统

支持文件

• typography-guide.md - 完整的字体配对参考
• motion-patterns.md - Framer Motion配方和CSS动画
• anti-patterns.md - 要避免的扩展示例

设计令牌标准

此技能与DTCG 2025.10（设计令牌社区组）格式对齐：

• 文件扩展名：.tokens.json
• 属性前缀为$（$value, $type, $description）
• 三层架构：核心 → 语义 → 组件

参见W3C DTCG规范

资源

• W3C设计令牌规范 - 行业标准（2025.10）
• Style Dictionary - 令牌构建系统
• ShadCN UI组件
• Framer Motion
• Tailwind CSS
• Google Fonts - 用于独特字体排版