frontend-aesthetics

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Aesthetics Skill

前端美学设计技能指南

Based on Anthropic's formula for improving frontend design through steerability.

基于Anthropic提出的可引导性公式优化前端设计。

The Problem

现存问题

LLMs converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic - Inter fonts, purple gradients on white backgrounds, and minimal animations.

大语言模型（LLMs）会生成趋同的“符合分布”的输出结果。在前端设计领域，这会形成用户口中的“AI千篇一律”审美风格——使用Inter字体、白色背景搭配紫色渐变，以及极简动画效果。

Instructions

设计指引

Make creative, distinctive frontends that surprise and delight. Focus on these four dimensions:

打造富有创意、与众不同的前端界面，为用户带来惊喜与愉悦感。重点关注以下四个维度：

Typography

排版

Choose fonts that are beautiful, unique, and interesting.

Never use: Inter, Roboto, Open Sans, Lato, Arial, default system fonts

Good choices:

Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk
Editorial: Playfair Display, Crimson Pro, Newsreader
Technical: IBM Plex family, Source Sans 3
Distinctive: Bricolage Grotesque, Syne, Outfit, Plus Jakarta Sans
Premium: Cabinet Grotesk, Satoshi, General Sans, Clash Display

Pairing principle: High contrast = interesting. Display + monospace, serif + geometric sans, variable font across weights.

Use extremes: 100/200 weight vs 800/900, not 400 vs 600. Size jumps of 3x+, not 1.5x.

Pick one distinctive font, use it decisively. Load from Google Fonts.

选择美观、独特且富有个性的字体。

禁用字体：Inter、Roboto、Open Sans、Lato、Arial、默认系统字体

推荐选择：

代码风格：JetBrains Mono、Fira Code、Space Grotesk
编辑风格：Playfair Display、Crimson Pro、Newsreader
技术风格：IBM Plex系列、Source Sans 3
特色风格：Bricolage Grotesque、Syne、Outfit、Plus Jakarta Sans
高端风格：Cabinet Grotesk、Satoshi、General Sans、Clash Display

搭配原则：高对比度更具吸引力。可采用展示字体+等宽字体、衬线字体+几何无衬线字体的组合，或跨字重使用可变字体。

大胆运用极端值：使用100/200字重对比800/900字重，而非400对比600；字号跳跃幅度需达到3倍以上，而非1.5倍。

挑选一款独特字体并果断运用，字体可从Google Fonts加载。

Color & Theme

色彩与主题

Commit to a cohesive aesthetic. Use CSS variables for consistency.

Dominant colors with sharp accents outperform timid, evenly-distributed palettes.

Draw inspiration from:

IDE themes (Dracula, Nord, One Dark, Catppuccin, Tokyo Night)
Cultural aesthetics (Japanese minimalism, Scandinavian design, Brutalism)
Industry-specific palettes (Finance: navy/gold, Health: teal/white, Gaming: neon/dark)

Avoid: Purple gradients on white backgrounds (the ultimate AI slop indicator)

打造连贯统一的美学风格，使用CSS变量保证样式一致性。

主色搭配鲜明强调色的效果，远优于平淡、均匀分布的调色板。

灵感来源：

IDE主题（Dracula、Nord、One Dark、Catppuccin、Tokyo Night）
文化美学（日式极简、斯堪的纳维亚设计、粗野主义）
行业专属调色板（金融：藏青/金色，医疗：蓝绿/白色，游戏：霓虹/深色）

避免：白色背景搭配紫色渐变（这是AI千篇一律审美的典型标志）

Motion

动效

Use animations for effects and micro-interactions.

Prioritize CSS-only solutions for HTML
Use Motion library for React when available
Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions

将动画用于特效和微交互场景。

优先为HTML使用纯CSS实现的动画方案
若使用React框架，优先选用Motion库
聚焦高影响力场景：一次精心编排的页面加载渐显动画（配合animation-delay实现分步展示），比零散的微交互更能提升用户愉悦感

Backgrounds

背景

Create atmosphere and depth rather than defaulting to solid colors.

Layer CSS gradients (radial + linear combinations)
Use geometric patterns or grids
Add contextual effects that match the overall aesthetic
Consider noise textures, grain, or subtle animations

营造氛围与深度，而非默认使用纯色背景。

叠加CSS渐变效果（径向渐变+线性渐变组合）
使用几何图案或网格作为背景
添加与整体美学风格匹配的上下文效果
可考虑使用噪点纹理、颗粒感或微妙的动画背景

Tailwind CSS v4 Compatibility

Tailwind CSS v4 兼容性

CRITICAL: Tailwind v4 has breaking changes. Follow these rules:

重要提示：Tailwind v4存在破坏性变更，请严格遵循以下规则：

Spacing

间距设置

Never use:
```
space-x-*
```
,
```
space-y-*
```
(removed in v4)
Always use:
```
gap-*
```
with flex/grid containers instead

tsx

// WRONG (Tailwind v3 only)
<div className="flex space-x-4">

// CORRECT (Tailwind v4 compatible)
<div className="flex gap-4">

禁用：
```
space-x-*
```
、
```
space-y-*
```
（该类工具在v4中已移除）
推荐：在flex/grid容器中使用
```
gap-*
```
替代

tsx

// 错误写法（仅适用于Tailwind v3）
<div className="flex space-x-4">

// 正确写法（兼容Tailwind v4）
<div className="flex gap-4">

Config Loading

配置文件加载

Tailwind v4 doesn't auto-load
```
tailwind.config.ts
```
Add
```
@config "../tailwind.config.ts"
```
to your CSS file if using a config

css

/* app/globals.css */
@import "tailwindcss";
@config "../tailwind.config.ts";

Tailwind v4不会自动加载
```
tailwind.config.ts
```
若使用自定义配置文件，需在CSS文件中添加
```
@config "../tailwind.config.ts"
```

css

/* app/globals.css */
@import "tailwindcss";
@config "../tailwind.config.ts";

CSS Reset Conflicts

CSS重置冲突

Don't add custom
```
* { margin: 0 }
```
resets - they break
```
mx-auto
```
,
```
my-*
```
utilities
Let Tailwind's preflight handle resets

不要添加自定义的
```
* { margin: 0 }
```
重置规则——这会破坏
```
mx-auto
```
、
```
my-*
```
等工具类的功能
让Tailwind内置的preflight负责样式重置

Package.json

Package.json 设置

Add
```
"type": "module"
```
to avoid Node.js ESM warnings

添加
```
"type": "module"
```
以避免Node.js ESM相关警告

What to Avoid

避坑清单

Overused font families (Inter, Roboto, Arial, system fonts)
Clichéd color schemes (purple gradients on white)
Predictable layouts and component patterns
Cookie-cutter design that lacks context-specific character
Space Grotesk (even this is becoming overused)
```
space-x-*
```
and
```
space-y-*
```
utilities (use
```
gap-*
```
instead)

过度使用的字体家族（Inter、Roboto、Arial、系统默认字体）
陈词滥调的配色方案（白色背景搭配紫色渐变）
可预测的布局和组件模式
缺乏场景特色的模板化设计
Space Grotesk（该字体目前也逐渐被过度使用）
```
space-x-*
```
和
```
space-y-*
```
工具类（改用
```
gap-*
```
替代）

Key Principle

核心原则

Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics.

You still tend to converge on common choices across generations. Avoid this: it is critical that you think outside the box!

创造性地解读需求，做出符合场景的独特设计选择。灵活切换亮色与暗色主题、不同字体、不同美学风格。

你仍可能在多次生成中陷入趋同选择的误区，请务必避免：跳出常规思维至关重要！

Example: Theme Ideas

示例：主题灵感

Instead of the default "tech purple":

Obsidian Terminal: Deep black (#0a0a0a), electric green (#00ff9f), JetBrains Mono
Editorial Luxury: Cream (#faf9f6), deep navy (#1a1a2e), Playfair Display + Source Sans
Neon Brutalist: Pure white, bold black, hot pink accent (#ff006e), IBM Plex Mono
Nordic Minimal: Cool gray (#e5e5e5), slate blue (#475569), Outfit
Retro Computing: Amber on dark (#ffb000 on #1a1a1a), VT323 or IBM Plex Mono

替代默认的“科技紫”主题：

黑曜石终端：纯黑背景（#0a0a0a）、电光绿强调色（#00ff9f）、JetBrains Mono字体
高端编辑风：米白背景（#faf9f6）、深藏青主色（#1a1a2e）、Playfair Display + Source Sans字体组合
霓虹粗野主义：纯白背景、纯黑主色、亮粉强调色（#ff006e）、IBM Plex Mono字体
北欧极简风：冷灰背景（#e5e5e5）、石板蓝主色（#475569）、Outfit字体
复古计算风：深色背景（#1a1a1a）搭配琥珀色文字（#ffb000）、VT323或IBM Plex Mono字体