用Claude Code打造万元级电影感网站

一、为什么这件事现在值得关注

Jack 开篇坦言，他本来不打算拍这个视频，直到自己实际玩了 Seedance 2.0 之后才改变主意。他用了一个很有说服力的说法：​"I've been sending videos like all day cuz it's so cool"（我一整天都在发这些视频给朋友，因为太酷了） 。

关键变化是什么？在 Seedance 2.0 之前，AI生成的视频总是有一种"不太对"的感觉——动作不流畅、画面生硬。而 Seedance 2.0 解决了这个问题，让视频看起来更有电影感（cinematic） ，这直接提升了网站的商业价值。

更重要的是整个工具链的搭配：

• Claude Code 负责代码生成和网站搭建
• Seedance 2.0 负责电影感视频动画
• 不需要编辑软件，不需要昂贵的网站构建器

这意味着一个人就能完成从设计到上线的全部工作。

二、三步建站法：从零到上线

Jack 把整个流程拆解为三个极简步骤：

第一步：获取网站基础结构

方法一：直接克隆 GitHub 模板

Jack 提供了一个现成的高质量网站模板。操作很简单——到 GitHub 复制仓库链接，打开 Claude Code（或 Anti-Gravity IDE），告诉它：​"下载这个 GitHub 仓库，把它改成 [你想要的主题]"。

他在视频中的实际演示是："Hey there, dude. I would like you to go ahead and download this GitHub repo, please. And I want you to redo the whole thing, but I want you to make it for beautiful, delicious coffee. There's going to be pink themed."（嘿，兄弟，帮我下载这个 GitHub 仓库，然后把整个东西重做，我要做一个精致的咖啡网站，粉色主题。）

方法二：用提示词构建器（Prompt Builder）

Jack 自己做了一个网站提示词构建器工具，可以按步骤选择：

• 业务类型（如"luxury car company"）
• 设计风格（"clean and modern" 或 "bold and dark"）
• 页面模块（hero、social proof、features、footer 等，可自由拖拽排序）
• CTA按钮文案（如"Unlock Your Test Drive"）

选完后自动生成优化过的提示词，直接喂给 Claude Code。

一个实用的调试技巧： 如果网站加载出来是黑屏，别慌——右键点"检查"（Inspect），复制错误信息，丢回给 Claude Code，它会自动修复。Jack 的原话是："It is a pretty easy fix if it doesn't load up"（如果加载不出来，修起来其实很简单）。

第二步：生成电影感视频动画

这是整个流程最出彩的部分。

图片生成： Jack 使用了一个叫 Seedance 的 Claude Code 自定义技能（Skill）来生成图片提示词。流程是：

1. 告诉 Claude 你想要什么画面（如"一袋精美的咖啡豆，粉黑配色"）
2. Claude 会生成优化过的图片提示词
3. 把提示词丢到 Higgs Field 去生成图片
4. 如果你有品牌 Logo，可以附带上传，要求Logo出现在画面中

视频动画： 图片生成后，需要把静态图片变成动画。这里有一个关键细节——Higgs Field 目前不支持 Seedance 模型的首帧+尾帧功能（虽然 Kling 3.0 可以），所以 Jack 转而使用 Kia.ai 平台来做视频生成。

具体设置参数：

• 分辨率：720p
• 画面比例：16:9
• 时长：7秒是最佳甜蜜点
• 可以上传参考图、参考视频、甚至参考音频

Jack 的一个额外技巧——融合处理： 他发现可以通过加深视频边缘的暗角效果（darken the edges），让 Logo 两端的过渡更自然，整体看起来像是一个完整的电影画面，而不是简单的视频叠加。

第三步：集成到网站并发布

拿到视频后，回到 Claude Code，给它这样的提示词：

"Hey there, I've just downloaded a video. I would like this video to be the first thing in the hero section as the background running on repeat, and I want there to be sufficient contrast between that and the text in front of it."（嘿，我刚下载了一个视频，我想把它放在 hero 区域作为背景循环播放，并且要确保视频和前面的文字之间有足够的对比度。）

发布流程：

1. 让 Claude Code 创建 GitHub 仓库并推送代码
2. 如果没连接 GitHub CLI，只需按照 Claude 给出的指令粘贴到终端
3. 进入 Vercel，关联 GitHub 仓库，点击 Deploy
4. 网站即刻上线

三、工具全景图

四、99%的人会犯的致命错误

Jack 在视频最后提出了一个非常重要的警告：

"We don't want a website that just looks good and flashy. We need a website that actually converts, that will turn viewers into buyers." （我们不是要一个只是好看和炫酷的网站。我们需要的是一个真正能转化的网站，能把访客变成买家。）

电影感视频和精美设计只是表面层。 真正决定网站价值的是底层的线框结构（wireframes）和转化结构（conversion structures） 。一个视觉惊艳但没有转化设计的网站，和一张好看的壁纸没有本质区别。

这是大多数人掉进去的陷阱——花了大量时间在视觉效果上，却忽略了：

• CTA（行动号召）的位置和文案设计
• 社会证明（social proof）的合理布局
• 用户从"看到"到"购买"的完整路径设计

五、商业可行性分析

Jack 在视频中透露了几个关键商业信号：

1. ​"as somebody who's actually sold this" — 他不是在理论上讨论，他实际卖过这类网站
2. 客户愿意支付"thousands of dollars" — 即使你用 AI 在几分钟内完成
3. 整个工具链成本极低 — Claude Code 订阅费、Kia.ai 的视频生成费用（他说是"最便宜的方案"）

这意味着什么？ 如果你能掌握这套工作流，利润率极高。客户不在乎你用了什么工具，他们在乎的是最终效果——一个看起来像花了数万美元专业制作的电影感网站。

金句收录

1. "You can now build beautiful and cinematic websites using Claude code and the brand new Seedance 2.0 that clients will pay thousands of dollars for." （你现在可以用 Claude Code 和全新的 Seedance 2.0 建造出精美的电影感网站，客户会愿意花数千美元来买。）

2. "I actually didn't want to make this video until I played around with Seedance and I was like, I kind of have to show you." （我本来不想拍这个视频，但当我试玩了 Seedance 之后，我觉得我必须给你们看看。）

3. "The biggest problem that videos always had... it just won't look good. It'll look a bit cranky. Seedance 2.0 fixes this." （视频一直以来最大的问题是……看起来不太对，有点生硬。Seedance 2.0 解决了这个问题。）

4. "You need no editing software and no expensive website builder." （你不需要任何编辑软件，也不需要昂贵的网站构建器。）

5. "We don't want a website that just looks good and flashy. We need a website that actually converts." （我们不是要一个只是好看和炫酷的网站。我们需要的是一个真正能转化的网站。）

6. "I've been sending videos like all day cuz it's so cool." （我一整天都在发这些视频给别人，因为太酷了。）

7. "7 seconds to be a nice little sweet spot." （7秒是一个不错的最佳时长。）

时间线索引