用Claude Code打造万元级网站的完整工作流

一、99%的AI网站为何失败：法拉利没有引擎

Jack 开篇就给出了一个尖锐的判断：现在用 Claude Code 确实能快速生成漂亮的网站，但绝大多数人做出来的都是​"flashy front ends that nobody is buying"（华而不实的前端，没人买单）。

问题的根源在于：

• 只有设计，没有结构——大多数人直接跳进去让 AI 生成一个单页面，完全没有思考网站应该做什么
• 为设计而设计——"designs for their own sake"（为设计本身而存在的设计），不连接任何业务目标
• 缺少多页面架构——客户需要的不只是一个着陆页，他们需要"关于我们"、"服务详情"、"联系方式"等完整的页面体系

Jack 的核心原则是"substance first, then style"（先有实质，再谈风格）。 这意味着在写一行代码之前，你必须先理解业务需求、目标客户和竞品表现。

这个洞察对当下 AI 建站热潮尤其重要。工具让"做出来"变得容易，但"做对"依然需要人的判断力。

二、五个必问问题：从"做网站"到"做对的网站"

Jack 提出了在开始任何网站项目前必须回答的五个关键问题：

1. 这个网站是给谁看的？ ——不是给企业看的，是给访客看的。具体到什么人：忙碌的房主？SaaS 公司的采购决策者？
2. 你希望他们做一个什么动作？ ——每个网站只应该有一个核心行动号召（CTA），比如"获取免费报价"
3. 访客会有什么疑虑？ ——他们为什么不会立刻行动？价格？信任？不确定效果？
4. 网站的调性是什么？ ——专业严肃？年轻活泼？奢华高端？
5. 有没有现成的品牌素材？ ——Logo、品牌色、已有的图片或视频

这五个问题构成了"substance"（实质）的基础。 Jack 强调，"everybody misses a step and it's the reason why the websites don't physically work"（每个人都漏掉了一步，这就是网站不起作用的原因）。

三、第一步：用 Firecrawl 做竞品调研

Jack 的工作流从调研开始，而非从设计开始。他使用的工具是 Firecrawl（一个网页爬取和分析工具），通过 Claude Code 的 MCP（Model Context Protocol）集成来调用。

具体做法：

1. 在 Firecrawl 获取 API Key（有免费额度）
2. 在 Claude Code（通过 Antigravity/VS Code）中给出如下提示词：

"Using the Firecrawl MCP, I would like you to do some research and find me five of the top performing driveway cleaning websites in Ontario. And I want you to answer the below five questions."（用 Firecrawl MCP，帮我调研安大略省排名前五的车道清洗网站，并回答以下五个问题。）

3. Claude 会基于 Google 评价、SEO 排名等指标建立一个小型评估算法，找出该领域表现最好的网站
4. 输出结果包含五个问题的具体答案，比如"目标客户是盯着脏兮兮、有污渍或冬季损坏车道的房主"

这一步的价值在于：你不是凭空想象，而是基于该领域真实成功案例的数据来构建网站。 而且这些调研成果在跟客户沟通时也是加分项——"it's great to know exactly what they're doing"（了解客户的行业细节是巨大的优势）。

四、第二步：用 Reloom 构建线框图

这是 Jack 认为大多数人犯的最大错误的环节："you just jump into building a single page website"（你就直接跳进去做单页面网站了）。正确的做法是先规划网站的站点地图（Site Map）和线框图（Wireframe）。

他推荐使用 Reloom（relume.io）这个工具，它专注于网站结构化设计：

1. 站点地图阶段：定义网站有哪些页面、每个页面包含哪些区块（导航栏、英雄区、特性展示、FAQ、CTA等）
2. 线框图阶段：为每个页面生成低保真度的布局设计，可以自由拖拽调整区块顺序
3. 样式指南阶段：定义颜色、字体、按钮样式等视觉规范

Jack 特别指出了一个巧妙的配合：用 Claude 来决定页面数量和配色。他回到 Claude 问"based on everything that you know, how many pages should this website be realistically?"（基于你了解的所有信息，这个网站实际上应该有几个页面？），Claude 建议5-7个页面。对于配色，Claude 推荐了蓝色和青色系——因为在服务行业，蓝色传达信任感。

线框图的本质不是"设计网站"，而是"思考网站"。 它迫使你在写代码之前就想清楚每个页面的目的和每个区块的功能。

五、第三步：导出到 Claude Code 构建真正的网站

当线框图在 Reloom 中调整满意后，Jack 将其导出为 React 代码，然后在 Claude Code 中进行完整构建：

1. 导出选择 React 格式，下载 ZIP 文件
2. 在 Claude Code 中给出提示词：

"I just downloaded a folder... I would like you to bring it into this project folder. Create this and open up for me in localhost. Install all the packages that you need. And crucially, I want you to wire the website together in line with its sitemap."（我刚下载了一个文件夹……请你把它导入项目，在本地启动。安装所有需要的包。关键是，按照站点地图把网站连接起来。 ）

3. Claude Code 自动安装依赖、建立路由、连接所有页面

关键结果：一次性生成包含首页、服务页、服务详情页、画廊页、关于我们页在内的完整多页面网站，所有页面都有独立内容和导航连接。Jack 对此表示："this is all on one shot, by the way. How you don't get one shots like this with other systems"（这全是一次性完成的。用其他系统你做不到这种一次性效果）。

六、第四步：AI 图片生成与设计提升

网站结构就位后，Jack 进入视觉升级环节，使用两个关键工具：

Kia API + Nano Banana 2（图片生成）

• 在 Kia API 获取 API Key（声称是最便宜的 AI 图片生成方式之一）
• 使用 Nano Banana 2 模型，设置 2K 画质
• 给 Claude Code 的提示词要求它"go through the entire website and improve it from a design perspective"（遍历整个网站，从设计角度进行改进），同时用 API Key 生成适合网站的图片

Anthropic 官方设计技能（Design Skill）

Jack 还使用了 Anthropic 官方在 GitHub 上发布的设计技能文档：

"I'd like you to use the below GitHub repo to get Anthropic's design skill and use that when building out the entire website."（请使用这个 GitHub 仓库获取 Anthropic 的设计技能，在构建整个网站时使用它。）

效果展示：从带有占位图片的模板网站，变成了有真实、高质量 AI 生成图片的专业网站。Jack 的反应是"this is ridiculous... this is nuts"（这太不可思议了）。

七、第五步：滚动动画——让网站"活"起来

这一步是 Jack 认为让网站从"专业"升级到"惊艳"的关键差异化因素。

创建前后对比视频

1. 使用一个资产生成器技能（Asset Generator Skill） ——Claude Code 会根据网站主题生成图片提示词（比如"脏车道"和"干净车道"的精确描述）
2. 在 Higfield 平台生成两张图片（脏车道 + 干净车道），都要求白色背景以便嵌入网站
3. 使用 Higfield 的视频功能，上传前后两张图片作为起止帧，用 Cling 3.0 模型生成5秒的过渡动画视频

将视频变为滚动动画

关键操作是使用一个3D 网站构建器技能（3D Asset Builder Skill） ，将下载的视频转换为滚动触发动画——用户滚动页面时，车道从脏到干净的过渡会跟随滚动进度播放。

这个细节值得关注：视频不是自动播放的，而是跟随用户滚动播放的。 这种交互方式在高端网站中很常见，但通常需要专业前端开发者花大量时间实现。现在 Claude Code 加上正确的技能文件就能做到。

八、最后一步：部署上线

Jack 的部署方案是 GitHub + Vercel：

"Create a GitHub repo for this and then create a website on Vercel with multiple pages that reflect the pages on the website."（为此创建一个 GitHub 仓库，然后在 Vercel 上创建一个多页面网站。）

他特别提到，如果你不熟悉 GitHub CLI 和 Vercel CLI 的安装配置，可以参考他另一个教程视频。一旦这些工具安装好，Claude Code 可以自动完成推送和部署的全过程。

完整工作流总结

金句收录

1. "It's like having a Ferrari with no engine. Very flashy, but it's probably not going to get you to where you want to go to." （这就像一辆没有引擎的法拉利。非常拉风，但可能到不了你想去的地方。）

2. "Substance first, then style." （先有实质，再谈风格。）

3. "Who is the website for? Not the business, the visitor." （这个网站是给谁看的？不是给企业看的，是给访客看的。）

4. "This level of research is really important because when you're talking to clients, it's great to know exactly what they're doing." （这种程度的调研非常重要，因为跟客户交流时，了解他们行业的细节是巨大的优势。）

5. "The mistake that almost everybody makes — you just jump into building a single page website." （几乎所有人都犯的错误——直接跳进去做单页面网站。）

6. "People don't just get a landing page, they get a contact us page, they get a services page, they get everything that they need." （客户得到的不只是一个着陆页，还有联系页、服务页，他们需要的一切。）

7. "This is all on one shot, by the way. How you don't get one shots like this with other systems." （顺便说一句，这全是一次性完成的。用其他系统你做不到这种一次性效果。）

8. "You're only limited by imagination with this stuff." （在这些事情上，唯一限制你的只有想象力。）

9. "We begin with the research of best performers. We build wireframes. And then we build that into a beautiful website." （我们从调研最佳表现者开始，构建线框图，然后把它变成漂亮的网站。）

时间线索引