[控场AI]
· 10 分钟阅读· 5,062 字

Claude Code零基础保姆级教程:28分钟掌握AI编程核心工作流

Claude Code零基础保姆级教程:28分钟掌握AI编程核心工作流

Claude Code将聊天、编辑、终端整合为一体,让零基础用户用自然语言直接构建和调试真实项目。

这篇教程以一位B站UP主的Claude Code实战演示为蓝本,系统拆解了从安装到完整项目构建的工作流。核心论点是:编程初学者的最大障碍不是代码本身,而是在聊天框、编辑器、终端三个工具之间反复搬运内容。Claude Code作为能读写文件、执行终端命令的AI智能体,将这三个环节整合进同一工作区。教程覆盖了六个关键实践:用包含四要素的第一个提示词奠定项目基础;用具体化描述做针对性代码修改;用完整错误信息辅助调试;用自然语言完成终端操作并在执行前审批;用CLAUDE.md固化项目规则;以及用智能体模式一次性交出多步骤任务。文末还总结了初学者最常踩的五个坑,核心心法是「把Claude当智能体而非聊天窗口来用」。

很多编程初学者卡住的地方,其实不是代码本身太难,而是他们在手动连接三个独立的工具——聊天框、编辑器和终端。你在对话框里要一段代码,复制粘贴到编辑器,再到终端运行,出错了又把报错贴回聊天框,修好再复制回来。这种来回折腾才是真正拖慢进度的元凶。

这篇教程整理自一位B站UP主分享的Claude Code实战演示,核心观点很直接:Claude Code几乎消除了这些麻烦,因为它不只回答代码问题,而是直接在你的项目里工作。下面把从安装到构建、编辑、调试、终端操作、项目规则设置,再到多步骤自动构建的完整工作流拆解清楚。

为什么Claude Code不同于普通聊天

传统AI写代码模式下,你是三个工具之间的"人肉搬运工"。而Claude Code作为一个能读取、编辑、运行整个项目的智能体,把这些环节整合进了同一个工作区。

对几乎没有编程经验的人来说,这意味着你不需要在开始前就搞懂每个文件、每条终端命令、每个报错信息。你真正需要掌控的,只是"哪些内容被批准、哪些被修改"。视频作者从一个完全空白的文件夹起步,只用大白话就把它变成了一个可用的任务管理器,这正是这套工具降低门槛的地方。

Claude Code在技术分类上属于「AI编码智能体」(AI Coding Agent),与GitHub Copilot、ChatGPT等工具的本质区别在于它拥有对文件系统的读写权限和终端执行能力。普通AI助手只能在对话窗口内输出文本,你需要手动把代码搬运到编辑器;而智能体可以直接打开文件、写入修改、运行命令并读取输出结果,形成一个完整的「感知—决策—执行」闭环。这类工具背后的技术基础是「工具调用」(Tool Use / Function Calling),即大语言模型被赋予调用外部函数的能力,如读文件、写文件、执行shell命令等。Claude Code正是基于这一机制,让模型从单纯的文字预测者变成能在真实环境中操作的执行者。理解这一点有助于解释为什么「把Claude Code当普通聊天窗口」是低效的——你只用到了它能力的一小部分。

安装与设置:把Claude Code指向正确的文件夹

安装环节看似技术,实际很简单。从Claude官方下载页获取Mac或Windows的桌面应用(注意网页版是在浏览器运行,教程用的是桌面版),运行安装程序、登录账号即可。

这里有个关键前提:账号套餐必须是Pro、Max或更高版本才能配合Claude Code使用,免费套餐需要先升级。发送按钮附近的模型下拉菜单已经默认选好,新手无需改动。

设置的核心是打开正确的项目文件夹:进入代码标签页,选择"本地",指定一个专门给这个项目的干净文件夹。这一步要格外小心——Claude Code能看到整个工作区而非单个文件,所以不要直接指向整个桌面或下载文件夹。工作区越专注,上下文越准确,后续提示的效果也越好。设置完成后,输入"这个项目里有哪些文件"就能验证是否连接正常。

从空文件夹构建:第一个提示词决定一切

从零构建时最让人发怵的是一片空白。但Claude Code能一次性规划出项目结构、创建文件并组装出可运行的第一个版本,你不必像普通聊天那样一个文件一个文件地写。

起点的质量取决于你描述需求的清晰度。模糊的"给我建一个任务应用"会让它替你做太多可能不符合预期的决定。作者建议第一个提示词包含四样东西:想构建什么、想用什么技术、需要哪些主要功能、以及一条防止项目过度复杂的约束。

是从一开始就给它足够的方向

他给出的示范提示是:"用HTML、CSS和原生JavaScript创建一个简单的任务管理器网页应用,用户能添加任务、标记完成、删除任务,保持单页面,不使用外部库。"发送后,Claude Code会先理解请求、规划结构,再分别生成HTML(页面结构)、CSS(样式)和JavaScript(逻辑),并把它们放进独立文件。

搭好脚手架后,花30秒检查整体结构是否合理,比几个提示词之后才发现组织方式不对要省事得多。这就是先搭脚手架的意义。

理解与修改现有代码:具体化是关键

在真实项目里,你花在处理现有代码上的时间往往多于从零创建——可能是几周前自己写的、队友交接的,或Claude刚生成的脚手架。这里有两个核心技能:理解现有代码、以及在不干扰其他部分的前提下做针对性小修改。

理解代码时,不必自己逐行研究,直接让Claude用通俗语言解释你关心的那部分,比如"用大白话解释一下任务完成逻辑做了什么"。它会读取相关代码,拆解检测逻辑、状态变化和各部分的连接方式。

修改前方的应用程序

修改是初学者容易给自己加活的地方。像"重写这个"这种宽泛请求会给Claude太大自由度,可能改动本来正常的部分。更好的方式是:说明代码当前做什么、描述你想要的变化、明确哪些必须保持不变。作者的示范是"现在已完成任务留在列表中带删除线,我希望它移到底部单独的已完成区域,只修改完成行为,添加和删除功能保持原样"。桌面应用能直观展示修改前后的对比,批准前就能看清哪些代码被改动。

调试:给Claude最清晰的证据

Bug往往是初学者失去动力的地方,但用Claude Code不需要理解整个代码库就能排查。作者把常见问题分成两类:

第一类是有明确报错信息。这时不要精简、不要只复制最后一行,直接从控制台把完整错误信息贴过去,加上一句"我点击任务时出现这个错误"。完整信息包含文件名、行号、堆栈跟踪等,正是Claude定位问题的线索,删掉一部分可能就删掉了关键。

第二类是没有报错但行为不对。应用能打开、按钮能点,但某处逻辑错了。这时只需描述症状,比如"删除任务时顶部计数没有减少,每次删除应该减一",Claude就能追踪删除逻辑找到原因。

作者提到自己做食谱应用时应用加载不出来,他没翻文件,而是点击播放按钮让Claude运行项目,它在过程中检测到问题并自动修复。无论哪种情况,关键都是留在同一个对话里工作,让Claude保有之前尝试的上下文。

终端操作:用日常语言完成命令

终端命令是让编程显得比实际更技术化的东西之一。你可能清楚想做什么(启动服务器、安装包),却要查命令、检查语法、确认在正确位置运行。

Claude Code能直接通过终端安装包、运行脚本、启动本地服务器、跑测试、处理Git任务。你用日常语言描述结果,它找出对应命令。以版本控制为例,输入"为这个项目初始化Git仓库并做第一次提交",Claude不会立刻动手,而是先展示计划执行的命令并请求批准,确认后才会初始化仓库、暂存文件、创建提交。

而不用自己去记住每一条命令

审批这一步在后果严重时尤为重要。启动开发服务器、跑测试、安装可信包这类常规操作风险小;而删除文件、修改重要数据、推送到生产环境的命令,就值得在批准前仔细看。命令运行时还能用停止按钮立即中断——执行什么、何时执行,主动权始终在你手里。

CLAUDE.md:一次设置,贯穿全程

每次做项目都重复同样的指令(用某种语言、遵循某种文件组织)很快会让人厌烦。Claude Code提供了CLAUDE.md文件来解决这个问题——它放在项目文件夹里,相当于一套长期指令,Claude处理项目时会自动读取,无需你在每个提示中重复上下文。

创建方式除了手动,更快的是输入 /init,Claude会检查项目并生成一份初始草稿,你再编辑成想要的规则。作者为示范项目添加了几条简单规则:使用纯原生JavaScript不用框架、函数命名用清晰完整的词不用缩写、所有内容放在一个文件中、未经同意绝不添加库。

设置好之后,再让它"添加一个清除所有已完成任务的按钮",Claude就会自动遵循命名风格、单文件结构,且不会擅自加库。哪怕只有三四条清晰规则,也能让代码更一致,省去反复叮嘱的麻烦。所以在每个项目开始时就创建它是值得的。

CLAUDE.md本质上是一种「系统提示持久化」机制。在普通对话中,每次新会话AI都从空白上下文开始;CLAUDE.md让你把项目级别的约束、偏好和背景信息固化到文件里,Claude每次处理该项目时都会将其加载为前置上下文。这与软件工程中的「约定优于配置」(Convention over Configuration)理念相似——提前把规则写清楚,后续所有操作自动遵循,而不是每次都临时声明。类似的机制在其他AI编码工具中也有对应实现,例如Cursor的.cursorrules文件、Copilot的自定义指令等,它们解决的是同一个问题:如何让AI在整个项目周期内保持一致的行为风格。对于团队协作场景,CLAUDE.md还可以提交到Git仓库,让所有成员使用Claude时遵循相同的项目规范。

智能体模式:一次交出多步骤任务

前面都是逐步工作——提需求、审查、批准、再继续。智能体模式让你可以一次性交出更大的多步骤任务,Claude会自行规划顺序、执行更改并完成全流程,不需要每一步都等新提示。

首先规划应用需要什么

作者用一个食谱应用做演示:要求Claude构建一个能添加食谱(含标题、食材、步骤)、查看列表、打开详情、删除的应用,并约束用纯HTML/CSS/JavaScript单页面、不用库和登录系统,明确"只有四个操作在浏览器中都正常工作,任务才算完成"。

发送后他不再逐步添加指令。Claude先规划应用需求,再按顺序创建结构、构建功能、设置列表、创建详情视图、添加删除功能,全部来自那一个请求。完成后重心转向审查:检查改动的文件、打开预览、测试四个操作。需要调整就作为下一个提示。给它目标、边界和明确的完成定义,让它处理中间步骤,这就是智能体编码的真正价值。

智能体模式对应的技术概念是「自主任务规划」(Agentic Task Planning),其核心是让模型将一个高层目标分解为有序的子任务序列,并依次执行直到满足完成条件。这与早期「一问一答」式AI交互的区别,类似于给员工布置「完成这份报告」与每隔五分钟指示「现在打开Word」「现在写标题」之间的差距。在技术实现上,这类模式常被称为ReAct(Reasoning + Acting)或Plan-and-Execute架构——模型先推理出步骤计划,再循环执行「行动→观察结果→调整计划」的过程。使用智能体模式时,「明确的完成定义」尤为关键:模型需要一个判断任务是否达标的标准,否则可能在「够用」和「继续优化」之间无法终止。作者在示范中要求「只有四个操作在浏览器中都正常工作任务才算完成」,正是给了一个可验证的退出条件。

新手最容易踩的五个坑

作者总结了几乎每个初学者都会犯、拖慢进度的错误:

  1. 一次只提示一行:每步都等待,结果你自己在管理整个流程。应提供完整上下文,让它一次做更多。
  2. 跳过CLAUDE.md:反复重复偏好设置,不如写进文件一次搞定。
  3. 小改动却要求全部重写:宽泛请求让Claude动了不该动的地方,应具体说明改什么、保留什么。
  4. 跳过错误信息:出问题立刻发新提示,不如贴完整报错给足上下文。
  5. 把Claude Code当普通聊天窗口:它能读文件、编辑、运行命令、完成多步骤任务,给它完整任务而非单个碎片问题,工作流才会真正高效。

结语:核心是把它当智能体来用

掌握核心工作流后,最好的做法就是别再研究,直接用在真实项目上,把它变成习惯。安装桌面应用、创建干净文件夹作为工作区、添加CLAUDE.md写几条规则——第一个项目做得简单到能完成即可,比如重建一个熟悉的任务清单、记事本或计算器。

真正的关键在于:把Claude当成能读文件、跑命令、做修改、处理大任务的智能体,你的提示自然就从琐碎的单步骤,变成给它一个明确的目标去努力。这套心法,才是日常项目里最重要的那95%。

分享:

相关推荐