frontend-aesthetics

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Overview

概述

This skill provides specific design principles and patterns for creating distinctive, polished frontend interfaces that avoid "AI slop" - the generic, obviously-generated aesthetic that results from default AI model choices. Based on official research from "Improving frontend design through Skills" by Anthropic.

Skills Methodology: This follows Anthropic's skills approach - reusable markdown documents that provide altitude-appropriate design guidance without permanent context overhead. Skills make effective design prompts contextual and reusable across projects.

Core Problem: Distributional Convergence: Language models naturally sample from the high-probability center of their training data distribution. This causes them to default to statistically common "safe choices" (Inter fonts, purple gradients, minimal animations, standard grid layouts) because these patterns dominate web design datasets. The result is bland, forgettable interfaces that lack intentional design decisions.

Altitude-Appropriate Guidance: This skill avoids both extremes:

Too Specific: Prescribing exact hex codes or pixel values limits creativity
Too Vague: Assuming models know design principles leads to generic defaults

Instead, it provides contextual principles with concrete examples that guide toward distinctive choices while preserving flexibility.

本Skill提供了具体的设计原则和模式，用于打造独特、精致的前端界面，避免出现“AI敷衍设计（AI slop）”——即AI模型默认选择所产生的通用、明显是生成式的审美风格。本内容基于Anthropic发布的官方研究《通过Skills改进前端设计》（"Improving frontend design through Skills"）。

Skills方法论：遵循Anthropic的Skills方法——可复用的Markdown文档，提供适配不同场景的设计指导，且不会产生永久的上下文冗余。Skills能让有效的设计提示具备上下文关联性，并可在多个项目中复用。

核心问题：分布收敛：语言模型自然会从训练数据分布的高概率中心采样。这导致它们默认选择统计上常见的“安全选项”（Inter字体、紫色渐变、极简动画、标准网格布局），因为这些模式在网页设计数据集中占主导地位。结果就是平淡、易被遗忘的界面，缺乏刻意的设计决策。

适配场景的指导：本Skill避免了两种极端情况：

过于具体：规定精确的十六进制颜色码或像素值会限制创意
过于模糊：假设模型知晓设计原则会导致通用默认风格

相反，它提供了上下文相关的原则及具体示例，在保留灵活性的同时引导做出独特的设计选择。

The "AI Slop" Problem

“AI敷衍设计”问题

What Models Default To (Avoid These)

模型默认会生成的内容（需避免）

Generic Fonts:

Inter, Roboto, Open Sans, Lato
Default system fonts without customization
Single font family for everything

Generic Colors:

Purple-to-white gradients (#a855f7 → #ffffff)
Plain white backgrounds
Pastel color schemes without contrast
Rainbow gradients

Minimal Visual Interest:

No animations or micro-interactions
Flat, single-layer backgrounds
Standard grid layouts only
No depth or texture

Result: Interface that looks "obviously AI-generated" - bland, safe, forgettable

通用字体：

Inter、Roboto、Open Sans、Lato
未经定制的默认系统字体
所有内容使用单一字体族

通用色彩：

紫色到白色的渐变（#a855f7 → #ffffff）
纯白色背景
无对比度的淡彩色配色方案
彩虹渐变

视觉趣味性不足：

无动画或微交互
扁平化、单层背景
仅使用标准网格布局
无层次感或纹理

结果：界面看起来“明显是AI生成的”——平淡、保守、易被遗忘

How to Recognize "AI Slop"

如何识别“AI敷衍设计”

Calculate AI Slop Score (0-100, lower is better):

+30 points: Using Inter/Roboto/Open Sans fonts
+25 points: Purple gradient color scheme
+20 points: Plain white background with no depth
+15 points: No animations whatsoever
+10 points: Standard grid layout only

Score 60+: High AI slop - needs significant design enhancement Score 30-59: Moderate - some generic patterns present Score 0-29: Distinctive - thoughtful design choices evident

计算AI敷衍设计得分（0-100分，分数越低越好）：

+30分：使用Inter/Roboto/Open Sans字体
+25分：采用紫色渐变配色方案
+20分：纯白色背景且无层次感
+15分：完全没有动画
+10分：仅使用标准网格布局

60分及以上：AI敷衍设计程度高——需要显著的设计优化 30-59分：中等程度——存在一些通用模式 0-29分：独特设计——体现出经过深思熟虑的设计选择

Typography Principles

排版原则

Avoid Generic Font Families

避免通用字体族

Never Use (Without Strong Justification):

Inter
Roboto
Open Sans
Lato
Helvetica Neue (as primary)
Default system fonts

除非有充分理由，否则绝不使用：

Inter
Roboto
Open Sans
Lato
Helvetica Neue（作为主字体）
默认系统字体

Distinctive Font Recommendations

独特字体推荐

Code/Technical Aesthetic:

Primary: JetBrains Mono (headings, code blocks)
Secondary: Space Grotesk (body, UI)
Character: Modern, technical, developer-focused

Editorial/Content:

Primary: Playfair Display (headings, hero)
Secondary: Source Sans 3 (body)
Character: Classic, sophisticated, content-heavy

Technical/Data:

Primary: IBM Plex Sans (all text)
Secondary: IBM Plex Mono (code, data)
Character: Professional, systematic, dashboard-friendly

Friendly/Playful:

Primary: Fredoka (headings)
Secondary: Manrope (body)
Character: Approachable, consumer-facing, warm

Elegant/Premium:

Primary: Crimson Pro (headings)
Secondary: Karla (body)
Character: Sophisticated, refined, premium feel

代码/技术风格：

主字体：JetBrains Mono（标题、代码块）
次要字体：Space Grotesk（正文、UI元素）
风格：现代、技术感、面向开发者

编辑/内容风格：

主字体：Playfair Display（标题、Hero区域）
次要字体：Source Sans 3（正文）
风格：经典、精致、内容导向

技术/数据风格：

主字体：IBM Plex Sans（所有文本）
次要字体：IBM Plex Mono（代码、数据）
风格：专业、系统化、适配仪表盘

友好/活泼风格：

主字体：Fredoka（标题）
次要字体：Manrope（正文）
风格：亲切、面向消费者、温暖

优雅/高端风格：

主字体：Crimson Pro（标题）
次要字体：Karla（正文）
风格：精致、优雅、高端质感

Font Pairing Principles

字体搭配原则

High-Contrast Pairings (Recommended): Pair fonts from different categories for maximum distinctiveness:

Display + Monospace: Playfair Display + JetBrains Mono
Serif + Geometric Sans: Crimson Pro + Space Grotesk
Heavy Display + Light Sans: Fredoka (700) + Manrope (300)

Serif + Sans Pairing:

Use serif for headings (authority, elegance)
Use sans-serif for body (readability)
Ensure sufficient contrast in style (not both humanist)
Example: Playfair Display + Source Sans 3

Geometric + Humanist:

Geometric sans for headings (modern, structured)
Humanist sans for body (friendly, readable)
Example: Space Grotesk + Source Sans 3 (avoid Inter)

Monospace + Sans:

Monospace for code, technical data, or distinctive headings
Geometric/humanist sans for regular text
Unified family approach when available (IBM Plex, JetBrains)
Example: JetBrains Mono + Space Grotesk

Extreme Weight Variations: Create hierarchy through dramatic weight differences:

Headings: Use 100-200 (ultra-thin) OR 800-900 (extra-bold)
Body: Use 300-400 (light to regular)
Avoid: Medium weights (500-600) for headings - not distinctive enough
Example: Manrope 200 for hero headings, Manrope 400 for body

Size Jumps (3x+ Ratio): Create clear hierarchy with large size differences:

Hero: 4rem (64px)
H1: 2.5rem (40px) - not quite 3x but close
Body: 1rem (16px) - 4x from hero
Avoid: Incremental 1.5x jumps (too subtle)

Variable Fonts (Modern Approach):

Single font file with multiple weights/styles
Reduces HTTP requests
Enables smooth weight transitions in animations
Example: Manrope Variable, Inter Variable (if used thoughtfully)

高对比度搭配（推荐）：将不同类别的字体搭配使用，以实现最大程度的独特性：

展示字体 + 等宽字体：Playfair Display + JetBrains Mono
衬线字体 + 几何无衬线字体：Crimson Pro + Space Grotesk
粗体展示字体 + 轻量无衬线字体：Fredoka（700字重） + Manrope（300字重）

衬线 + 无衬线搭配：

衬线字体用于标题（体现权威、优雅）
无衬线字体用于正文（提升可读性）
确保风格有足够对比度（不要都是人文主义风格）
示例：Playfair Display + Source Sans 3

几何 + 人文主义搭配：

几何无衬线字体用于标题（现代、结构化）
人文主义无衬线字体用于正文（友好、可读）
示例：Space Grotesk + Source Sans 3（避免使用Inter）

等宽 + 无衬线搭配：

等宽字体用于代码、技术数据或独特标题
几何/人文主义无衬线字体用于常规文本
尽可能使用统一字体族（IBM Plex、JetBrains）
示例：JetBrains Mono + Space Grotesk

极端字重变化：通过显著的字重差异创建层级：

标题：使用100-200（极细）或800-900（极粗）字重
正文：使用300-400（轻量到常规）字重
避免：标题使用中等字重（500-600）——不够独特
示例：Hero标题使用Manrope 200，正文使用Manrope 400

字号跳跃（3倍及以上比例）：通过大幅字号差异创建清晰的层级：

Hero区域：4rem（64px）
H1：2.5rem（40px）——接近3倍比例
正文：1rem（16px）——是Hero字号的4倍
避免：1.5倍的增量跳跃（过于微妙）

可变字体（现代方案）：

单个字体文件包含多种字重/样式
减少HTTP请求
支持动画中的平滑字重过渡
示例：Manrope Variable、Inter Variable（需谨慎使用）

Typography Implementation

排版实现

css

/* Fluid Typography with clamp() */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.075rem + 0.25vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --text-3xl: clamp(2rem, 1.75rem + 1.25vw, 3rem);
  --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}

/* Type Scale with Clear Hierarchy */
.heading-1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.heading-2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1.2;
}

.body {
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
}

css

/* 使用clamp()实现流体排版 */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.075rem + 0.25vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --text-3xl: clamp(2rem, 1.75rem + 1.25vw, 3rem);
  --text-4xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}

/* 具备清晰层级的字体比例 */
.heading-1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.heading-2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1.2;
}

.body {
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
}

Color Theory & Schemes

色彩理论与配色方案

Avoid Generic Color Schemes

避免通用配色方案

Never Use (Without Intentional Justification):

Purple-on-white gradients (AI default)
Plain #FFFFFF backgrounds
Pastel rainbow without cohesion
Generic Material Design colors verbatim

除非有明确理由，否则绝不使用：

紫白渐变（AI默认风格）
纯#FFFFFF背景
无连贯性的淡彩彩虹配色
直接使用通用Material Design颜色

Intentional Color Palette Design

刻意设计的调色板

Principle: Choose colors that create a mood and brand identity

Ocean/Tech Professional:

Primary: #0ea5e9 (sky blue)
Accent: #f59e0b (amber)
Background: #0f172a → #1e293b (dark slate gradient)
Text: #f8fafc / #cbd5e1 / #64748b
Mood: Professional, trustworthy, technical

Sunset/Energetic:

Primary: #f97316 (orange)
Accent: #ec4899 (pink)
Background: #fff7ed (light warm) with subtle gradients
Text: #1c1917 / #57534e / #78716c
Mood: Energetic, warm, inviting

Forest/Calm:

Primary: #059669 (emerald)
Accent: #facc15 (yellow)
Background: #f0fdf4 (light green) with layered depth
Text: #14532d / #166534 / #4ade80
Mood: Calm, natural, wellness

Cyberpunk/Bold:

Primary: #06b6d4 (cyan)
Accent: #f0abfc (fuchsia)
Background: #18181b (very dark) with neon glows
Text: #fafafa / #a1a1aa / #52525b
Mood: Modern, bold, tech-forward

原则：选择能营造氛围和品牌调性的颜色

海洋/专业科技风格：

主色：#0ea5e9（天蓝色）
强调色：#f59e0b（琥珀色）
背景：#0f172a → #1e293b（深灰渐变）
文本：#f8fafc / #cbd5e1 / #64748b
氛围：专业、可信、技术感

日落/活力风格：

主色：#f97316（橙色）
强调色：#ec4899（粉色）
背景：#fff7ed（暖浅色）搭配微妙渐变
文本：#1c1917 / #57534e / #78716c
氛围：充满活力、温暖、有吸引力

森林/平静风格：

主色：#059669（祖母绿）
强调色：#facc15（黄色）
背景：#f0fdf4（浅绿色）搭配分层质感
文本：#14532d / #166534 / #4ade80
氛围：平静、自然、健康

赛博朋克/大胆风格：

主色：#06b6d4（青色）
强调色：#f0abfc（紫红色）
背景：#18181b（极深色）搭配霓虹光晕
文本：#fafafa / #a1a1aa / #52525b
氛围：现代、大胆、科技前沿

Color Application Principles

色彩应用原则

Dominance Hierarchy:

Background: 60% of visual space
Primary: 30% of elements
Accent: 10% for highlights

Contrast Requirements:

Text on background: Minimum 4.5:1 (WCAG AA)
Large text: Minimum 3:1 (WCAG AA)
Interactive elements: Clear hover/focus states
Use tools: WebAIM Contrast Checker

Semantic Color Usage:

Success: Greens (#10b981, #22c55e)
Warning: Yellows/Oranges (#f59e0b, #eab308)
Error: Reds (#ef4444, #dc2626)
Info: Blues (#3b82f6, #0891b2)

Implementation:

css

:root {
  --color-primary: 14 165 233;  /* RGB values for hsl() */
  --color-accent: 245 158 11;
  --color-bg-base: 15 23 42;
  --color-bg-surface: 30 41 59;
  --color-text-primary: 248 250 252;
}

/* Use with opacity */
.element {
  background-color: hsl(var(--color-primary) / 0.1);  /* 10% opacity */
  color: hsl(var(--color-text-primary));
}

主导层级：

背景：占60%的视觉空间
主色：占30%的元素
强调色：占10%的高亮元素

对比度要求：

文本与背景：最小对比度4.5:1（WCAG AA标准）
大文本：最小对比度3:1（WCAG AA标准）
交互元素：具备清晰的悬停/聚焦状态
工具推荐：WebAIM对比度检查器

语义化色彩使用：

成功：绿色系（#10b981、#22c55e）
警告：黄色/橙色系（#f59e0b、#eab308）
错误：红色系（#ef4444、#dc2626）
信息：蓝色系（#3b82f6、#0891b2）

实现代码：

css

:root {
  --color-primary: 14 165 233;  /* 用于hsl()的RGB值 */
  --color-accent: 245 158 11;
  --color-bg-base: 15 23 42;
  --color-bg-surface: 30 41 59;
  --color-text-primary: 248 250 252;
}

/* 结合透明度使用 */
.element {
  background-color: hsl(var(--color-primary) / 0.1);  /* 10%透明度 */
  color: hsl(var(--color-text-primary));
}

Background Depth & Texture

背景层次感与纹理

Avoid Plain Backgrounds

避免纯色背景

Never Use:

Solid white (#FFFFFF) with no variation
Single-color backgrounds without depth
Generic gradients alone

绝不使用：

无变化的纯白色（#FFFFFF）
无层次感的单色背景
仅使用通用渐变

Layered Background Techniques

分层背景技巧

1. Subtle Noise Texture:

css

.background-noise {
  background-image:
    linear-gradient(135deg, hsl(var(--bg-base)) 0%, hsl(var(--bg-surface)) 100%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

2. Geometric Grid Pattern:

css

.background-grid {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}

3. Radial Ambient Glow:

css

.background-glow {
  background:
    radial-gradient(circle at 20% 50%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
    hsl(var(--bg-base));
}

4. Layered SVG Waves:

css

.background-waves {
  background:
    linear-gradient(180deg, hsl(var(--primary) / 0.1) 0%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(255,255,255,0.05)' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,144C960,149,1056,139,1152,128C1248,117,1344,107,1392,101.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
}

5. Mesh Gradient (Modern):

css

.background-mesh {
  background:
    radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.3) 0px, transparent 50%),
    radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.3) 0px, transparent 50%),
    radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 0.3) 0px, transparent 50%),
    radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 0.3) 0px, transparent 50%),
    radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 0.3) 0px, transparent 50%),
    radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.3) 0px, transparent 50%),
    radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.3) 0px, transparent 50%);
}

1. 微妙噪点纹理：

css

.background-noise {
  background-image:
    linear-gradient(135deg, hsl(var(--bg-base)) 0%, hsl(var(--bg-surface)) 100%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

2. 几何网格图案：

css

.background-grid {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}

3. 径向环境光晕：

css

.background-glow {
  background:
    radial-gradient(circle at 20% 50%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
    hsl(var(--bg-base));
}

4. 分层SVG波浪：

css

.background-waves {
  background:
    linear-gradient(180deg, hsl(var(--primary) / 0.1) 0%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(255,255,255,0.05)' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,144C960,149,1056,139,1152,128C1248,117,1344,107,1392,101.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
}

5. 网格渐变（现代风格）：

css

.background-mesh {
  background:
    radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.3) 0px, transparent 50%),
    radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.3) 0px, transparent 50%),
    radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 0.3) 0px, transparent 50%),
    radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 0.3) 0px, transparent 50%),
    radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 0.3) 0px, transparent 50%),
    radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.3) 0px, transparent 50%),
    radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.3) 0px, transparent 50%);
}

Animation & Motion Design

动画与动效设计

Principle: High-Impact Moments Over Random Motion

原则：聚焦高影响力时刻，而非随机动效

Core Insight: One well-orchestrated page load with staggered reveals is worth more than a dozen random micro-animations scattered across the interface.

Avoid:

Random animations everywhere without purpose
Slow, drawn-out transitions that delay user interaction
No animations at all (static interfaces feel lifeless)
Animations that don't respect reduced-motion preferences

Focus On High-Impact Moments:

Page Load: Create memorable first impression with orchestrated entrance
Major Transitions: Route changes, modal appearances, significant state shifts
Content Reveal: Progressive disclosure as user scrolls or interacts
Success Moments: Celebrate user achievements with intentional motion
Purposeful Micro-Interactions: Hover/click feedback that reinforces UI affordances

Motion Priority:

Page Load Animation (highest impact) - Users see this every time
Major State Changes (high impact) - Crucial for UX comprehension
Micro-Interactions (supporting) - Polish, not primary focus
Decorative Motion (lowest priority) - Use sparingly or omit

核心见解：一次精心编排的页面加载渐入效果，比十几个分散在界面中的随机微动画更有价值。

需避免：

无目的地在各处添加随机动画
缓慢、冗长的过渡效果，延迟用户交互
完全没有动画（静态界面显得呆板）
不尊重减少动效偏好的动画

聚焦高影响力时刻：

页面加载：通过编排入场动画打造难忘的第一印象
主要过渡：路由切换、模态框显示、重要状态变更
内容展示：随着用户滚动或交互逐步披露内容
成功时刻：用刻意的动效庆祝用户的操作成果
有意义的微交互：悬停/点击反馈，强化UI可用性

动效优先级：

页面加载动画（最高影响力）——用户每次访问都会看到
主要状态变更（高影响力）——对UX理解至关重要
微交互（辅助作用）——用于优化体验，而非核心焦点
装饰性动效（最低优先级）——谨慎使用或省略

Motion Library Selection

动效库选择

Decision Framework:

HTML-Only Projects: Always use CSS animations (no dependencies, better performance)
React Projects: Use Framer Motion for complex choreography
Simple Transitions: CSS is sufficient even in React
Complex Orchestration: Motion library provides easier sequencing and stagger control

决策框架：

纯HTML项目：始终使用CSS动画（无依赖，性能更好）
React项目：复杂编排使用Framer Motion
简单过渡：即使在React中，CSS也足够
复杂编排：动效库能更轻松地实现序列和 stagger 控制

Page Load Animation

页面加载动画

CSS-Only Approach (HTML Projects, Simple React):

css

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Staggered children */
.stagger > :nth-child(1) { animation-delay: 0.1s; }
.stagger > :nth-child(2) { animation-delay: 0.2s; }
.stagger > :nth-child(3) { animation-delay: 0.3s; }
.stagger > :nth-child(4) { animation-delay: 0.4s; }

React + Framer Motion (For Complex Animations):

typescript

import { motion } from 'framer-motion'

export default function Page({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
    >
      {children}
    </motion.div>
  )
}

// Staggered list
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.ul variants={container} initial="hidden" animate="show">
  {items.map((item) => (
    <motion.li key={item.id} variants={item}>
      {item.name}
    </motion.li>
  ))}
</motion.ul>

纯CSS方案（HTML项目、简单React项目）：

css

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 子元素渐入延迟 */
.stagger > :nth-child(1) { animation-delay: 0.1s; }
.stagger > :nth-child(2) { animation-delay: 0.2s; }
.stagger > :nth-child(3) { animation-delay: 0.3s; }
.stagger > :nth-child(4) { animation-delay: 0.4s; }

React + Framer Motion（复杂动画）：

typescript

import { motion } from 'framer-motion'

export default function Page({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
    >
      {children}
    </motion.div>
  )
}

// 渐入列表
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.ul variants={container} initial="hidden" animate="show">
  {items.map((item) => (
    <motion.li key={item.id} variants={item}>
      {item.name}
    </motion.li>
  ))}
</motion.ul>

Micro-Interactions

微交互

Button Hover:

css

.button {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

Card Hover:

css

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

Link Underline Animation:

css

.link {
  position: relative;
  text-decoration: none;
}

.link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

按钮悬停效果：

css

.button {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

卡片悬停效果：

css

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

链接下划线动画：

css

.link {
  position: relative;
  text-decoration: none;
}

.link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

Accessibility: Respect Reduced Motion

无障碍设计：尊重减少动效偏好

Always Include:

css

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

务必添加：

css

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Layout Innovation

布局创新

Break from Standard Grids

打破标准网格

Asymmetric Grid:

css

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: auto auto;
  gap: 2rem;
}

.hero-text {
  grid-column: 1 / 3;
  grid-row: 1;
}

.hero-image {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  transform: translateY(-2rem);  /* Break alignment */
}

Broken Grid Layout:

css

.content-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.card-1 {
  grid-column: 1 / 6;
  grid-row: 1 / 3;
}

.card-2 {
  grid-column: 6 / 10;
  grid-row: 1 / 2;
  transform: translateY(2rem);  /* Offset for visual interest */
}

.card-3 {
  grid-column: 10 / 13;
  grid-row: 1 / 3;
}

Overlapping Elements:

css

.overlap-container {
  position: relative;
}

.background-card {
  position: relative;
  z-index: 1;
}

.foreground-element {
  position: absolute;
  top: -2rem;
  left: -2rem;
  z-index: 2;
}

非对称网格：

css

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: auto auto;
  gap: 2rem;
}

.hero-text {
  grid-column: 1 / 3;
  grid-row: 1;
}

.hero-image {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  transform: translateY(-2rem);  /* 打破对齐 */
}

不规则网格布局：

css

.content-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.card-1 {
  grid-column: 1 / 6;
  grid-row: 1 / 3;
}

.card-2 {
  grid-column: 6 / 10;
  grid-row: 1 / 2;
  transform: translateY(2rem);  /* 偏移以增加视觉趣味 */
}

.card-3 {
  grid-column: 10 / 13;
  grid-row: 1 / 3;
}

元素重叠：

css

.overlap-container {
  position: relative;
}

.background-card {
  position: relative;
  z-index: 1;
}

.foreground-element {
  position: absolute;
  top: -2rem;
  left: -2rem;
  z-index: 2;
}

Design Enhancement Checklist

设计优化检查清单

Before considering design complete:

Typography:

No generic fonts (Inter, Roboto, Open Sans, Lato)
Clear font pairing strategy (serif + sans, mono + sans, etc.)
Fluid typography with clamp() or responsive scale
Clear hierarchy with size, weight, and spacing

Color:

Intentional color palette (not purple-on-white default)
Mood/brand identity expressed through colors
WCAG AA contrast compliance (4.5:1 minimum)
Semantic colors for success/warning/error/info

Background:

Layered depth (not plain solid color)
Subtle texture or pattern
Visual interest without overwhelming content

Animation:

Page load/transition animations present
Micro-interactions on hover/click
Purposeful animations (not random)
```
prefers-reduced-motion
```
respected

Layout:

Not just standard grid (visual interest added)
Clear visual rhythm and spacing
Asymmetry or broken-grid elements where appropriate
Responsive across all breakpoints

Overall:

AI Slop Score < 30 (distinctive, intentional design)
Design feels crafted, not generated
Accessibility standards met
Performance optimized (animations use transform/opacity)

在认为设计完成前，请检查以下内容：

排版：

未使用通用字体（Inter、Roboto、Open Sans、Lato）
有清晰的字体搭配策略（衬线+无衬线、等宽+无衬线等）
使用clamp()或响应式比例实现流体排版
通过字号、字重和间距建立清晰的层级

色彩：

采用刻意设计的调色板（而非默认的紫白配色）
通过色彩传达氛围/品牌调性
符合WCAG AA对比度标准（最小4.5:1）
语义化色彩用于成功/警告/错误/信息提示

背景：

具备分层质感（而非纯单色）
添加微妙纹理或图案
视觉趣味充足但不干扰内容

动画：

存在页面加载/过渡动画
悬停/点击时有微交互
动画有明确目的（非随机）
尊重
```
prefers-reduced-motion
```
设置

布局：

不只是标准网格（添加了视觉趣味）
有清晰的视觉节奏和间距
适当使用非对称或不规则网格元素
在所有断点下具备响应式适配

整体：

AI敷衍设计得分 < 30（独特、刻意的设计）
设计看起来是精心打造的，而非生成的
符合无障碍标准
性能优化（动画使用transform/opacity）

When to Apply

适用场景

Use this skill when:

Creating new frontend interfaces
Enhancing existing designs that look generic
Avoiding "AI-generated" aesthetic
Implementing distinctive brand identity
Designing landing pages, dashboards, or web applications
Reviewing designs for visual appeal and distinction
Training models to generate better design outputs

This approach ensures frontend designs are distinctive, polished, and intentional - not generic AI defaults.

在以下场景使用本Skill：

创建新的前端界面
优化现有看起来通用的设计
避免“AI生成式”审美风格
实现独特的品牌调性
设计着陆页、仪表盘或Web应用
评审设计的视觉吸引力和独特性
训练模型生成更好的设计输出

这种方法确保前端设计独特、精致且经过深思熟虑——而非通用的AI默认风格。