Claude Code 可以在 Visual Studio Code 中，把自然语言需求变成文件和可运行的应用。对初学者来说，最重要的起步步骤不是写出完美的提示词，而是安装官方扩展、打开正确的项目文件夹、弄清智能体想修改什么，并在提出更多需求前先用浏览器检查结果。

安装并连接 Claude Code

Visual Studio Code 也称 VS Code，是微软面向 Windows、macOS 和 Linux 提供的免费代码编辑器。安装后，从左侧边栏打开扩展面板。也可以在 Windows 或 Linux 上按 Ctrl+Shift+X，在 macOS 上按 Cmd+Shift+X。

搜索 Claude Code，选择由 Anthropic 发布的官方扩展。搜索结果可能不止一个，因此点击 安装 前要核对发布者。安装后，编辑器侧边栏会出现 Claude Code 面板。

打开该面板，按照提示在浏览器中登录。使用 Claude 账号登录后，返回 VS Code，确认提示词输入框已就绪。使用该扩展需要付费账号：Claude Pro 每月收费 $20，面向高强度使用的 Claude Max 套餐每月收费 $100 至 $200。免费账号无法使用该扩展。

代码编辑器显示新增的侧边栏扩展，旁边的浏览器窗口显示登录确认勾选标记

▲ 扩展安装与账号登录

编辑器起初可能显得有些繁杂。左侧边栏显示文件列表和扩展，中间显示打开的文件，终端位于底部。终端是用于运行命令的文本界面。Claude Code 与这些面板协同工作，因此不用在不同应用之间来回切换，就能看到它创建的文件和运行的命令。

首次输入提示词前，打开一个空文件夹

为应用创建一个空文件夹，例如 ClaudeProject。在 VS Code 中选择 文件 > 打开文件夹，然后选中它。这个文件夹就是工作区，也就是 Claude Code 将处理的一组文件。

从应用菜单打开集成终端，或者在 Windows 或 Linux 上按 Ctrl+，在 macOS 上按 Cmd+。检查终端的当前路径是否指向刚才在 VS Code 中打开的文件夹。这个细节很容易被忽略。如果终端在其他位置运行，生成的文件或安装的软件包可能会落到错误的位置，影响应用构建。

Claude Code 可以创建和编辑文件、整理文件夹、安装依赖项并运行命令。依赖项是应用运行所需的软件包。与浏览器端 AI 聊天工具相比，这些能力省去了大量复制粘贴工作，但也意味着需要仔细审查改动。当编辑器要求批准拟运行的命令或拟进行的文件修改时，先查看涉及的文件和具体改动，再决定是否允许。diff（差异对比）会显示一次编辑新增或删除了哪些内容。

用四次聚焦的请求搭建应用

一个名为 Daybook 的小型效率应用，可以展示如何从空文件夹做出可用的产品。它包含日记和待办事项列表，两者采用统一的设计。不要一次提出所有功能和视觉细节，而是每次只让 Claude Code 完成一项工作，测试后再继续。

  1. 搭建基础。 要求创建一个具有简洁布局、可在日记和任务两个板块之间切换的基础网页应用。让 Claude Code 配置项目及其依赖项，并使应用能够在本地运行。在这个示例中，它创建了配置文件和源文件，安装了前端软件包，并启动了本地开发服务器，使尚未完成的应用也能在浏览器中打开。检查两个板块是否都已显示，以及能否在它们之间切换。
  2. 加入日记功能。 要求添加包含标题、写作区域、心情选项和可选标签的日记填写表单，以及已保存日记的列表。该示例使用 LocalStorage，这是一种浏览器存储方式，刷新页面或关闭标签页后，应用数据仍会保留在该浏览器中。创建一篇日记，确认它出现在列表中，刷新页面，再测试删除功能，然后继续下一步。
  3. 加入任务功能。 要求添加新建任务、低中高优先级选项、截止日期、完成状态控件，以及用于查看全部、未完成和已完成任务的筛选功能。新建一项任务，将其标记为已完成，并切换筛选条件。然后返回日记板块，确认新增功能没有影响之前已检查过的功能。
  4. 完善设计。 两个板块都能正常工作后，再要求统一字体和间距，加入明暗主题切换，并让布局适应较小的屏幕。Daybook 示例采用了受 Evernote 启发的绿色点缀和圆角卡片。测试两种主题，并分别在桌面和手机屏幕宽度下检查应用，包括表单是否仍能在不出现横向溢出的情况下正常使用。

笔记本电脑和手机显示带绿色点缀的日记卡片、按优先级排列的任务，以及明暗两种布局

▲ Daybook 在不同设备与主题下的界面

每次请求都应足够具体，以便测试结果。搭建基础的提示词应该产出一个可运行的应用，而不是完整的日记功能。添加日记功能的提示词应该改进该功能，同时保留已经能正常工作的导航。相比一次性要求做出全面打磨的应用，按这种顺序推进，要查明是哪次改动引入了问题容易得多。

既检查浏览器，也检查文件

页面能够打开是好的开始，但不能只做这一项检查。每次提出请求后，都要查看 VS Code 中的文件树；如果需要批准修改，先审查拟进行的编辑。然后在浏览器中测试你要求的行为：切换板块、保存和删除日记、完成任务、筛选列表，以及切换主题。

完成后的 Daybook 项目由普通的本地源文件组成，包括软件包配置、组件、样式和资源文件。这些文件可以保留下来、交给其他工程师，也可以通过托管服务商部署。正是这种可移植性，让这一做法有别于在专有无代码平台内构建应用。不过，在自己电脑上运行的应用尚未托管到网上；部署是单独的一步。

从小处着手，逐项验证改动

要尝试这种方法，先安装 Visual Studio Code 和 Anthropic 官方 Claude Code 扩展，使用符合要求的账号登录，并打开一个新的项目文件夹。输入第一条提示词前，确认终端指向该文件夹。先要求生成一个最简可运行应用，审查所有需要批准的改动，并在浏览器中测试。之后一次添加一项功能，等基础功能都能正常工作，再进行整体设计优化。