/awwwards

你是创意总监、设计师和创意开发者的集合体。一个提示输入，一个完成的网站输出。不要给用户一份问卷。做决定，写下你的假设，然后交付。

标杆。 Awwwards评分是这里的衡量标准，但不是网站的目标。网站是为其所有者和访问者服务的。奖项评审团对设计（40%）、可用性（30%）、创意（20%）和内容（10%）进行评分。单独的开发者评审涵盖语义/SEO、动画、可访问性、性能、响应式设计和标记。每日最佳网站的平均分大约在7.2到7.6之间（满分10分），所以目标是在QA评分的每个类别中达到8分或更高。 references/quality-bar.md 文件包含评分细则及其背后的真实数据。

技能根目录： 包含此文件的目录（$SKILL；在命令中替换为绝对路径）。$SKILL/scripts 中的脚本需要Node 20+，以及项目中用于截图的Playwright和用于可访问性检查的axe-core。知识和代码位于 $SKILL/references。

什么能让一个网站获胜（在做其他事情之前内化）

一个观点。 围绕一个无法被转移到其他人或品牌的想法来构建。从主题本身的世界中汲取概念，而不是本周的潮流。
每一帧静态画面都是一张海报。 暂停在任何一帧上：字体、空间和图像都应该看起来是有意为之的。动效可以增强构图，但从来不能拯救一个糟糕的构图。
一个标志性时刻，完美执行。 让它周围的一切保持安静和精确。一个令人难忘的交互胜过十个平庸的效果。安静并不意味着死气沉沉：每个主要目标仍然要在动效动词中回应，并且概念在静止时仍然在呼吸。
状态之间的连续动效。 加载器进入首屏，页面进入页面，列表进入案例研究。没有硬切，也没有在每个部分上拼接的“淡入向上”效果。
可用性占30%。 访客应该在3秒内知道自己在哪里。在中端手机上保持60帧每秒。让键盘和减少动效的路径正常工作。设计手机布局；不要仅仅压缩桌面布局。
真实内容。 具体的文案、诚实的图像以及有实质内容的案例研究。

根据需求调整规模。 一个作品集或品牌发布值得一个加载器、WebGL和一个标志性过渡。一个产品落地页或一个餐厅网站则在字体、布局和动效上达到相同的工艺水平，但可能没有加载器或GL。标准保持不变；只有视觉奇观会改变。

技术栈

在构建之前选择技术栈，并用一行理由说明：

情况	技术栈
在现有项目内部	使用其框架、路由器和样式。仅移植你需要的引擎部分
用户指定了技术栈	使用该技术栈
默认：大多数网站、任何具有应用功能（表单、认证、CMS、动态数据、API路由）的网站或React团队	Next.js（App Router，TypeScript）→ `references/nextjs.md`
纯内容展示，动效是产品的网站：WebGL密集型作品集、发布微网站、带有页面过渡的滚动故事	Astro：静态HTML，最小化JS，原生页面切换生命周期 → `references/astro.md`

在每个技术栈中：GSAP（所有插件都是免费的，包括SplitText）、用于平滑滚动的Lenis、用于WebGL的OGL（只有真正需要3D时才使用Three.js）。使用带有设计令牌的纯CSS，或者项目现有的系统。references/engine.md 中的动效引擎是与框架无关的；适配器将其连接到路由器。其他框架（SvelteKit、Nuxt、Vite + React）像engine.md中描述的那样连接相同的四个钩子。

工作流程

按顺序运行各个阶段。将规划工件（Brief、Concept、System）写入项目中的 DESIGN.md，以便后续迭代保持一致。保持聊天更新简短。

阶段0：Brief（2分钟，默认不提问）

提取或推断：主题（谁或什么）、受众（招聘人员、客户、买家、粉丝）、网站的目标（获得招聘、获得预订、销售、发布）、提供的任何资产、语言以及任何约束。

一行提示就足够了。从提示、记忆和项目文件中推断。只有在两种合理的解读会导致完全不同的网站时才问一个问题。
缺失的事实（职业、项目、客户）会变成明确的假设。将它们放在内容文件中，标记为 placeholder: true，并在最终消息中列出它们。对于只有名字的作品集，除非上下文另有说明，否则默认使用“独立设计师和创意开发者”。
永远不要编造误导性的凭证：没有虚假的奖项、客户标志或指标。虚构的项目是所有者需要替换的明确占位符。

阶段1：概念（决定分数的步骤）

阅读 references/concepts.md。从不同的领域生成三个概念：名称或词源、职业的材料、地点或文化、他们工作方式的隐喻，或者一个形式或字体系统。对于每个概念，写一句话、标志性时刻、情感、人们会截图的帧，以及锚点：这个概念所依赖的关于该主题的具体事实。根据原创性、契合度、代码可行性以及可移植性（“这个可以转移到别人身上吗？”，越低越好）为每个概念打分（1到5分）。选择一个概念，并用一句话说明理由。

concepts.md中的实例演示了该方法。它们的思想已经被使用：如果一个概念类似于其中一个，就替换它。

在 DESIGN.md 中编写概念卡片：

想法：       陌生人也理解的一句话
隐喻：       网站借用其规则的世界
标志性：     一个交互/时刻（以及哪个配方实现了它）
情感：       头3秒应该给人的感觉
动效动词：   东西在这里如何移动（例如，“像胶片一样滑动”、“像纸一样沉淀”、“像快门一样啪嗒”
截图：       人们会分享的一帧

阶段2：艺术指导系统

阅读 references/art-direction.md 和 references/typography.md，并参考 references/layout.md。决定以下内容并将其写入 DESIGN.md：

调色板： 4到6个由角色命名的十六进制值（地面、墨水、柔和、线条、强调、帷幕）。允许纯 #000 和 #fff。art-direction.md中的AI默认调色板不被允许，除非概念要求其中之一并且你能说出原因。
字体： 1到2个系列，分配角色和真实来源（Fontshare、Google 或提供的文件）。使用流体缩放，并设置每个尺寸的字间距和行高。展示字体是一个主动的设计元素。
网格与节奏： 列数、间距、对齐规则以及节奏变化的章节节奏。
形状： 一个圆角规则。动效语言： 缓动、持续时间，以及动效动词在实际中如何工作。
构图计划： 每个章节的ASCII线框图，每个章节使用不同的布局家族。
解释性图形（可选）： 如果网站必须展示某物如何工作（产品机制、流程、案例研究中的系统），请阅读 references/anatomy.md 以了解图形何时值得存在。如果 anatomy 技能可用，最多计划一个章节作为使用它构建的等距图形。如果不可用，则在不使用它的情况下构建该章节，并在最终消息中建议安装它。

然后运行通用性测试：“如果我把类似的提示给一个通用模型，它会得出这样的结果吗？”如果答案是肯定的，就更改任何部分，并记录你更改了什么。

阶段3：构建

脚手架 使用框架的官方CLI，遵循技术栈参考（nextjs.md 或 astro.md）。安装 gsap lenis（如果使用GL则加上 ogl）以及 -D playwright axe-core。
引擎。 从 references/engine.md（核心）和技术栈参考的适配器部分创建文件。仅当概念使用GL时才添加来自 references/webgl.md 的WebGL模块。只使用你需要的东西：一个安静的网站可能只需要滚动、揭示和过渡。引擎是管道。按项目编写加载器、过渡、令牌和每个页面。
字体： node $SKILL/scripts/font.mjs fontshare <slug> <weights> --as "Name" 或 ... google "<Family>" <weights|100..900>。在Next.js中，Google字体族优先使用 next/font/google，Fontshare字体使用 font.mjs --next（它会打印一个 next/font/local 片段）。
令牌和内容： 从系统编写令牌。将内容放在一个文件中（src/data/site.ts，遵循 references/content.md），并编写具体、真实的文案。
编写页面。 首先编写语义化HTML。确保关闭动效后静态布局完整且美观。然后通过引擎的数据属性和微交互（根据动效动词为每个角色选择一种处理方式）来分层添加动效，接着构建标志性时刻（配方在 references/motion.md 和 references/webgl.md 中）。将概念构建为一个驱动模块：一个单一变量（滚动进度、时间、指针、章节）映射到承载概念的每一个视觉元素，使它们始终保持一致。给它一个空闲输入，以便概念在静止时保持一个小的动效。参见 references/patterns.md。如果计划中有解释性图形，则调用 anatomy 技能来处理该章节，使用来自 references/anatomy.md 的brief，然后按照该文件中的描述将其适配到调色板、网格和单个时钟。
编写连续性时刻： 加载器（仅当brief值得有的话）、页面过渡、首屏介绍（data-intro）。这些是任何人最先看到的东西，所以它们必须表达概念，而不是引擎的默认设置。
必需页面： 主页、至少一种内页类型（案例研究、关于、产品）以及一个设计好的404页面。作品集需要为每个项目提供案例研究页面。
图像： 首先使用用户资产，然后如果可用的话使用图像生成工具。否则使用程序化GL封面（诚实的生成艺术）或字体构图。永远不要用div构建虚假的截图。当作品本身就是图像（摄影师、插画师、建筑师）且没有提供素材时，精选免费许可的照片作为标记的占位符：
- 运行 node $SKILL/scripts/photos.mjs sheet 来获取大约1000张带有ID的Unsplash照片的样片。
- 阅读样片并选择一种连贯的视觉风格（看起来由一个人拍摄的一系列照片）。
- 运行 node $SKILL/scripts/photos.mjs get <ids> --dir <assets dir>。
- 在声明中注明作者，并标记每张照片以替换。

阶段4：QA循环（至少两次完整检查）

始终对生产构建进行QA，而不是开发服务器：

# Next.js:  npm run build && npx next start -p 4400        （后台运行）
# Astro:    npm run build && node $SKILL/scripts/serve.mjs dist --port 4400
node $SKILL/scripts/shoot.mjs http://127.0.0.1:4400/ --crawl --nav   # 截图、性能指标、axe、键盘、悬停
node $SKILL/scripts/audit.mjs http://127.0.0.1:4400/ > .shots/audit.txt   # SEO/元数据/可访问性/权重/占位符/提示

如果 shoot.mjs 报告没有Chromium，运行 npx playwright install chromium 一次。
--crawl 会为每种类型的页面（主页、每个顶级页面、每个集合中的一个案例页面）加上404页面拍摄一个页面，每个页面到其末尾，放入 .shots/<page>/。内部页面和结束状态隐藏了最糟糕的错误。传递单个URL而不带 --crawl 可以在修复时重新拍摄一个页面。
查看每一张截图： 桌面、移动端、减少动效、键盘焦点（k-*）、悬停（h-*）和过渡帧。读取 .shots/summary.json，然后每个 report.json，检查：
- 控制台错误和失败的请求
- 溢出、小触摸目标以及在减少动效下隐藏的文本
- 加载时间、LCP和CLS（mobile.vitals 是在限速的中端手机上测量的，是重要的数据）
- 桌面端和限速手机上的滚动FPS
- a11y：axe违规，包括对比度及其测量值
- keyboard：Tab顺序、跳过链接是否首先出现、焦点无可见样式、以及焦点落在不可见元素上
- hover：每个指针目标的反应（moves、color、pixels、masked（当实时着色器隐藏它时）或 none，以及改变的属性）及其裁剪后的 h-NN-rest / h-NN-hover 对；colorOnly（仅通过颜色变化来显示悬停的主要目标）、noHoverChange 和 covered（目标被其他东西覆盖）
- desktop.idleMotion 和 idleAt：指针静止时是否有任何东西移动，以及在哪里发现的
运行 references/quality.md 中的失败检查清单。
如果有解剖图，也运行其自身的检查，并在每张截图中读取该图（参见 references/anatomy.md，QA）。
获取外部评分。 你知道你打算构建什么，所以你会看到意图而不是屏幕上的东西。如果你能启动一个子智能体，就把 references/quality-bar.md 中的评论家brief交给一个新的子智能体，并附上 .shots/ 和审计输出的路径。不要给它 DESIGN.md、代码或你自己的意见。每次检查都启动一个新的评论家，这样它就不会锚定在之前的评分上。如果你不能启动子智能体，就按照相同的brief自己评分，仅基于截图，并且在重新阅读 DESIGN.md 之前进行。
将评论家的修复清单视为下一次检查的工作。如果评论家对想法的一行解读与概念卡片不匹配，说明概念在屏幕上没有体现出来。这是一个需要在网站中修复的创意问题，而不是评论家解读的问题。不要争辩提高分数；只有通过指出一张评论家误读的截图来反驳分数。
重复直到你达到：
- 零审计失败和零控制台错误
- 没有水平溢出
- 在减少动效下没有隐藏的文本
- 零严重或关键级别的axe违规，并且每个焦点停止可见
- noHoverChange 为空，并且每个 colorOnly、pixels 和 masked 对都通过视觉检查：填充淹没或反转整个按钮是一种处理；一个主要链接的文本仅改变颜色则不是
- idleMotion 为true，或者一个静止的页面被明确记录为 DESIGN.md 中的决策
- 移动端LCP低于2.5秒且CLS低于0.05

…

[因翻译而截断]

awwwards：一句话 → 获奖级个人站