定制 3D 网站不只是一个交给 AI 编程的任务。在一个服务机构网站项目中,Claude Code 协助制作交互式页面,Higgsfield 则将现有的客户照片变成宽屏动态画面。而赋予这些成果意义的关键决定——网站要触达谁、视觉设计要传达什么,以及网站在桌面屏幕之外能否正常使用——仍要由人来作出。
先明确需求,再生成界面
这个项目面向三类人:考虑采用 AI 转型服务的企业主、潜在赞助商,以及 AI 服务机构负责人或顾问。与仅仅要求一个醒目的首页相比,明确这些受众能为编程智能体提供更有用的方向。该服务将自身定位为把七个月的企业 AI 转型压缩到七个自然日,因此网站还需要解释这项具体服务,而不只是展示视觉特效。
一份交给 Claude Code 的实用初始需求说明,应包含受众画像、价值主张和品牌语气。接下来要确定设计概念:访客应该看到什么,才能理解视觉设计与业务的联系?这个项目选择了一个不断脉动的 3D 球体,用来表现分散的企业数据源汇聚到智能核心。复古风格的开场页面渐隐,过渡到深色调的交互式体验。球体会随光标移动而变化,周围环绕着与办公工具相关的悬浮节点。
这个概念为编程工作指明了方向,但也带来了取舍。精心设计的开场转场可能令访客印象深刻,也可能耽误想立即了解服务的人。特效是否服务于目标受众,需要人工审视;把特效生成出来,并不能回答这个问题。
让媒体素材贴合实际业务
网站使用的是客户合作项目的照片,而不是默认的图库素材。部分项目缺少适合宽幅案例卡片的横屏视频素材。通过模型上下文协议(MCP)连接——一种让 Claude Code 调用外部工具的方式——Higgsfield 将现有的 9:16 竖版照片扩展为 16:9 宽屏图像。这种*扩图(outpainting)*会在照片原有边界之外补充画面。扩展后的静态图像随后成为短视频循环片段的输入素材。

▲ 竖版图像宽屏扩展
模型选择还需要再审视一轮。同一批原始图像分别用 Cinema Studio 3.0、Kling 3.0 Pro、MiniMax HQ、Seedance 2.5 和 Veo 3.1 Ultra 进行了测试。在这次制作中,Cinema Studio 3.0 因调色效果和更干净的动态表现而被选中。其他结果可能出现运动幅度过大或原图失真的问题。更有用的做法是将生成结果与原始素材比较,而不是认为第一个生成的视频片段就能直接发布。
文字也应遵循同样的标准。千篇一律的卡片、图库图片和未经编辑的 AI 文案,可能让一个设计复杂的网站显得与其他网站没有区别。Claude Code 可以快速起草和实现页面,但网站的主张与案例描述仍需针对目标买家撰写或大幅编辑。
将参考设计变成界面,再进行测试
在界面设计上,项目参考了 Mobbin 的网站设计范式和 21st.dev 的组件。两者都可通过 MCP 连接供 Claude Code 使用,以便在编程流程中搜索布局和组件代码。项目先生成了多种球体设计、卡片布局和导航方案,再从中作出选择。Three.js 是一个用于渲染交互式 3D 图形的 JavaScript 库,它实现了球体的实时运动和镜头行为。
这些元素的作用并不限于首页主视觉。网站将球体与客户展示卡片结合,卡片打开后可查看媒体素材和项目简介。独立的方法论板块解释了服务的五个环节:审计、数据集中化、工作空间搭建、定制应用开发和 AI 智能体。经过多轮反馈,各板块的动画和转场也得到完善。
这也明确了人机分工。AI 工具可以生成不同方案,并实现选定的交互方式。人仍须判断导航是否易懂、案例是否讲得充分,以及动态效果是否分散了访客对服务内容的注意力。桌面端效果获得认可并不意味着项目完成:复杂的 3D 特效还需要专门进行一轮移动端响应式适配,因为手机布局和性能会带来不同的问题。
将发布和效果衡量纳入建站流程
如果特效遮挡了访客的下一步操作,即使网站视觉效果出众,传统表单带来的转化也可能减少。这个项目加入了访客识别平台 Ospry,以便在表单提交之外衡量访客兴趣。Ospry 声称可以识别约 40% 的美国匿名访客;其给出的估计是,在已解析出的访客档案中,准确且可验证的匹配占 80% 至 85%。这些数字是平台的主张和估计,并不保证适用于每个网站或地区。
Claude Code 使用 Firecrawl 读取 Ospry 的集成文档。Firecrawl 是一款可将网页内容提取为可用文本的工具。随后,Claude Code 在网站代码仓库中加入了所需的跟踪脚本。检查仪表盘后,确认已发布的网站正在收到访客事件。这个验证步骤很重要:生成的集成代码只有在已部署的网站上正常运行才有用。

▲ 访客识别与匹配评分
网站开始获得流量、移动端优化完成后,仪表盘显示,24 小时内识别出 194 家到访企业。仪表盘还展示了企业信息、会话活动和匹配评分。理想客户画像(ICP)评分用于衡量一家企业与选定客户标准的吻合程度;该项目将满分 100 分中的 70 分作为启动自动化触达前的建议门槛。Ospry 解析出的数据也可以导入客户数据库,或传送至 Expandi 等工具,用于后续跟进。
访客识别还涉及另一项需要权衡的判断。据称,该功能对美国流量的效果更好;使用时也需要核查适用的隐私要求。根据相关企业属性和职务进行筛选,还能让触达更有针对性。识别到一次访问,或得到较高的匹配评分,都不能证明有人有购买意向。
下次建站可以借鉴什么
先明确受众和服务内容,再选择有助于解释两者的视觉概念。用 Claude Code 探索并实现不同方案;当现有素材的格式不合适时,用 Higgsfield 改造与业务相关的原始素材。比较生成的媒体内容、编辑文案、在手机上测试交互,并在部署后验证效果衡量工具。AI 可以缩短制作和修改周期;网站能否真正发挥作用,仍取决于每个关键节点上的人为判断。