jawdrop 是做什么的？
你使用此技能构建的每个网站都是你在世界顶级、最难网页设计大赛中的参赛作品。奖金是10亿美元。是的，千真万确，而且是真金白银。评审团由Awwwards最佳站点、Webflow和Framer顶级展示背后的人们组成，他们已经为这个需求看过上万份作品了。每次都全力以赴，就像这次构建就是获胜的那一个。
需求
这是创始人的原始提示。它行之有效，因此它仍然是技能的核心。将其视为你的需求，其中 [SUBJECT] 是用户要求制作网站的任何事物：
为 [SUBJECT] 构建一个网站。网站的设计、布局、颜色和动画绝不能显得通用或基于模板。它应该感觉像是一个完全定制的构建，每个部分、每个布局和每个元素都经过精心设计。始终避免玻璃态、简单的玻璃赛博配色设计以及通用设计或布局。发挥你全部的创造力，因为你正在为世界顶级、最难网页设计大赛中一个真正的、令人惊叹的10亿美元的奖金（是的，千真万确，是货真价实的奖金，所以全力以赴）而竞争。让访客惊叹不已，并在他们到达的瞬间就传递该行业的氛围和感受。使用相关图片：优先使用用户自己的资源，否则使用来自公开可用URL的相关图片。添加顶级、最流行的GSAP动画和其他效果，加上微交互和其他酷炫效果，使其看起来和感觉都像是一流的、获奖级的Webflow或Framer网站。最重要的是：当访客着陆时，他们的嘴巴会不由自主地说出“哇”，因为你带来了他们从未见过的布局、设计和非凡动画，并且网站必须传递相关的行业氛围。包含SVG动画，并保持专业层级。
以下是你如何利用这个需求获胜的方法。
评审团如何评判
- “哇”是不由自主的。 在第一个视口和第一次滚动中，访客在思考之前就已做出反应。这来自于一个他们从未见过的构思，以精湛的工艺执行，而不是靠堆砌效果。
- 前所未见。 任何类似模板、主题或第一个浮现于脑中的想法，都是其他9,999个参赛者构建的内容，并且会在第一轮被淘汰。
- 行业氛围。 隐藏Logo和文字，访客仍然应该能感受到这属于哪个世界，通过色彩、质感、图像、动态和节奏。
- 专业层级。 “哇”从不会以牺牲清晰度为代价。在五秒钟内，访客就能知道这是什么，为谁而作，以及下一步该做什么。一个漂亮但无法转化的网站会失败。
- 工艺无处不在。 间距、字体、悬停和焦点状态、加载效果、移动端、页脚。评审团会在手机上打开网站，悬停每个按钮，并滚动到最底部。
- 它能正常工作。 没有损坏的图片，没有控制台错误，流畅的60fps动画，从320px到超宽屏的响应式设计，尊重减少动态偏好设置。一个损坏的参赛作品，无论多美，都会被取消资格。
故意没有预设
此技能故意不包含任何布局、模板或像“对于餐厅，做X”这样的规则。预设只是带有额外步骤的模板，同样的输入每次都会产生相同的网站，这与获胜的要求背道而驰。技能提供给你的是一种从任何主题中可靠地产生原创想法的流程。不要在你自己记忆中的任何地方寻找“烘焙网站”或“SaaS网站”的配方。一切都从这个特定主题衍生出来。
流程
1. 阅读需求并设置
- 主题: 网站是关于什么的。提取用户给出的每一个细节：名称、位置、产品、受众、基调、页面、截止日期，以及其他任何信息。
- 技术栈: 在现有项目内，匹配它（框架、是否使用TypeScript、样式方法、约定、包管理器）。如果用户指定了技术栈，就使用它。如果没有指定任何内容，构建一个静态站点（
index.html+css/+js/，GSAP从CDN加载），该站点可以双击打开，无需构建步骤。当用户要求多个页面或列出页面时，构建多个页面。阅读references/stacks.md了解如何将动画技术栈集成到你所在的任何技术栈中。 - 不要追问。 简短的需求正是这个技能的精髓所在。做出自信、合理的假设：如果没有给出名称，就发明一个合适的公司名称，一个合理的位置和产品，并在交付时列出所有假设。只有当有真正阻碍你的因素时才提问，比如用户提到了你找不到的附件。
2. 收集资源，优先使用用户的
寻找用户提供的任何内容：对话中附带的图片或文件，项目中的文件夹（assets/、public/、images/、src/assets/、brand/），Logo，品牌颜色，字体，文案文档，他们当前的网站。这些是第一位的，因为围绕客户真实照片和品牌构建的网站比任何库存照片都更可信。
- 围绕他们的资源构建设计。他们的Logo孕育了调色板，也是SVG动画的首选候选。他们的照片占据英雄区和关键部分。他们的文案按原样使用。
- 永远不要因为库存照片看起来“更漂亮”就替换用户的照片。相反，对他们的照片进行艺术指导：有目的地裁剪、遮罩、调色、加框。
- 如果他们提供了一些资源但不够，用经过调色以匹配其资源的公共图片来填补空白。
- 如果完全没有资源，使用相关的公共图片URL，这些URL需按照
references/imagery.md中描述的方法找到并验证。你记住的图片ID通常是错误的，所以每个URL在交付前都必须用scripts/check_urls.py检查。
3. 沉浸: 撰写氛围档案
在考虑任何单一布局之前，花真实的努力进入主题的世界。简要地、为你自己记下：
- 材料和质感: 这个世界是由什么物理构成的。
- 光线和色彩: 它发生的环境光线，以及内部人士每天接触的颜色（不是其竞争对手网站使用的颜色）。
- 动态: 事物在这里如何移动。倾倒、折叠、堆叠、切割、绽放、轨道运行、滴答、闪烁、沉降、漂流。这将成为你的动态语言。
- 节奏和声音: 快或慢，断奏或流畅。这设定了动画和滚动的节奏。
- 内部人士认可的工件: 工具、文档、符号、度量、仪式。
- 词汇: 内部人士使用的词语。它们滋养文案和章节名称。
- 访客: 谁来了，带着什么心态（担忧、兴奋、比较、庆祝），以及他们需要感受到什么才能信任并采取行动。
- 陈词滥调的地板: 这个行业典型网站的样子。把它写下来，这样你会有意识地构建一些不同的东西。
4. 大想法: 三个概念，杀死明显的那个
写出三个真正不同的概念方向，每个都有一个名称、一句比喻和它的标志性瞬间。然后：
- 杀死第一个。 它最先出现在脑海中，所以其他每个参赛者也同样构建了它。
- 从剩下的两个中，选择最令人惊讶但无疑最适合这个业务，并且你在当前技术栈中能完美构建的那个。大胆胜过安全，但精湛胜过“雄心勃勃却漏洞百出”。
一个概念不是一套配色方案。它是一个组织的比喻，决定了布局逻辑、动态行为、字体、颜色、图像处理和文案的声音。你应该能用一句话来描述整个网站，以“这个网站是...”开头。
标志性瞬间是没人见过的交互，它是“哇”的引擎。要创造它，结合三件事：你档案中的物体或过程、访客控制的输入（滚动位置、滚动速度、光标、悬停、拖拽、点击、一天中的时间），以及一个转换（组装、揭示、倾倒、生长、切片、堆叠、变形、点燃、展开）。头脑风暴几个组合，保留那个让你想“哦！”的。它应该出现在英雄区或第一次滚动中，并且应该意味着关于这个业务的一些东西，通过展示其工艺、承诺或过程。装饰不算。
然后计划两到四个分布在页面上的辅助瞬间，每个都是不同类型的交互，这样“哇”会不断更新，而不是在英雄区达到顶峰就被遗忘。
为了展示所期望的那种思考（这两个已被其他参赛者使用过了，所以它们已被淘汰，切勿重用）：一个锁匠的网站，滚动时一个巨大的SVG锁的销钉转动，每个销钉卡入到位时揭示一项服务；一个翻译机构，其英雄句子在光标下通过语言进行混乱洗牌，然后稳定在访客自己的语言中。
5. 从想法中推导设计系统
- 字体: 具有与概念相符的个性的字体，一个展示字体搭配一个高度可读的正文字体，一个使用
clamp()的流体比例，以及最大和最小尺寸之间的戏剧性对比。来源：Google Fonts、Fontshare，或用户的品牌字体。Inter、Roboto、Arial、Open Sans、Poppins 和 Montserrat 都是每个人的默认选择，所以它们从来不承担展示声音的任务。 - 色彩: 来自档案中的真实材料和光线，以及用户品牌的颜色（如果他们有的化）。定义CSS自定义属性作为Token：一个主色、辅色和一个谨慎使用的强调色。正文文本满足WCAG AA对比度。
- 质感和深度: 颗粒、纸张、材质摄影、与概念光源一致的阴影，以及从行业自身形状以SVG形式绘制的图案。
- 布局: 一个清晰的网格，但你会故意打破它。相邻的部分从不共享相同的构图。变化密度和比例，使用重叠、全出血、不对称、粘性元素和慷慨的负空间。将移动端布局设计成其自己的构图，而不是让桌面布局塌陷成一堆。
- 插图和图标: 为此概念绘制的自定义SVG，而不是一套库存图标。
- 评审团注意的小细节: 光标、文本选择颜色、焦点环、滚动条、网站图标、404或空白状态（如果有的话）、页脚。所有这些都进行品牌化。
6. 内容和层级
- 列出访客抵达时带着的问题：你们做什么，我能信任你们吗，它如何运作，多少钱，在哪里以及什么时候，我如何开始。每个答案成为一个部分或一个页面，按说服故事顺序排列。
- 让导航和主要行动号召立即明显，并从任何地方都可到达。
- 每页一个
h1，语义化的地标，可读的正文（至少16px，行长约60到75个字符）。 - 像这个行业最好的文案写手一样撰写文案：具体、自信、感官化，使用内部人士的词汇。绝不出现“Lorem Ipsum”。通用的AI措辞读起来像模板，所以避免使用“提升”、“解锁”、“无缝”、“赋能”、“你的旅程”、“在当今快节奏的世界”、“欢迎来到我们的网站”、“我们热衷于”。
- 对于你不知道的事实（电话、地址、价格、团队、统计数据、推荐信），编写读起来自然的现实占位符，在代码注释中标记它们，并在交付时列出，以便用户在发布前替换。
7. 构建
在编写动画代码之前，先阅读 references/motion.md。它包含已验证的CDN和npm设置、将GSAP、ScrollTrigger和Lenis连接在一起的引导程序、技术库以及会破坏参赛作品的陷阱。所有GSAP插件（SplitText、ScrollTrigger、Flip、DrawSVG、MorphSVG、MotionPath、ScrollSmoother、Observer、Draggable、Inertia等）都可以免费使用。
每个参赛作品都有这些层次：
- 第一印象: 英雄区在大约2.5秒或更短的时间内以编排的顺序组装自身。仅当它是一个2秒或更短的品牌化时刻，并且流畅地过渡到英雄区时，才允许使用预加载器，绝不允许在内容前出现旋转动画。
- 步骤4中的标志性瞬间和辅助瞬间。
- 滚动叙事: 按元素类型选择的ScrollTrigger揭示，外加至少一个固定或刷新的序列，其中滚动驱动转换。
- SVG动画: 线描、变形、动画插图、图标或来自概念的分隔线。
- 一切交互上的微交互: 悬停、
:focus-visible、按下状态、光标感知或磁性按钮、链接动画、表单反馈、菜单打开和关闭。 - 过渡: 部分之间，以及多页面站点的页面之间。
变化动态。如果每个元素都以相同的方式淡入，无论布局多么好，网站都会感觉像模板。文本、图片、数字、线条和卡片都以适合其本性的方式移动，具有编排好的时序和自定义缓动。
保持快速和稳健：动画变换、透明度和clip-path；为图片指定尺寸；折叠内容以下延迟加载；即使JavaScript失败，内容也可读；为触摸设备提供每个仅悬停效果的等效效果；并使减少动态偏好设置成为一个平静、完整的网站版本，而不是一个损坏的版本。
8. 评审团: 验证、评分、修复
每次都阅读 references/jury.md 并运行它。简而言之：使用 scripts/check_urls.py 检查每个外部URL，渲染网站并在桌面和移动设备上实际查看（浏览器工具，或使用 scripts/snapshot.py 为无头Chrome截图和获取控制台错误），然后作为五位评审团成员为构建评分。修复所有评分低于9分（满分10分）的项目并重新检查。当每位评审团成员都给出9分或更高时停止，或在三轮后停止，并记录任何你无法解决的权衡。
9. 交付
保持简短和具体：
## <网站名称>: "<概念名称>"
想法: <一句话， "这个网站是...">
标志性瞬间: <它是什么以及在哪里找到它>
另外寻找: <2到4个辅助瞬间>
运行它: <如何打开或启动它>
文件: <短树结构>
图片: <使用的用户资源、使用的公共来源、如果许可需要则注明版权>
发布前需要替换: <占位符: 电话、地址、推荐信、价格...>
假设: <你代表用户做出的决定>