5美元造出高端网站：AI三步建站全流程

---

一、三步建站流程

第一步：用 Claude Code + "Taste Skill" 一键生成网站

视频的核心工具是一个由一位 16 岁开发者创建并在 Twitter 上分享的开源 Taste Skill（技能文件）。这个 skill 文件内置了高端网站的设计规范：

• 间距系统
• 豪华感视觉标准
• 设计图示和排版原则

使用方法极简：

在 Claude Code 中输入：
"使用这个技能设计一个关于室内设计的高端网站"
（附上 skill 文件链接）

Claude Code 会自动读取 skill 仓库，理解设计原则，然后根据你的主题一键输出整个网站代码。Nick 展示的每个网站都是"一次提示直接出来的"（one-shot），没有手动调整设计代码。

为什么 Taste Skill 有效？

普通 Claude Code 生成网站的问题是结果参差不齐——有时候很好看，有时候像 2005 年的作品。Taste Skill 通过预设高端设计 schema 解决了这个不确定性，把设计质量的下限大幅抬高。

第二步：用 Cling 3.0 生成 3D 动效素材

光有静态布局还不够。让网站看起来"高级"的核心是动态 3D 素材——旋转的地球、爆炸式展开的室内模型、漂移的太空站。

这些素材全部用 Cling 3.0 生成，通过 Higsfield 平台访问。

Nick 的提示词公式：

"生成一段高质量的 3D 渲染风格视频：
[场景描述]
背景：白色
资产质量：超高
规格：16:9 / 1080p / 5秒
参考风格：适合落地页或产品页的那种感觉"

成本参考：每段视频约 7.5 Higsfield 积分，对应约 $0.36（按 $30/600 积分的 Pro 计划）。为了提高成功率，Nick 通常同时生成 2-3 个版本挑最好的，实际花费约 $1-2 每个场景。

从 AI 图片到 3D 视频：如果需要特定物体（如地球），可以先用 Nano Banana 等工具生成图片，再输入 Cling 说"按照这张图片，让它在原地完美自转"。这样可以精确控制 3D 素材的内容。

第三步：集成动效 + 优化 + Netlify 部署

有了基础网站和视频素材后，只需要在 Claude Code 里继续对话：

"我有一个文件叫 interior_design.mp4 在 Downloads 里。
把它设置为 hero header 的背景视频，
居中显示，加一个向内的遮罩渐变防止背景和网站界面冲突。"

Claude Code 会自动完成：定位文件、设置 CSS 背景视频、添加遮罩渐变、处理响应式布局。

滚动动效整合：

"我有一个文件叫 interior_design_exploding_view.mp4 在 Downloads 里。
在 hero header 正下方创建滚动动效：
随着用户向下滚动，逐帧播放这个爆炸视图，
同时穿插展示三段体现设计能力的文字。"

Claude Code 自动实现了 Locomotive Scroll 滚动序列，将视频帧提取为优化过的 JPEG 序列，绑定到滚动位置，实现丝滑的帧级控制。

性能优化（这段让 Nick 最感叹）：

当 Nick 说"它有点卡，帮我让它快一点"，Claude Code 立刻：

• 将视频帧提取为优化的 JPEG 文件
• 实现图片预加载
• 把 5.3MB 的 hero 图片压缩到 252KB

"作为前 web 开发者，这种操作以前要花我 3 天。它 30 秒搞定了。" ——Nick Saraev

Netlify 免费部署：

"这个网站看起来很好。把它部署到 Netlify 上。"

Claude Code 直接完成部署，给出一个可访问的 URL（如 mararin.netlify.app）。Netlify 免费计划包含：

• 无限部署预览
• 全球 CDN 加速
• 每月 300 积分额度

---

二、核心工具清单

工具	用途	费用
Claude Code	代码生成 + 文件集成 + 部署指令	按 token 计费（约 $1/网站）
Taste Skill（开源）	高端网站设计规范	免费
Cling 3.0 via Higsfield	3D 动效视频生成	$30/月（600积分），约 $0.36/段视频
Nano Banana	AI 图片生成（用于 3D 素材底图）	免费/低费
Netlify	网站托管	免费（基础版）
合计		$2-5/网站

---

三、关键洞察：这不只是"便宜了"

Nick 在视频里反复强调的不是"省钱"，而是能力门槛的根本变化：

以前：网站质量的上限由你的 CSS/JS 能力决定。没有 web 开发背景的人，$5000 的设计基本是天花板，而且还要等开发者排期。

现在：网站质量的上限由你的审美判断力决定。Taste Skill 处理了 80% 的设计规范，你只需要知道"这看起来不够豪华"或者"这个渐变颜色和主题撞了"，剩下的让 Claude Code 去修。

这个范式转变意味着：以前只有设计师才能做好的事，现在只要你有眼光就够了。Nick 作为前 web 开发者，他最感叹的不是省了钱，而是"现在我就算不写代码，产出的网站也比我以前花几天手写的强"。

迭代速度的变化：以前你发现网站加载慢，要去查是哪段 JS 阻塞渲染、要用 Lighthouse 分析、要手动拆分 chunk。现在你直接说"让它快一点"，Claude Code 自动分析瓶颈、压缩图片、实现预加载。你可以在 15 分钟内做完以前需要 3 天的视觉迭代循环。

---

四、行动启示

今天可以做的：

1. 找到 Leon 的 Taste Skill 仓库（视频右上角有链接），在 Claude Code 中测试生成一个你的品牌/项目网站
2. 在 Higsfield 注册账号，用 $30 Pro 计划生成 2-3 个 3D 素材，选最好的一个
3. 告诉 Claude Code "把这个视频文件设置为 hero 背景"，完成第一次集成
4. 说 "部署到 Netlify"，一键上线

特别适合的场景：

• 个人品牌/服务落地页
• 产品 Demo 页面
• 活动/发布页
• 内部演示用的高质感 pitch 页

注意事项：

• Cling 3.0 生成结果有随机性，建议同时生成 2-3 个版本选最好的
• 动效视频较重，注意移动端性能（可以告诉 Claude Code "对移动端做性能优化"）
• Netlify 免费版够个人/小团队用，大流量需升级

---

附录：金句收录

"A few years back, this would probably be $5,000 to $10,000 a pop. I know that because I used to sell websites for a living. Now you can literally do it in less than 10 minutes for somewhere around $2 to $3 in tokens." 几年前这样的网站要花 5000 到 10000 美元。我知道，因为我以前就是卖这个的。现在 10 分钟、$2-3 的 token 费就搞定了。——Nick Saraev

"As a former web developer, some of the stuff that this thing does blows my mind. It would have taken me like 3 days to do what this just did in 30 seconds." 作为前 web 开发者，这玩意儿做的某些事让我惊掉下巴。30 秒做完的事情，以前要花我 3 天。——Nick Saraev

"I literally just said 'make it load significantly faster' and then it made it faster. Isn't that wild." 我就说了句"让它加载明显快一点"，它就变快了。这不是很疯狂吗。——Nick Saraev

---

时间线索引

• [00:00] 展示 4 个 3D 网站成品效果（耳机/森林/室内/太空站）
• [00:43] 核心工具介绍：Claude Code + Taste Skill + Cling 3.0，三步流程
• [01:13] Taste Skill 是什么，如何在 Claude Code 中调用
• [02:30] anti-gravity（Claude Code 的一种界面）设置
• [03:00] 实操：一键生成室内设计网站
• [04:00] Higsfield + Cling 3.0：生成 3D 动效视频，费用计算
• [05:15] 提示词：旋转地球 3D 视频
• [05:45] 集成：把视频设置为 hero header 背景
• [07:25] 添加滚动动效 + 爆炸式室内视图
• [08:20] 性能优化：自动帧提取 + JPEG 预加载（30 秒完成 3 天的工作）
• [09:50] 文字可见性修复 + 渐变调整
• [12:08] Netlify 免费托管介绍 + 一键部署
• [13:17] 总结：这不是技术门槛问题，是审美门槛问题