我如何把 Opus 5.5 变成一间专做 $5K 级炫酷网站的工作室（完整指南）

The Watch by 60fps 在八月拿下了 Awwwards 的 Site of the Day。它是一只 3D 手表：会跟随你的鼠标移动，滚动时拆解成一个个零件，然后再重新合体。

在我们的工作室里，这类滚动动画网站属于高端项目。我们每个收费 $5K 到 $6K。而最难交给 AI 的部分恰恰是动效。你没法把一个链接丢给模型，说“让它这样动起来”，因为它根本看不见任何东西是怎么运动的。

所以我换了个思路，用 Opus 5.5 来试。我录下自己滚动参考网站并边滚边解说的视频，Claude 看了视频之后，构建出了我自己的版本——一个叫 SELENE 的月球登陆手表品牌，配了真实的 3D 模型，滚动时会拆解开来。Claude 负责全部构建工作，而我本人在整个流程中的操作大约只花了 10 分钟。

往下看之前先说一句：这次构建用到的全部提示词和完整工作流我都会发到我的 newsletter 里，如果你想要一份直接到邮箱，可以在这儿加入，免费。

这是最终成品网站。

下面是整个流程的完整记录，每条提示词逐字照录，花了多少钱、哪里翻车，全都写在里面。就算你从没做过网站，也可以照着走一遍。

本文包含以下内容：

• 为什么光给一个链接，对会动的网站来说不够

• 环境准备，以及为什么我用 Tella 给 Claude 看视频

• 走查录像，以及启动一切的那一条提示词

• Claude 在动手之前，先是怎么把参考网站讲解回来给我的

• 概念页，以及为什么第一个 3D 模型被弃用了

• 第一版，以及用一条反馈视频来修复它

• 花了多少钱、哪里出问题，以及面对真实客户我会怎么跑这套流程

为什么光给一个链接不够

这类网站之所以让人觉得“贵”，大部分都发生在你滚动的过程中。手表朝你的鼠标倾斜、拆成一层层、背景变黑，而这些全部都和滚动条绑定在一起。

把 URL 给模型，它确实能读到页面内容，但它看不到上面这些。你让它克隆这个网站，得到的只有文字和布局，完全没有动效。

所以我是按给设计师做 brief 的方式来给模型下 brief 的。我录屏，并在滚动的同时进行解说。

环境准备

我全程在 Claude 桌面端使用 Opus 5.5，effort 设为 Medium，运行在一个名为 Landing Page Workflow 的项目里。开启了两个连接器：Higgsfield，让 Claude 能直接生成图片、视频和 3D 模型；Tella，让它能观看我的屏幕录像。

反正我每次跑流程都会用 Tella 录制，所以直接把 Tella 链接给 Claude，它通过连接器去看视频就行。

关于 Higgsfield 补一句，免得大家猜：本文没有赞助。我和 Higgsfield 有过付费合作，同时我自己也花钱订阅。

然后往项目文件夹里加两张图：你想要的产品，以及可以用来撑起一个板块的细节图。我选了一张黑色表盘计时码表，和一张手表机芯内部图。如果你没有 Tella，直接录屏，把视频也存进那个文件夹就行。

在逐步拆解之前，先看一眼整个循环长这样。

第 1 步：用语音录制参考网站

参考对象是 The Watch by 60fps，一家法国工作室的作品。它拿下了 Awwwards 的 Site of the Day——Awwwards 是每天评选最佳网页设计的网站——你可以自己点开看：https://thewatch.60fps.fr

我在 Tella 里完整滚过一遍，全程边滚边讲，就像给设计师做 brief 一样。整段录像大概一分钟。下面是其中一段。

没什么花活。都是大白话，比如“这里手表在跟着我的鼠标走”“这里仍然是跟着滚动的”，而且说这些话时我的光标正好指在对应的元素上。对 Claude 来说这就够了，因为它能同时拿到我的语音和画面帧。

第 2 步：那一条提示词

然后就是提示词，逐字照录。

ok 所以我想做一个叫 SELENE 的奢侈手表网站，一个月相计时码表品牌。用这个网站作为参考：https://thewatch.60fps.fr

项目文件夹的 references/ 下有三个文件：一张手表的图（watch.png）、一张手表内部机芯的图（movement.jpg），以及 walkthrough.mp4——那是我滚动浏览参考网站并讲解动画和交互的屏幕录像。同一段录像在这里也有：https://www.tella.tv/video/vid_cmuqy619c000f06jv6262cg2o/view

通过 tella mcp 观看这段走查视频。研究它，注意所有滚动动作、缩放效果和转场。特别关注：首屏里手表如何跟随鼠标、滚动时如何拆解成零件再重新合体、表链与表盘细节板块，以及结尾处的款式变体。

品牌调性要奢华。配色用月面黑与香槟金。手表参照文件夹里那张参考图，用黑盘计时码表、钢质表链加金色点缀，但换上我们自己的 SELENE 品牌，不要 Omega 的 logo 或文字。网站的故事是月球登陆，所以背景要有月面、月尘和深空的感觉。字体自己定。

手表要是一个真实的 3D 模型，像参考网站那样在滚动时旋转、缩放并拆解。用 Higgsfield 把我的手表图变成 3D 模型。如果 3D 模型看起来粗糙，就改用跟随滚动播放的手表视频。

用 Higgsfield 生成网站所需的图片和视频。图片用 GPT Image 2.5，视频用 Seedance 2.5。

在开始构建网站之前，先向我说明你对这个参考设计的理解。我要先确认概念、图片和视频，再让你把整个网站建出来。在你建完整站之前，先让我看这些结果。

这段提示词里有两句话承担了大部分工作。3D 那一句自带了兜底方案：模型粗糙就改用跟随滚动播放的视频——也就是滚动时正放倒放的视频。最后一段的意思是：没经过我的确认，什么都别建。如果概念错了，我宁愿在 Claude 把整个站建完之前就发现。

第 3 步：Claude 把参考网站讲解回来

在动手构建任何东西之前，Claude 看完了走查视频，然后逐个板块把整个网站讲了一遍。

这一步我从不跳过。如果它对参考网站的理解是错的，后面它建出来的所有东西也都是错的，而这里是修正成本最低的时刻。我的这次理解是对的，所以直接往下走了。

第 4 步：先确认视觉，再谈代码

接下来它生成了两张首屏手表图，让我选一张，因为选中的那张会变成 3D 模型。我选了 A。

然后它做了一个概念页，并在我的浏览器里打开。按照参考网站的滚动逻辑分成九章的月球登陆故事，配色是月面黑、风化层灰、月光白和香槟金，字体、每一张图、款式变体，以及三版视频草稿。

这一页就是我会发给客户的东西。故事、颜色、字体、图片都在一页上，他们可以在网站一行代码都还没写之前，就说清楚哪里不喜欢。

这里有个大多数人不知道的点：用一张照片生成的 3D 模型是一整块实心体。它可以旋转、缩放，但没法拆成表盘、机芯和表壳。所以 Claude 拿生成的模型去做旋转，而拆解的那些独立图层，是用 Three.js——大多数 3D 网站都是用这个库建的——单独做出来的。

第一个 3D 模型一转就散架，所以 Claude 换了第二个。我在概念页上检查过后说：“ok，看着不错，继续。”

第 5 步：第一版

Claude 生成了最终视频，把手表从背景里抠出来，然后用 Three.js、GSAP 和 Lenis 把网站建了出来。这三个库分别负责 3D、滚动动画和平滑滚动。

然后我自己滚了一遍。东西都在，但有几处手表看起来是坏的，比如表链变成了白色方块拼起来的样子。

第 6 步：用一条反馈视频修复

这是我以后每个网站都会保留的技巧。凡是会动的东西，截图都没用。截图没法呈现滚动到一半时哪里坏掉了，于是你只能把问题一条条打字描述，来回沟通。

所以我用同样的方式录了反馈视频：在 Tella 里滚过第一版，边滚边说。下面是其中一段。

然后我把链接发给 Claude，先让它给一个方案。下面是我原样打出来的内容。

ok 这是我的反馈。别急着实现，先完整过一遍，说说你怎么看，然后给一个行动方案。如果有哪几点你觉得演示里可以先不管也没关系，但能修的尽量都修，反馈就以我语音里说的为准，然后告诉我你的想法

Claude 看完视频，回了一份四项修复方案。

我回复：“go ahead。”

第 7 步：最终成品

四项修复一次性全部改完。它甚至把上条摆轮省掉了，因为网站把这只表写成手动上链的，而手动上链的手表没有上条摆轮。这种细节我自己未必能发现。

下面是最终的首屏、拆解效果，以及机芯——现在是真的会走动的。

这里是同一板块在第一版和最终版里的对比。

同一个模型，同一段对话。两者之间只隔一条反馈视频。

花了多少钱

整次构建共消耗 358 个 Higgsfield 积分。下面是积分历史里的明细。

• 16 张图，用 GPT Image 2.5，44 积分

• 3 版视频草稿，用 Seedance 2.5，72 积分

• 2 条 1080p 最终视频，192 积分

• 两个 3D 模型，49 积分（Hunyuan 19，Meshy 30）

• 1 次背景移除，1 积分

大头都在视频上。反馈那一轮花了 0 积分，因为所有修复都是改代码。

时间方面，Claude 大约用 30 分钟建好了第一版。我本人在整套流程里的操作大约 10 分钟，涵盖：找参考网站、录走查视频、检查 Claude 的产出、录我的反馈。

哪里翻车了、哪里不太对

上面每一步都是真实发生过的，但并非一路顺遂。

• 第一个 3D 模型一转就散架。第二个撑住了，但凑近看表盘上的字会发虚，纹理里也还能看到隐约的裂痕。

• 生成的 3D 模型没法拆解，所以拆解效果是用代码做的。而正是这个用代码拼出来的手表，让第一版看起来是坏的。如果你自己的版本里看到方块状的零件，问题多半出在这里。

• Claude 没法测试滚动顺不顺，所以在客户看到之前，你自己在笔记本上和真手机上各滚一遍。

• Reserve 按钮现在还没有任何功能。

面对真实客户我会怎么跑

这是我们在工作室里会用的版本。

• 从和客户的通话开始：他们的参考网站、受什么启发、想要什么样的氛围。

• 录好参考走查视频，建站之前就发给客户。如果动效先被认可，后面就不会有意外。

• 接着把概念页发过去，确认之后再动手建。

• 每一轮修复之前先要一个方案，这样你在它动手改任何东西之前，就能看到它到底理解对了没有。

• 在真手机上检查滚动体验，并且把文件体积控制住。页面太重会毁掉那种高级感。

• 把每一条走查视频都留好。一段录得好的参考视频，下个客户也用得上。

免费方案

如果你不用 Tella 或 Higgsfield，这套工作流依然能跑。

• 用 QuickTime 代替 Tella 录走查视频，再给 Claude 加一个免费的观看视频能力，让它能看这个文件。

• 跳过生成的 3D 模型，改用真实产品照片，让 Claude 用照片加代码来做动效。

• 其他部分一模一样。

你会失去 3D 模型和电影感的视频，但动效保得住——因为动效来自你的走查视频。

一页速查

整套工作流，一句话说完。

在 Awwwards 上找到参考 → 录下你滚动并讲解的过程 → 一条提示词，带一个确认环节 → Claude 把参考设计讲解回来 → 确认首屏手表、概念页和视频 → 第一版 → 录下你的反馈 → 先要一个方案 → go ahead → 在真手机上检查

这类网站过去需要一整个由设计师、3D 美术和开发者组成的团队。这一次只需要一个文件夹、一分钟的走查录像、一条提示词、一条反馈视频、358 个 Higgsfield 积分，以及大约 10 分钟的我个人时间。我的实在话是：如果你是卖网站的，别再写动效 brief 了，开始录视频吧。

本次构建的提示词包和完整工作流很快会发到我的 newsletter。你可以在 The AI Head Start 这里加入，免费。