top-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Top-Design: Award-Winning Digital Experiences

Top-Design：获奖级数字体验

Create websites and applications at the level of world-class digital agencies. This skill embodies the craft of studios that consistently win FWA, Awwwards, CSS Design Awards, and Webby Awards.

打造可媲美世界级数字机构水准的网站与应用。本技能凝聚了那些持续斩获FWA、Awwwards、CSS Design Awards及Webby Awards奖项的工作室的设计精髓。

Core Principle

核心原则

Every pixel is intentional -- nothing default, nothing accidental. The agencies you are emulating -- Locomotive, Studio Freight, AREA 17, Active Theory, Hello Monday -- share a common DNA: typography IS the design (not decoration, but architecture), motion creates emotion (animation serves narrative, not novelty), white space is a weapon (tension through restraint), and performance is non-negotiable (60fps or nothing).

The foundation: What separates 10/10 from 8/10 is not incremental improvement but a qualitative leap. An 8/10 design has good typography, nice colors, and smooth animations. A 10/10 design has typography that makes you gasp, colors that feel invented for this specific project, and animations that tell stories. The gap is not skill -- it is intention. Every decision at the 10/10 level answers the question: "Does this serve the experience, or is it just filling space?"

每一个像素都有其存在的意义——无默认，无偶然。 你所效仿的这些机构（Locomotive、Studio Freight、AREA 17、Active Theory、Hello Monday）都有着共同的核心特质：排版即设计（并非装饰，而是架构）、动效传递情感（服务于叙事而非追求新奇）、留白是利器（通过克制制造张力）、性能是底线（必须达到60fps）。

核心差距： 10分设计与8分设计的区别并非渐进式提升，而是质的飞跃。8分设计拥有不错的排版、和谐的色彩与流畅的动画；而10分设计的排版足以让人惊叹、色彩仿佛为项目量身定制、动效能够讲述故事。两者的差距不在于技能，而在于设计意图。10分设计的每一个决策都要回答：「这是为了提升体验，还是仅仅为了填充空间？」

Scoring

评分体系

Goal: 10/10. When reviewing or creating digital experiences, rate them 0-10 using the rubric below. A 10/10 means the design would be featured on Awwwards. Always provide the current score and specific improvements needed to reach 10/10.

目标：10分。 在评审或创作数字体验时，使用以下评分标准为作品打分（0-10分）。10分意味着该设计可登上Awwwards平台展示。需始终给出当前得分及提升至10分所需的具体改进方向。

Scoring Rubric

评分等级

Score	Level	Description
0-2	Amateur	Default fonts, no hierarchy, generic layout, template feel
3-4	Basic	Decent typography, some hierarchy, but forgettable
5-6	Competent	Good fundamentals, clean execution, but lacks soul
7-8	Professional	Strong typography, intentional motion, clear POV
9	Exceptional	Signature moments, memorable details, near-flawless craft
10	World-class	Would win Awwwards SOTD, defines new standards

分数	等级	描述
0-2	入门级	使用默认字体、无层级区分、通用布局、模板化风格
3-4	基础级	排版尚可、具备一定层级，但缺乏记忆点
5-6	合格级	基础扎实、执行干净，但缺乏灵魂
7-8	专业级	排版出色、动效有目的性、设计观点清晰
9	优秀级	拥有标志性亮点、细节令人难忘、工艺近乎完美
10	世界级	可获Awwwards当日最佳（SOTD）、定义新行业标准

Category Scoring (Each 0-10)

分项评分（每项0-10分）

TYPOGRAPHY (Weight: 25%)

Score	Criteria
0-3	System fonts, uniform scale, default tracking
4-6	Premium fonts, some scale contrast, basic hierarchy
7-8	Dramatic scale contrast (10:1+), perfect tracking, optical alignment
9-10	Typography IS the design -- gasping moments, custom/variable fonts, type as architecture

VISUAL COMPOSITION (Weight: 25%)

Score	Criteria
0-3	Centered everything, equal spacing, rigid grid, no tension
4-6	Some asymmetry, decent spacing rhythm, basic depth
7-8	Intentional grid breaks, layered elements, strong negative space
9-10	Magnetic compositions, unexpected scale shifts, elements that breathe and surprise

MOTION & INTERACTION (Weight: 20%)

Score	Criteria
0-3	No animation or default/linear motion
4-6	Basic transitions, some scroll effects
7-8	Custom easing, orchestrated reveals, purposeful parallax
9-10	Motion that tells stories, perfectly timed choreography, scroll feels invented

COLOR & ATMOSPHERE (Weight: 15%)

Score	Criteria
0-3	Random colors, pure black/white, no mood
4-6	Cohesive palette, some atmosphere
7-8	Colors feel owned, contextual shifts, intentional contrast
9-10	Colors feel invented for this project, atmosphere you can feel

DETAILS & CRAFT (Weight: 15%)

Score	Criteria
0-3	Default cursors, no hover states, generic everything
4-6	Basic hover states, some custom elements
7-8	Custom cursor, magnetic buttons, branded selection colors
9-10	Every micro-detail considered -- focus states, loading, empty states, scroll indicators

排版（权重：25%）

分数	评分标准
0-3	使用系统字体、统一字号、默认字距
4-6	使用优质字体、具备一定字号对比、基础层级区分
7-8	极具冲击力的字号对比（10:1及以上）、完美字距、视觉对齐
9-10	排版即设计——令人惊叹的视觉效果、自定义/可变字体、排版作为架构核心

视觉布局（权重：25%）

分数	评分标准
0-3	所有元素居中、均等间距、刚性网格、无张力
4-6	具备一定不对称性、间距节奏尚可、基础层次感
7-8	刻意打破网格、元素分层、留白运用出色
9-10	极具吸引力的布局、出人意料的尺寸变化、元素富有呼吸感与惊喜感

动效与交互（权重：20%）

分数	评分标准
0-3	无动画或使用默认/线性动效
4-6	基础过渡效果、部分滚动动效
7-8	自定义缓动曲线、协同式元素展示、有目的性的视差效果
9-10	动效讲述故事、完美的时间编排、滚动体验极具创新性

色彩与氛围（权重：15%）

分数	评分标准
0-3	色彩随机、纯黑/纯白、无氛围营造
4-6	色彩搭配协调、具备一定氛围
7-8	色彩极具辨识度、随场景变化、对比度运用合理
9-10	色彩为项目量身定制、氛围极具感染力

细节与工艺（权重：15%）

分数	评分标准
0-3	默认光标、无悬停状态、全为通用元素
4-6	基础悬停状态、部分自定义元素
7-8	自定义光标、磁吸按钮、品牌化选中文本颜色
9-10	考虑每一个微细节——焦点状态、加载状态、空状态、滚动指示器

Quick Score Formula

快速评分公式

Total = (Typography x 0.25) + (Composition x 0.25) + (Motion x 0.20) + (Color x 0.15) + (Details x 0.15)

总分 = (排版 × 0.25) + (布局 × 0.25) + (动效 × 0.20) + (色彩 × 0.15) + (细节 × 0.15)

The Seven Pillars of 10/10 Design

10分设计的七大支柱

1. Typography as Architecture

1. 排版即架构

Core concept: Typography is not decoration layered onto a design -- it IS the design. The typeface you choose, the scale you set, and the tracking you refine dictate everything else: color palette mood, animation style, spacing rhythm, and overall personality. When someone scrolls past your hero and does not pause, your typography is not working.

Why it works: Dramatic scale contrast creates immediate visual hierarchy that communicates even when content is blurred or viewed from across the room. Large display type with tight tracking commands attention like architecture commands a skyline, while intimate body text draws readers into the content. This tension between monumental and personal is what makes people stop scrolling.

Key insights:

Massive scale contrast is non-negotiable -- the ratio between display and body should be at minimum 10:1 (e.g., 180px headline / 14px body), with viewport-filling type at the extreme end making body text feel intimate
Negative tracking on large type (-0.02em to -0.05em) tightens display text into cohesive visual units, while generous line-height for body (1.5-1.7) ensures readability
Font selection defines tier -- display fonts should come from premium foundries (Pangram Pangram, Dinamo, Grilli Type, Klim, Commercial Type) or quality Google alternatives (Space Grotesk, Instrument Serif, Fraunces); never Inter, Roboto, Arial, or system-ui for hero experiences
Variable fonts enable weight animation on hover states and transitions, adding dynamism without layout shift
Optical alignment over mathematical alignment -- human perception is imperfect, so text must be adjusted visually, not just numerically
Control every line break on headlines -- text that breaks beautifully requires manual intervention at key breakpoints

Product applications:

Context	Application	Example
Portfolio hero	Viewport-filling display type with dramatic scale drop to body	Locomotive.ca hero typography
Brand website	Custom/variable font with weight animation on hover	Studio Freight interactive type
Product landing	Tight display tracking with generous body spacing	Apple product pages
Editorial layout	Serif/sans pairing with extreme scale contrast	AREA 17 case studies
Cultural institution	Statement typography that becomes the visual identity	Hello Monday museum sites
Tech startup	Premium geometric sans at architectural scale	Stripe typography system

Copy patterns:

Display: single powerful statement, 3-7 words maximum
Subhead: one sentence that contextualizes the display type
Body: 16-18px minimum, generous line-height, moderate measure (45-75 characters)
The "typography stare test": blur your eyes -- does the type hierarchy still read? If everything looks the same importance when blurred, you have failed

Ethical boundary: Typography choices should enhance readability and accessibility, not sacrifice legibility for aesthetic novelty. Ensure body text meets WCAG contrast requirements and remains readable at standard viewing distances.

See: references/typography.md for font pairing strategies, type scale systems, and advanced CSS typography.

核心概念： 排版并非附加于设计的装饰——它本身就是设计。你选择的字体、设置的字号比例、调整的字距决定了其他所有元素：色彩氛围、动效风格、间距节奏及整体个性。当用户滚动过你的首屏区域却没有停留时，说明你的排版设计是失败的。

为何有效： 极具冲击力的字号对比能立即建立视觉层级，即使内容模糊或从远处观看也能传递信息。大尺寸标题字通过紧凑字距形成极具凝聚力的视觉单元，如同建筑掌控天际线般吸引注意力；而适宜的正文字体则引导读者深入阅读内容。这种宏大与细腻之间的张力正是让用户停止滚动的关键。

关键要点：

必须具备极致的字号对比——标题与正文的字号比例至少为10:1（例如180px标题 / 14px正文），极端情况下可使用占满视口的标题字，让正文显得更细腻
大尺寸字体使用负字距（-0.02em至-0.05em），使标题文本形成紧凑的视觉单元；正文使用宽松的行高（1.5-1.7）确保可读性
字体选择决定层级——标题字体应来自优质字体厂商（Pangram Pangram、Dinamo、Grilli Type、Klim、Commercial Type）或优质Google替代字体（Space Grotesk、Instrument Serif、Fraunces）；英雄区域绝对不要使用Inter、Roboto、Arial或system-ui这类字体
可变字体支持悬停及过渡时的字重动画，在不改变布局的前提下增添动态感
视觉对齐优先于数学对齐——人类的视觉感知并非完美，因此文本需进行视觉调整，而非仅依赖数值对齐
手动控制标题的每一处换行——优美的文本换行需要在关键断点处进行手动干预

产品应用场景：

场景	应用方式	示例
作品集首屏	占满视口的标题字，与正文形成巨大字号落差	Locomotive.ca首屏排版
品牌官网	自定义/可变字体，悬停时触发字重动画	Studio Freight交互式排版
产品落地页	标题字距紧凑，正文字距宽松	Apple产品页面
编辑类布局	衬线/无衬线字体搭配，极端字号对比	AREA 17案例研究
文化机构网站	标志性排版成为视觉标识	Hello Monday博物馆类网站
科技初创公司	优质几何无衬线字体，建筑级字号比例	Stripe排版系统

文案格式：

标题：单一有力的语句，最多3-7个单词
副标题：一句话解释标题内容
正文：最小16-18px，宽松行高，适中的行长（45-75个字符）
「排版凝视测试」：模糊你的双眼——排版层级是否依然清晰？如果模糊后所有元素看起来重要性相同，说明你失败了

伦理边界： 排版选择应提升可读性与可访问性，而非为了审美新奇牺牲易读性。确保正文符合WCAG对比度要求，并在标准观看距离下保持可读。

参考：references/typography.md 获取字体搭配策略、排版比例系统及高级CSS排版技巧。

2. Layout & Composition

2. 布局与排版

Core concept: Master the grid so you can break it with intention. Every violation should feel deliberate, not accidental. The rhythm of density and breathing room -- full-viewport hero, intimate text section, massive single word, dense grid -- creates a reading experience that holds attention.

Why it works: White space is not empty space -- it is active design material that creates tension, controls pacing, and makes viewers lean in. Asymmetric layouts generate visual energy that centered, symmetrical compositions cannot achieve. When elements overlap, bleed, or extend beyond their containers with intention, the design feels alive and confident rather than constrained.

Key insights:

White space as a weapon -- amateurs fill every gap with content, professionals use padding liberally, 10/10 designers use white space to create tension that controls the reader's eye
Asymmetric balance creates interest -- offset elements from center (e.g., one column offset in a 12-column grid), let images bleed and extend beyond containers
Unexpected scale shifts create rhythm -- the alternation between massive and intimate, dense and sparse, creates a narrative pacing that prevents monotony
Elements should overlap, bleed, or extend with intention -- breaking the container signals confidence and craftsmanship
The grid paradox -- a strong underlying grid is necessary precisely so you can break it meaningfully; without the grid, breaks are just chaos
The screenshot test -- if someone would not screenshot a section and share it, you are missing signature moments

Product applications:

Context	Application	Example
Hero section	Offset title with bleeding imagery	`margin-left: 8.33%; margin-right: -5vw`
Portfolio grid	Varied card sizes with intentional asymmetry	Locomotive project showcases
Section transitions	Scale shifts between dense and breathing sections	Studio Freight scroll compositions
Image galleries	Mixed full-bleed and contained images	AREA 17 editorial layouts
Feature showcase	Overlapping elements creating depth	Active Theory layered compositions
Navigation	Asymmetric mega-menus with dramatic scale	Hello Monday navigation systems

Copy patterns:

Hero: position text off-center with intentional alignment to grid
Sections: alternate between full-width immersion and contained reading
Cards: vary sizes within grids -- not everything needs to be the same dimensions
Images: mix full-bleed, contained, and overlapping treatments

Ethical boundary: Layout experimentation must not compromise navigation clarity or content accessibility. Users should always understand where they are, how to move forward, and how to access critical information regardless of compositional choices.

See: references/layout-systems.md for grid frameworks, breakpoints, and responsive patterns.

核心概念： 先掌握网格系统，再刻意打破它。每一次打破都应是有目的的，而非偶然。密集与留白的节奏变化——占满视口的首屏、紧凑的文本区域、巨大的单个单词、密集的网格——创造能够吸引用户注意力的阅读体验。

为何有效： 留白并非空白空间——它是活跃的设计素材，可制造张力、控制节奏并引导用户深入阅读。不对称布局能产生居中对称布局无法实现的视觉活力。当元素有目的地重叠、出血或超出容器时，设计会显得生动且自信，而非受约束。

关键要点：

留白是利器——新手会填满每一处空白，专业人士会合理使用内边距，而10分设计师会用留白制造张力，引导用户的视线
不对称平衡创造趣味——将元素偏离中心（例如12列网格中的某一列偏移），让图片出血并超出容器
出人意料的尺寸变化创造节奏——宏大与细腻、密集与稀疏的交替，创造叙事节奏，避免单调
元素应有目的地重叠、出血或超出容器——打破容器边界彰显自信与工艺
网格悖论——强大的底层网格系统是有意义地打破它的前提；没有网格，打破就只是混乱
截图测试——如果用户不会截图某一区域并分享，说明你缺少标志性亮点

产品应用场景：

场景	应用方式	示例
首屏区域	标题偏移，图片出血	`margin-left: 8.33%; margin-right: -5vw`
作品集网格	卡片尺寸各异，刻意不对称	Locomotive项目展示
区域过渡	密集与留白区域的尺寸变化	Studio Freight滚动布局
图片画廊	混合全屏出血与容器内图片	AREA 17编辑类布局
功能展示	元素重叠创造层次感	Active Theory分层布局
导航	不对称巨型菜单，极具冲击力的尺寸	Hello Monday导航系统

文案格式：

首屏：文本偏离中心，与网格对齐
区域：在全屏沉浸式区域与紧凑阅读区域之间交替
卡片：网格内卡片尺寸各异——并非所有元素都需要相同尺寸
图片：混合全屏出血、容器内及重叠的展示方式

伦理边界： 布局实验不得影响导航清晰度或内容可访问性。无论布局如何设计，用户都应始终清楚自己所处位置、如何前进以及如何获取关键信息。

参考：references/layout-systems.md 获取网格框架、断点及响应式布局模式。

3. Motion & Animation

3. 动效与动画

Core concept: Every animation must answer "Why does this move?" Motion is not polish applied at the end -- it is core to the design, prototyped early and developed alongside visual design. The three laws of elite motion are: purpose over decoration, custom curves (never linear), and orchestration over isolation.

Why it works: Choreographed motion creates a cinematic experience that guides attention, communicates hierarchy, and creates emotional resonance. When elements animate in relationship to each other rather than independently, the result feels cohesive and intentional. Custom easing curves (exponential, quartic) give movement a physical quality that default browser easing cannot achieve.

Key insights:

Custom easing is mandatory --

ease

ease-in

ease-out

, and

linear

are banned; use

cubic-bezier(0.16, 1, 0.3, 1)

(expo out),

cubic-bezier(0.25, 1, 0.5, 1)

(quart out),

cubic-bezier(0.87, 0, 0.13, 1)

(expo in-out)

Page load choreography follows a strict timeline -- background/structure (0-200ms), hero title words staggered (200-600ms, 80ms stagger), subtitle (400-800ms), navigation cascade (600-900ms), supporting elements (800-1200ms)
Scroll-triggered sequences reveal elements as they enter viewport -- not all at once; parallax used sparingly and only on non-essential elements
Pinned sections for storytelling moments and horizontal scroll for galleries (with clear affordance) create immersive reading experiences
Default browser scroll is unacceptable -- use Lenis or Locomotive Scroll for smooth, custom scroll behavior
60fps is non-negotiable -- if an animation drops frames, simplify or remove it

Product applications:

Context	Application	Example
Page load	Choreographed staggered reveal sequence	Studio Freight entry animations
Scroll sections	Pinned storytelling with progressive reveals	Locomotive scroll experiences
Navigation	Magnetic hover effects with custom cursors	Active Theory interactive nav
Image reveals	Clip-path or mask animations on scroll enter	AREA 17 case study reveals
Page transitions	Seamless cross-page animation continuity	Hello Monday page morphs
Micro-interactions	Hover weight shifts, button magnetic effects	Dogstudio interactive details

Copy patterns:

Reveal: text lines slide up individually with stagger (not fade in as a block)
Hover: elements respond with custom cursor, scale shift, or color transition
Scroll: content reveals progressively, never all at once
Transition: pages morph rather than cut or fade

Ethical boundary: Motion must never block interaction, cause motion sickness, or prevent users from accessing content. Always respect

prefers-reduced-motion

and ensure all content is accessible without animation. Animations longer than 1.2s require clear justification.

See: references/animation-patterns.md for scroll animations, page transitions, and micro-interactions with code.

核心概念： 每一个动画都必须回答「它为什么要动？」动效并非后期添加的修饰——它是设计的核心，应与视觉设计同步原型设计。顶级动效的三大法则：目的优先于装饰、自定义曲线（绝不使用线性）、协同编排优先于独立动画。

为何有效： 协同编排的动效创造电影级体验，引导注意力、传递层级并创造情感共鸣。当元素相互关联而非独立动画时，结果会显得连贯且有目的性。自定义缓动曲线（指数曲线、四次曲线）赋予动效物理质感，这是浏览器默认缓动无法实现的。

关键要点：

必须使用自定义缓动曲线——
```
ease
```
、
```
ease-in
```
、
```
ease-out
```
或
```
linear
```
均禁用；使用
```
cubic-bezier(0.16, 1, 0.3, 1)
```
（指数出）、
```
cubic-bezier(0.25, 1, 0.5, 1)
```
（四次出）、
```
cubic-bezier(0.87, 0, 0.13, 1)
```
（指数进出）
页面加载编排遵循严格时间线——背景/结构（0-200ms）、首屏标题字 staggered 展示（200-600ms，间隔80ms）、副标题（400-800ms）、导航级联展示（600-900ms）、辅助元素（800-1200ms）
滚动触发序列在元素进入视口时展示——不要一次性全部展示；视差效果应谨慎使用，仅用于非核心装饰元素
固定区域用于叙事时刻，横向滚动用于画廊（需有清晰的提示），创造沉浸式阅读体验
浏览器默认滚动不可接受——使用Lenis或Locomotive Scroll实现流畅的自定义滚动行为
60fps是底线——如果动画掉帧，应简化或移除它

产品应用场景：

场景	应用方式	示例
页面加载	协同编排的staggered展示序列	Studio Freight进入动画
滚动区域	固定叙事区域，渐进式展示	Locomotive滚动体验
导航	磁吸悬停效果，自定义光标	Active Theory交互式导航
图片展示	元素进入视口时的clip-path或mask动画	AREA 17案例研究展示
页面过渡	无缝跨页动画连贯性	Hello Monday页面变形
微交互	悬停字重变化、按钮磁吸效果	Dogstudio交互式细节

文案格式：

展示：文本行单独向上滑动，带有时间差（不要作为整体淡入）
悬停：元素响应自定义光标、尺寸变化或颜色过渡
滚动：内容渐进式展示，绝不一次性全部出现
过渡：页面变形，而非切换或淡入淡出

伦理边界： 动效不得阻碍交互、导致晕动症或阻止用户访问内容。始终尊重

prefers-reduced-motion

设置，确保所有内容无需动画即可访问。超过1.2秒的动画需要有明确的合理性。

参考：references/animation-patterns.md 获取滚动动画、页面过渡及微交互的代码实现。

4. Color & Contrast

4. 色彩与对比度

Core concept: Color should feel invented for each specific project -- not pulled from a generic palette generator. The three approaches are monochromatic tension (95% one dominant color, 5% accent that pops), bold signature (own a color combination and make it unmistakable), and contextual shifting (color responds to content, with sections having distinct palettes).

Why it works: Color creates atmosphere before a single word is read. When colors feel owned by a specific project, they become part of the brand's identity. Pure black (#000000) and pure white (#ffffff) feel digital and lifeless; slightly warm variants (#0a0a0a, #fafaf9) feel physical and considered. The restrained use of a single accent color creates moments of surprise that draw the eye exactly where intended.

Key insights:

Never use pure black or pure white -- warm variants create a physical quality that pure digital colors lack
The functional color hierarchy -- text-primary, text-secondary (60% opacity), text-tertiary (40% opacity), surface, border (10% opacity) -- creates consistent depth across all components
Accent color creates moments of surprise -- a single strong accent (#ff4d00 or similar) used sparingly has more impact than a complex multi-color palette
Contextual color shifts between sections signal content changes and create visual chapters
The squint test -- squint at your design; if the important elements do not stand out through contrast alone, your color hierarchy is failing
Colors must work in both light and dark contexts -- design the system, not individual instances

Product applications:

Context	Application	Example
Agency portfolio	Monochromatic with signature accent	Locomotive: cream + black + orange spark
Brand identity	Bold owned color combination	Studio Freight: black + cream + rust
Client showcase	Contextual shifting per case study	AREA 17: adapts palette to each client
Product landing	Dark mode with single vibrant accent	Stripe: dark navy + signature purple
Cultural site	Rich tonal palette from source material	Hello Monday: palette drawn from art/content
Tech product	Minimal neutral with functional accent	Linear: grayscale + signature blue

Copy patterns:

Define CSS custom properties for your full color system:
```
--color-dark
```
,
```
--color-light
```
,
```
--color-accent
```

Build functional tokens on top:

--color-text-primary

--color-text-secondary

--color-surface

Use opacity-based variants (
```
rgba(10, 10, 10, 0.6)
```
) for consistent secondary/tertiary text
Accent color appears on CTAs, links, and single-detail moments -- never everywhere

Ethical boundary: Color choices must meet WCAG 2.1 AA contrast requirements at minimum. Atmospheric design cannot come at the cost of readability for users with visual impairments. Test all color combinations with contrast checkers.

See: references/case-studies.md for agency technique breakdowns including color system analysis.

核心概念： 色彩应为每个特定项目量身定制——而非从通用调色板生成器中选取。三种方法：单色张力（95%主色，5%突出强调色）、标志性大胆配色（拥有独特的色彩组合，令人过目不忘）、场景化色彩变化（色彩随内容变化，不同区域有独特调色板）。

为何有效： 在用户阅读任何文字之前，色彩就已营造出氛围。当色彩为特定项目所独有时，它们会成为品牌标识的一部分。纯黑色（#000000）与纯白色（#ffffff）会显得冰冷且缺乏生气；略带暖调的变体（#0a0a0a、#fafaf9）则显得更具质感且经过深思熟虑。克制使用单一强调色能创造惊喜时刻，精准引导视线。

关键要点：

绝不使用纯黑或纯白——暖调变体比纯数字色彩更具质感
功能性色彩层级——主文本、次要文本（60%透明度）、 tertiary文本（40%透明度）、背景、边框（10%透明度）——在所有组件中创造一致的层次感
强调色创造惊喜时刻——单一强烈的强调色（如#ff4d00）少量使用比复杂的多色调色板更具冲击力
不同区域的场景化色彩变化标志着内容变化，创造视觉章节感
眯眼测试——眯起眼睛看设计；如果重要元素无法通过对比度脱颖而出，说明你的色彩层级设计失败
色彩必须在亮色与暗色场景下都能正常工作——设计的是系统，而非单个实例

产品应用场景：

场景	应用方式	示例
机构作品集	单色搭配标志性强调色	Locomotive：米白 + 黑色 + 橙色亮点
品牌标识	大胆独特的色彩组合	Studio Freight：黑色 + 米白 + 铁锈色
客户展示	每个案例使用不同调色板	AREA 17：根据客户调整调色板
产品落地页	暗色模式搭配单一鲜艳强调色	Stripe：深海军蓝 + 标志性紫色
文化类网站	从素材中提取丰富色调	Hello Monday：从艺术/内容中提取调色板
科技产品	极简中性色搭配功能性强调色	Linear：灰度 + 标志性蓝色

文案格式：

为完整色彩系统定义CSS自定义属性：
```
--color-dark
```
、
```
--color-light
```
、
```
--color-accent
```

在其之上构建功能性标记：

--color-text-primary

、

--color-text-secondary

、

--color-surface

使用基于透明度的变体（
```
rgba(10, 10, 10, 0.6)
```
）实现一致的次要/tertiary文本
强调色仅用于CTA、链接及单个细节时刻——绝不随处使用

伦理边界： 色彩选择至少需符合WCAG 2.1 AA对比度要求。氛围营造不能以视障用户的可读性为代价。使用对比度检查工具测试所有色彩组合。

参考：references/case-studies.md 获取机构技术解析，包括色彩系统分析。

5. Scroll-Based Design

5. 基于滚动的设计

Core concept: Scroll is the primary interaction on the web, and it should feel designed, not default. The best digital experiences treat the scroll as a narrative device -- controlling pacing, creating reveals, building tension, and delivering signature moments tied to scroll position.

Why it works: Default browser scroll is mechanical and uniform, treating all content as equally important. Custom scroll behavior (via Lenis or Locomotive Scroll) creates a smooth, weighted feel that mirrors physical objects. When scroll position drives animations, reveals, and transitions, the user's movement through content becomes an active, participatory experience rather than passive consumption.

Key insights:

Smooth scroll is the foundation -- implement Lenis or Locomotive Scroll for the weighted, physical scroll feel that every award-winning site uses
Parallax must be purposeful -- used sparingly and only on non-essential decorative elements; never on text or critical content
Pinned sections create storytelling beats -- locking a section in place while content transforms within it creates cinematic moments
Horizontal scroll for galleries requires clear visual affordance so users know to scroll sideways
Scroll-triggered reveals should be progressive -- elements enter as they become visible, creating a sense of discovery
Scroll velocity can modulate animation speed -- fast scrolling compresses animations, slow scrolling expands them, creating a responsive feel

Product applications:

Context	Application	Example
Product story	Pinned hero with scroll-driven content transformation	Apple product deep-dives
Portfolio	Progressive image reveals tied to scroll position	Locomotive project showcases
Editorial	Parallax depth on decorative elements only	AREA 17 editorial layouts
Landing page	Horizontal scroll gallery with clear affordance	Studio Freight work galleries
Brand narrative	Scroll-driven animation sequences	Active Theory immersive stories
Feature tour	Step-by-step reveals pinned to scroll progress	Stripe feature presentations

Copy patterns:

Use
```
data-scroll
```
,
```
data-scroll-speed
```
, and
```
data-scroll-direction
```
attributes for declarative scroll behavior
Implement intersection observers for lightweight scroll-triggered class toggling
Reserve GSAP ScrollTrigger for complex, multi-step scroll-driven animations
Always provide a non-scroll fallback for accessibility

Ethical boundary: Scroll hijacking that prevents users from scrolling at their own pace is hostile UX. Custom scroll should enhance the experience, not trap users. Always allow users to scroll freely through content, and never make scroll-driven animations mandatory for accessing information.

See: references/animation-patterns.md for scroll animation implementation patterns.

核心概念： 滚动是网页的主要交互方式，它应经过精心设计，而非使用默认行为。最佳数字体验将滚动视为叙事工具——控制节奏、创造展示效果、制造张力，并提供与滚动位置相关的标志性时刻。

为何有效： 浏览器默认滚动机械且统一，将所有内容视为同等重要。自定义滚动行为（通过Lenis或Locomotive Scroll）创造流畅、有重量感的体验，模拟物理对象。当滚动位置驱动动画、展示及过渡时，用户浏览内容的过程成为主动参与的体验，而非被动消费。

关键要点：

流畅滚动是基础——实现Lenis或Locomotive Scroll，获得所有获奖网站都使用的有重量感、物理化的滚动体验
视差效果必须有目的性——谨慎使用，仅用于非核心装饰元素；绝不要在文本或关键内容上使用
固定区域创造叙事节点——将某一区域固定，同时内容在其中变换，创造电影级时刻
横向滚动画廊需要清晰的视觉提示，让用户知道可以横向滚动
滚动触发的展示应是渐进式的——元素在可见时进入，创造探索感
滚动速度可调节动画速度——快速滚动压缩动画，慢速滚动扩展动画，创造响应式体验

产品应用场景：

场景	应用方式	示例
产品故事	固定首屏，内容随滚动变换	Apple产品深度解析
作品集	图片随滚动位置渐进式展示	Locomotive项目展示
编辑类	仅在装饰元素上使用视差效果	AREA 17编辑类布局
落地页	横向滚动画廊，带有清晰提示	Studio Freight作品画廊
品牌叙事	滚动驱动的动画序列	Active Theory沉浸式故事
功能导览	步骤式展示，与滚动进度绑定	Stripe功能展示

文案格式：

使用

data-scroll

、

data-scroll-speed

和

data-scroll-direction

属性声明滚动行为

实现交叉观察器，用于轻量级滚动触发类切换
复杂多步骤滚动驱动动画使用GSAP ScrollTrigger
始终为可访问性提供非滚动 fallback 方案

伦理边界： 阻止用户按自己节奏滚动的滚动劫持是不友好的UX设计。自定义滚动应增强体验，而非困住用户。始终允许用户自由滚动内容，绝不要让滚动驱动的动画成为访问信息的必要条件。

参考：references/animation-patterns.md 获取滚动动画实现模式。

6. Performance & Loading

6. 性能与加载

Core concept: Performance is not an optimization step -- it is a design constraint from day one. A beautiful animation that drops frames, a stunning font that causes layout shift, or a gorgeous image that takes three seconds to load all fail the craft test. 60fps is the floor, not the ceiling.

Why it works: Users perceive performance as quality. A site that loads instantly and scrolls fluidly feels premium, regardless of visual complexity. Conversely, a visually stunning site that stutters or delays feels broken. The best agencies achieve both visual ambition and technical performance by making performance a first-class design decision: choosing GPU-accelerated properties, subsetting fonts, optimizing images, and testing on real devices.

Key insights:

Fonts must be subset and preloaded -- only include the glyphs you need, use
```
font-display: swap
```
or
```
optional
```
, and preload critical font files
Images must be optimized -- use WebP/AVIF with fallbacks, implement responsive
```
srcset
```
, and lazy-load below-the-fold images
Animations must be GPU-accelerated -- only animate
```
transform
```
and
```
opacity
```
; never animate
```
width
```
,
```
height
```
,
```
top
```
,
```
left
```
, or
```
margin
```
No layout shifts -- Cumulative Layout Shift (CLS) must be near zero; reserve space for images, fonts, and dynamic content
LCP under 2.5s -- Largest Contentful Paint is the key metric; optimize the critical rendering path for the hero
First contentful paint must feel instant -- use custom skeleton/loading animations as designed elements, not afterthoughts

Product applications:

Context	Application	Example
Font loading	Subset, preload, and swap strategy	`<link rel="preload" as="font" crossorigin>`
Image delivery	AVIF/WebP with responsive srcset	`<picture>` element with format fallbacks
Animation perf	GPU-only properties with will-change hints	`transform: translate3d()` + `opacity`
Layout stability	Aspect-ratio and min-height reservations	`aspect-ratio: 16/9` on image containers
Loading experience	Designed skeleton screens and progress indicators	Custom branded loading animations
Bundle optimization	Code-split, tree-shake, defer non-critical JS	Dynamic imports for below-fold interactivity

Copy patterns:

Audit with Lighthouse, targeting 90+ on all metrics
Test on real devices, not just simulators -- simulators lie about performance and feel
Implement
```
loading="lazy"
```
on all images below the fold
Use
```
will-change
```
sparingly and only on elements about to animate
Profile animations with Chrome DevTools Performance panel at 4x CPU throttle

Ethical boundary: Performance optimization must not strip away accessibility features, skip semantic HTML, or remove meaningful content. Fast-but-inaccessible is not a valid tradeoff.

See: references/technical-stack.md for libraries, tools, and performance optimization techniques.

核心概念： 性能并非优化步骤——它是从第一天起就需考虑的设计约束。一个掉帧的精美动画、导致布局偏移的惊艳字体，或加载三秒的绝美图片，都不符合工艺要求。60fps是底线，而非上限。

为何有效： 用户将性能视为品质的体现。一个瞬间加载且流畅滚动的网站会显得高端，无论视觉复杂度如何。反之，一个视觉惊艳但卡顿或延迟的网站会显得残破不堪。最佳机构通过将性能作为首要设计决策，实现视觉野心与技术性能的平衡：选择GPU加速属性、子集化字体、优化图片，并在真实设备上测试。

关键要点：

字体必须子集化并预加载——仅包含所需字形，使用
```
font-display: swap
```
或
```
optional
```
，并预加载关键字体文件
图片必须优化——使用WebP/AVIF格式并提供 fallback，实现响应式
```
srcset
```
，懒加载视口下方的图片
动画必须使用GPU加速——仅动画
```
transform
```
和
```
opacity
```
；绝不要动画
```
width
```
、
```
height
```
、
```
top
```
、
```
left
```
或
```
margin
```
无布局偏移——累积布局偏移（CLS）必须接近零；为图片、字体及动态内容预留空间
LCP低于2.5秒——最大内容绘制是关键指标；优化首屏的关键渲染路径
首次内容绘制必须感觉瞬间完成——使用自定义骨架屏/加载动画作为设计元素，而非事后添加的补丁

产品应用场景：

场景	应用方式	示例
字体加载	子集化、预加载及替换策略	`<link rel="preload" as="font" crossorigin>`
图片交付	AVIF/WebP格式搭配响应式srcset	`<picture>` 元素搭配格式fallback
动画性能	仅使用GPU属性，添加will-change提示	`transform: translate3d()` + `opacity`
布局稳定性	宽高比及最小高度预留	图片容器使用 `aspect-ratio: 16/9`
加载体验	设计骨架屏和进度指示器	自定义品牌加载动画
包优化	代码分割、树摇、延迟非关键JS	视口下方交互使用动态导入

文案格式：

使用Lighthouse审计，所有指标目标90+分
在真实设备上测试，而非仅模拟器——模拟器会在性能和体验上说谎
视口下方的所有图片实现
```
loading="lazy"
```
谨慎使用
```
will-change
```
，仅在即将动画的元素上使用
在Chrome DevTools性能面板以4倍CPU节流分析动画

伦理边界： 性能优化不得移除可访问性功能、跳过语义化HTML或删除有意义的内容。快速但不可访问的设计不是合理的权衡。

参考：references/technical-stack.md 获取库、工具及性能优化技巧。

7. Micro-Interactions

7. 微交互

Core concept: The details that signal craft live in the 1% that most designers skip: custom cursors, branded selection colors, magnetic button effects, designed focus states, considered loading states, crafted error pages, and correct micro-typography. These details are the difference between professional and world-class.

Why it works: Micro-interactions create a sense that every pixel was considered. When a cursor changes on hover, when text selection has a branded color, when a button has a subtle magnetic pull, and when focus states are beautiful AND accessible, users feel the care embedded in the experience. These details compound -- individually subtle, collectively transformative.

Key insights:

Custom cursor reflects brand personality -- cursor changes on interactive elements, with optional magnetic effect on buttons
Selection colors are branded -- custom
```
::selection
```
color that works well on all backgrounds
Every link has a considered hover state -- images have scale or overlay treatment, cards transform meaningfully
Focus states are visible AND beautiful -- focus indicators match brand aesthetic while remaining clearly visible for keyboard navigation
Loading and empty states are designed -- custom skeleton animations, branded progress indicators, designed 404 pages, helpful error states
Micro-typography is correct -- smart quotes, proper apostrophes, en/em dashes where appropriate, no orphans on headlines,
```
text-wrap: balance
```
on key text

Product applications:

Context	Application	Example
Cursor	Custom cursor with interactive-element variants	Dogstudio custom cursor system
Selection	Branded `::selection` background color	On-brand highlight that works on all surfaces
Buttons	Magnetic hover effect with subtle pull	Studio Freight magnetic buttons
Focus	Styled focus-visible rings matching brand	Accessible + beautiful focus indicators
Loading	Custom skeleton screens and progress bars	Locomotive branded loading sequences
Error states	Designed 404 and error pages	Memorable, on-brand error experiences

Copy patterns:

::selection { background: var(--color-accent); color: var(--color-light); }

```
cursor: none;
```
on body with custom cursor div following mouse position
Magnetic effect: calculate distance between cursor and button center, apply proportional transform
Smart quotes: use
```
&ldquo;
```
and
```
&rdquo;
```
or configure your build tool to auto-convert

Ethical boundary: Micro-interactions must enhance usability, not hinder it. Custom cursors must remain functional and visible. Focus states must meet accessibility requirements -- beauty cannot replace visibility. Designed error states must be genuinely helpful, not just clever.

See: references/case-studies.md for agency technique breakdowns on micro-interaction implementation.

核心概念： 体现工艺的细节存在于大多数设计师忽略的1%中：自定义光标、品牌化选中文本颜色、磁吸按钮效果、精心设计的焦点状态、经过考量的加载状态、精心制作的错误页面，以及正确的微排版。这些细节是专业与世界级设计的区别所在。

为何有效： 微交互创造出每一个像素都经过考量的感觉。当光标在悬停时变化、文本选中时带有品牌颜色、按钮有轻微的磁吸效果，且焦点状态既美观又可访问时，用户能感受到体验中蕴含的用心。这些细节单独看很微妙，但合在一起会带来颠覆性的变化。

关键要点：

自定义光标反映品牌个性——交互式元素上光标变化，按钮可选择添加磁吸效果
选中文本颜色品牌化——自定义
```
::selection
```
颜色，在所有背景上都能良好显示
每个链接都有经过考量的悬停状态——图片有缩放或覆盖效果，卡片有有意义的变换
焦点状态既可见又美观——焦点指示器匹配品牌美学，同时对键盘导航用户清晰可见
加载和空状态经过设计——自定义骨架屏动画、品牌化进度指示器、精心设计的404页面、有用的错误状态
微排版正确——智能引号、正确的撇号、适当使用短破折号/长破折号、标题无孤行、关键文本使用
```
text-wrap: balance
```

产品应用场景：

场景	应用方式	示例
光标	自定义光标，交互式元素上有变体	Dogstudio自定义光标系统
选中文本	品牌化 `::selection` 背景色	符合品牌的高亮效果，在所有表面上都能正常显示
按钮	磁吸悬停效果，带有轻微拉力	Studio Freight磁吸按钮
焦点	样式化的focus-visible环，匹配品牌	可访问且美观的焦点指示器
加载	自定义骨架屏和进度条	Locomotive品牌化加载序列
错误状态	精心设计的404和错误页面	令人难忘、符合品牌的错误体验

文案格式：

::selection { background: var(--color-accent); color: var(--color-light); }

body上使用
```
cursor: none;
```
，自定义光标div跟随鼠标位置
磁吸效果：计算光标与按钮中心的距离，应用成比例的变换
智能引号：使用
```
&ldquo;
```
和
```
&rdquo;
```
，或配置构建工具自动转换

伦理边界： 微交互必须增强可用性，而非阻碍它。自定义光标必须保持功能性和可见性。焦点状态必须符合可访问性要求——美观不能替代可见性。精心设计的错误状态必须真正有用，而非仅仅巧妙。

参考：references/case-studies.md 获取机构微交互实现的技术解析。

Design Process

设计流程

1. Concept First, Code Second

1. 先概念，后代码

Before any code, define:

BRAND ESSENCE: What single word captures the soul?
VISUAL TENSION: What opposing forces create interest?
SIGNATURE MOMENT: What will people screenshot and share?
TECHNICAL AMBITION: What pushes the browser's limits?

在编写任何代码之前，定义：

品牌本质：哪个单一词汇能捕捉其灵魂？
视觉张力：哪些对立力量创造趣味？
标志性时刻：用户会截图并分享什么？
技术野心：哪些内容突破浏览器的限制？

2. Design the Signature Moment First

2. 先设计标志性时刻

Do not start with the header. Start with the thing that defines the experience. The header can be solved later. Every 10/10 project has at least one moment that makes people stop and share: a hero animation never seen before, typography so bold it becomes the visual, an interaction that delights unexpectedly, a scroll sequence that tells a story, or a transition that feels like magic.

Questions to identify your signature:

What will people screenshot?
What will they describe to colleagues?
What will they try to reverse-engineer?
What makes this unmistakably THIS project?

不要从页眉开始。从定义体验的核心内容开始。页眉可以稍后解决。每个10分项目至少有一个让用户停止并分享的时刻：前所未有的首屏动画、大胆到成为视觉核心的排版、令人愉悦的意外交互、讲述故事的滚动序列，或如魔法般的过渡效果。

识别标志性时刻的问题：

用户会截图什么？
他们会向同事描述什么？
他们会尝试逆向工程什么？
什么让这个项目独一无二？

3. Typography Sets Everything

3. 排版决定一切

Choose your display typeface first. Let it dictate the color palette mood, the animation style, the spacing rhythm, and the overall personality.

先选择标题字体。让它决定色彩氛围、动效风格、间距节奏及整体个性。

4. Motion Is Not Polish

4. 动效并非修饰

Prototype animations early. Motion design happens alongside visual design, not after.

尽早原型化动画。动效设计与视觉设计同步进行，而非后期添加。

5. Ship With Restraint

5. 克制交付

3 things perfect beats 10 things mediocre. Cut ruthlessly.

3件完美的事胜过10件平庸的事。无情地删减。

Implementation Notes

实现说明

Start with the signature moment -- design the thing that defines the experience first
Conceptualize desktop-first, build mobile-first -- dream big, implement progressively
Prototype animations early -- motion is not a polish step, it is core to the design
Test on real devices -- simulators lie about performance and feel
Ship with restraint -- 3 things perfect beats 10 things mediocre
Sweat the micro-details -- craft lives in the 1% others skip
Design the states -- hover, focus, loading, empty, error all matter
Own your constraints -- every limitation is a design opportunity
Use project conventions -- if Tailwind 4+ and/or shadcn/ui are available, build on top of them rather than fighting them. Extend their design tokens, customize their components, and use their patterns as a foundation for 10/10 craft

从标志性时刻开始——先设计定义体验的核心内容
先桌面概念，后移动优先构建——大胆构想，渐进式实现
尽早原型化动画——动效不是修饰步骤，它是设计的核心
在真实设备上测试——模拟器会在性能和体验上说谎
克制交付——3件完美的事胜过10件平庸的事
注重微细节——工艺存在于他人忽略的1%中
设计所有状态——悬停、焦点、加载、空、错误状态都很重要
接受约束——每一个限制都是设计机会
使用项目约定——如果Tailwind 4+和/或shadcn/ui可用，基于它们构建，而非与之对抗。扩展其设计标记、自定义组件，并使用其模式作为10分工艺的基础

Reference Files

参考文件

Consult these for detailed implementation:

references/typography.md: Font pairing strategies, type scale systems, advanced CSS typography
references/animation-patterns.md: Scroll animations, page transitions, micro-interactions with code
references/layout-systems.md: Grid frameworks, breakpoints, responsive patterns
references/technical-stack.md: Libraries, tools, performance optimization
references/case-studies.md: Agency technique breakdowns (Locomotive, Studio Freight, AREA 17, Hello Monday, etc.)

查阅以下文件获取详细实现信息：

references/typography.md：字体搭配策略、排版比例系统、高级CSS排版
references/animation-patterns.md：滚动动画、页面过渡、带代码的微交互
references/layout-systems.md：网格框架、断点、响应式模式
references/technical-stack.md：库、工具、性能优化
references/case-studies.md：机构技术解析（Locomotive、Studio Freight、AREA 17、Hello Monday等）

Common Mistakes

常见错误

Mistake	Why It Fails	Fix
Using Inter, Roboto, Arial, or system-ui as primary typeface	These are application fonts, not experience fonts -- they signal generic, not premium	Choose from premium foundries (Pangram Pangram, Dinamo, Grilli Type, Klim) or quality Google alternatives (Space Grotesk, Instrument Serif, Fraunces)
Uniform type scale (everything within 2x of each other)	No hierarchy means no gasping moments -- everything feels equally unimportant	Push to minimum 10:1 ratio between display and body; viewport-filling type is the goal
Using `ease` , `ease-in` , `ease-out` , or `linear` easing	Default easing feels mechanical and lifeless -- instantly signals amateur work	Use custom cubic-bezier curves: expo out (0.16, 1, 0.3, 1), quart out (0.25, 1, 0.5, 1)
Animating everything simultaneously	Simultaneous animation creates visual noise with no hierarchy or narrative	Choreograph with stagger (80ms between elements), sequence in order of importance
Center-aligning everything	Symmetry is safe but boring -- it creates no tension or visual energy	Use asymmetric compositions with intentional grid offsets and bleeding elements
Equal spacing everywhere	Uniform spacing creates monotony -- the eye has nowhere to rest or focus	Vary spacing to create rhythm: dense sections followed by breathing room
Pure #000000 black and pure #ffffff white	Pure digital colors feel lifeless and harsh -- they signal no design consideration	Use warm variants: #0a0a0a (slightly warm black), #fafaf9 (slightly warm white)
Default browser scroll	Standard scroll feels mechanical and treats all content as equally important	Implement Lenis or Locomotive Scroll for smooth, weighted, physical scroll feel
Purple-to-blue gradient hero sections	The "AI gradient" -- instantly signals generic, trend-following design	Develop a signature color approach specific to the project
No signature moment in the entire experience	Without a screenshot-worthy moment, the design is competent but forgettable	Design the signature moment FIRST -- the thing people will reverse-engineer
Any emoji in professional interfaces	Emoji signal casual/amateur craft and undermine premium positioning	Use custom iconography or typographic treatments instead
Parallax on text and critical content	Parallax on readable content causes motion sickness and accessibility issues	Reserve parallax for decorative, non-essential background elements only
Animations blocking user interaction	Motion that prevents scrolling, clicking, or reading is hostile UX	Ensure all animations are non-blocking; content remains accessible during transitions
Font Awesome icons used unmodified	Generic icon sets signal template-level design	Create custom icons or heavily customize existing ones to match brand personality
Default form styles	Unstyled form elements immediately break the illusion of craft	Design every input, select, checkbox, and button as a branded experience

错误	失败原因	修复方案
使用Inter、Roboto、Arial或system-ui作为主要字体	这些是应用字体，而非体验字体——它们代表通用而非高端	从优质字体厂商（Pangram Pangram、Dinamo、Grilli Type、Klim）或优质Google替代字体（Space Grotesk、Instrument Serif、Fraunces）中选择
统一的排版比例（所有元素字号在2倍以内）	无层级意味着无惊艳时刻——所有内容看起来同等不重要	标题与正文的字号比例至少推至10:1；目标是使用占满视口的标题字
使用 `ease` 、 `ease-in` 、 `ease-out` 或 `linear` 缓动	默认缓动感觉机械且缺乏生气——立即暴露业余水平	使用自定义三次贝塞尔曲线：指数出（0.16, 1, 0.3, 1）、四次出（0.25, 1, 0.5, 1）
所有元素同时动画	同时动画创造视觉噪音，无层级或叙事	使用时间差（元素间间隔80ms）编排，按重要性顺序展示
所有元素居中	对称安全但无聊——无张力或视觉活力	使用不对称布局，刻意偏移网格并让元素出血
所有间距均等	统一间距创造单调感——眼睛无处休息或聚焦	改变间距创造节奏：密集区域后跟随留白区域
使用纯#000000黑色和纯#ffffff白色	纯数字颜色感觉缺乏生气且刺眼——表明没有经过设计考量	使用暖调变体：#0a0a0a（略带暖调的黑色）、#fafaf9（略带暖调的白色）
使用浏览器默认滚动	标准滚动感觉机械，将所有内容视为同等重要	实现Lenis或Locomotive Scroll，获得流畅、有重量感的物理化滚动体验
首屏使用紫蓝渐变	「AI渐变」——立即暴露通用、跟风的设计	为项目开发独特的色彩方案
整个体验中无标志性时刻	没有值得截图的时刻，设计合格但令人难忘	先设计标志性时刻——用户会逆向工程的内容
专业界面中使用表情符号	表情符号代表随意/业余工艺，削弱高端定位	使用自定义图标或排版处理替代
在文本和关键内容上使用视差效果	可读内容上的视差效果会导致晕动症和可访问性问题	视差效果仅用于装饰性、非核心背景元素
动画阻止用户交互	阻止滚动、点击或阅读的动效是不友好的UX设计	确保所有动画非阻塞；过渡期间内容仍可访问
未修改使用Font Awesome图标	通用图标集表明模板级设计	创建自定义图标，或大幅修改现有图标以匹配品牌个性
默认表单样式	未样式化的表单元素立即打破工艺感	将每个输入框、选择器、复选框和按钮设计成品牌化体验

Quick Diagnostic

快速诊断

Question	If No	Action
Does the hero typography make someone pause mid-scroll?	Display type is not commanding enough	Push scale contrast to 10:1+, choose a more distinctive typeface, fill the viewport
Would someone screenshot any section and share it?	No signature moment exists	Identify one section to make extraordinary -- an animation, scale shift, or interaction
Does the design still read when you blur your eyes?	Hierarchy is too flat	Increase contrast between levels -- bigger headlines, more white space, stronger accents
Are all easing curves custom (no `ease` or `linear` )?	Motion feels default and mechanical	Replace with expo out (0.16, 1, 0.3, 1) or quart out (0.25, 1, 0.5, 1)
Is there asymmetric tension in the composition?	Layout feels safe and symmetrical	Offset elements from center, let images bleed, vary section density
Do the colors feel invented for THIS project?	Palette could belong to any brand	Develop a signature color identity: monochromatic tension, bold signature, or contextual shifting
Is the page load choreographed (not all at once)?	Elements pop in simultaneously	Implement staggered reveal: structure first, then hero, then supporting elements
Does scroll feel custom and weighted?	Using default browser scroll	Implement Lenis or Locomotive Scroll for smooth, physical scroll behavior
Are micro-details considered (selection, focus, cursor)?	Default browser behaviors remain	Add branded selection colors, designed focus states, and considered cursor behavior
Is CLS near zero and LCP under 2.5s?	Performance undermines perceived quality	Subset fonts, optimize images (WebP/AVIF), animate only transform/opacity
Does every animation answer "why does this move?"	Motion is decorative, not purposeful	Remove animations that do not serve narrative, hierarchy, or user guidance
Are focus states both beautiful AND accessible?	Accessibility sacrificed for aesthetics or vice versa	Design focus indicators that match brand aesthetic while meeting WCAG visibility requirements

问题	如果答案为否	行动
首屏排版是否能让用户在滚动时暂停？	标题字不够有冲击力	将字号对比推至10:1+，选择更独特的字体，占满视口
用户会截图任何区域并分享吗？	无标志性时刻	确定一个区域使其变得非凡——动画、尺寸变化或交互
模糊眼睛时设计是否依然可读？	层级太平坦	增加层级间的对比度——更大的标题、更多留白、更强烈的强调色
所有缓动曲线都是自定义的（无 `ease` 或 `linear` ）吗？	动效感觉默认且机械	替换为指数出（0.16, 1, 0.3, 1）或四次出（0.25, 1, 0.5, 1）
布局中存在不对称张力吗？	布局感觉安全且对称	元素偏离中心，让图片出血，改变区域密度
颜色感觉是为这个项目量身定制的吗？	调色板可属于任何品牌	开发独特的色彩标识：单色张力、大胆标志性配色或场景化色彩变化
页面加载是编排好的（非同时出现）吗？	元素同时弹出	实现staggered展示：先结构，再首屏，然后辅助元素
滚动感觉自定义且有重量感吗？	使用浏览器默认滚动	实现Lenis或Locomotive Scroll，获得流畅的物理化滚动体验
微细节经过考量（选中、焦点、光标）吗？	仍使用浏览器默认行为	添加品牌化选中文本颜色、精心设计的焦点状态，以及经过考量的光标行为
CLS接近零且LCP低于2.5秒吗？	性能削弱感知品质	子集化字体、优化图片（WebP/AVIF）、仅动画transform/opacity
每个动画都能回答「它为什么要动？」吗？	动效是装饰性的，而非有目的性的	移除不服务于叙事、层级或用户引导的动画
焦点状态既美观又可访问吗？	为了美观牺牲可访问性，反之亦然	设计既匹配品牌美学又符合WCAG可见性要求的焦点指示器

拓展阅读

Designing with Type by James Craig -- the foundational text on typographic principles, hierarchy, and the architecture of type in design
Grid Systems in Graphic Design by Josef Muller-Brockmann -- the definitive work on grid-based composition, proportional systems, and the mathematical foundations of visual layout
The Elements of Typographic Style by Robert Bringhurst -- the typographer's bible covering rhythm, proportion, and the craft of setting type beautifully
Interaction of Color by Josef Albers -- essential reading on color perception, contrast, and how colors behave in relation to each other
Layout Essentials: 100 Design Principles for Using Grids by Beth Tondreau -- practical grid-based layout principles applied to real design scenarios
Awwwards Annual: The Best 365 Websites Around the World -- yearly collection of the web's most innovative designs, serving as a benchmark for 10/10 craft

《Designing with Type》by James Craig——排版原则、层级及设计中排版架构的基础文本
《Grid Systems in Graphic Design》by Josef Muller-Brockmann——基于网格的布局、比例系统及视觉布局数学基础的权威著作
《The Elements of Typographic Style》by Robert Bringhurst——排版师的圣经，涵盖节奏、比例及优美排版的工艺
《Interaction of Color》by Josef Albers——关于色彩感知、对比度及色彩相互作用的必读内容
《Layout Essentials: 100 Design Principles for Using Grids》by Beth Tondreau——应用于真实设计场景的实用网格布局原则
《Awwwards Annual: The Best 365 Websites Around the World》——年度网页创新设计合集，作为10分工艺的基准

About the Author

关于作者

This skill synthesizes techniques and principles from the world's most awarded digital design agencies. The primary sources are:

Locomotive (Montreal) -- pioneers of smooth scroll experiences (creators of Locomotive Scroll), known for monochromatic tension palettes, bold typography, and seamless page transitions. Their work for clients like Ubisoft and the National Film Board of Canada defines the standard for immersive web storytelling.

Studio Freight (New York) -- specialists in creative development, known for magnetic interactions, bold signature color palettes, and pushing the technical boundaries of the browser. Their open-source tools and experimental projects influence the broader creative development community.

AREA 17 (New York/Paris) -- a digital product agency known for contextual design systems that adapt to each client's identity, editorial-quality layouts, and the balance of visual ambition with functional clarity. Their work for cultural institutions and media organizations sets the bar for content-driven design.

Active Theory (Los Angeles) -- a creative studio specializing in WebGL, immersive 3D experiences, and interactive storytelling. Their work demonstrates what is possible when technical ambition meets design vision.

Hello Monday (Copenhagen/New York, now part of DEPT) -- known for playful, innovative interactions and page transitions that feel like magic. Their work for brands like Spotify, Adidas, and Google consistently wins top awards.

Additional inspiration drawn from Dogstudio (Belgium), Tonik (Poland), Instrument (Portland), Resn (New Zealand), and the broader community of Awwwards, FWA, CSS Design Awards, and Webby Award winners whose collective work establishes the evolving standard for world-class digital craft.

本技能综合了世界顶级获奖数字设计机构的技术与原则。主要来源包括：

Locomotive（蒙特利尔）——平滑滚动体验的先驱（Locomotive Scroll的创造者），以单色张力调色板、大胆排版及无缝页面过渡闻名。他们为Ubisoft和加拿大国家电影局等客户所做的工作定义了沉浸式网页叙事的标准。

Studio Freight（纽约）——创意开发专家，以磁吸交互、大胆标志性色彩搭配及突破浏览器技术边界闻名。他们的开源工具和实验项目影响了更广泛的创意开发社区。

AREA 17（纽约/巴黎）——数字产品机构，以适应每个客户身份的场景化设计系统、编辑级布局及视觉野心与功能清晰度的平衡闻名。他们为文化机构和媒体组织所做的工作为内容驱动的设计设定了标杆。

Active Theory（洛杉矶）——专注于WebGL、沉浸式3D体验及交互式叙事的创意工作室。他们的作品展示了技术野心与设计愿景结合的可能性。

Hello Monday（哥本哈根/纽约，现隶属于DEPT）——以俏皮、创新的交互和如魔法般的页面过渡闻名。他们为Spotify、Adidas和Google等品牌所做的工作持续斩获顶级奖项。

额外灵感来自Dogstudio（比利时）、Tonik（波兰）、Instrument（波特兰）、Resn（新西兰），以及更广泛的Awwwards、FWA、CSS Design Awards和Webby Award获奖者社区，他们的集体工作建立了世界级数字工艺的不断发展的标准。

Overview

概述

Create award-winning, immersive web experiences at the level of Awwwards-featured agencies.

打造可媲美Awwwards推荐机构水准的获奖级沉浸式网页体验。

Prerequisites

前置条件

Access to the ORM environment or API
Required CLI tools installed and authenticated
Familiarity with ORM concepts and terminology

访问ORM环境或API
已安装并验证所需CLI工具
熟悉ORM概念和术语

Instructions

说明

Assess the current state of the ORM configuration
Identify the specific requirements and constraints
Apply the recommended patterns from this skill
Validate the changes against expected behavior
Document the configuration for team reference

评估ORM配置的当前状态
确定具体需求和约束
应用本技能中推荐的模式
根据预期行为验证更改
记录配置供团队参考

Output

输出

Configuration files or code changes applied to the project
Validation report confirming correct implementation
Summary of changes made and their rationale

See ORM implementation details for output format specifications.

应用于项目的配置文件或代码更改
确认正确实现的验证报告
所做更改及其理由的摘要

查看ORM实现细节获取输出格式规范。

Error Handling

错误处理

Error	Cause	Resolution
Authentication failure	Invalid or expired credentials	Refresh tokens or re-authenticate with ORM
Configuration conflict	Incompatible settings detected	Review and resolve conflicting parameters
Resource not found	Referenced resource missing	Verify resource exists and permissions are correct

错误	原因	解决方案
认证失败	凭据无效或过期	刷新令牌或重新认证ORM
配置冲突	检测到不兼容设置	审查并解决冲突参数
资源未找到	引用的资源缺失	验证资源存在且权限正确

Examples

示例

Basic usage: Apply top design to a standard project setup with default configuration options.

Advanced scenario: Customize top design for production environments with multiple constraints and team-specific requirements.

基础用法：将顶级设计应用于具有默认配置选项的标准项目设置。

高级场景：为具有多个约束和团队特定需求的生产环境自定义顶级设计。

Resources

资源

Official ORM documentation
Community best practices and patterns
Related skills in this plugin pack

官方ORM文档
社区最佳实践和模式
此插件包中的相关技能

top-design

Original

Translation

Top-Design: Award-Winning Digital Experiences

Top-Design：获奖级数字体验

Core Principle

核心原则

Scoring

评分体系

Scoring Rubric

评分等级

Category Scoring (Each 0-10)

分项评分（每项0-10分）

Quick Score Formula

快速评分公式

The Seven Pillars of 10/10 Design

10分设计的七大支柱

1. Typography as Architecture

1. 排版即架构

2. Layout & Composition

2. 布局与排版

3. Motion & Animation

3. 动效与动画

4. Color & Contrast

4. 色彩与对比度

5. Scroll-Based Design

5. 基于滚动的设计

6. Performance & Loading

6. 性能与加载

7. Micro-Interactions

7. 微交互

Design Process

设计流程

1. Concept First, Code Second

1. 先概念，后代码

2. Design the Signature Moment First

2. 先设计标志性时刻

3. Typography Sets Everything

3. 排版决定一切

4. Motion Is Not Polish

4. 动效并非修饰

5. Ship With Restraint

5. 克制交付

Implementation Notes

实现说明

Reference Files

参考文件

Common Mistakes

常见错误

Quick Diagnostic

快速诊断

Further Reading

拓展阅读

About the Author

关于作者

Overview

概述

Prerequisites

前置条件

Instructions

说明

Output

输出

Error Handling

错误处理

Examples

示例

Resources

资源