用Claude Code从零开始AI编程:非程序员指南

ruben_ 发布于 2026-03-20 阅读 44

本文是一份面向非编程人员的Claude Code使用指南。

Claude Code.

如何设置 Claude Code(无需编程):

终于从 ChatGPT 换成了 Claude

最近,你一直在狂用 Claude Cowork

而且你已经成功为团队创建了 Claude Projects

但你总是听到另一个正在改变世界的 Claude:Claude Code

它们有什么区别?我的对比说明如下:

你知道 ProjectsCowork。别忘了 Claude Code

以下是整个 Claude 产品线的简要介绍:

  1. Chat → 就像 ChatGPT。一个聊天机器人。
  2. Project → 仍是 Claude Chat,但作为独立项目分开管理。
  3. Cowork → 想象 Google Drive 和 Claude Project 生了个孩子。无可匹敌。
  4. Code → 让开发者大幅提升编码效率的革命性工具。

这份通讯一直建立在无需编程的基础上。而 Claude Code 过去只限于开发者使用。但今年 1 月,情况发生了变化。

我为你(不编程的人)制作了这份唯一的 Claude Code 指南。如何设置,我如何用它向技术团队简报、无需编程就能构建完整网站,并受益于 AI 最快的突破(即编程)。

另外,我也会分享 Claude Code 的不足之处(我向来诚实)。

开始之前有两件事需要注意:

  1. 保存这份指南,周末花 30 分钟探索 Code。
  2. 把它发给任何还没试过 Claude Code(或 Claude)的人。

忘掉编程。英语就是新代码。

你读过我的 Claude 指南,所以你已经正确安装了它。

快速提醒一下没读过的读者:

  1. 访问 claude.com/download,下载应用程序。
  2. 你需要一个 Pro 账户(20 美元/月),非常划算。
  3. 打开应用,点击顶部 Chat 和 Cowork 旁边的 Code 选项卡。
  4. 从电脑中选择一个文件夹。更多细节见下文。

你不是开发者,那为什么要用 Claude Code?

  • 用提示词(= 英语)创建专业网站。
  • 从任何内容中构建个性化训练。
  • 像数据分析师一样生成交互式仪表盘。

编码的可能性无穷无尽。想象一下,你有一个初级开发者,每天不到一美元就能满足你的每一个请求。

是的,代码会被推送到网站上,任何人都可以实时访问。为此,你必须将 Claude Code 关联到一个免费的 GitHub 账户。

以下是设置 Claude Code 的方法(无需代码):

第 1 步:创建一个免费的 GitHub 账户。

GitHub 是你网站的代码在线存放的地方。把它想象成代码的 Google Drive。你无需付费,免费计划就足够了。

前往 github.com,点击 Sign up(中间位置)。

添加你的邮箱,选择一个用户名,创建密码。完成。

注册是免费的。

有意思的是,我从未见过这么难的“你是机器人吗?”验证谜题……超级烦人。而且有 10 道题(!!!),抱歉让你遇到。

第 2 步:返回 Claude Code,并关联你的 GitHub。
  1. 打开你的 Claude 桌面应用
  2. 点击 设置连接器
  3. 进入 浏览连接器 → 搜索 GitHub连接 你的 GitHub。

前往个人资料(左下角),点击设置(第 2 步)。

进入 连接器浏览连接器 → 搜索 GitHub连接 它。

第 3 步:编码,但无需代码。只需输入文字。
  1. 现在进入 Claude Code。
  2. 使用 Opus 4.6 + Auto accept edits
  3. 确保你的 GitHub 已连接。
  4. 输入一个提示词,说明你想要什么、为了什么,并附上一个例子。

这是我最喜欢的提示模板:

创建一个名为 "mediakit-website" 的 GitHub 仓库。

我不会编程,也不打算学。替我把所有代码都写好。不要请求权限(或者尽可能少请求)。

请遵循以下说明:

1. 我想要 [目标] 以满足 [成功标准]。
2. 这是附上的示例 [文件/截图]。
3. [要遵循的步骤]。

提示模板 + Opus 4.6 + Auto accept edits + 本地 + 添加截图

第 4 步:全部接受。查看实时网站。无限编辑。

即使启用了“Auto accept edits”,Claude Code 仍会不断请求权限。我在下面会更详细地说明如何完全避免这个问题(并让编码快 100 倍)。

一个重建某公司(iovis,音乐人版的 Airbnb)的示例。

每次都要点击“Always allow for session”。

这是一次生成的结果(左边是 Claude Code,右边是预览)。

现在,这是你的无限反馈循环:

  1. 查看实时网站(询问:“我现在需要一个链接,任何人都能访问。”)。
  2. 记下你在导航时看到的所有问题。
  3. 在 Claude Code 中以编号列表形式跟进这些问题。
  4. Claude Code 逐一修复。
  5. 返回实时网站,刷新,记下问题……

这是开始 vibecoding 的好方法。

但还有一种神奇的方法可以让编码快 100 倍。


我能让你编码快 100 倍。

我知道你不会编程——我也不会。所以很快你就会对 Claude Code 的一个限制感到烦恼:权限

每次 Claude 想要编辑文件、创建文件或运行命令时,都会弹出一个窗口:“你是否允许此操作?”

有时一个会话中你会遇到 20 多次……而且你必须时刻盯着 Claude Code,所以无法同时处理其他事情。

→ 你点击同意。 → 又一个弹窗。 → 你点击同意。

对于一个简单的网站,你要点击“允许”20 多次,这完全破坏了工作流。

Claude 只是想确保开发者(也就是说,不是我们)接受编辑。但既然你我都不会编程,我们只能不断验证权限。

这被称为 vibecoding

绕过权限的唯一方法是遵循以下步骤。

⚠️ 看起来可能吓人,但其实很简单。设置好就不用再管了。

第 1 步:下载 VS Code。它是免费的。

前往 code.visualstudio.com,下载并安装。

它 100% 免费。看起来技术性很强,但我们会做非常简单的事情,我保证。

VS Code 是开发者用来编写代码的工具。

不会在里面写任何代码,但 Claude 会为你写。

第 2 步:安装 Claude 扩展。

打开 VS Code,点击左侧边栏的 扩展 图标(看起来像 4 个小方块)。搜索 “Claude”(作者 Anthropic),点击 安装

第 1 步: 左下角“设置” → 点击“扩展

第 2 步: 搜索“Claude”并下载 Anthropic 的那个。

它会要求你用 Anthropic 账户登录,照做。使用你用于 Claude 的同一个账户。现在你已经在 VS Code 中运行 Claude Code 了。

第 3 步:进入 VS Code 内的 Claude 设置。

它在同一个屏幕上。

第 1 步: 进入设置。这是我们唯一一次需要做的。

第 2 步: 打开 Skip Permissions 模式。这就是神奇之处。

找到名为 “Skip Permissions” 的选项,打开它。这告诉 Claude 停止为每一个微小操作请求你的许可。设置一次,不用再管。

打开一个新会话,确保“Bypass permissions”是开启状态。

1. 点击 Claude 图标 2. 打开新会话 3. Bypass permissions 4. 使用正确的模型和模式(直接复制我的)

第 4 步:比以往任何时候都更快地 vibecode。

输入你的提示词。Claude 读取你的文件,编写代码,创建新文件,运行命令。零中断。你去做别的事情,回来完成工作。

这就是全速 vibecoding:

感觉就像魔法。

当然,这个例子只是“一次性生成”(一个提示词,没有编辑)。但我没办法录制 30 分钟的 vibecoding——那对于这篇文章来说太长了。

在家试试。一旦用了就再也回不去了。


向 Claude Code 输入提示词的最佳方式。

我已经 vibecoding 了几个星期。

以下是我节省时间最多的提示习惯。

从截图开始。

找到一个你喜欢的网站?截图,把图片直接拖进 Claude Code。输入:“为我构建一个类似外观的东西,但用于 [你的项目]。”

Claude 会看到图片,用代码重建布局。这是我发现的最快捷径。比用文字描述你想要的东西快得多。

描述最终结果。永远不要描述步骤。

糟糕的提示词:“创建一个 HTML 文件,添加一个 CSS 样式表,使用 flexbox 进行布局,使其响应式……”

好的提示词:“我想要一个简洁的咨询业务落地页。大字标题,列出 4 项服务,一个预订链接,带有社交媒体链接的页脚。”

你是项目经理,Claude 是开发者。给出简报。

把 Claude 指向你的文件。

如果你的文件夹里已经有 about-me.md品牌指南,告诉 Claude:“先读取我文件夹中的文件。在网站文案中使用我的语气和风格。”

来自 Cowork 的相同上下文技巧,在这里同样有效。

一次只做一件事。

不要在一个提示词里塞进 12 个功能。从首页开始,把它做对。然后添加联系页面,然后是博客部分。每个对话都是一次冲刺。

每个提示词只交付一个成果。

当某处看起来不对时,截图它。

看到视觉错误?截图,粘贴到 Claude Code。

输入:“这一部分在手机上重叠。修复它。”

Claude 看到问题并修补代码。只需要 10 秒,而不是用一整段文字解释。

  • 原文链接: ruben.substack.com/p/cla...
  • 登链社区 AI 助手,为大家转译优秀英文文章,如有翻译不通的地方,还请包涵~

相关文章

0 条评论