build-awwwards-quality-sites

打造 Awwwards 级别的网站

打造一个协调且令人难忘的网站，让视觉构想、媒体、字体和动效共同讲述同一个故事。将“Awwwards 级别”视为验收标准，绝不可将其宣称为获奖或获得认可。

1. 设定艺术指导

• 在开始实现前，完整检查用户提供的参考资料。只提取层级、节奏、对比度、图像处理和动效原则等高层次特征。
• 打造全新的视觉标识、布局、文案体系、图像和交互语言。绝不重复使用、描摹或近似复刻参考素材、截图、源代码、视觉标识或文案。
• 仅在用户提出要求或相关素材确实可用时，使用 Aura.build 顶部的素材图像。将其视为高层次灵感，而不是素材库。
• 选择并注明至少一项已安装且兼容的网页设计技能。只遵循最精简的相关技能集合，避免混用无关的美学体系。
• 编码前先写出精简的设计方向：视觉主张、主视觉焦点素材、字体层级、配色体系、版块顺序、动效叙事、选用的平滑滚动引擎、Three.js 的取舍，以及素材来源计划。

2. 构建可信的素材体系

• 如果能显著提升设计概念，就创作原创主视觉或项目图像。若授权合适的媒体素材更出色，则使用这类素材，并在网站源代码中注明来源。
• 不要使用模型创作的 SVG、CSS 或 Canvas 路径绘制插画。插画元素请使用原创生成或获得适当授权的透明 PNG 抠图。允许创作简单的品牌标志、界面图标、数据图形，以及有充分理由使用的 Three.js 着色器画布。
• 所有头像都必须使用照片。优先使用用户提供或获得适当授权的照片；绝不可使用姓名首字母、插画头像、无面部轮廓，或将生成的人物伪装成真实客户、员工或代言人。
• 界面图标使用 Solar 图标，并通过 Iconify 调用。Iconify SVG Logo 仅用于真实公司标志，且只能在符合事实的情境下使用。Logo Ipsum 仅可用于明确披露的虚构品牌样稿，绝不可用作客户背书。没有可信依据时，不要展示品牌墙。
• 明确指定纵横比、裁切方式、替代文本、加载行为和缺失媒体的回退方案。避免使用通用图库图像、照搬的模型图、水印，以及缺乏叙事作用的装饰性媒体。

3. 构建主视觉

• 将首屏打造为网站最出彩、最具原创性的呈现。将清晰的信息和 CTA 与原创图像、视频、响应指针的交互或有充分理由使用的 Three.js 场景相结合。
• 使用 GSAP 为主视觉编排完整的入场动画序列。动画结束前，导航、主要信息和 CTA 必须清晰易读且可正常使用。
• 让指针特效起到叠加增强作用。支持触屏、键盘、粗指针、窗口失焦和页面可见性变化，确保界面不会停留在未完成状态。
• 设计一个完整的静态首帧，确保在 JavaScript、媒体播放、WebGL 或动效不可用时仍然完整。

4. 构建动效系统

• 使用 GSAP 作为主要动效系统。
• 评估 Lenis 和 Locomotive Scroll，然后只选择其中一个作为网站唯一的平滑滚动引擎。切勿同时安装或初始化两者。将所选引擎正确连接到 GSAP ScrollTrigger，在媒体内容或字体变化后刷新测量结果，并在清理时销毁该引擎。
• 在 prefers-reduced-motion: reduce 下禁用平滑滚动和擦动时间轴。立即呈现最终状态，而不是仅仅缩短动画。
• 按页面各个分区编排动效。以克制的交错效果逐字揭示主要标题，然后依次呈现辅助文案和媒体内容。
• 为交错显示的文本保留一个完整、未拆分的无障碍名称。对辅助技术隐藏装饰性拆分词语，绝不拆分链接或有意义的行内标记，并确保在没有 JavaScript 时显示未拆分的内容。
• 使用 CSS 实现简单的悬停、焦点和轻触状态。仅在确有需要时使用 ScrollTrigger 实现擦动或固定序列，并避免多个系统同时控制同一属性。

5. 只在有明确目的时添加 Three.js

• 当空间纵深、纹理过渡、位移或指针响应能实质性支持艺术指导时，使用 Three.js 和自定义 WebGL 着色器。不要为了装饰性的背景噪点添加着色器。
• 让画布承担一项明确职责，并确保其从属于语义内容和控件。
• 限制设备像素比；当画布不在视口内或文档处于隐藏状态时暂停渲染；限制指针输入频率，并避免逐帧分配资源。
• 提供静态海报，并在减少动效偏好或 WebGL 故障时完全替换画布。
• 释放动画帧、观察器、事件监听器、渲染目标、纹理、几何体、材质和渲染器。处理上下文丢失时，不得影响页面内容。

6. 达到质量标准

• 构建完整的语义化页面，而不是只有主视觉区的概念稿。包含响应式导航、连贯的分区顺序、具体的转化内容、最终 CTA、页脚，以及出现时稳健的表单或控件状态，并确保键盘焦点清晰可见。
• 要求具备鲜明且经过艺术指导的创意、令人印象深刻的首屏、严谨的字体排版与间距、经过设计的图像裁切、精心编排的过渡，以及完善的悬停、焦点、激活、加载、禁用、错误、触控和减少动效行为。
• 通过响应式媒体、对首屏下方内容的延迟加载、有限的变换效果、少量模糊、受限的画布渲染，以及不持续播放视口外动画来保证性能。
• 拒绝通用的渐变色块、装饰性 Bento 网格、无处不在的玻璃质感、现成组件布局、虚构的用户评价、捏造的合作关系、纯作秀的 Logo 墙，以及没有叙事作用的动效。
• 除非用户提供可核实的证据，否则绝不要声称成果获奖或受到 Awwwards 认可。

7. 交付前进行验证

• 运行生产构建并修复所有故障。
• 当用户要求进行浏览器验证或需要验证来解决阻塞问题时，在桌面和移动设备尺寸下检查页面。
• 验证键盘导航、可见焦点、触控行为、JavaScript 不可用时的内容、静态媒体回退，以及 prefers-reduced-motion 行为。
• 检查是否只安装并初始化了一个平滑滚动引擎、ScrollTrigger 集成是否正确，以及所有动画和 WebGL 资源是否都能正确清理。
• 搜索渲染内容和源代码，检查占位符、复制的参考作品身份、不受支持的声明、误导性 Logo、未注明来源的媒体，以及无法无障碍访问的拆分文本。
• 报告所选的网页设计技能、素材来源、动效技术栈、Three.js 使用决定、已执行的验证，以及任何尚存的限制。