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

Building Beautiful Websites with Claude Code Is Too Easy

来源Nate Herk × 无（单人教程）视频时长约28分钟报告字数4,381字阅读时间9min原始链接https://www.youtube.com/watch?v=86HM0RUWhCk

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

📺 原视频约28分钟📖 本报告 4,381字⏱ 预计阅读 9min💡 5个核心观点

导读

Nate Herk 是 YouTube 上专注 AI 自动化的创作者，运营着一个名为 AI Automation Society 的付费社区。他的频道以实操性强、面向零编程基础的受众而著称。这期视频不是泛泛而谈"AI 建站"，而是手把手演示了5个具体的、可立即复制的技巧，让 Claude Code 生成的网站从"一眼看出是 AI 做的"变成"看起来像专业设计师做的"。

为什么值得读？ 因为大多数人用 AI 建站的痛点不是"能不能做出来"，而是"做出来太丑了"。Nate 给出了一套系统化的解决方案——从基础配置到视觉打磨到部署上线的完整工作流。即使你已经用过 Claude Code，这里的截图循环和组件拼装技巧也很可能是你没想到的。

一句话核心论点：用对了这5个技巧，一句话提示词就能生成品牌化的专业网站——关键不是你打什么字，而是你怎么配置 Claude Code 的"眼睛"和"知识"。

核心观点速览

CLAUDE.md 文件是你的"系统提示词"——每次对话前 Claude Code 都会先读它，写好这个文件比写好提示词更重要。
Frontend Design Skill 能让输出质量从40%跳到60%——一个第三方技能包，安装后 Claude Code 的前端设计水平直接跃升一个档次，按钮有光效，布局有动画，不再是"纯 AI 味"。
截图循环（Screenshot Loop）是最被低估的技巧——让 Claude Code 用 Puppeteer 截取自己构建的页面，对比参考图，自动做两轮修改。相当于给 AI 装了"眼睛"。
克隆+换肤是最高效的建站方式——找到喜欢的网站 → 全页截图 + 复制 CSS → 让 Claude Code 克隆 → 换成自己的品牌色和 logo。比从零开始快10倍。
21st.dev 的组件库是"锦上添花"的秘密武器——不需要克隆整个网站，只需要复制单个组件的代码（如动画背景、发光按钮），贴给 Claude Code 说"加到这里"。

前置准备：环境搭建

Nate 开头快速过了一遍基础设置，对新手非常友好：

下载 VS Code（Visual Studio Code）——这是 Claude Code 运行的 IDE 环境
安装 Claude Code 扩展——在 VS Code 左侧 Extensions 中搜索"Claude Code"并安装
登录 Anthropic 账号——需要 Pro（$20/月）或 Max 订阅，Free 用户无法使用 Claude Code
创建一个空文件夹作为项目目录——在 VS Code 中打开这个文件夹

建议：如果你打算一天建多个网站，Pro 的用量限制可能不够，Nate 建议直接上 Max 套餐。

Hack #0：CLAUDE.md——比提示词更重要的"系统指令"

它是什么

CLAUDE.md 是一个放在项目根目录的 Markdown 文件，Claude Code 在每次对话之前都会先读它。 你可以把它理解为"系统提示词"（System Prompt）——它定义了这个项目中 Claude Code 应该遵守的规则。

为什么编号是"0"

Nate 故意把它编为"第0号"技巧，因为：

它是所有后续技巧的前提条件——后面的截图循环、品牌资产引用等都是通过 CLAUDE.md 中的规则来触发的
它需要反复迭代——你不会一开始就知道完美的规则是什么，随着项目推进会不断修改

关键内容

Nate 提供了一个免费的 CLAUDE.md 模板（在他的 School 社区中可下载），其中包含了几个关键规则：

"Always invoke the frontend design skill before writing any frontend code every session, no exceptions."（每次写前端代码前必须调用前端设计技能，无例外）
截图工作流配置——定义了 Puppeteer 截图的触发条件和保存路径
品牌资产引用——告诉 Claude Code 去哪里找 logo 和品牌指南

行动启示： 不要跳过 CLAUDE.md 直接开始写提示词。花10分钟配置好这个文件，能省下后面几个小时的反复修改。把它想象成你雇了一个新设计师，入职第一天给他的"项目手册"。

Hack #1：Frontend Design Skill——一键升级设计品质

什么是 Skill

Claude Code 的 Skill 系统类似于 Custom GPT 中的自定义指令，但以 Markdown 文件的形式存在。工作机制是：

用户提问
Claude Code 读取 CLAUDE.md
Claude Code 判断："我的技能库里有没有能帮我做得更好的技能？"
如果有，调用该技能的指令 → 执行
如果没有，用通用知识 → 执行

Frontend Design Skill 的效果

Nate 展示了一个推文中的案例：只用一句"create a music player app"（创建一个音乐播放器）——

没有 Skill：出来的是典型的"AI 做的"风格，平面、无动画、模板感强
有 Skill：自带动画效果、动态元素、现代设计语言

安装方法

只需运行两条命令（可以直接粘贴到 Claude Code 聊天框中执行）。安装后全局生效，所有 Claude Code 项目都能使用。

实战演示

Nate 创建了一个 brand_assets 文件夹，放入了 logo 和品牌指南（包含颜色、字体、图标等），然后只输入了一句话：

"Build me a modern and professional landing page for AI Automation Society."（帮我建一个现代专业的 AI Automation Society 着陆页。）

结果： Claude Code 自动读取了 CLAUDE.md → 读取品牌资产 → 调用前端设计技能 → 生成了一个完整的单页网站，包含：

带动画的导航栏和 Hero 区域
滚动的科技公司 Logo 横幅（N8N、Make、Claude、GPT-4、Zapier、Airtable）
社区评分展示
数据统计区
客户评价区
底部 CTA（Call to Action）
完全匹配品牌颜色、字体和 logo

"For basically a one-sentence prompt, this is super super solid with the frontend design skill."（一句话提示词就能做到这个程度，前端设计技能真的太强了。）——Nate

Hack #2：截图循环（Screenshot Loop）——给 AI 装上"眼睛"

核心理念

AI 很擅长"从0到60%"，但从60%到100%需要大量人工微调。截图循环的目的是让 AI 自己完成从60%到80%的部分。

工作原理

Claude Code 写好 HTML/CSS/JS
启动本地服务器
用 Puppeteer 自动截图当前页面的各个区域（Hero、Stats、About 等）
对比截图与预期效果，发现不匹配的地方
自动修改代码
重复步骤3-5（至少做两轮审查和打磨）

Nate 展示了实际生成的 temp_screenshots 文件夹——Claude Code 在构建第一版网站时就自动拍了10张截图，逐个区域检查并优化。

配置方法

在 CLAUDE.md 中添加一个"Screenshot Workflow"部分，描述用 Puppeteer 截图的规则。然后让 Claude Code 执行初始化：

"Hey Claude Code, can you set up Puppeteer to take screenshots?"（帮我配置 Puppeteer 截图工具。）

Claude Code 会自动安装所需依赖并完成配置。

重要注意事项

动画元素会让截图循环"翻车"。 Nate 亲身踩坑：如果你的页面有动态背景或复杂动画，截图可能无法正确捕捉这些效果，导致 Claude Code 以为自己没做好，陷入"我觉得还不够好→再改→截图还是不对→再改"的死循环。

解决方案： 在处理动画组件时，明确告诉 Claude Code 关闭截图工具：

"Because this is an animated background, do not use the screenshot tool to compare. Just work in the code and then I will let you know if we need to make any changes."（因为这是动画背景，不要用截图工具对比，直接改代码，我来告诉你是否需要调整。）

Hack #3：克隆网站+换肤——最高效的建站工作流

方法论

这是整个视频中实用价值最高的技巧。核心思路：

找到一个你喜欢的网站作为参考
全页截图——按 F12 打开开发者工具 → 按 Ctrl+Shift+P → 搜索"screenshot" → 选择"Capture full size screenshot"（截取完整页面）
复制 CSS 样式——在 Elements 面板中复制 Style 区域的所有样式代码
交给 Claude Code：截图（视觉参考）+ CSS（样式参考）+ "clone this website"（克隆指令）
Claude Code 利用截图循环反复对比自己的输出与参考图，直到足够接近
最后换肤——让它用你的品牌色、logo、文案替换

灵感来源网站

网站	特点
Dribbble	设计师作品集，大量高质量 UI 设计
Godly Website	精选优秀网站设计
Awwwards (3个W)	获奖网站展示

实战效果

Nate 找了一个法语的紫色调商业网站作为参考，只给了截图和 CSS，一句话"clone this website"——Claude Code 生成了一个结构高度相似的克隆版本（相同的顶部菜单、Dashboard 区域、卡片布局、底部 CTA）。

然后他再用一句话切换品牌："Work in our brand assets — our brand guidelines and our AIS logo."——网站立即变成了 AI Automation Society 的品牌风格，颜色从紫色变为品牌色，法语全部翻译成英语，Dashboard 模拟数据也换成了社区相关的内容。

关键洞察：克隆+换肤的效率远高于从零开始。 你不需要自己描述"我想要一个什么风格的网站"——直接给一个活生生的例子，让 AI 去模仿，然后换皮。

Hack #4：组件拼装——用 21st.dev 做精细化升级

从"整体克隆"到"局部打磨"

前面的技巧解决了"大方向"问题。Hack #4 解决的是"锦上添花"——当你对网站整体满意后，如何让个别元素变得更出色。

21st.dev：组件宝库

21st.dev 是一个前端组件展示网站，提供了大量可直接使用的组件代码：

组件类型	示例
按钮	彩虹边框、发光效果、闪亮反射
背景	粒子动画、波浪效果、下落药丸
首屏	各种 Hero Section 设计
Shader	3D 渲染效果
鼠标效果	跟随高亮、悬停动画
暗色/亮色模式	切换组件

工作流程

在 21st.dev 上找到喜欢的组件
点击"Copy Prompt"复制组件代码
在 Claude Code 中说："I want you to work in this background element right behind the hero text."（我要你把这个背景元素放到 Hero 文字后面）
粘贴代码 → 发送

Nate 的实战：波浪动画背景

他选了一个"Hero Waves"波浪动画背景，复制代码后让 Claude Code 集成。第一版出来后有问题——背景太抢眼、像素化、文字被挡住。于是他用自然语言迭代：

"I think that it's a little bit distracting... the hero text behind it a little bit tough to read... the background animation looks super fuzzy and super pixelated. If you could make that look a little bit more professional and clean, that would be great."（背景有点分散注意力...后面的文字不太好读...动画看起来模糊又有像素感。能不能弄得专业干净一点。）

一轮反馈后，效果明显改善。

行动启示： 不要试图一次性把所有组件都塞进去。先搭好骨架（克隆+换肤），再逐个添加"闪光点"组件。每加一个，测试一次。

部署上线：GitHub + Vercel 的自动化流水线

架构图

Claude Code（本地开发）
    ↓ git push
GitHub（代码托管 + 版本控制）
    ↓ 自动触发
Vercel（自动部署 → 线上网站）

步骤

GitHub：创建账号 → 创建一个新 Repository（如 ais-test-website）
Claude Code 推送：让 Claude Code 帮你把代码推到 GitHub——"Help push this to GitHub, to a repository called ais-test-website."
GitHub 认证：首次需要登录授权
Vercel：创建账号（建议用 GitHub 登录）→ Add New Project → Import GitHub Repository → Deploy
自动部署：之后每次 Claude Code 推送到 GitHub，Vercel 自动拉取并更新线上版本
自定义域名：在 Vercel 的 Project Settings → Domains 中添加

关键工作流规则

永远先在本地测试，确认满意后再推送。 Nate 在 CLAUDE.md 中明确写了这条规则：

"When I'm making changes with you here, we're always going to test on a local host until I tell you explicitly to push that to GitHub."（和你一起改东西时，永远在本地测试，直到我明确说推到 GitHub。）

安全提醒

推送到 GitHub（公开仓库）时要注意不要包含 API 密钥、用户名密码、Webhook 地址等敏感信息。对于简单的静态网站没有这个问题，但如果后续添加自动化功能就需要注意。

实战演示

Nate 让 Claude Code 给按钮加了一个发光效果，在本地确认满意后：

"Awesome. I love that change. Go ahead and push that to GitHub."（很棒，我喜欢这个改动。推到 GitHub 吧。）

几秒钟后，GitHub 出现新 commit："Add glowing pulse effect to hero join the community button"，Vercel 自动部署，刷新线上页面——发光按钮出现了。

进阶技巧总结

Bypass Permissions 模式

Nate 全程使用了"跳过权限确认"模式，让 Claude Code 不需要每步都等你点"允许"。设置方式：VS Code Settings → 搜索"Claude Code" → 勾选"Allow Dangerously Skip Permissions"。

风险提示： 这意味着 Claude Code 可以不经确认执行任何命令。Nate 建议只在你在旁边盯着的时候使用，不要开着它去睡觉。

品牌资产的最佳实践

创建一个 brand_assets 文件夹
放入：logo（PNG/SVG）+ 品牌指南（颜色代码、字体、图标规范）
在 CLAUDE.md 中引用这个文件夹
在提示词中用 @ 符号直接指向具体文件

截图命名规范

Nate 踩了一个小坑：temp_screenshots 文件夹里的截图命名是 screenshot_1、screenshot_2... 无法区分是哪一轮生成的。建议在 CLAUDE.md 中定义更清晰的命名规则，或者在每次新构建前让 Claude Code 清理旧截图。

附录

金句收录

"These aren't complicated tricks that require years of coding experience. They're practical techniques that anyone can start using right away."（这些不是需要多年编程经验的复杂技巧，而是任何人都可以立即使用的实用技术。）——Nate
"Just think of it as a system prompt."（把 CLAUDE.md 想象成系统提示词。）——Nate，解释 CLAUDE.md 的作用
"It basically uses its eyes to check that what it's building actually looks good."（它基本上就是用自己的"眼睛"来检查它建的东西是否好看。）——Nate，论截图循环
"Without the frontend design skill, it might have gotten us like 40% of the way there. But now that we added the frontend design skill, it's going to get us maybe 60%."（没有前端设计技能，可能只做到40%的效果。加了之后，大概能到60%。）——Nate
"For basically a one-sentence prompt, this is super super solid."（一句话提示词就能做到这个程度，真的太强了。）——Nate
"Clone plus rebrand is way more efficient than building from scratch."（克隆+换肤比从零开始高效得多。）——Nate 的核心方法论

术语表

术语	说明
CLAUDE.md	Claude Code 的项目级配置文件，每次对话前自动读取
Skill	Claude Code 的技能系统，类似自定义指令包
Puppeteer	Google 开发的无头浏览器自动化工具，用于截图
Screenshot Loop	让 AI 自动截图 → 对比 → 修改的循环流程
localhost	本地开发服务器，只有自己能访问
Vercel	前端部署平台，支持从 GitHub 自动部署
21st.dev	前端组件展示网站，可复制代码用于项目
Bypass Permissions	跳过 Claude Code 的操作确认提示

时间线索引

时间	主题
[00:00]	开场介绍：5个让 Claude Code 建站不像 AI 做的技巧
[00:20]	环境搭建：VS Code + Claude Code 扩展 + Anthropic 账号
[01:55]	Hack #0：CLAUDE.md 文件——项目级系统提示词
[03:40]	Hack #1：Frontend Design Skill——安装与演示
[05:20]	品牌资产文件夹 + 一句话生成完整着陆页
[07:00]	展示生成结果：带动画的完整品牌化网站
[08:01]	Hack #2：Screenshot Loop——Puppeteer 自动截图审查
[09:44]	Hack #3：克隆网站——全页截图 + CSS 复制 + 换肤
[11:00]	灵感网站：Dribbble / Godly Website / Awwwards
[12:00]	实战演示：克隆法语网站 + 自动对比修改
[14:30]	换肤演示：品牌色+Logo+英文翻译一步到位
[17:17]	Hack #4：21st.dev 组件拼装——波浪背景实战
[19:00]	注意事项：动画组件需关闭截图循环
[20:30]	迭代反馈：用自然语言描述修改需求
[21:13]	部署：GitHub 仓库创建 + Claude Code 推送
[23:00]	Vercel 连接 GitHub + 自动部署
[25:00]	更新流程：本地修改 → 确认 → 推送 → 自动上线
[27:17]	总结回顾 + 社区推广

Ctrl+Enter 发送

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

你可能也喜欢

AI 前沿

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

Nate Herk \ × 无（单人分享）

10min · 4,607字

AI 前沿

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

Julian Goldie

4min · 1,872字

AI 前沿

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

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

5min · 2,285字

AI 前沿

别再给AI交月费：Gemma 4本地部署零成本指南

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

Building Beautiful Websites with Claude Code Is Too Easy

来源Nate Herk × 无（单人教程）视频时长约28分钟报告字数4,381字阅读时间9min原始链接https://www.youtube.com/watch?v=86HM0RUWhCk

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

📺 原视频约28分钟📖 本报告 4,381字⏱ 预计阅读 9min💡 5个核心观点

导读

核心观点速览

CLAUDE.md 文件是你的"系统提示词"——每次对话前 Claude Code 都会先读它，写好这个文件比写好提示词更重要。
Frontend Design Skill 能让输出质量从40%跳到60%——一个第三方技能包，安装后 Claude Code 的前端设计水平直接跃升一个档次，按钮有光效，布局有动画，不再是"纯 AI 味"。
截图循环（Screenshot Loop）是最被低估的技巧——让 Claude Code 用 Puppeteer 截取自己构建的页面，对比参考图，自动做两轮修改。相当于给 AI 装了"眼睛"。
克隆+换肤是最高效的建站方式——找到喜欢的网站 → 全页截图 + 复制 CSS → 让 Claude Code 克隆 → 换成自己的品牌色和 logo。比从零开始快10倍。
21st.dev 的组件库是"锦上添花"的秘密武器——不需要克隆整个网站，只需要复制单个组件的代码（如动画背景、发光按钮），贴给 Claude Code 说"加到这里"。

前置准备：环境搭建

Nate 开头快速过了一遍基础设置，对新手非常友好：

下载 VS Code（Visual Studio Code）——这是 Claude Code 运行的 IDE 环境
安装 Claude Code 扩展——在 VS Code 左侧 Extensions 中搜索"Claude Code"并安装
登录 Anthropic 账号——需要 Pro（$20/月）或 Max 订阅，Free 用户无法使用 Claude Code
创建一个空文件夹作为项目目录——在 VS Code 中打开这个文件夹

建议：如果你打算一天建多个网站，Pro 的用量限制可能不够，Nate 建议直接上 Max 套餐。

Hack #0：CLAUDE.md——比提示词更重要的"系统指令"

它是什么

为什么编号是"0"

Nate 故意把它编为"第0号"技巧，因为：

它是所有后续技巧的前提条件——后面的截图循环、品牌资产引用等都是通过 CLAUDE.md 中的规则来触发的
它需要反复迭代——你不会一开始就知道完美的规则是什么，随着项目推进会不断修改

关键内容

Nate 提供了一个免费的 CLAUDE.md 模板（在他的 School 社区中可下载），其中包含了几个关键规则：

"Always invoke the frontend design skill before writing any frontend code every session, no exceptions."（每次写前端代码前必须调用前端设计技能，无例外）
截图工作流配置——定义了 Puppeteer 截图的触发条件和保存路径
品牌资产引用——告诉 Claude Code 去哪里找 logo 和品牌指南

行动启示： 不要跳过 CLAUDE.md 直接开始写提示词。花10分钟配置好这个文件，能省下后面几个小时的反复修改。把它想象成你雇了一个新设计师，入职第一天给他的"项目手册"。

Hack #1：Frontend Design Skill——一键升级设计品质

什么是 Skill

Claude Code 的 Skill 系统类似于 Custom GPT 中的自定义指令，但以 Markdown 文件的形式存在。工作机制是：

用户提问
Claude Code 读取 CLAUDE.md
Claude Code 判断："我的技能库里有没有能帮我做得更好的技能？"
如果有，调用该技能的指令 → 执行
如果没有，用通用知识 → 执行

Frontend Design Skill 的效果

Nate 展示了一个推文中的案例：只用一句"create a music player app"（创建一个音乐播放器）——

没有 Skill：出来的是典型的"AI 做的"风格，平面、无动画、模板感强
有 Skill：自带动画效果、动态元素、现代设计语言

安装方法

只需运行两条命令（可以直接粘贴到 Claude Code 聊天框中执行）。安装后全局生效，所有 Claude Code 项目都能使用。

实战演示

Nate 创建了一个 brand_assets 文件夹，放入了 logo 和品牌指南（包含颜色、字体、图标等），然后只输入了一句话：

"Build me a modern and professional landing page for AI Automation Society."（帮我建一个现代专业的 AI Automation Society 着陆页。）

结果： Claude Code 自动读取了 CLAUDE.md → 读取品牌资产 → 调用前端设计技能 → 生成了一个完整的单页网站，包含：

带动画的导航栏和 Hero 区域
滚动的科技公司 Logo 横幅（N8N、Make、Claude、GPT-4、Zapier、Airtable）
社区评分展示
数据统计区
客户评价区
底部 CTA（Call to Action）
完全匹配品牌颜色、字体和 logo

"For basically a one-sentence prompt, this is super super solid with the frontend design skill."（一句话提示词就能做到这个程度，前端设计技能真的太强了。）——Nate

Hack #2：截图循环（Screenshot Loop）——给 AI 装上"眼睛"

核心理念

AI 很擅长"从0到60%"，但从60%到100%需要大量人工微调。截图循环的目的是让 AI 自己完成从60%到80%的部分。

工作原理

Claude Code 写好 HTML/CSS/JS
启动本地服务器
用 Puppeteer 自动截图当前页面的各个区域（Hero、Stats、About 等）
对比截图与预期效果，发现不匹配的地方
自动修改代码
重复步骤3-5（至少做两轮审查和打磨）

Nate 展示了实际生成的 temp_screenshots 文件夹——Claude Code 在构建第一版网站时就自动拍了10张截图，逐个区域检查并优化。

配置方法

在 CLAUDE.md 中添加一个"Screenshot Workflow"部分，描述用 Puppeteer 截图的规则。然后让 Claude Code 执行初始化：

"Hey Claude Code, can you set up Puppeteer to take screenshots?"（帮我配置 Puppeteer 截图工具。）

Claude Code 会自动安装所需依赖并完成配置。

重要注意事项

解决方案： 在处理动画组件时，明确告诉 Claude Code 关闭截图工具：

"Because this is an animated background, do not use the screenshot tool to compare. Just work in the code and then I will let you know if we need to make any changes."（因为这是动画背景，不要用截图工具对比，直接改代码，我来告诉你是否需要调整。）

Hack #3：克隆网站+换肤——最高效的建站工作流

方法论

这是整个视频中实用价值最高的技巧。核心思路：

找到一个你喜欢的网站作为参考
全页截图——按 F12 打开开发者工具 → 按 Ctrl+Shift+P → 搜索"screenshot" → 选择"Capture full size screenshot"（截取完整页面）
复制 CSS 样式——在 Elements 面板中复制 Style 区域的所有样式代码
交给 Claude Code：截图（视觉参考）+ CSS（样式参考）+ "clone this website"（克隆指令）
Claude Code 利用截图循环反复对比自己的输出与参考图，直到足够接近
最后换肤——让它用你的品牌色、logo、文案替换

灵感来源网站

网站	特点
Dribbble	设计师作品集，大量高质量 UI 设计
Godly Website	精选优秀网站设计
Awwwards (3个W)	获奖网站展示

实战效果

关键洞察：克隆+换肤的效率远高于从零开始。 你不需要自己描述"我想要一个什么风格的网站"——直接给一个活生生的例子，让 AI 去模仿，然后换皮。

Hack #4：组件拼装——用 21st.dev 做精细化升级

从"整体克隆"到"局部打磨"

前面的技巧解决了"大方向"问题。Hack #4 解决的是"锦上添花"——当你对网站整体满意后，如何让个别元素变得更出色。

21st.dev：组件宝库

21st.dev 是一个前端组件展示网站，提供了大量可直接使用的组件代码：

组件类型	示例
按钮	彩虹边框、发光效果、闪亮反射
背景	粒子动画、波浪效果、下落药丸
首屏	各种 Hero Section 设计
Shader	3D 渲染效果
鼠标效果	跟随高亮、悬停动画
暗色/亮色模式	切换组件

工作流程

在 21st.dev 上找到喜欢的组件
点击"Copy Prompt"复制组件代码
在 Claude Code 中说："I want you to work in this background element right behind the hero text."（我要你把这个背景元素放到 Hero 文字后面）
粘贴代码 → 发送

Nate 的实战：波浪动画背景

"I think that it's a little bit distracting... the hero text behind it a little bit tough to read... the background animation looks super fuzzy and super pixelated. If you could make that look a little bit more professional and clean, that would be great."（背景有点分散注意力...后面的文字不太好读...动画看起来模糊又有像素感。能不能弄得专业干净一点。）

一轮反馈后，效果明显改善。

行动启示： 不要试图一次性把所有组件都塞进去。先搭好骨架（克隆+换肤），再逐个添加"闪光点"组件。每加一个，测试一次。

部署上线：GitHub + Vercel 的自动化流水线

架构图

Claude Code（本地开发）
    ↓ git push
GitHub（代码托管 + 版本控制）
    ↓ 自动触发
Vercel（自动部署 → 线上网站）

步骤

GitHub：创建账号 → 创建一个新 Repository（如 ais-test-website）
Claude Code 推送：让 Claude Code 帮你把代码推到 GitHub——"Help push this to GitHub, to a repository called ais-test-website."
GitHub 认证：首次需要登录授权
Vercel：创建账号（建议用 GitHub 登录）→ Add New Project → Import GitHub Repository → Deploy
自动部署：之后每次 Claude Code 推送到 GitHub，Vercel 自动拉取并更新线上版本
自定义域名：在 Vercel 的 Project Settings → Domains 中添加

关键工作流规则

永远先在本地测试，确认满意后再推送。 Nate 在 CLAUDE.md 中明确写了这条规则：

"When I'm making changes with you here, we're always going to test on a local host until I tell you explicitly to push that to GitHub."（和你一起改东西时，永远在本地测试，直到我明确说推到 GitHub。）

安全提醒

实战演示

Nate 让 Claude Code 给按钮加了一个发光效果，在本地确认满意后：

"Awesome. I love that change. Go ahead and push that to GitHub."（很棒，我喜欢这个改动。推到 GitHub 吧。）

几秒钟后，GitHub 出现新 commit："Add glowing pulse effect to hero join the community button"，Vercel 自动部署，刷新线上页面——发光按钮出现了。

进阶技巧总结

Bypass Permissions 模式

风险提示： 这意味着 Claude Code 可以不经确认执行任何命令。Nate 建议只在你在旁边盯着的时候使用，不要开着它去睡觉。

品牌资产的最佳实践

创建一个 brand_assets 文件夹
放入：logo（PNG/SVG）+ 品牌指南（颜色代码、字体、图标规范）
在 CLAUDE.md 中引用这个文件夹
在提示词中用 @ 符号直接指向具体文件

截图命名规范

附录

金句收录

"These aren't complicated tricks that require years of coding experience. They're practical techniques that anyone can start using right away."（这些不是需要多年编程经验的复杂技巧，而是任何人都可以立即使用的实用技术。）——Nate
"Just think of it as a system prompt."（把 CLAUDE.md 想象成系统提示词。）——Nate，解释 CLAUDE.md 的作用
"It basically uses its eyes to check that what it's building actually looks good."（它基本上就是用自己的"眼睛"来检查它建的东西是否好看。）——Nate，论截图循环
"Without the frontend design skill, it might have gotten us like 40% of the way there. But now that we added the frontend design skill, it's going to get us maybe 60%."（没有前端设计技能，可能只做到40%的效果。加了之后，大概能到60%。）——Nate
"For basically a one-sentence prompt, this is super super solid."（一句话提示词就能做到这个程度，真的太强了。）——Nate
"Clone plus rebrand is way more efficient than building from scratch."（克隆+换肤比从零开始高效得多。）——Nate 的核心方法论

术语表

术语	说明
CLAUDE.md	Claude Code 的项目级配置文件，每次对话前自动读取
Skill	Claude Code 的技能系统，类似自定义指令包
Puppeteer	Google 开发的无头浏览器自动化工具，用于截图
Screenshot Loop	让 AI 自动截图 → 对比 → 修改的循环流程
localhost	本地开发服务器，只有自己能访问
Vercel	前端部署平台，支持从 GitHub 自动部署
21st.dev	前端组件展示网站，可复制代码用于项目
Bypass Permissions	跳过 Claude Code 的操作确认提示

时间线索引

时间	主题
[00:00]	开场介绍：5个让 Claude Code 建站不像 AI 做的技巧
[00:20]	环境搭建：VS Code + Claude Code 扩展 + Anthropic 账号
[01:55]	Hack #0：CLAUDE.md 文件——项目级系统提示词
[03:40]	Hack #1：Frontend Design Skill——安装与演示
[05:20]	品牌资产文件夹 + 一句话生成完整着陆页
[07:00]	展示生成结果：带动画的完整品牌化网站
[08:01]	Hack #2：Screenshot Loop——Puppeteer 自动截图审查
[09:44]	Hack #3：克隆网站——全页截图 + CSS 复制 + 换肤
[11:00]	灵感网站：Dribbble / Godly Website / Awwwards
[12:00]	实战演示：克隆法语网站 + 自动对比修改
[14:30]	换肤演示：品牌色+Logo+英文翻译一步到位
[17:17]	Hack #4：21st.dev 组件拼装——波浪背景实战
[19:00]	注意事项：动画组件需关闭截图循环
[20:30]	迭代反馈：用自然语言描述修改需求
[21:13]	部署：GitHub 仓库创建 + Claude Code 推送
[23:00]	Vercel 连接 GitHub + 自动部署
[25:00]	更新流程：本地修改 → 确认 → 推送 → 自动上线
[27:17]	总结回顾 + 社区推广