Lab · 约 30 分钟
第一个小工具
不依赖现有代码仓库。你将得到一个能在浏览器打开的「今日待办」页面——证明 Claude Code 真的能替你动手，而不只是聊天。
开始前确认
完全零基础？建议先走 零基础新手线。
分步操作
步骤 1：准备文件夹
在桌面或任意位置新建文件夹，例如 my-first-tool。用终端进入该目录：cd 路径/my-first-tool。这里将成为 Claude Code 的工作区。
步骤 2：启动 Claude Code
确认已安装 CLI 并完成模型配置（官方登录或国产 API）。在同一目录运行：claude
步骤 3：描述你要做什么
用一句话说清楚目标、技术约束和验收方式。下面是一条可直接复制的提示词。
可复制提示词
请在这个空文件夹里做一个「今日待办」单页小工具：
- 只用 HTML + CSS + 原生 JavaScript，不要框架，不要 npm
- 页面标题：我的今日待办
- 功能：输入框添加待办、点击条目切换完成状态、有一个「清空已完成」按钮
- 样式简洁好看，手机浏览器也能用
- 写完后告诉我如何在浏览器打开 index.html 做验收
先列出你的计划，我确认后再创建文件。步骤 4：审阅计划并批准
Claude 会先给出文件列表和步骤。看清它会创建哪些文件、是否会运行命令。没问题就回复「按方案执行」。有顾虑就要求缩小范围。
可复制提示词
按方案执行。完成后只保留必要文件。步骤 5：逐项确认权限
创建文件、运行命令时终端可能弹出确认。新手建议一律先看清楚再允许，不要开启「全自动跳过权限」除非你很清楚风险。
步骤 6：在浏览器验收
完成后用 Finder / 资源管理器双击 index.html，或在终端用 open index.html（macOS）/ start index.html（Windows）打开。自己试：添加、完成、清空是否正常。
步骤 7：收尾与复盘
让 Claude 用三句话总结改了什么；若有 CLAUDE.md 可要求写入「本项目是纯静态 HTML 小工具」。下次加功能时上下文更清晰。
可复制提示词
请用三句话总结你创建了哪些文件、各自作用，以及我下次想加「删除单条待办」该怎么描述需求。常见卡点
- 命令找不到：回到安装章节检查 PATH，重开终端。
- 401 / 鉴权失败：检查 API Key 与 Base URL，参考国产模型接入页。
- 页面空白：让 Claude 打开浏览器控制台报错并修复。
- 改乱了想重来：删除文件夹内文件（保留空目录），重新描述需求再做一遍。
仍解决不了？截图终端全文，并说明「新手线第几步」，发给 Claude Code 继续排查。
完成后
你已经完成「能跑起来」的闭环。下一步建议做 首次项目接入，把同样方法用到真实 Git 仓库上。
核对日期：2026-05-20