Arnie936/cool-website-en

炫酷网站

默认设置

• 网站语言默认为英语，除非用户明确要求其他语言。这包括导航、标题、正文、按钮、表单、验证和成功消息、替代文本、无障碍标签、元数据和生成的下载文件。设置 <html lang="en">（或匹配的区域标签，例如目标市场需要时使用 en-GB）。保留专有名词。
• 默认使用 Codex 集成的 image_gen 工具生成和编辑光栅图像。遵循可用的图像生成技能和当前工具架构。无需外部图像 API 密钥。在适当时使用提供的素材。
• 对于生成的视频，官方 Higgsfield API 是默认选项，kie.ai 是第二选项。尊重用户的选择；否则使用 COOL_WEBSITE_VIDEO_PROVIDER（默认 higgsfield）。Higgsfield 使用 references/higgsfield-api.md 中的 REST 工作流；KIE 使用 scripts/kie.mjs shot。如果用户还没有 Higgsfield 账户，请引导他们访问 https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus 注册。仅使用 .env.example 配置所选提供商。切勿静默切换提供商，也不得将其用作图像生成的备用方案。
• 所有浏览器控制和视觉验证均通过 mcp__cua_repl 使用集成的浏览器。
• 在首次访谈后、固定页面结构、编写文案或生成素材之前，立即提供可选的 DataForSEO 支持的 SEO 服务。如果选择该服务，请遵循 references/seo-dataforseo.md。即使拒绝研究，也要保持基础的语义 HTML 和元数据。
• “炫酷网站”是技能名称，而非客户品牌。请勿在网站中添加技能品牌、创建者署名、示例品牌名称或批准声明。保留附带的 LICENSE 文件及引擎/软件的副本。

滚动是每个访问者都知道如何使用的唯一输入。本技能将其视为一条时间线：滚轮是一个擦洗器，页面是一部带有真实文本的电影，每个部分的行为都足够不同，以至于访问者会继续滚动以了解下一个部分会做什么。

您产出的内容： 一份访谈简报、一份页面语法、一份客户旅程地图、一条具有一个人工设计的峰值的感受曲线、一个滚动评分、一个标志性动效、生成的素材、在令牌驱动的设计底板上生成的真实 HTML 页面，以及一组证明其在每个滚动位置都有效的截图。

这不是什么

这不是“生成一个飞越场景并在上面放文字”。这种方法会导致整个页面只应用一种设备，并且以这种方式构建的每个网站都能一眼认出：相同的黏土动画立体模型、相同的居中文字、相同的 01 / 06 计数器、相同的“滚动探索”提示。五个行为完全相同的部分相当于将同一个部分展示了五次。

以下四个规则由此而来，它们构成了本技能的支柱：

1. 多样性就是产品。 一个页面至少使用四种设备系列，且从不连续两次使用相同的设备。阅读 references/devices.md。
2. 除非品牌是真正的插画风格，否则世界应该是摄影风格的。 默认禁止使用柔和哑光低多边形黏土立体模型。阅读 references/worlds.md。
3. 无连续链条。 单一不间断的摄像机飞行是你能构建的最昂贵、最脆弱的东西，并且它存在的唯一目的是隐藏场景之间的切换。相反，通过改变设备，切换就会自动消失，因为访问者并非在观看一部电影。只有当简报字面意思是“一次连续的旅程”时才使用链条。
4. 不同的世界不等于不同的页面。 设备套件改变的是页面的外观。结构是一个独立的轴，必须有意决定，否则每个构建都会继承相同的骨架。前四个构建正是这样做的。阅读 references/uniqueness.md。

英雄区构图

维度分层是高级营销英雄区的基本要求。 在请求素材之前，规划独立移动的背景、主体、前景和大气层。带有文字渐变的漂亮单层背景不满足此偏好。深度必须来自可见的分隔、遮挡和可控的运动差异，同时保持标题可读且场景讲述一个清晰的故事。

在规划英雄区或生成其素材之前，请阅读 references/hero-depth.md。它涵盖了干净板块、真正的 Alpha 抠图、共享接触锚点、层间排版、克制的滚动编排、移动端图稿方向和视觉验收。 使用适合所选语法的构图；不要重复示例场景，也不要在禁止固定的语法上强行固定。尊重明确的静态或更简单的指示，并在运动减少时在静态构图中保持深度。

设计和交付标准

在规划营销网站之前，请阅读 references/design-standard.md。它涵盖了品牌研究、独立的视觉层、有用的交互、移动端构图和最终的浏览器检查。这些原则指导自定义页面，它们不是固定的页面模板。

步骤 0：简报和创意权限

在生成任何内容之前，先确定简报。 重用已提供的答案和素材。当用户明确委托创意方向时（例如，“由你判断”或“我不想妨碍你”），编写一份“在明确创意委托下自撰”的简报并继续。涵盖以下八个主题，区分证据和假设，不要编造用户语录或强制进行另一次访谈/审批检查点。

否则，对缺失的决策进行访谈。提出实际问题，记录答案，避免从品牌名称推断整个品牌。

在未知的情况下，在第一轮中包含优惠、受众、主要访客操作和现有网站/域名。将以下八个设计主题视为检查清单；将相关主题分组，每轮最多提出三个简短问题。在获得初步答案后，在询问更多设计细节之前提供步骤 0a。在设计和 SEO 访谈中重用事实。

该技能是一种范围工具，而非固定风格。人类带来意图和其拥有的任何素材；访谈就是将其转化为正确页面类型的地方：一个连续的世界、不同的场景、印刷式章节、一个实时表面。该技能可以完成其中任何一种。访谈决定具体采用哪种。

涵盖这八个主题，但不要一次性提出所有八个问题：

1. 用三到五个词描述氛围，加上最多三个来自任何媒介的参考。一部电影、一张专辑封面、一家商店、一本杂志、一个游戏。不是“你喜欢的网站”：提及网站名称会导致页面最终看起来像现有网站。
2. 他们描述的滚动旅程，逐段进行。 访客首先应该看到什么，接下来是什么，最后是什么。他们的顺序，不是你提供的菜单。
3. 能量曲线。 哪些地方应该感觉平静，哪些地方应该感觉强烈。一个全程喧闹的页面和一个全程安静的页面一样平淡。
4. 访客在滚动时，在每个阶段应该有何感受，以及他们应该记住的唯一时刻 是什么？ 能量是响度。这是情感，两者并不一致：在一个喧闹的页面上，安静的行为可能最为强烈。逐阶段的答案形成感受曲线，那个唯一时刻成为峰值。两者都必须在 BRIEF.md 中提供。参见 references/feel.md。
5. 这个网站应该做一件他们从未见过的网站会做的事情。 这是标志性动效的种子。推动给出真实答案；“令人难忘”不算一个答案。
6. 他们希望距离高级简约风格有多远。 提供 uniqueness.md §5 中的范围：粗野主义、极繁主义、俏皮、复古、密集、编辑风格、高级简约。他们的答案决定美学家族，而非你的品味。
7. 一个连续的世界，还是不同的场景？ 整个页面应该感觉像一个通过滚动飞越的连续空间（世界飞行，参见 references/worldflight.md），还是像独立的场景、章节或切换？这是最大的结构分支，由他们决定，而非你稍后选择的设备。坦诚地提供两者；没有默认选项。
8. 他们已经拥有哪些素材？ 视频片段、照片、产品照片、品牌套件、他们自己的剪辑。真实素材锚定世界并降低生成成本；答案决定哪些需要分级和编码，哪些需要生成。如果回答“没有”也没问题，这意味着完全生成的世界。

在任何行动规划之前，将答案写入 <workspace>/builds/<name>/BRIEF.md，使用他们自己的措辞，而非改写成营销文案。所有下游操作都从此文件读取。

BRIEF.md 必须至少包含：

• 八个主题，如果用户提供了答案则逐字记录，如果委托了决策则清晰标记为自撰决策。
• 感受曲线。 每个行为一行：情感，然后屏幕上导致该情感的内容。在行为存在之前编写，随着评分的填充而添加。
• 峰值。 那个唯一时刻，写成一个访客会对朋友说的句子，加上它位于哪个行为中。
• 完整的“告诉别人”句子。 “这是一个 ______ 的网站”，填入一种体验，而非设备名称。
• 任何自撰的沉默，以便验证过程能将其与死滚动区分开来。

references/feel.md 是所有四项内容的规范。

如果用户确实无法联系并且运行完全自主，请自行编写 BRIEF.md：以品牌的语调回答所有八个问题，在文件顶部标记为“自撰，未经访谈”，并在最终报告中说明。未经委托的自撰简报是后备方案。上述明确委托是正常的受支持工作流，不需要用户无法联系。

步骤 0a：早期 SEO 选择

在第一次访谈回答后，询问（使用用户的语言）： “我是否也应该为 Google 优化网站？使用 DataForSEO，我可以检查相关的搜索词和竞争对手，并将结果直接反馈到页面结构和文案中。” 提供选项："是的，使用 DataForSEO"，"仅基础技术"，"稍后"。 如果用户已经选择了 SEO，则跳过此问题。仅凭创意委托并不授权安装外部服务或花费 API 积分。

如果选择“是”，请遵循 seo-dataforseo.md：完成专注的信息收集，连接或提供安装 MCP，建立研究预算，研究所选市场，然后在整个构建中使用发现结果。仅阅读 dataforseo-setup.md 以获取设置/认证和积分指南。仅凭服务器 URL 就足以识别远程连接；但账户授权仍然需要完成。

在 BRIEF.md 中记录 SEO: enabled | basics-only | deferred | blocked，以及如果启用了 SEO 则记录目标市场和预算。如果是基础技术或推迟，则继续而不安装 MCP 或进行付费研究。如果连接被阻止，则继续独立的设计和技术工作；将关键词决策标记为临时的。不要将尚未完成的 DataForSEO 研究呈现为已完成。

启动

属于环境设置，并非工作阶段。在访谈回答后，步骤 1 之前执行。

运行预检，而非手动检查。 它知晓那些否则会在后续以误导性错误形式出现的故障模式，主要是一个被剥离的 ffmpeg，它会将缺失的过滤器报告为命令中的语法错误：

node <skill>/scripts/doctor.mjs

它报告 Node、完整的 ffmpeg 构建、可选的 API 密钥以及已解析的工作空间。仅当计划生成视频时才添加 --video。必需故障将以非零退出。浏览器控制和验证使用 Codex 集成的浏览器通过 mcp__cua_repl 进行；本技能不要求独立的浏览器自动化包或本地浏览器可执行文件。

工作空间

构建和指纹注册表位于一个目录中，并且该目录是解析出来的，而非假定：

node <skill>/scripts/workspace.mjs --ensure     # 输出路径，创建它，初始化注册表

解析顺序，先命中者胜出：

1. COOL_WEBSITE_HOME
2. 从当前工作目录向上查找最近的 .cool-website.json，其中包含 { "workspace": "..." }
3. <项目根目录>/cool-website，其中项目根目录是最近的祖先目录，包含 .git

因此构建文件夹为 <workspace>/builds/<name>/，注册表为 <workspace>/FINGERPRINTS.md。注册表初始为空：其存在是为了阻止你重复自己，因此你的第一次构建无需清除任何内容。

如果你已经将构建保存在其他地方，请在你的项目根目录中放置一个 .cool-website.json 指向该位置，这样任何内容都无需移动。

其余设置

1. 图像使用内置图像模型；无需外部密钥。对于生成的视频，将 .env.example 复制到网站项目根目录作为 .env，仅填写所选提供商，然后运行 doctor.mjs --video。--provider higgsfield|kie 会覆盖本次检查的已配置提供商。Higgsfield（默认）使用 HF_API_KEY_ID 加上 HF_API_KEY_SECRET 及其控制台查看余额/定价；新账户在 https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus 注册。KIE 使用 KIE_AI_API_KEY 和 scripts/kie.mjs probe。 遵循 references/assets.md。在 BRIEF.md 中记录提供商、模型和授权预算。提供的视频片段无需 API 调用。
2. 如果存在品牌套件（颜色、标志、字体、现有产品照片）。如果品牌在此仓库中有一个文件夹，请在生成任何内容之前阅读它，并遵守其硬性规则。一个禁止发明数字的品牌意味着没有统计计数器，无论它们看起来多好。

将 engine/cool-website.js、engine/cool-website.css 和 LICENSE 复制到构建文件夹中。切勿按项目编辑引擎；它处于…

…（截断以进行翻译）