用AI搭建网站时，最难填补的可能是为品牌量身定制的视频。Claude Code可以一次写出完整的前端，但它自身无法生成视频，因此页面布局中的视频位置只能空着。把它接入Higgsfield MCP和视频生成模型Seedance 2.5，就能补上这块短板：在同一段对话里，生成品牌视频、审看、修正，再围绕视频搭建网站。下文介绍配置方法、决定成品效果的四段式提示词，以及两个搭建实例，全程不需要开发人员、设计软件或拍摄团队。
Claude Code为何需要视频连接器
Claude Code擅长生成UI组件、编写样式规则，但没有内置的媒体生成能力。没有外部帮助时，通常只能在另一个浏览器标签页打开视频工具，下载片段，再手动嵌入项目。
MCP（Model Context Protocol）是一种让AI模型调用外部工具的标准。通过MCP接入Higgsfield后，Claude可以直接调用视频和图像模型，在对话中展示生成好的片段，再把它们放进网站代码。连接配置会沿用到之后的项目，整个流程都可以靠自然语言提示词推进。
配置只需几步：
- 打开Claude桌面应用，进入Connectors。
- 添加自定义连接器，命名为Higgsfield。
- 粘贴Higgsfield提供的远程MCP地址，点击Add。
- 在弹出的浏览器窗口中，授权Claude访问你的Higgsfield账户。
- Claude设置中显示连接器已连接后，即可使用Seedance 2.5视频生成、4K超分辨率放大和图像生成等工具。
Seedance 2.5带来了什么
Seedance 2.5适合制作网站视频，主要得益于三项能力。
| 能力 | 作用 | 对网站的意义 |
|---|---|---|
| 局部编辑 | 选中有问题的区域，例如出错的标志或变形的文字，只修复这一部分 | 无需整体重新生成，避免引入新错误，也更省生成额度 |
| 参考一致性 | 凭一张参考图，在不同机位和光线下保持产品或角色外观一致 | 首屏横幅、产品卡片和功能介绍片段风格统一，不显得割裂 |
| 更长片段 | 单次最多生成30秒，Seedance 2.0为15秒 | 较长的滚动段落一次生成，无需拼接片段 |
在运动表现、纹理细节和光影真实感方面，Seedance 2.5同样出色，看起来属于目前画质最高的视频模型之一。不过它有一项局限：原生输出分辨率为720p。若用于高端网站，应让Claude把片段放大到4K，以便在高分辨率屏幕上依然清晰。
四段式提示词
成品好坏主要取决于提示词的结构。把整个网站的指令拆成四个部分：
| 部分 | 写什么 | 示例 |
|---|---|---|
| Brand | 用一句话写明品牌定位和美学方向 | 冷峻的钢色、温暖的金色、杂志风格的衬线字体 |
| Site | 页面各版块的清单 | Hero、Craft、Film、Specs、Waitlist |
| Films | 每个片段的运镜、镜头焦距和布光 | 35mm焦距 |
| Greenlight | 视频审看并批准之前，不得编写网站代码 | 批准前禁止写代码 |
▲ 四段式提示词结构
其中最关键的是Films和Greenlight两部分。AI视频生成失败，多半似乎源于只描述氛围，比如“奢华感”，而没有使用具体的拍摄术语。写清摄像机如何移动、镜头用什么焦距、光从哪个方向来，生成结果就会更接近预期。
如果没有Greenlight规则，Claude常会把未经审看、甚至带有幻觉内容的视频直接接入网站代码，导致反复返工。把批准设为硬性关口，画面和布局就都能掌握在自己手中。
实例一：随滚动拆解的腕表网站
第一个实例是一家主打瑞士极简风格的虚构高端腕表品牌网站。品牌定位、风格规范和网站提示词都由Claude按四段式格式自行拟定。页面采用滚动叙事形式，即随着访客滚动逐幕展开故事；页面滚动时，腕表机芯随之逐步拆解。产品文案介绍的是一款拥有231个零件、钛金属表壳和178处手工抛光倒角的腕表。
搭建过程如下：
- 先要求生成两段视频：一段细看表壳外观，另一段以爆炸视图展示机芯的齿轮和倒角。Seedance 2.5单次最多可生成30秒，因此每段连续的滚动画面都能一次生成。
- Claude在对话中展示生成好的片段，在改动任何源代码之前先请你审看。
- 第二段片段接近结尾时，秒针出现轻微卡顿。这时不必重新生成整段，只需让Claude修正这一处。
- Claude使用Seedance 2.5的局部编辑修复秒针动作，片段其余部分保持不变，也节省了额度。
- 修正后的视频获得批准后，Claude搭建滚动叙事页面，嵌入与滚动位置联动的高分辨率爆炸视图。
实例二：带实时3D模型的皮革手机壳网站
第二个实例是一家在巴黎接单定制皮革手机壳的虚构品牌。同样由Claude提出品牌概念、一个意为“珠宝盒”的法语名称，以及完整的网站提示词。
腕表网站以视频为核心，这个网站的主角则是Claude直接用代码编写的实时3D手机壳模型。访客滚动页面时，手机壳会旋转、翻转。Seedance 2.5生成展现皮革纹理和缝线边缘的微距视频，Claude将其放大到4K，作为循环视频嵌入页面。
▲ 实时3D模型与定制工具
页面底部是定制工具。访客可选择配色、金属件表面处理、内衬样式和压印字母，价格随之实时更新，例如从€158变为€177，旁边还有可用的预订按钮。页面中段的3D模型挡住了部分正文时，只需请Claude调整间距，布局就修正好了。
让网站显得高级的细节
- 只用一种主字体，按比例设置四级字号。
- 留出充足的留白。
- 让Claude把720p片段放大到4K。
- 小瑕疵用局部编辑修复，不要整段重新生成。
- 可借助任意对话式AI模型，把四段式提示词改写成适合自己产品或品牌的版本。
要点与上手方法
接入Higgsfield MCP后，Claude Code可以在同一处完成整个素材流程，从编写网站代码到生成视频、放大到4K，再到调整响应式布局。比工具更重要的是操作顺序：把品牌、结构和具体的拍摄指令分开写，在审看并批准视频之前，不让任何代码落地。
想亲自尝试，可以按以下步骤进行：
- 在Claude桌面应用中把Higgsfield添加为自定义连接器，并授权账户。
- 针对自己的产品或品牌，写出Brand、Site、Films、Greenlight四部分提示词。
- 在Films部分具体写明运镜、焦距和布光角度。
- 审看生成的片段，用局部编辑修复瑕疵，之后再让Claude编写网站代码。