利用 Claude Code 在沙发上构建价值 10,000 美元的网站

@zentalksai
西语2026年8月09日
107K
176
17
29
177

TL;DR

这是一份使用 Claude Desktop 的 Code Agent 构建专业网站的综合指南。它强调了品牌策略、视觉参考以及迭代优化,旨在快速交付高价值成果。

需要五个人花三周才能交付的东西,你一个下午就能搞定。不用编程,也完全不用碰终端。

一个像样的企业网站,报价在 3,000 到 12,000 欧元之间。贵的不是代码,而是那三周的会议。昨天,我坐在沙发上就做了一个,我打算把整个过程一步一步讲给你听。

我会把整个过程一步一步讲给你听。

开始之前先提醒一句:这个话题周围有太多“烟雾弹”。

这不是教你去“忽悠别人,收人家 5,000 欧元”。

核心在于:网站真正的活儿——决定它说什么、给谁看、长什么样——依然是实打实的工作。消失的只是那些慢的部分:排版、返工、等开发、等设计、等一封迟迟不回的邮件。

只要把真正重要的部分做好,做出来的东西就经得起比较。经得起比较,你就该收这个钱。

大家最关心的问题:在哪里做?

很多人以为要动用终端——那个让人肃然起敬的黑窗口。不用。

Claude 的桌面应用顶部有三个标签页:

→ Chat,普通对话

→ Cowork,处理你的文件任务

→ Code,构建真实项目

Code 标签页就是同一个 Claude Code Agent,只不过配了图形界面。你用大白话写需求,它帮你创建文件夹、创建文件、把一切都跑起来。

claude.com/download 下载,然后用你的账号登录。

提醒:需要付费套餐。免费版半小时就会用光额度。

第 0 步:一个空文件夹

在动手提需求之前,先分享一个能让我少做两个丑网站的技巧。

在电脑上新建一个空的文件夹,专门给这个网站用。

听起来有点傻,但这样能避免最常见的翻车现场:文件散落桌面、Claude 动到不该动的东西、你自己也分不清谁是谁。

一个文件夹,一个项目。在 Claude 里选中这个文件夹,它就不会越界。

第 1 步:品牌文件

这一步几乎没人做,但正是它决定了最终效果的差距。

写一页文档,把需要你来定、而不是让 Claude 自由发挥的决策都写进去。

六行:

→ 谁进来:“婚礼摄影师,预算 2,000 欧元”

→ 进来时的感受:“高级、安静、不喧哗”

→ 唯一的行动:“预约咨询”

→ 字体:最多两种

→ 颜色:三种。背景、文字、一个点缀色

→ 禁忌:任何情况下都不想看到的东西

没有这个文件,Claude 就会自己脑补。而它默认脑补出来的东西,就是 200 欧元模板的水平。

复制这个模板,填上你的信息吧 :)

text
1品牌:[名称]
2理想客户:[他们是谁、想要什么、预算多少]
3氛围:[3 个形容词,不要空泛的]
4唯一行动:[他们一定要做的那件事]
5字体:[标题一种,正文一种]
6颜色:[背景 / 文字 / 点缀色,附十六进制色码]
7禁忌:渐变、表情图标、图库照片、
8所有内容居中、“创新解决方案”

把它保存为 brand.txt,放到项目文件夹里。

然后在 Claude 里输入这段:

text
1在做任何设计决策之前,先读取 brand.txt。
2如果里面有没写到的内容,来问我。

最后那句话,效果完全不一样。Claude 从“自己编”变成了“先问你”。

第 2 步:给它一把标尺

形容词没有用。“优雅”对模型来说毫无意义。图片才有。

我的做法:

→ 打开 Land-book、Godly 或 Minimal Gallery。这三个网站都免费,上面全是真实上线的网站

→ 挑 3 个。不是 10 个。选 10 个的话,风格会互相打架,最后出来一锅乱炖

→ 每个网站截一张首页 + 一张内页。共 6 张截图

→ 拖进项目文件夹

别用 Dribbble。那上面都是不存在的概念稿,Claude 会试图复刻根本做不出来的东西。

然后我会原封不动地告诉它 ↓

text
1把这些截图当作质量标准:观察
2字号、各板块之间的留白,以及页面
3的节奏。绝对不要照搬它们的结构或文案。

没有那句“绝对不要照搬”,它就会克隆第一个参考网站,最后你得到一个换了 logo 的抄袭版。我见过太多次了。

第 3 步:交代任务

只发一条消息。分成四块。别一次丢三四个想法过去,事情就是这么搞砸的。

1. 它是什么:“为 [X] 做一个单页网站,包含这些板块:[列表]。”

2. 文案:自己写。真的。这是唯一一样 Claude 没法凭空变出来的东西,因为它不了解你的业务,也不了解你的客户。

3. 怎么搭:“用 Astro 和 Tailwind。静态网站,不要 CMS。”你不必懂这是什么。这个组合加载快、不会出毛病,还不用每个月交钱。

4. 限制条件:“遵守 brand.txt。最多两种字体、三种颜色。”

发出去,等几分钟。

出来的成品大概只有 70 分。这很正常,而且你一定要提前知道,因为大多数人就是在这里被劝退的。

没有人会直接发布第一版。你不会,我不会,收 8,000 欧元的 agency 也不会。区别只在于:他们要花两周才把那个 70 分拿给你看,而你六分钟就能看到。

第 4 步:打磨

这才是真正的价值所在,也是决定它看起来值 500 欧元还是 5,000 欧元的关键。

每个人都会犯的错,就是写“稍微优化一下,让它更专业一点”。这句话毫无信息量,结果只会越改越糟。

要一层一层地改。每层发一条消息:

→ 第 1 层,文字:“检查所有字号,形成一套统一的层级。别的都不要动。”

→ 第 2 层,呼吸感:“逐板块检查:哪里显得局促,就把留白扩大一倍。别的都不要动。”

→ 第 3 层,动效:“让元素随页面滚动平滑出现。250 毫秒。不要任何弹跳效果。”

“别的都不要动”是关键。如果你三条一起提,它会改好一个,搞坏两个。

那如果有些细节你不喜欢,又不知道怎么描述呢?截图、拖进去、用大白话描述就行:

“这个板块和上面那个挤在一起了。”

“这个按钮和背景分不开。”

“这个标题在手机上占的地方太大了。”

你不需要设计师的专业词汇。你只需要指出来。这就跟客户对 agency 提需求一模一样,只不过在这里,三十秒就能收到回复,而不是四天。

最后的三项检查 ↓

连 agency 都会跳过这三项:

→ 手机端:“把所有页面按 375px 宽度展示一遍,把破掉的地方修好。”你的访客大部分都来自手机。

→ 五秒测试:把首页给别人看五秒,然后盖住。如果他说不出你是干什么的,那这标题就是废的。

→ 按钮:不用滚动就能看到吗?页面最底部还有一次重复吗?如果没有,你做的是宣传册,不是网站。

第 5 步:上线发布

十五分钟搞定,每月零花费。

最简单的办法,不用折腾什么账号或服务器:

→ 让 Claude 把最终的项目文件夹准备好

→ 打开 Netlify 或 Vercel,把文件夹拖进页面

→ 马上给你一个网址

→ 买个域名(每年 8 到 12 欧元),在后台绑定一下

就这样上线了。没有月费,不用维护,也省掉了每月 120 欧元的“托管”账单。

该收多少钱

接下来这部分,没人会告诉你。

如果你帮别人做,别卖“网站”。要卖就卖整套服务:

45 分钟的沟通,提炼出品牌文件;写好文案(不是注水的套话);带域名的正式网站上线;两轮修改;再附一个 10 分钟的视频,教客户怎么自己更新。

这样一单,根据客户不同,可以收 800 到 2,500 欧元,而且交付周期以天计,而不是以周计。

你收的不是工时费。你收的是让客户从“什么都没有”到“有了一个能带来生意的网站”的差价。

有三个错误,我反复看到有人在犯:

→ 一条消息里提五个修改要求。 一定会翻车。一次只提一个。

→ 让 Claude 写文案。 写出来没错,但很空洞。文案是你的活儿。

→ 上线前追求完美。 带着三个小瑕疵上线的网站,价值远超那个还躺在文件夹里、完美无缺的网站。

所以,真正改变的是什么?

agency 卖的是三周的流程。而那个流程,说到底就是四个靠谱的决策:

→ 给谁做

→ 要达成什么

→ 长什么样

→ 什么不能出现

剩下的,全是在等。而等待,已经没人买单了。

你的第一个网站,要花五小时,看起来值 500 欧元。第三个,两小时,看起来值 3,000 欧元。到了第五个,你闭着眼都能做完。

这是正常的学习曲线,不是魔法。先拿自己的项目练手。这是犯错成本最低的地方,因为客户就是你自己。

收藏这篇文章,抽几个小时试一试。

我保证你不会后悔的 :)

二次创作

使用 YouMind 创作爆款文章

收集素材、拆解爆点、生成视觉资产、撰写内容,并在一个 AI 工作空间里完成分发。

了解 YouMind
写给创作者

把你的 Markdown 变成干净的 𝕏 文章

图片上传、表格、代码块,往 𝕏 上手动重排太痛苦。YouMind 把整篇 Markdown 一键转成干净、可直接发布的 𝕏 文章草稿。

试试 Markdown 转 𝕏

更多可拆解样本

近期爆款文章

探索更多爆款文章