Claude Code建站��战：从品牌提取到3D动画网站一键部署

Build Premium Websites in Minutes with Claude Code and Nano Banana 2

来源Jack Roberts视频时长约23分钟报告字数2,090字阅读时间5min原始链接https://www.youtube.com/watch?v=TZUTe7s11-I

本报告由 AI 深度分析生成，基于视频完整字幕。

📺 原视频约23分钟📖 本报告 2,090字⏱ 预计阅读 5min

导读

Jack Roberts 是一位 AI 自动化领域的创业者，曾创建并出售了一家拥有超过 6 万客户的科技公司，目前运营着一家盈利的 AI 自动化业务。他的内容特点是面向变现——不只是教你用工具，而是教你怎么用这些工具赚钱。

这期视频展示了一套完整的 AI 建站流程：用 Claude Code + Nano Banana 2（最新 AI 图像/视频生成模型）+ Windsurf，在几分钟内构建出带 3D 动画、移动端响应、SEO 优化的专业级网站，并直接部署到 Vercel 上线。

核心价值： 这不是"做一个玩具网页"——Jack 本人靠卖网站赚过数千美元，他展示的技术可以直接用于给客户交付高品质网站，同时成本接近零。

五步流程全景

品牌提取 → AI素材生成 → Claude Code建站 → 一键部署上线 → SEO优化
(Firecrawl)  (Nano Banana 2)  (Windsurf+Skill)   (Vercel+GitHub)   (Claude Skill)

第一步：品牌提取——30秒抓取任何公司的品牌资产

工具：Firecrawl.dev

操作：输入目标公司的网址 → 选择 Scrape → Markdown → Branding → 一键提取。

获取内容： Logo、品牌色、字体、核心文案、品牌风格——所有构建网站需要的"品牌 DNA"。

为什么重要： 如果你要给客户做网站，这一步让你 30 秒就掌握他们的品牌身份，而不是花一天时间在他们的网站上到处翻。Firecrawl 还有 API，可以接入 Claude Code 实现规模化。

第二步：AI 素材生成——用 Nano Banana 2 创建 3D 视觉

这是让网站从"普通"变"惊艳"的关键环节。

需要生成的三样东西

起始图像：完整版的视觉（比如一辆装满家具的搬家车）
爆炸图像：同一画面的"解构版"（家具从车里飞出来）
过渡视频：把两张图连成一段动画

操作细节

用 Claude Code 的 Skill（scroll-stop prompter） 自动生成 Nano Banana 2 的 prompt——不需要自己写
在 Nano Banana 2 中设置 16:9 比例、至少 2K 分辨率、4 次迭代
关键技巧：指定"clean white background"——背景干净才能在网站上好看
生成第二张图时用 Reference 功能引用第一张——确保风格一致
用 Hailuo（视频生成工具）把两张图合成动画——一个 prompt 就出成品

Jack 的经验："1K 分辨率的东西看起来就像小孩在花园里用 PowerPoint 做的。至少 2K 起步。"

第三步：Claude Code 建站——一句话生成带 3D 动画的网站

工具：Windsurf（Google 的免费 IDE）+ Claude Code + 自定义 Skill

Jack 提供了两个预制 Skill：

3D Asset Generator：生成 3D 视觉素材的 prompt
3D Website Builder：用 Claude Code 构建带动画的网站

核心操作

在 Windsurf 中打开新项目
激活 Claude Code
用 /skill-creator 调用网站构建技能
告诉它：视频文件在哪、要什么效果
Claude Code 自动生成完整的 HTML/CSS/JS 网站

进阶技巧——复制现有网站的结构：

用 "HTML Website Extractor"（Google 搜索就有）下载目标网站的 HTML
告诉 Claude Code："用这个 HTML 作为骨架，替换内容，加入我们的 3D 动画"
Claude Code 输出一个保留原站结构但内容全新的网站

Jack 演示了用一家搬家公司（AnyVan）的现有网站做骨架，几分钟内生成了一个带爆炸动画的全新版本——同样的结构、同样的品牌感，但加入了令人惊艳的 3D 过渡效果。

他还演示了对 rocket.net 做同样的事——一次性生成，结构高度还原，但图片全部用 Nano Banana 2 重新生成，呈现出独特的视觉效果。

第四步：一键部署到 Vercel——网站立刻在线

工具：GitHub + Vercel（都有免费计划）

操作：

在 Windsurf 里连接 GitHub 和 Vercel（只需配置一次 API Key）
对 Claude Code 说："帮我创建 GitHub 仓库，发布到 Vercel"
Claude Code 自动完成：创建仓库 → 推送代码 → 部署上线 → 返回网站链接

域名绑定： 在 Vercel 后台 → Domains → 输入你想要的域名 → 完成。

分析集成： 在 Vercel 开启 Analytics → 复制代码 → 告诉 Claude Code "请把分析代码加到我的网站" → 自动完成。之后你就能在 Vercel 后台看到访客数据。

第五步：多页面 + SEO 优化

自动添加多页面

用一段标准 prompt 告诉 Windsurf：

分析现有网站的设计语言
询问我想创建哪些页面
每个新页面匹配现有设计
添加 SEO 优化和结构化数据
确保完全响应式
更新所有页面的导航

SEO 审计

Jack 提供了一个 Claude SEO Optimizer Skill，运行后会生成完整的 SEO 审计报告：

页面级分析：每个页面的 SEO 表现
关键词分析
内部链接结构
技术 SEO 问题
执行摘要 + 优先级排序的行动清单

"All of this is embedded in the skill. You get a breakdown about why it's good, why it's not good, executive summary, page breakdown, sitewide issues, technical content strategy."

MONEY 框架：如何靠 AI 建站赚钱

Jack 在视频最后分享了他的商业模式框架：

步骤	含义	操作
M - Map	发现市场	找到无聊但赚钱的行业（水管工、搬家、装修……）
O - Obtain	获取线索	用工具抓取潜在客户名单并丰富数据
N - Nail	做好产品	用上述流程快速构建精美网站
E - Execute	免费交付	把做好的网站免费送给客户（因为自动化后成本接近零）
Y - Yield	持续变现	卖后续服务——SEO 优化、内容更新、月度维护（经常性收入）

行动清单

下载 Jack 的 Claude Skills（视频描述链接）——3D Asset Generator + 3D Website Builder + SEO Optimizer
找一个本地企业的网站，用 Firecrawl 提取品牌 → 用 Nano Banana 2 生成素材 → 用 Claude Code 建站
部署到 Vercel，做出一个完整的作品案例
用 MONEY 框架规划你的第一个客户——先免费送网站，再卖 SEO 和维护服务

金句收录

"I've sold websites for thousands and thousands of dollars. And some of the techniques I'm going to show you are going to blow you away." （我卖过价值数千美元的网站。我要展示的一些技术会让你大吃一惊。）

"1K resolution looks like some kid in the garden has had access to PowerPoint. Got to be at least 2K." （1K 分辨率看起来就像小孩在花园里用 PowerPoint 做的。至少 2K 起步。）

"We give these beautiful websites to them completely for free because we can automate that at scale." （我们把这些精美的网站免费送给他们——因为我们可以规模化自动生产。）

时间线索引

时间	内容
[00:00]	开场：用 Claude Code + Nano Banana 2 建高端网站
[01:16]	第一步：用 Firecrawl 提取品牌资产
[02:26]	第二步：用 Nano Banana 2 生成 3D 视觉素材
[07:27]	第三步：Claude Code + Skill 生成带动画的网站
[10:33]	进阶：用 HTML 提取器复制现有网站结构
[11:40]	第四步：GitHub + Vercel 一键部署上线
[15:57]	添加网站分析
[16:43]	演示：rocket.net 网站克隆 + Nano Banana 2 图片替换
[17:50]	第五步：多页面创建 + SEO 优化
[21:29]	SEO 审计 Skill 演示
[22:08]	MONEY 框架：如何靠 AI 建站赚钱

Ctrl+Enter 发送

还没有评论，来第一个留言吧 ✨

你可能也喜欢

AI 前沿

500个案例揭示：企业最愿付钱的5类自动化

Nate Herk \ × 无（单人分享）

10min · 4,607字

AI 前沿

零代码建站的五个实战秘诀：Claude Code 网站设计完全指南

Nate Herk × 无（单人教程）

9min · 4,381字

AI 前沿

Google五连发：Gemini 4本地运行 + VEO 3.1免费AI视频 + Google Vids全管线

Julian Goldie

4min · 1,872字

AI 前沿

Anthropic封禁订阅接入OpenClaw后的省钱策略

Alex Finn × 无（单人讲解+实操演示）

5min · 2,285字

← 浏览更多报告

AI 前沿

Claude Code建站��战：从品牌提取到3D动画网站一键部署

Build Premium Websites in Minutes with Claude Code and Nano Banana 2

来源Jack Roberts视频时长约23分钟报告字数2,090字阅读时间5min原始链接https://www.youtube.com/watch?v=TZUTe7s11-I

本报告由 AI 深度分析生成，基于视频完整字幕。

📺 原视频约23分钟📖 本报告 2,090字⏱ 预计阅读 5min

导读

核心价值： 这不是"做一个玩具网页"——Jack 本人靠卖网站赚过数千美元，他展示的技术可以直接用于给客户交付高品质网站，同时成本接近零。

五步流程全景

品牌提取 → AI素材生成 → Claude Code建站 → 一键部署上线 → SEO优化
(Firecrawl)  (Nano Banana 2)  (Windsurf+Skill)   (Vercel+GitHub)   (Claude Skill)

第一步：品牌提取——30秒抓取任何公司的品牌资产

工具：Firecrawl.dev

操作：输入目标公司的网址 → 选择 Scrape → Markdown → Branding → 一键提取。

获取内容： Logo、品牌色、字体、核心文案、品牌风格——所有构建网站需要的"品牌 DNA"。

第二步：AI 素材生成——用 Nano Banana 2 创建 3D 视觉

这是让网站从"普通"变"惊艳"的关键环节。

需要生成的三样东西

起始图像：完整版的视觉（比如一辆装满家具的搬家车）
爆炸图像：同一画面的"解构版"（家具从车里飞出来）
过渡视频：把两张图连成一段动画

操作细节

用 Claude Code 的 Skill（scroll-stop prompter） 自动生成 Nano Banana 2 的 prompt——不需要自己写
在 Nano Banana 2 中设置 16:9 比例、至少 2K 分辨率、4 次迭代
关键技巧：指定"clean white background"——背景干净才能在网站上好看
生成第二张图时用 Reference 功能引用第一张——确保风格一致
用 Hailuo（视频生成工具）把两张图合成动画——一个 prompt 就出成品

Jack 的经验："1K 分辨率的东西看起来就像小孩在花园里用 PowerPoint 做的。至少 2K 起步。"

第三步：Claude Code 建站——一句话生成带 3D 动画的网站

工具：Windsurf（Google 的免费 IDE）+ Claude Code + 自定义 Skill

Jack 提供了两个预制 Skill：

3D Asset Generator：生成 3D 视觉素材的 prompt
3D Website Builder：用 Claude Code 构建带动画的网站

核心操作

在 Windsurf 中打开新项目
激活 Claude Code
用 /skill-creator 调用网站构建技能
告诉它：视频文件在哪、要什么效果
Claude Code 自动生成完整的 HTML/CSS/JS 网站

进阶技巧——复制现有网站的结构：

用 "HTML Website Extractor"（Google 搜索就有）下载目标网站的 HTML
告诉 Claude Code："用这个 HTML 作为骨架，替换内容，加入我们的 3D 动画"
Claude Code 输出一个保留原站结构但内容全新的网站

他还演示了对 rocket.net 做同样的事——一次性生成，结构高度还原，但图片全部用 Nano Banana 2 重新生成，呈现出独特的视觉效果。

第四步：一键部署到 Vercel——网站立刻在线

工具：GitHub + Vercel（都有免费计划）

操作：

在 Windsurf 里连接 GitHub 和 Vercel（只需配置一次 API Key）
对 Claude Code 说："帮我创建 GitHub 仓库，发布到 Vercel"
Claude Code 自动完成：创建仓库 → 推送代码 → 部署上线 → 返回网站链接

域名绑定： 在 Vercel 后台 → Domains → 输入你想要的域名 → 完成。

分析集成： 在 Vercel 开启 Analytics → 复制代码 → 告诉 Claude Code "请把分析代码加到我的网站" → 自动完成。之后你就能在 Vercel 后台看到访客数据。

第五步：多页面 + SEO 优化

自动添加多页面

用一段标准 prompt 告诉 Windsurf：

分析现有网站的设计语言
询问我想创建哪些页面
每个新页面匹配现有设计
添加 SEO 优化和结构化数据
确保完全响应式
更新所有页面的导航

SEO 审计

Jack 提供了一个 Claude SEO Optimizer Skill，运行后会生成完整的 SEO 审计报告：

页面级分析：每个页面的 SEO 表现
关键词分析
内部链接结构
技术 SEO 问题
执行摘要 + 优先级排序的行动清单

"All of this is embedded in the skill. You get a breakdown about why it's good, why it's not good, executive summary, page breakdown, sitewide issues, technical content strategy."

MONEY 框架：如何靠 AI 建站赚钱

Jack 在视频最后分享了他的商业模式框架：

步骤	含义	操作
M - Map	发现市场	找到无聊但赚钱的行业（水管工、搬家、装修……）
O - Obtain	获取线索	用工具抓取潜在客户名单并丰富数据
N - Nail	做好产品	用上述流程快速构建精美网站
E - Execute	免费交付	把做好的网站免费送给客户（因为自动化后成本接近零）
Y - Yield	持续变现	卖后续服务——SEO 优化、内容更新、月度维护（经常性收入）

行动清单

下载 Jack 的 Claude Skills（视频描述链接）——3D Asset Generator + 3D Website Builder + SEO Optimizer
找一个本地企业的网站，用 Firecrawl 提取品牌 → 用 Nano Banana 2 生成素材 → 用 Claude Code 建站
部署到 Vercel，做出一个完整的作品案例
用 MONEY 框架规划你的第一个客户——先免费送网站，再卖 SEO 和维护服务

金句收录

"I've sold websites for thousands and thousands of dollars. And some of the techniques I'm going to show you are going to blow you away." （我卖过价值数千美元的网站。我要展示的一些技术会让你大吃一惊。）

"1K resolution looks like some kid in the garden has had access to PowerPoint. Got to be at least 2K." （1K 分辨率看起来就像小孩在花园里用 PowerPoint 做的。至少 2K 起步。）

"We give these beautiful websites to them completely for free because we can automate that at scale." （我们把这些精美的网站免费送给他们——因为我们可以规模化自动生产。）

时间线索引

时间	内容
[00:00]	开场：用 Claude Code + Nano Banana 2 建高端网站
[01:16]	第一步：用 Firecrawl 提取品牌资产
[02:26]	第二步：用 Nano Banana 2 生成 3D 视觉素材
[07:27]	第三步：Claude Code + Skill 生成带动画的网站
[10:33]	进阶：用 HTML 提取器复制现有网站结构
[11:40]	第四步：GitHub + Vercel 一键部署上线
[15:57]	添加网站分析
[16:43]	演示：rocket.net 网站克隆 + Nano Banana 2 图片替换
[17:50]	第五步：多页面创建 + SEO 优化
[21:29]	SEO 审计 Skill 演示
[22:08]	MONEY 框架：如何靠 AI 建站赚钱