我用 Claude 在一下午内搭建了一个网站并以 1 万美元售出。这是我的完整系统。

我全程录制了整个过程，并一步一步拆解开来，让你也能复制。下面的这个网站，看起来就像自由职业者收了五位数美金做出来的。访客没人能看出代码是 AI 写的。让它上线的总成本：大约 60 美元。

GIF

首先，坦诚地核实一下

我不会给你画饼。所以在讲怎么做之前，先说明哪些是真实的，哪些不是。

真实的部分：

• Claude Code 会根据你的描述，从头开始为网站编写完整代码。没有模板，所以你的网站不会看起来像千篇一律的 Wix/Squarespace 克隆版。这是它能达到高端水准的核心原因。
• 我使用的两项技能是真实的，并且免费。一个是 frontend-design，由 Anthropic 构建——它在后台运行，会禁止使用最烂俗的 AI 字体和布局。另一个是 UI/UX Pro Max，一个社区构建的技能，内置了几十种 UI 风格、配色方案和字体组合，你可以按需调用。
• 图片/视频工作流也是真实的。ElevenLabs 现在整合了顶级视觉模型（GPT Image、Google Veo 3.1）以及 Topaz 放大功能，都在一个标签页内——我核实过，他们在 2025 年末转型进入了图像和视频领域。所以你可以生成静态图，让它动起来，再放大，全程不用离开页面。
• Claude Code 已包含在 Claude Pro 计划中，每月 20 美元（年付每月 17 美元）。你不需要 Max 计划也能用。此信息已于 2026 年 6 月确认有效。
• 在预算型主机上托管，搭配免费的首年域名，每年大约需要 40–45 美元。

不是魔法的地方： "10,000 美元"是指产出的价值，而不是你保证能赚到的钱。像这样的网站，代理机构收费 5,000 到 15,000 美元来搭建。你是否真能赚到这笔钱，取决于你能否把它卖出去——关于赚钱的部分，后面会详细说。这里的提示是起点，不是自动售货机。

提到的每个工具都是真实的。每个价格截至 2026 年 6 月均有效。

一个价值 10,000 美元的网站和 200 美元的网站，区别在哪里

在开始构建之前，你需要一个目标。我问了 Claude，真正让一个网站看起来昂贵的是什么，归结下来是 3 组共 8 个要素：

品味

1. 观点 —— 一个真实的设计方向，而不是一个情绪板
2. 字体排印 —— 有意识选择的字体（并且不是那些用滥了的）
3. 色彩 —— 克制，最多 4–5 个十六进制色值，不要彩虹配色

内容 4. 层级 —— 尺寸告诉眼睛先读什么，再读什么，后读什么 5. 图像 —— 定制的，或者逼真到足以乱真的 AI 生成图，绝不能是烂大街的素材 6. 文案 —— 克制、富有感官体验，像人写的那样，而不是形容词堆砌

质感 7. 动态 —— 光标效果和微交互，让网站感觉充满活力 8. 移动端 —— 为手机设计的，而不是缩小的桌面版

记住这个清单。最后，你需要根据这 8 点给自己的网站打分。这个自我评估的环节，是让你的作品脱颖而出、避免沦为平庸的关键一步。

谁适合看这篇内容

如果你符合以下情况，这篇内容对你有用：

• 你希望为本地商家（餐厅、健身房、诊所、房地产等）制作网站，但不会写代码
• 你已经是自由职业者，希望将产出和报价提升 10 倍
• 想为自己的生意或个人品牌打造一个高端网站
• 你能投入一个专注的下午，并且愿意迭代优化，而不是期望一键完美

如果你想要的是一个“按个按钮就能赚钱”的玩具，那么这篇内容不适合你。你的需求简报的质量，以及当某些地方看起来平淡时你愿意反复打磨的决心，才是真正的工作本身。

你需要什么（以及费用）

完成一个网站实际的总费用：约 60 美元（一个月的 Claude Pro 费用 + 一年期的托管费和域名费）。

完整的构建步骤

第一步 — 设置 Claude Code

在 claude.com 注册 Claude Pro。下载桌面应用（下载图标，左下角 → Claude Code 区域 → 桌面应用 → 运行安装程序）。登录。

从聊天模式切换到代码模式（左上角标签，或 Cmd/Ctrl + 3）。

在电脑上任意位置创建一个新的空文件夹——这是你的工作空间。点击聊天框附近的文件夹选择按钮，在应用内打开这个文件夹。Claude Code 在自己专属的文件夹中运行效果最好。

界面经常会更新，所以如果按钮位置跟我描述的不完全一致，别慌——概念是一样的，找到对应的就行。

第二步 — 用两项技能给 Claude 升级

开箱即用的 Claude 是个通才。它的默认设计还行——但总是会选择你已经在无数 AI 网站上见过的同款字体和布局。技能可以解决这个问题。

安装技能 #1 — frontend-design（在后台运行）： 将 frontend-design 技能链接粘贴到 Claude Code 中，并附上：

1全局安装这个技能。

当它询问时，允许编辑。

安装技能 #2 — UI/UX Pro Max（按需调用）： 将 UI/UX Pro Max 链接粘贴到 Claude Code 中，并使用以下精确措辞——措辞很重要，因为它能通过终端干净地安装：

1使用 npm 全局安装这个插件。

允许编辑。

第三步 — 开启自动模式

在聊天框的左下角，将模式选择器切换到自动模式。这样 Claude 就可以在每一步操作中无需停下来请求许可。开启自动模式并安装好两项技能后，你就可以开始构建了。

第四步 — 收集参考（快速获得品味的捷径）

用语言描述视觉品味很难，特别是如果你对设计还不熟悉。参考可以解决这个问题：把你喜欢的网站截图交给 Claude，这样它就能匹配那种风格。展示品味比描述品味要容易得多。

我从哪里找参考：

• Dribbble —— 设计师展示作品的地方
• Awwwards —— 获奖网站，水准很高
• Pinterest —— 搜索具体内容，例如“现代餐厅网站设计”

找到 3–5 个你喜欢的网站并保存截图。你不是要复制它们——而是向 Claude 展示设计方向。

第五步 — 一个提示，构建整个网站

这就是视频里的关键一步。调用设计技能，给出你的需求简报，附上你的参考截图，最后加上那条神奇的指令。

在我的构建中，我为西雅图的一家餐厅制作了网站。以下是提示的结构——请根据你的项目调整需求简报：

1/ui-ux-pro-max
2
3为 [业务类型 — 例如，西雅图的一家高端牛排馆] 构建一个单页网站。
4
5方向：[用你自己的话描述风格 — 例如，黑暗、情绪化的奢华，但要植根于
6太平洋西北地区，而不是千篇一律的曼哈顿牛排馆]。
7
8按顺序包含的部分：[例如，主视觉、理念/故事、菜单、餐厅环境、预订]。
9没有画廊，没有预订系统——只是一个从上到下滚动的单页。
10
11我附上了 3–5 张参考截图，用于视觉风格。
12匹配那种*感觉*，不要复制它们。
13
14技术栈：单文件静态 HTML/CSS/JS（不要用 React——保持简单）。
15
16在写任何代码之前，先问我澄清性问题。

最后一行——“先问我澄清性问题”——这是让 Claude 在构建之前停下来思考的关键。它向我回了大约 7 个问题：名称、风格方向、包含哪些部分、谁来写文案、技术栈、动画级别以及其他事项。

最重要的部分：Claude 提供了三种风格方向供我选择，就像一个菜单。我选择了黑暗/情绪化的奢华风格，并植根于太平洋西北地区，五个部分，没有画廊，没有预订——一个滚动的单页。

这是整个构建过程中最关键的时刻。 你的回答将决定整个网站的样子。你现在越具体，后面需要和 Claude 反复沟通的地方就越少。慢慢来。

然后发送。Claude 会用大约 3 分钟阅读和规划，然后才开始写代码，接着再花 4–5 分钟构建。直接跳到揭晓结果。

Claude 提出的问题

第一版揭晓

第六步 — 根据 8 点清单给自己打分

在你继续打磨之前，先对照你设定的标准检查网站。将 8 点清单（本文前面部分）粘贴到 Claude Code 中，并提问：

1这是我对一个价值 10,000 美元网站的 8 点检查清单。请对照当前网站，
2诚实地告诉我每个项目处于什么水平：优秀、一般、或缺失。要毫不留情。

在我的构建中，Claude 的反馈是：观点——优秀，色彩——优秀，层级——优秀，字体排印——一般，以及图像/动态/移动端/隐形细节——都处于一般水平。你也会得到类似的分项结果，这很正常。关键是要确切知道哪些地方还需要改进。

第七步 — 从专业走向昂贵的这一步

这个环节才是真正的关键所在。不要一次只修复一个问题——那样会浪费 token，而且最终效果会显得拼凑而成。要以意图为导向，而不是具体细节，并要求批量处理。

这是我使用的精确提示：

1我们需要更多精心设计的微交互。下面的部分感觉有点普通。
2我们不需要让它们变得更复杂——只是让它们看起来更昂贵。
3请提出一批改进方案，并一次性全部应用。

请注意，我没有告诉 Claude 具体添加什么——我告诉它的是我希望它感觉起来怎么样。Claude 在将意图转化为具体细节方面，比大多数人编写技术规范都要厉害。它回来时带来了一批改进：整个网站的胶片颗粒效果、各部分之间的黄铜色动画分隔线、发光余烬效果、逐字标题显示动画。一个提示，五个改动，一次搞定。

然后自己驱动每个部分的迭代。 滚动浏览，找到那些感觉仍然平淡的部分——总会有那么几个——然后为每个部分给 Claude 一个动态或光标交互的指令：

1[故事] 部分感觉太静态了。在这里添加一个优雅的微动效或光标交互。
2保持微妙和精致——让它有生命力，而不是嘈杂。

如果第一次尝试效果太明显，就提出改进意见：“让它更微妙一些，添加一点延迟，让它跟随光标移动时有点拖尾感。” 在我的构建中，这把一个静态的烛光光晕变成了一个跟随你光标移动、带有柔和延迟的效果。两个提示，两个部分——这个层次的打磨，就是区分一个网站是看起来昂贵，还是在你浏览时感觉昂贵的关键。

第八步 — 图像：自己提供或 AI 生成

GIF

图像是 Claude 无法完全独立解决的唯一支柱。最佳方案：定制摄影。将照片放入你的项目文件夹，告诉 Claude 这是什么以及放在哪里。

没有摄影预算？现在的 AI 生成质量已经足够好，没人能分辨出来。让这个过程变快的技巧是：不要自己写图像生成提示——Claude 已经了解你的项目，所以让它为你写提示：

1帮我写一个用于这个网站主视觉的图像生成提示。它必须与我们到目前为止
2构建的精确情绪、配色方案和方向相匹配。只输出提示本身。

将这段提示粘贴到你的图像生成工具中，你第一次就能得到符合品牌调性的内容。在 ElevenLabs 中，你可以生成静态图（GPT Image），将这张精确的帧放入 Google Veo 3.1 中让它动起来，然后用 Topaz 放大——全部在一个标签页内完成。将最终素材放入你的项目文件夹。

第九步 — 从 21st.dev 引入专业组件

GIF

当你想要一个引人注目的视觉元素（比如滚动效果、炫酷的主视觉）时，21st.dev 是一个由真正开发者构建的免费组件库。找到你喜欢的组件，点击 Copy Prompt，粘贴到 Claude Code 中，附上你的素材，告诉 Claude 用这个组件构建主视觉。

这里重要的一点是：Claude 会保护你的架构。我选择的滚动组件是为 React 构建的；而我的项目是简单的静态网站，所以 Claude 拒绝直接放入 React 版本，因为这会改变整个项目的工作方式——并改用纯 HTML 重新实现了这个效果。（如果你的项目确实需要 React——比如仪表盘、结账页面、登录页面——Claude 会同意。它不会仅仅因为你要求就去破坏项目的结构。）

当效果在第一次尝试时出了故障——我的就出了问题——只需描述问题所在：

1视频出现了，但它没有按照组件应有的方式滚动。深入排查——
2在浏览器中打开页面，检查实际发生了什么，并修复真正的根本原因。

Claude 自己打开了页面，实时检查，并在三层嵌套之下找到了真正的 bug。教训是：继续追问。 解释哪里出了问题以及你期望的结果——只要你让它看得更仔细，Claude 几乎总能解决。

第十步 — 文案、字体和移动端（速胜技巧）

GIF

文案： AI 文案默认会过度解释。高级文案是克制且富有感官体验的——"干式熟成肋眼。16 盎司。60 天。炉火炙烤。" 读起来像大厨写的。frontend-design 技能会推动 Claude 朝这个方向走，这就是为什么它值得在每个项目中占有一席之地。

字体： 有一种字体——Inter——被过度使用，以至于一眼就能让人看出“这是 AI 做的”。如果你在你的输出中看到了它：

1将所有的 Inter 字体替换成不那么滥用的字体——Geist 效果不错。保留标题字体。

移动端： “响应式”不等于“为手机设计”。手机用户看到你网站的次数会远远超过桌面用户。要求进行一次专门的移动端适配：

1专门做一次移动端适配。决定哪些内容在窄屏上应该隐藏，
2哪些应该更紧凑，哪些应该调整大小。这是大多数人实际会看到的版本。

在我的构建中，导航栏折叠了，品牌标志间距更紧凑了，按钮也有了更小的变体。完成这些后，清单上的所有 8 个项目都达标了。

第十一步 — 上线（大家都会搞砸的部分）

目前你的网站只存在于你的电脑上——那个 localhost URL 只能在你自己的机器上访问。要想分享它，你需要托管服务和真实域名。

选择一个提供免费首年域名的主机。对于简单的静态网站（没有登录、没有结账、没有数据库），最便宜的“高级/共享”套餐就足够了。将期限设置为 12 个月——这是获得免费域名的最低要求。搜索你的域名，认领它。我的总费用大约是每年 43 美元：托管 + 域名 + 电子邮件。

如果 Claude 为你构建了一个带有真正后端的东西（它说了

是

，使用了 React，设置了 Node.js、数据库等），那么请选择

商业

套餐——它支持 Node.js。Claude 在第 9 步是接受了还是拒绝了 React，会告诉你需要哪个方案。

导致空白页面的一个常见错误： 上传时，压缩项目文件夹内的文件——而不是压缩文件夹本身。打开你的项目文件夹，选中里面的所有文件（Cmd/Ctrl + A），然后压缩。你需要得到一个 zip 文件，其中 index.html 位于顶层。如果你压缩了整个文件夹，主机解压时会多一层目录，你的域名就会显示空白页面。

在主机商的新手引导中，选择 迁移现有网站 → 上传备份文件，选择你的域名，拖入 zip 文件，提交。点击你的域名——瞧，你价值 10,000 美元的网站就在自定义 URL 上上线了。

你实际上能赚多少钱

这个网站本身是一个价值 10,000 美元的资产。以下是如何将它转化为收入：

• 向本地商家出售网站 是最快的路径。餐厅、牙医、健身房、房地产中介和承包商通常会为一个单页高端网站支付 1,000 到 5,000 美元不等。花一个下午建一个，按此收费。每月两个客户，每个 2,000 美元 = 兼职月收入 4,000 美元。
• 经验丰富的自由职业者 / 小型代理机构 对这类定制的、带有动画的、针对移动端设计的网站收费 5,000 到 15,000 美元——而现在可以在几小时内交付，而不是几周。利润空间正是其价值所在。
• 产品化服务： 销售一个固定的“5 天内交付高端单页网站，收费 1,500 美元”套餐。可预测，可重复，并且你可以同时进行多个项目。
• 你自己的品牌： 如果你为自己使用，那么“收入”就体现为这个价值五位数美元的网站所带来的交易机会和信誉。

对于今天开始的人来说，一个现实的起步路径是：几周内拿到第一个付费客户，几个月内（如果你真的去做推广）兼职月收入可达 1,000 到 5,000 美元不等。构建不再是瓶颈——销售才是。

这之后，你会有哪些改变

GIF

以前，一个高端定制网站要么意味着花几个月学习编程，要么支付开发者几千美元。现在，技术壁垒已经消失。你可以在一个下午内制作出一个真正看起来昂贵、完全定制、带有动画、针对移动端设计的网站——然后要么把它卖出去，要么用它让你自己的东西看起来更专业。

你最终获得的技能不是“编程”。而是指导——知道什么是昂贵的样子，精确地下达需求，并坚持打磨直到它达到完美。这种技能在你之后构建的每一个网站上都会不断积累。

你的下一步（今天就做）

1. 注册 Claude Pro 并安装桌面应用。
2. 安装两项技能（第二步）并开启自动模式。
3. 从 Dribbble 或 Awwwards 保存 3–5 张参考截图。
4. 运行第五步中的构建提示——包括“先问我澄清性问题”——并仔细回答。

不要跳过收集参考和提问澄清性问题的步骤。80% 的质量都来自这里。在你担心销售之前，先完整地构建一个网站——你需要先看到它如何运作。

一句实话

这不是神奇的药丸。这是一个能完成实际工作的真正工具——但最终结果取决于你。上面的提示是起点，不是脚本。一个看起来像模板的网站和一个看起来值 10,000 美元的网站之间的区别，在于你带来的品味，你选择的参考，以及你在面对一个平淡部分时，是选择退回重做，还是接受“差不多就行了”的次数。

Claude 负责执行。你的方向和努力决定了结果。你如何利用它，完全取决于你自己。

*

*请收藏此书签、转发并关注 @thegreatest_sv，获取更多优质内容、AI 工具和高质量研究。*免责声明（收入与信息） 本文中展示的收入或统计数据来自我的研究、个人经验，不构成对您收入的任何保证。实际结果因利基市场、内容质量、RPM/CPM、受众参与度、持续性和努力程度等因素而异。本文不构成金融、税务、法律或专业建议——在做商业决策前，请咨询相关专家。*资源和链接

Claude Code 工具与资源： https://claude.com/

**前端设计技能（由 Anthropic 提供）：

**https://github.com/anthropics/skills/tree/main/skills/frontend-design

**UI/UX Pro Max 技能：

**https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

21st.dev： https://21st.dev

10K 美元网站检查清单（免费 PDF 下载）： https://drive.google.com/file/d/1CCRCvSbJ1tNXmd2YDnUNr1XkTAguYG7v/view

设计参考网站

Dribbble： https://dribbble.com

Awwwards： https://www.awwwards.com

Pinterest：https://pinterest.com