frontend-prime

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Ultimate Frontend Skill

终极前端开发技能

Every output must feel intentionally crafted — never generic, never "AI slop."

所有产出都必须经过精心设计——绝不千篇一律，绝不沦为“AI流水线产物”。

1. Design Before Code

1. 先设计，再编码

Before writing ANY code, decide:

Aesthetic direction (pick ONE, match it to the product's audience): Brutally minimal · Maximalist editorial · Retro-futuristic · Organic/natural · Luxury/refined · Playful · Brutalist · Art deco · Dark/moody · Lo-fi/zine · Handcrafted · Swiss/international · Neo-glassmorphic · Industrial · Soft/pastel
One unforgettable element: a scroll animation, a bold typographic moment, a micro-interaction — something memorable.
Then commit fully. Half-hearted design = generic output.

在编写任何代码之前，先确定以下内容：

审美方向（选择其一，匹配产品目标受众）：极致极简 · 极繁主义编辑风 · 复古未来主义 · 有机自然风 · 奢华精致风 · 趣味活泼风 · 粗野主义 · 装饰艺术风 · 暗黑氛围感 · 低保真/独立杂志风 · 手工质感风 · 瑞士/国际主义 · 新毛玻璃拟态 · 工业风 · 柔和马卡龙风
一个令人难忘的元素：滚动动画、醒目的排版设计、微交互——打造记忆点。
全心投入执行。敷衍的设计只会产出千篇一律的成果。

2. The AI Slop Blacklist

2. AI流水线产物雷区

These instantly mark output as AI-generated. Never:

Purple/blue gradient on white cards
Every element with identical
```
rounded-xl
```
Perfectly centered, symmetrical layouts with no visual tension
```
text-gray-600
```
on everything
Cards in a perfect 3-column grid with identical heights
Rainbow or evenly-distributed color schemes
Generic hero with stock illustration placeholder

Instead, always:

Load distinctive Google Fonts (Instrument Serif, DM Sans, Clash Display, Bricolage Grotesque, Syne, Fraunces, Cabinet Grotesk, Satoshi, Young Serif, Outfit)
One dominant color doing 80% of the work + one sharp accent
Asymmetric layouts, grid-breaking elements, dramatic scale jumps
Atmosphere via gradient meshes, noise textures, glassmorphism, or depth layers
Generous negative space as a design element
Negative
```
letter-spacing
```
on large headings,
```
text-wrap: balance
```
on headlines
Body text
```
max-width: 65ch
```
,
```
line-height: 1.5–1.7
```

以下元素会立刻暴露AI生成痕迹，绝对不要使用：

白色卡片搭配紫蓝渐变
所有元素都使用相同的
```
rounded-xl
```
圆角
完全居中、对称且毫无视觉张力的布局
所有文本都使用
```
text-gray-600
```
颜色
高度完全一致的三列卡片网格
彩虹色或均匀分布的配色方案
带有通用占位插画的Hero区域

反之，请始终遵循：

使用特色Google Fonts字体（Instrument Serif、DM Sans、Clash Display、Bricolage Grotesque、Syne、Fraunces、Cabinet Grotesk、Satoshi、Young Serif、Outfit）
主色调占80%视觉比重，搭配一个鲜明的强调色
非对称布局、打破网格的元素、极具张力的尺寸对比
通过渐变网格、噪点纹理、毛玻璃拟态或分层营造氛围感
将充足的留白作为设计元素
大标题使用负字间距，标题文本应用
```
text-wrap: balance
```
正文文本设置
```
max-width: 65ch
```
，
```
line-height: 1.5–1.7
```

3. Color & Theming — Do It Right

3. 色彩与主题——正确做法

Define colors as CSS custom properties with semantic names. Never hardcode hex in components.

css

[data-theme="light"] {
  --bg-primary: #fafafa; --bg-secondary: #ffffff;
  --text-primary: #18181b; --text-secondary: #52525b;
  --accent: #2563eb; --border: #e4e4e7;
}
[data-theme="dark"] {
  --bg-primary: #09090b; --bg-secondary: #18181b;
  --text-primary: #fafafa; --text-secondary: #a1a1aa;
  --accent: #3b82f6; --border: #27272a;
}

Dark mode rules: higher elevation = lighter surface, desaturate accents ~15%, use borders not shadows for hierarchy, offer Light/Dark/System toggle, persist in localStorage and apply before paint.

使用语义化名称定义CSS自定义属性来管理颜色，绝对不要在组件中硬写十六进制颜色值。

css

[data-theme="light"] {
  --bg-primary: #fafafa; --bg-secondary: #ffffff;
  --text-primary: #18181b; --text-secondary: #52525b;
  --accent: #2563eb; --border: #e4e4e7;
}
[data-theme="dark"] {
  --bg-primary: #09090b; --bg-secondary: #18181b;
  --text-primary: #fafafa; --text-secondary: #a1a1aa;
  --accent: #3b82f6; --border: #27272a;
}

深色模式规则：层级越高，表面颜色越浅；强调色降低约15%饱和度；使用边框而非阴影区分层级；提供亮/暗/系统跟随三种切换选项；通过localStorage保存设置并在页面绘制前应用。

4. SEO — Claude Forgets This

4. SEO优化——Claude常忽略的点

Every page needs:

html

<title>Page Title — Brand</title>
<meta name="description" content="150-160 chars">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title/description/image/url" ...>
<meta name="twitter:card" content="summary_large_image">

Also: JSON-LD structured data,

sitemap.ts

robots.ts

, one

h1

per page, no skipped heading levels, descriptive

alt

text, clean lowercase hyphenated URLs,

hreflang

for i18n.

In Next.js: use

metadata

export with

metadataBase

openGraph

twitter

alternates.canonical

每个页面都需要添加以下内容：

html

<title>Page Title — Brand</title>
<meta name="description" content="150-160 chars">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title/description/image/url" ...>
<meta name="twitter:card" content="summary_large_image">

此外：添加JSON-LD结构化数据、

sitemap.ts

robots.ts

文件；每个页面仅设置一个

h1

标签；不要跳过标题层级；为图片添加描述性

alt

文本；使用小写连字符格式的清晰URL；针对多语言网站添加

hreflang

标签。

在Next.js中：使用

metadata

导出，配置

metadataBase

、

openGraph

、

twitter

和

alternates.canonical

。

5. Quick Reminders

5. 快速提醒

Motion: Stagger entrances, hover states on all interactives,
```
0.2s ease
```
micro-interactions, always respect
```
prefers-reduced-motion
```
Mobile: Mobile-first,
```
clamp()
```
for fluid type/spacing,
```
dvh
```
not
```
vh
```
, 44×44px touch targets
A11y: Semantic HTML,
```
<button>
```
for actions /
```
<a>
```
for links,
```
aria-label
```
on icon buttons, 4.5:1 contrast, full keyboard nav
Perf:
```
font-display: swap
```
, lazy load images with dimensions,
```
content-visibility: auto
```
, LCP<2.5s
Forms: Visible labels always, validate on blur, helpful error messages, correct
```
input type
```
+
```
autocomplete
```
Errors: Error boundaries per section, custom 404/500, toast for feedback (auto-dismiss success, persist errors)
Security: CSP headers, never unsanitized
```
dangerouslySetInnerHTML
```
, validate URLs in
```
href
```
, httpOnly cookies for auth, server-side validation

动效：元素错峰入场、所有可交互元素添加悬停状态、
```
0.2s ease
```
的微交互、始终尊重
```
prefers-reduced-motion
```
设置
移动端：采用移动端优先设计、使用
```
clamp()
```
实现流体排版/间距、使用
```
dvh
```
而非
```
vh
```
、设置44×44px的触摸目标区域
无障碍访问（A11y）：使用语义化HTML、动作使用
```
<button>
```
/链接使用
```
<a>
```
、图标按钮添加
```
aria-label
```
、4.5:1的对比度、支持全键盘导航
性能：设置
```
font-display: swap
```
、为图片指定尺寸并懒加载、使用
```
content-visibility: auto
```
、LCP<2.5秒
表单：始终显示可见标签、在失焦时验证、提供友好的错误提示、使用正确的
```
input type
```
和
```
autocomplete
```
属性
错误处理：为每个区块设置错误边界、自定义404/500页面、使用toast提供反馈（成功提示自动消失，错误提示持续显示）
安全：配置CSP头部、绝不使用未过滤的
```
dangerouslySetInnerHTML
```
、验证
```
href
```
中的URL、使用httpOnly Cookie存储认证信息、服务端验证