Claude Code 宝典（给永远不会写代码的人）

不，我不会向你兜售一本快速致富的 Claude Code 指南。

我每周都在社交媒体上看到这种内容：

大部分都是虚构的。

大部分都是虚构的。

这是因为一个新概念：vibecoding。

Vibecoding 指的是你只需用日常英语和 AI 对话 ——“给我做个能做这个的东西”——然后 AI 写出所有实际代码。你靠“感觉”来创造东西。

如果说有一件事我从未说过，那就是“用 AI 致富”。

致富或拥有一家运转良好的公司，远比仅仅知道如何向 AI 提问题要复杂得多。我不会向你兜售快速致富的骗局。

但 vibecoding 仍然值得你花时间。

它有两个好处。

一：你把你的想法做成一个可点击的版本，然后交给别人，比如开发者或设计师，这样他们就不用再猜测你的意思了。

二：你构建一个小工具，它比简单的 Claude 聊天机器人界面更好地完成工作。只为你、你的团队或几个客户。粗糙的边缘也没关系，因为没人会看到。

Claude Code 就是用来 vibecode 的工具。 你用日常英语描述你想要的东西，它就帮你构建出来。你一行代码都不用写。

我做这个指南，就是为那些不写代码的人准备的，关于 Claude Code 的唯一的指南。

如何设置。我如何用它给我的技术团队做简报，在不写代码的情况下编码整个网站，以及从最快的 AI 突破（= 编码）中获益。

另外，我也会分享 Claude Code 的不足之处（我一向诚实）。

开始之前有两件事：

1. 保存这份指南，这周花 30 分钟试试 Claude Code。

2. 把它发给任何还没试过 Claude Code（或 Claude）的人。

1. Vibecoding 是什么样子的？

在我给你所有精确步骤来 vibecode 一个应用或网站之前，你想看一些例子。

一个给开发团队看的原型。

我在纽约有一个咨询公司叫 “GPC”。我们帮助公司更快地采用 AI（现在主要是 Claude）。

我不会写代码，但我有一群可以联系到的开发者。

在 vibecoding 之前，我会（尝试）解释我想要什么。

现在，我可以快速构建它，并在他们编写一个健壮版本之前，发给他们一个实际的网站：

一旦你把这个发给开发团队，他们就会明白你想要什么。对设计师来说也一样。他们能感受到你的愿景。

一旦你把这个发给开发团队，他们就会明白你想要什么。对设计师来说也一样。他们能感受到你的愿景。

想象一下，把这个网站发给那些正在努力理解你需求的开发者和设计师。这是 vibecoding 的最佳案例。

一个用来处理无聊工作的工具。

有时候，对于非常具体的事情，Claude 是不够用的。

我把一个公开的 LinkedIn API（可以到 LinkedIn 上查找信息）连接到一个可爱的仪表盘上，用来了解我的内容表现如何。我用的是 Apify。

如果你需要一个定制的 AI 工具，并且你的公司有预算，请在 Linkedin 上给我发消息。这就是我赚钱的方式。

我用点赞、评论和转发的一个组合来计算分数。

我用点赞、评论和转发的一个组合来计算分数。

我发现这个组合很适合我。这就是 vibecoding 的美妙之处：我为自己而建，只为自己！

我发现这个组合很适合我。这就是 vibecoding 的美妙之处：我为自己而建，只为自己！

我可以点击每篇帖子找到 LinkedIn 链接，或者按主题搜索。

我可以点击每篇帖子找到 LinkedIn 链接，或者按主题搜索。

这不是什么高深的东西。但我每天都用它。

你怎么也能做到呢？让我们一起做：

2. 如何 精确 设置 Claude Code。

五个步骤。

1. 获取应用。 前往 claude.com/download，安装它，并花 20 美元一个月订阅 Pro。打开顶部的 Code 标签。100 美元一个月会给你更多额度。

2. 创建一个干净的文件夹。 在你的电脑上创建一个空文件夹，仅用于此。保持干净。不要放密码或私人文件，不要放任何你不想丢失的东西。Claude 只处理这个文件夹，所以把它指向这里，而不是别处。

我不打算解释如何创建一个文件夹。

我拒绝。

…

3. 开启绕过权限模式。 如果没有它，Claude 会在每次编辑和每次命令前询问你的权限，你会在一场会话中点击 “允许” 30 次。

前往设置，然后 Claude Code，然后打开 “Allow bypass permissions mode.” 现在 Claude 在你做其他事情时就可以直接工作了。

1：前往你的设置。

1：前往你的设置。

2：点击 “Allow bypass permissions mode”。

2：点击 “Allow bypass permissions mode”。

提醒一下。Bypass 在某些版本上仍然有点小毛病。有时候它会忘记已开启，或者还是会问一次。他们很快会修复。

另外，如果你在公司，先问问 IT 部门是否允许绕过权限。

你可能需要一些公司级别的培训。可以向我咨询。

4. 连接 Netlify 和 Supabase。

两者都是免费的，对于基本需求来说足够了。我没有关联关系。

Netlify 是你的网站发布到互联网上的方式。Supabase 是数据和登录信息存放的地方，以备你未来需要。分别登录它们，你的管道工作就永远完成了。

前往 Settings，然后 Connectors，然后添加这两个。

1：点击 + → Connectors → Add connectors。

1：点击 + → Connectors → Add connectors。

2：输入工具的名称，比如 Netlify，然后是 Supabase。点击 +。

2：输入工具的名称，比如 Netlify，然后是 Supabase。点击 +。

3：Claude 会要求你从你的账户授予访问权限。

3：Claude 会要求你从你的账户授予访问权限。

4：创建一个免费账户。我用我的 Google 账户。

5：在 Netlify 中点击 Authorize。同样在 Supabase 中点击 Authorize。

5：在 Netlify 中点击 Authorize。同样在 Supabase 中点击 Authorize。

7：这就是你做对时的样子。

7：这就是你做对时的样子。

5. 选择我们创建的文件夹。点击 +。

6. 选择你的模型。 我用的是 Opus 4.8 (High)。

模型越智能，消耗的 tokens 就越多。但关于成本的更多信息，请看这份新闻通讯的结尾。

7. 一切就绪。 是时候开始构建东西了！

3. 复制我的 超级 提示词。

当我打开 Claude Code 时，我会粘贴这个提示词：

“你是我的 CTO。我是 CEO，我不写代码，也不想读代码。绕过权限已开启，所以不要停下来问我是否同意技术步骤。直接构建。

用日常英语和我交流，只谈我能看到、点击或决定的事情。没有代码，没有行话。

我想要 [你的最终目标，例如‘一个我的教练业务的简单预约页面，人们可以在上面选择时间段’]。

在你构建任何东西之前，先采访我。问我所有你需要知道的东西来把它做对，一次问一个问题，使用 AskUserQuestion 工具，这样我就可以点击我的答案了。问题要集中在它做什么以及看起来怎么样上。技术部分你自己决定。当你收集到足够信息后，用几句简单的日常英语告诉我计划，然后构建它。

使用 Netlify 将其发布上线，并给我一个任何人都能打开的链接。

使用 Supabase 处理数据，并添加 Google 登录，开启行级安全（Row Level Security），这样每个人只能看到自己的数据。

与我分享的截图匹配设计。

一次构建一个部分。每完成一个部分，你自己打开它，检查它是否正常工作（也在手机上检查），看起来是否像截图，并在展示给我之前修复任何偏差。然后告诉我要看什么。”

下面是一个例子，上传了 Calendly 截图后，要求一个“与我通话预约”的网站：

我复制粘贴的提示词 + Calendly 截图 + 你必须实际写的一行目标。

我复制粘贴的提示词 + Calendly 截图 + 你必须实际写的一行目标。

Claude 会问你很多问题。你只需点击答案。

Claude 会问你很多问题。你只需点击答案。

然后就完成了。24 分钟。

然后就完成了。24 分钟。

它已经上线，在互联网上运行了。

它已经上线，在互联网上运行了。

Vibecoding 一个 v1 版本很酷。但你需要变得更好：

4. 成为一个 更好的 vibecoder。

如果你想理解这个提示词，以下是直接来自 Anthropic 文档和 Claude Code 创建者 Boris 的原则。

但我不认为你想理解。你想知道如何最好地使用这个提示词。

所以有几件事要做对：

从截图开始。

找到你喜欢的网站？截图它，拖进 Claude，然后说：“为我的东西建一个类似的。” 最快的开始方法。

高级技巧：在 Dribble、Awwwards、Godly、Land-book、Lapa Ninja、CSS Design Awards、Mobbin、Page Flows、Refero、SaaS Landing Page、Saaspo、One Page Love 和 BentoGrids 上找到最好的网站。

这是 Dribble 的一个例子。你点开一个，截图，然后上传到 Claude Code。瞧！

这是 Dribble 的一个例子。你点开一个，截图，然后上传到 Claude Code。瞧！

描述最终结果。

这加上截图是你仅有的两个输入。

说出你想要存在的东西，让 Claude 选择步骤。

例如：“一个简洁的登陆页面，用于我的教练业务。大标题，三个服务，一个预约按钮，页脚放我的社交媒体。”

然后它构建，你反馈。

一次只做一个部分。

先构建主页。把它做好。

然后做下一页。接着做下一页。

每条消息是一个小任务，而不是同时做十二个。

运行反馈循环。

看看 Claude 构建了什么。用日常话写下什么地方不对，做成编号列表。粘贴回去。Claude 会逐一修复。刷新，再看。你每页大概会循环五六次，而且这出奇地有成就感。

遇到 bug 卡住了？截图它，粘贴进去，“修复这个。” 比描述它更快。

好了，你现在已经构建了一个很酷的东西。

但有一个问题……

5. 你的网站看起来和 每个 AI 网站都像。

第一次使用时，vibecoding 感觉很奇怪。

你输入你想要的，然后看着它出现。

但随后你意识到每个人都在这样做，最终得到的设计一模一样。

下面是如何在不接触代码的情况下解决这个问题。

最简单的技巧先来：

用一个 design.md 文件偷取真实品牌的品味。

有一种开放的格式叫做 DESIGN.md。

它是一个纯文本文件，详细说明一个完整的设计系统：精确的颜色、字体、间距和规则。

你把它丢进你的文件夹，告诉 Claude “用这个做所有样式。” Claude 会到处遵循它，所以整个网站看起来像一个设计师做的。

而且你不需要自己写一个。

一个免费网站为几十个知名品牌制作了文件：Stripe、Notion、Airbnb、Linear，甚至 Claude 自己。

想要你的网站感觉像 Stripe？

• 前往 getdesign.md。没有关联关系，只是觉得很酷。

它看起来像这样。

它看起来像这样。

2. 选择一个公司。所以我们说 Stripe。

只需在搜索栏输入 “Stripe”。

3. 点击 Download DESIGN.md。是的，免费。

现在你只需拿起 Stripe 的文件，丢进 Claude Code 里面。

就这么简单，或者在你的第一个提示词里做——两者都行

就这么简单，或者在你的第一个提示词里做——两者都行

还有 designmd.app，有超过 400 个这样的文件。

这就是你如何做出一个更好的网站的方式。靠 品味。

要求一个真实的组件库。

告诉 Claude “使用 shadcn/ui 组件。” 这是大多数好看的现代网站所使用的工具包。你的按钮、菜单和表单看起来会是专业的，而不是自制的。

这不是必须的，而且会消耗很多 tokens。

但它确实有效，尤其是在某些项目上，比如仪表盘、SaaS 应用、登陆页面、引导流程、设置页面，以及任何有很多表单的东西。

提供参考并具体化。

截取两个你喜欢的网站的截图并粘贴进去。说出字体名称。要求更多留白。给出确切颜色。你越具体，它看起来就越不通用。

并且停止输入 “让它好看点。”

拜托。Claude 已经受够了。

哦，还有——不要用 Claude Code 做所有事情：

6. 何时 不要 使用 Claude Code。

Claude Code 在很多事情上都是错误的工具。

我想帮你省去麻烦。

想要一个只看一次的小部件？使用 Artifact，就在普通聊天里面。无需设置。

写文档，或者电子表格？使用 Cowork。 实际上，对于大多数工作：Claude Cowork。

而如果你只是想生成一张图片：ChatGPT (High)。就像这样：

点击 + 选择 “Image” 和宽高比。然后右下角：选择 “High” 以获得更好的图片。

点击 + 选择 “Image” 和宽高比。然后右下角：选择 “High” 以获得更好的图片。

就是这么简单。而且和 Claude Code 的原则一样：上传参考来获得更好的图片！

就是这么简单。而且和 Claude Code 的原则一样：上传参考来获得更好的图片！

只有当它是一个你会放在线上或持续构建的真实项目时，才使用 Claude Code。但要小心：我有一个重要的经验法则。

不要花比使用它更长时间来构建它。

我来解释：很多人超喜欢花几个小时 vibecode 一些……他们永远也不会用到的东西。这是一种表演性的生产力。不要成为这种人。

它会耗费你很多时间。

说到成本，这是 Claude Code 真正的花费：

7. 它真正的 成本。

Pro 是每月 20 美元，对于开始来说足够了。

你不需要昂贵的套餐来尝试这个。

但是 Claude Code 比普通聊天消耗你的使用额度更快。每条消息都会重新发送整个对话加上 Claude 已经读取的每个文件，所以一个长会话会很快累积。

四个习惯让你保持在限额内：

• 每个任务开启一个新聊天。

• 如果你付 20 美元，默认使用 Sonnet。

• 只有当你付 100 美元时才引入 Opus-4.8-High（而且你应该这么做）。

• 把 Claude 指向你的文件，而不是粘贴大块文本。

• 在大的改动之前先要求一个计划，这样你就不会为错误的转向付费。

在设置中查看你的使用情况。

只需在 Claude Code 中输入 /usage。

你就会看到你的状态。

你就会看到你的状态。

现在你对于如何更好地使用 Claude Code 了解了很多。

但你能用它实际构建什么呢？

8. 最佳 Claude Code 提示词。

你还记得我分享的那个超级提示词吧？

里面有一行是 “Claude 需要构建什么”，这就是我要分享的例子：

为一个 […] 构建一个登陆页面。

“一个为我的 [教练业务] 构建的登陆页面，用于销售 [我的团体项目]。大标题，简短的介绍，[3] 个带价格的服务，几个客户评价，和一个 [预约] 按钮。让它感觉 [平静且高端]，有大量留白。”

构建一个原型给我的 [开发者或设计师] 看。

“一个可点击的原型，关于 [我一直解释不清的那个功能]：[一个仪表盘，我的团队可以看到谁在做什么]。它不需要真正工作。我只是需要给我的 [开发者] 展示屏幕和流程。完成后，写一个简短的、日常英语的规格说明，这样我可以交给他。”

构建一个工具，为我做 [一个无聊的工作]。

“一个工具，接收 [我的订单导出文件] 并 [将其转换为一个按产品分类总计的干净月度报告]。我丢进文件，它给我报告。只为我使用，粗糙边缘没关系。”

构建一个应用，让 [我的人] 登录。

“一个简单的应用，让 [我的学生] 用 Google 登录，然后看到 [他们自己的进度和下一节课]。每个人只能看到自己的东西。从一个 [屏幕] 开始，以后可以再加。”

为一个 […] 构建一个仪表盘。

“一个仪表盘，读取 [这个文件夹里的电子表格]，然后以简单图表显示 [我的收入、新客户和退款]。每次我丢进一个新文件时刷新。”

构建一个工具来取代 [你付过多钱的应用]。

“一个内部工具，取代 [我们用来做 [团队排班] 的每月 200 美元的应用]。它只需要做我们实际使用的 [3] 件事：[列出它们]。只给我的团队，让它感觉比我们要放弃的工具更快。”

来自：一位从未写过代码的 HR 主管，她花了 3 天时间构建了自己的组织架构图软件，从而放弃了昂贵的供应商。

构建一个工具，为我读取一堆 [文件]。

“一个工具，读取 [这个文件夹里的每个 PDF]，然后提取 [客户姓名、续约日期、