top-design by wondelai/skills
npx skills add https://github.com/wondelai/skills --skill top-design打造达到世界级数字机构水准的网站和应用程序。此技能体现了那些持续赢得 FWA、Awwwards、CSS Design Awards 和 Webby Awards 奖项的工作室的精湛技艺。
每个像素都经过深思熟虑——没有默认,没有偶然。 你所效仿的机构——Locomotive、Studio Freight、AREA 17、Active Theory、Hello Monday——拥有共同的基因:排版即设计(不是装饰,而是架构),动效创造情感(动画服务于叙事,而非新奇),留白是一种武器(通过克制制造张力),性能不容妥协(60fps 或一无所有)。
基础: 区分 10/10 和 8/10 的不是渐进式的改进,而是质的飞跃。8/10 的设计拥有良好的排版、漂亮的颜色和流畅的动画。10/10 的设计拥有令人惊叹的排版、感觉为此特定项目而生的色彩以及讲述故事的动画。差距不在于技能——而在于意图。10/10 水平的每个决策都回答了这个问题:“这是服务于体验,还是仅仅在填充空间?”
目标:10/10。 在评审或创建数字体验时,请使用以下评分标准对其进行 0-10 分评级。10/10 意味着该设计将在 Awwwards 上被推荐。始终提供当前分数以及达到 10/10 所需的具体改进。
| 分数 | 等级 | 描述 |
|---|---|---|
| 0-2 | 业余 | 默认字体,无层次结构,通用布局,模板感 |
| 3-4 | 基础 | 体面的排版,有一定层次感,但容易被遗忘 |
| 5-6 | 合格 | 良好的基础,干净的实现,但缺乏灵魂 |
| 7-8 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 专业 |
| 强烈的排版,有意的动效,清晰的观点 |
| 9 | 卓越 | 标志性时刻,令人难忘的细节,近乎完美的工艺 |
| 10 | 世界级 | 将赢得 Awwwards 当日最佳,定义新标准 |
排版(权重: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 | 考虑到了每一个微小的细节——焦点状态、加载状态、空状态、滚动指示器 |
Total = (Typography x 0.25) + (Composition x 0.25) + (Motion x 0.20) + (Color x 0.15) + (Details x 0.15)
核心理念: 排版不是叠加在设计上的装饰——它本身就是设计。你选择的字体、设定的比例以及精炼的字距决定了其他一切:调色板的情绪、动画风格、间距节奏和整体个性。当有人滚动经过你的主视觉区而没有停下来时,你的排版就失败了。
为何有效: 戏剧性的比例对比能立即创建视觉层次,即使在内容模糊或从远处观看时也能传达信息。紧密字距的大号展示字体像建筑主宰天际线一样吸引注意力,而亲密的正文则将读者吸引到内容中。这种宏伟与个人之间的张力正是让人们停止滚动的原因。
关键见解:
产品应用:
| 情境 | 应用 | 示例 |
|---|---|---|
| 作品集主视觉 | 充满视口的展示字体,比例急剧下降到正文 | Locomotive.ca 主视觉排版 |
| 品牌网站 | 悬停时带有字重动画的自定义/可变字体 | Studio Freight 交互式字体 |
| 产品着陆页 | 紧密的展示字体字距,宽松的正文间距 | Apple 产品页面 |
| 编辑布局 | 衬线/无衬线字体搭配,极端的比例对比 | AREA 17 案例研究 |
| 文化机构 | 成为视觉标识的声明性排版 | Hello Monday 博物馆网站 |
| 科技初创公司 | 建筑级比例的优质几何无衬线字体 | Stripe 排版系统 |
文案模式:
道德边界: 排版选择应增强可读性和可访问性,不能为了美学新奇而牺牲易读性。确保正文文本满足 WCAG 对比度要求,并在标准观看距离下保持可读性。
参见:references/typography.md 了解字体搭配策略、字体比例系统和高级 CSS 排版。
核心理念: 掌握网格,以便有意识地打破它。每一次打破都应感觉是刻意的,而非偶然。密度与呼吸空间的节奏——充满视口的主视觉、亲密的文本部分、巨大的单个词语、密集的网格——创造了一种能保持注意力的阅读体验。
为何有效: 留白不是空白的空间——它是活跃的设计材料,能创造张力、控制节奏并让观众投入。不对称布局产生的视觉能量是居中、对称构图无法实现的。当元素有意识地重叠、溢出或延伸到容器之外时,设计会感觉生动而自信,而不是受限的。
关键见解:
产品应用:
| 情境 | 应用 | 示例 |
|---|---|---|
| 主视觉区 | 偏移的标题与溢出的图像 | margin-left: 8.33%; margin-right: -5vw |
| 作品集网格 | 具有意不对称性的不同卡片尺寸 | Locomotive 项目展示 |
| 区块过渡 | 密集与呼吸区块之间的比例变化 | Studio Freight 滚动构图 |
| 图片库 | 混合全出血和包含的图像 | AREA 17 编辑布局 |
| 功能展示 | 创造深度的重叠元素 | Active Theory 分层构图 |
| 导航 | 具有戏剧性比例的不对称巨型菜单 | Hello Monday 导航系统 |
文案模式:
道德边界: 布局实验不能损害导航的清晰度或内容的可访问性。无论构图选择如何,用户应始终理解他们在哪里、如何前进以及如何访问关键信息。
参见:references/layout-systems.md 了解网格框架、断点和响应式模式。
核心理念: 每个动画都必须回答“为什么这个要动?”动效不是最后添加的润色——它是设计的核心,应尽早原型化并与视觉设计同步开发。精英动效的三条法则是:目的重于装饰、自定义曲线(绝不线性)、编排重于孤立。
为何有效: 精心编排的动效创造了电影般的体验,引导注意力、传达层次结构并产生情感共鸣。当元素相互关联地动画,而不是独立动画时,结果会感觉连贯且有意图。自定义缓动曲线(指数、四次)赋予运动一种物理质感,这是默认浏览器缓动无法实现的。
关键见解:
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)(指数进出)产品应用:
| 情境 | 应用 | 示例 |
|---|---|---|
| 页面加载 | 精心编排的错开揭示序列 | Studio Freight 入场动画 |
| 滚动区块 | 带有渐进式揭示的固定叙事 | Locomotive 滚动体验 |
| 导航 | 带有自定义光标的磁性悬停效果 | Active Theory 交互式导航 |
| 图像揭示 | 滚动进入时的裁剪路径或遮罩动画 | AREA 17 案例研究揭示 |
| 页面过渡 | 无缝的跨页面动画连续性 | Hello Monday 页面变形 |
| 微交互 | 悬停字重变化,按钮磁性效果 | Dogstudio 交互细节 |
文案模式:
道德边界: 动效绝不能阻碍交互、引起晕动症或阻止用户访问内容。始终尊重 prefers-reduced-motion 并确保所有内容在没有动画的情况下也可访问。超过 1.2 秒的动画需要明确的理由。
参见:references/animation-patterns.md 了解滚动动画、页面过渡和带有代码的微交互。
核心理念: 色彩应感觉是为每个特定项目而创造的——而不是从通用调色板生成器中提取的。三种方法是:单色调张力(95% 一种主色,5% 突出的强调色)、大胆的标志性色彩(拥有一种色彩组合并使其独一无二)以及情境变化(色彩响应内容,不同区块拥有不同的调色板)。
为何有效: 色彩在阅读任何文字之前就创造了氛围。当色彩感觉被特定项目拥有时,它们就成为品牌标识的一部分。纯黑(#000000)和纯白(#ffffff)感觉数字化且无生气;略微温暖的变体(#0a0a0a, #fafaf9)感觉有质感且经过深思熟虑。克制地使用单一强调色创造惊喜时刻,将视线精确地吸引到预期位置。
关键见解:
产品应用:
| 情境 | 应用 | 示例 |
|---|---|---|
| 机构作品集 | 单色调搭配标志性强调色 | Locomotive:奶油色 + 黑色 + 橙色火花 |
| 品牌标识 | 大胆的专属色彩组合 | Studio Freight:黑色 + 奶油色 + 铁锈色 |
| 客户展示 | 每个案例研究的情境变化 | AREA 17:为每个客户调整调色板 |
| 产品着陆页 | 深色模式搭配单一鲜艳强调色 | Stripe:深海军蓝 + 标志性紫色 |
| 文化网站 | 源自素材的丰富色调调色板 | Hello Monday:从艺术/内容中提取的调色板 |
| 科技产品 | 极简中性色搭配功能性强调色 | Linear:灰度 + 标志性蓝色 |
文案模式:
--color-dark、--color-light、--color-accent--color-text-primary、--color-text-secondary、--color-surfacergba(10, 10, 10, 0.6))实现一致的次/三级文本道德边界: 色彩选择必须至少满足 WCAG 2.1 AA 对比度要求。氛围设计不能以牺牲视障用户的可读性为代价。使用对比度检查器测试所有色彩组合。
参见:references/case-studies.md 了解包括色彩系统分析在内的机构技术分解。
核心理念: 滚动是网络上的主要交互方式,它应该感觉是经过设计的,而不是默认的。最佳的数字体验将滚动视为一种叙事工具——控制节奏、创造揭示效果、制造张力,并提供与滚动位置相关的标志性时刻。
为何有效: 默认浏览器滚动是机械且均匀的,将所有内容视为同等重要。自定义滚动行为(通过 Lenis 或 Locomotive Scroll)创造了一种平滑、有重量的感觉,模仿了物理对象。当滚动位置驱动动画、揭示效果和过渡时,用户在内容中的移动变成了一种主动的、参与式的体验,而不是被动的消费。
关键见解:
产品应用:
| 情境 | 应用 | 示例 |
|---|---|---|
| 产品故事 | 带有滚动驱动内容变换的固定主视觉 | Apple 产品深度解析 |
| 作品集 | 与滚动位置绑定的渐进式图像揭示 | Locomotive 项目展示 |
| 编辑 | 仅用于装饰性元素的视差深度 | AREA 17 编辑布局 |
| 着陆页 | 带有清晰示能性的水平滚动画廊 | Studio Freight 作品画廊 |
| 品牌叙事 | 滚动驱动的动画序列 | Active Theory 沉浸式故事 |
| 功能导览 | 与滚动进度绑定的逐步揭示 | Stripe 功能展示 |
文案模式:
data-scroll、data-scroll-speed 和 data-scroll-direction 属性声明滚动行为道德边界: 阻止用户按自己节奏滚动的滚动劫持是敌对的用户体验。自定义滚动应增强体验,而不是困住用户。始终允许用户自由滚动浏览内容,并且绝不要让滚动驱动动画成为访问信息的必要条件。
参见:references/animation-patterns.md 了解滚动动画实现模式。
核心理念: 性能不是一个优化步骤——它是从一开始就存在的设计约束。一个掉帧的美丽动画、一个导致布局偏移的惊艳字体,或一张需要三秒加载的华丽图片,都未能通过工艺测试。60fps 是底线,而不是上限。
为何有效: 用户将性能感知为质量。一个即时加载且滚动流畅的网站感觉是优质的,无论其视觉复杂度如何。相反,一个视觉惊艳但卡顿或延迟的网站感觉是损坏的。最好的机构通过将性能作为一流的设计决策来实现视觉野心和技术性能:选择 GPU 加速的属性、子集化字体、优化图像并在真实设备上测试。
关键见解:
font-display: swap 或 optional,并预加载关键字体文件srcset,并懒加载首屏以下的图像transform 和 opacity 进行动画;绝不要对 width、height、top、left 或 margin 进行动画产品应用:
| 情境 | 应用 | 示例 |
|---|---|---|
| 字体加载 | 子集化、预加载和交换策略 | <link rel="preload" as="font" crossorigin> |
| 图像交付 | 带有响应式 srcset 的 AVIF/WebP | 带有格式后备的 <picture> 元素 |
| 动画性能 | 仅 GPU 属性配合 will-change 提示 | transform: translate3d() + opacity |
| 布局稳定性 | 宽高比和最小高度预留 | 图像容器上的 aspect-ratio: 16/9 |
| 加载体验 | 设计的骨架屏和进度指示器 | 自定义品牌化加载动画 |
| 包优化 | 代码分割、摇树优化、延迟非关键 JS | 首屏以下交互性的动态导入 |
文案模式:
loading="lazy"will-change,且仅用于即将动画的元素道德边界: 性能优化绝不能剥离可访问性功能、跳过语义化 HTML 或移除有意义的内容。快速但不可访问不是一个有效的权衡。
参见:references/technical-stack.md 了解库、工具和性能优化技术。
核心理念: 体现工艺的细节存在于大多数设计师忽略的 1% 中:品牌化的选中颜色、磁性按钮效果、精心设计的焦点状态、考虑周到的加载状态、精心制作的错误页面以及正确的微排版。这些细节是专业与世界级之间的区别。
重要提示:自定义光标仅限选择加入。 除非用户明确请求或确认他们想要一个,否则不要实现自定义光标(用自定义元素替换原生光标)。自定义光标可能会损害可用性、使用户困惑,并且在应用不当时显得花哨。在添加自定义光标之前,务必询问用户。
为何有效: 微交互创造了一种每个像素都被考虑到的感觉。当光标在悬停时改变、当文本选择具有品牌化的颜色、当按钮有微妙的磁性吸引、当焦点状态既美观又可访问时,用户就能感受到体验中蕴含的用心。这些细节会叠加——单独看很微妙,但整体上具有变革性。
关键见解:
::selection 颜色,在所有背景上都表现良好text-wrap: balance产品应用:
| 情境 | 应用 | 示例 |
|---|---|---|
| 光标 | 带有交互元素变体的自定义光标(选择加入——首先与用户确认) | Dogstudio 自定义光标系统 |
| 选中 | 品牌化的 ::selection 背景色 | 在所有表面上都有效的品牌化高亮 |
| 按钮 | 带有微妙吸引力的磁性悬停效果 | Studio Freight 磁性按钮 |
| 焦点 | 匹配品牌的样式化 focus-visible 轮廓 | 可访问 + 美观的焦点指示器 |
| 加载 | 自定义骨架屏和进度条 | Locomotive 品牌化加载序列 |
| 错误状态 | 精心设计的 404 和错误页面 | 令人难忘、符合品牌的错误体验 |
文案模式:
::selection { background: var(--color-accent); color: var(--color-light); }cursor: none;,自定义光标 div 跟随鼠标位置(仅当用户确认他们想要自定义光标时)“ 和 ” 或配置构建工具自动转换道德边界: 微交互必须增强可用性,而不是阻碍它。自定义光标必须仅在用户明确请求或批准时实现,并且在使用时必须保持功能性和可见性。焦点状态必须满足可访问性要求——美观不能替代可见性。精心设计的错误状态必须真正有帮助,而不仅仅是巧妙。
参见:references/case-studies.md 了解关于微交互实现的机构技术分解。
在任何代码之前,定义:
BRAND ESSENCE: 哪个词抓住了灵魂?
VISUAL TENSION: 哪些对立的力量创造了趣味?
SIGNATURE MOMENT: 人们会截图并分享什么?
TECHNICAL AMBITION: 什么会挑战浏览器的极限?
不要从页眉开始。从定义体验的那个东西开始。页眉可以稍后解决。每个 10/10 项目至少有一个让人们停下来分享的时刻:前所未见的主视觉动画、大胆到成为视觉本身的排版、意想不到的愉悦交互、讲述故事的滚动序列,或感觉像魔术般的过渡。
识别你标志性时刻的问题:
首先选择你的展示字体。让它决定调色板的情绪、动画风格、间距节奏和整体个性。
尽早原型化动画。动效设计与视觉设计同步进行,而不是之后。
3 样东西完美胜过 10 样东西平庸。无情地削减。
查阅这些文件以获取详细实现:
| 错误 | 为何失败 | 修复方法 |
|---|---|---|
| 使用 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 渐变”——立刻传递出通用、追随潮流的设计信号 | 开发针对项目的标志性色彩方案 |
| 整个体验中没有标志性时刻 | 没有值得截图的时刻,设计是合格的但容易被遗忘 | 首先设计标志性时刻——人们会逆向工程的那个东西 |
| 专业界面中使用任何表情符号 | 表情符号传递出随意/业余的工艺感,破坏优质定位 | 使用自定义图标或排版处理方式 |
| 对文本和关键内容使用视差 | 对可读内容使用视差会导致晕动症和可访问性问题 | 仅将视差保留用于装饰性的、非必要的背景元素 |
| 动画阻碍用户交互 | 阻止滚动、点击或阅读的动效是敌对的用户体验 | 确保所有动画都是非阻塞的;内容在过渡期间保持可访问 |
| 未经修改地使用 Font Awesome 图标 | 通用图标集传递出模板级设计的信号 | 创建自定义图标或大量定制现有图标以匹配品牌个性 |
| 默认表单样式 | 未样式化的表单元素立即打破工艺的幻觉 | 将每个输入框、选择框、复选框和按钮都设计成品牌化的体验 |
| 问题 | 如果否 | 行动 |
|---|---|---|
| 主视觉排版是否能让某人在滚动中途停下来? | 展示字体不够有吸引力 | 将比例对比推到 10:1+,选择更具特色的字体,充满视口 |
| 有人会截图任何区块并分享吗? | 不存在标志性时刻 | 确定一个区块使其变得非凡——一个动画、比例变化或交互 |
| 当你眯起眼睛时,设计是否仍然清晰可辨? | 层次结构太平坦 | 增加层级间的对比度——更大的标题、更多的留白、更强的强调色 |
所有缓动曲线都是自定义的吗(没有 ease 或 linear)? | 动效感觉默认且机械 | 替换为指数出(0.16, 1, 0.3, 1)或四次出(0.25, 1, 0.5, 1) |
| 构图中是否存在不对称的张力? | 布局感觉安全且对称 | 将元素从中心偏移,让图像溢出,变化区块密度 |
| 色彩是否感觉为此项目而生? | 调色板可能属于任何品牌 | 开发标志性的色彩标识:单色调张力、大胆的标志性色彩或情境变化 |
| 页面加载是否经过编排(不是同时出现)? | 元素同时弹出 | 实现错开揭示:首先是结构,然后是主视觉,接着是支持元素 |
| 滚动感觉是自定义且有重量的吗? | 使用默认浏览器滚动 | 实现 Lenis 或 Locomotive Scroll,获得平滑、物理感的滚动行为 |
| 考虑了微细节吗(选中、焦点、光标)? | 保留了默认浏览器行为 | 添加品牌化的选中颜色、精心设计的焦点状态和经过考虑的光标行为(在添加自定义光标前询问用户) |
| CLS 是否接近零且 LCP 低于 2.5 秒? | 性能损害了感知质量 | 子集化字体,优化图像(WebP/AVIF),仅对 transform/opacity 进行动画 |
| 每个动画都回答了“为什么这个要动?”吗? | 动效是装饰性的,而非有目的的 | 移除那些不服务于叙事、层次结构或用户引导的动画 |
| 焦点状态既美观又可访问吗? | 为了美学牺牲了可访问性,反之亦然 | 设计既匹配品牌美学又满足 WCAG 可见性要求的焦点指示器 |
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.
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?"
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.
| 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 |
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 | Magnetic buttons, branded selection colors, custom cursor (if user-approved) |
| 9-10 | Every micro-detail considered -- focus states, loading, empty states, scroll indicators |
Total = (Typography x 0.25) + (Composition x 0.25) + (Motion x 0.20) + (Color x 0.15) + (Details x 0.15)
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:
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:
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.
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:
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:
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.
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:
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)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:
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.
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:
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:
--color-dark, --color-light, --color-accent--color-text-primary, --color-text-secondary, --color-surfacergba(10, 10, 10, 0.6)) for consistent secondary/tertiary textEthical 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.
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:
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:
data-scroll, data-scroll-speed, and data-scroll-direction attributes for declarative scroll behaviorEthical 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.
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:
font-display: swap or optional, and preload critical font filessrcset, and lazy-load below-the-fold imagestransform and opacity; never animate width, height, top, left, or marginProduct 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 |
Copy patterns:
loading="lazy" on all images below the foldwill-change sparingly and only on elements about to animateEthical 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.
Core concept: The details that signal craft live in the 1% that most designers skip: 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.
IMPORTANT: Custom cursors are OPT-IN only. Do not implement custom cursors (replacing the native cursor with a custom element) unless the user explicitly requests or confirms they want one. Custom cursors can hurt usability, confuse users, and feel gimmicky when misapplied. Always ask the user before adding a custom cursor.
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:
::selection color that works well on all backgroundstext-wrap: balance on key textProduct applications:
| Context | Application | Example |
|---|---|---|
| Cursor | Custom cursor with interactive-element variants (opt-in -- confirm with user first) | 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 (only if user confirms they want a custom cursor)“ and ” or configure your build tool to auto-convertEthical boundary: Micro-interactions must enhance usability, not hinder it. Custom cursors must only be implemented when the user explicitly requests or approves them, and must remain functional and visible when used. 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.
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?
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:
Choose your display typeface first. Let it dictate the color palette mood, the animation style, the spacing rhythm, and the overall personality.
Prototype animations early. Motion design happens alongside visual design, not after.
3 things perfect beats 10 things mediocre. Cut ruthlessly.
Consult these for detailed implementation:
| 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 |
| 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? |
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.
Weekly Installs
490
Repository
GitHub Stars
255
First Seen
Feb 2, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode455
codex444
gemini-cli439
github-copilot425
cursor418
kimi-cli410
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
103,800 周安装
Mermaid 可视化工具 - 自动生成专业图表,优化文档与演示,兼容 Obsidian/GitHub
465 周安装
OpenAI API 完整指南:GPT-5、GPT-4o、DALL-E 3、Whisper 集成与Node.js/JavaScript开发
465 周安装
客户旅程地图制作指南:5步创建跨职能客户体验地图,提升转化与忠诚度
466 周安装
Next.js 15+ 最佳实践指南:文件约定、RSC边界、异步模式与性能优化
466 周安装
Airflow 2 到 3 迁移指南:代码变更、元数据访问与自动化升级
467 周安装
市场状态识别与交易策略推荐 - 基于价格行为与波动率的AI交易技能
467 周安装
| 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 |
| 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 |
| 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 (ask user before adding custom cursors) |
| 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 |