独立开发者的能力地图与工具准备

这一篇先做一件很小的真事：把ClearCopy的英文介绍存成网页，改坏一句，再用Git找出改动。最后你会得到一个能在浏览器打开的index.html和一条看得懂的修改记录。AI以后可以帮你写代码，但你要能指出“这一行把离线清单写成了跨设备同步”，并让它改回来。

准备一台电脑、浏览器和纯文本编辑器。VS Code可以从官方下载页安装；macOS自带文本编辑也可使用，但应先转为纯文本，文件必须叫index.html，不能是index.html.txt。本篇不需要域名、云服务器、模型密钥或支付账号。

先让一个文件变成页面

在电脑上新建clearcopy-practice文件夹。用编辑器创建index.html，粘贴下面的完整内容并保存：

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ClearCopy draft</title>
<h1>Check your App Store description</h1>
<p>Create packing lists, check off items, and reuse lists offline.</p>
<p>No account or cloud sync.</p>
</html>

双击文件，用浏览器打开。你应看到一个大标题和两行英文，浏览器标签页名为“ClearCopy draft”。页面很朴素，恰好方便观察：title控制标签名，h1是页面主标题，p是段落。把h1中的“Check”改成“Review”，保存文件，再刷新浏览器；大标题随之变化，标签名不会变化。

MDN的HTML入门也从元素如何组织内容讲起。你不用先背完所有标签，先熟悉“编辑文件、保存、刷新、看到变化”这个来回。如果双击后看到源码，检查扩展名和默认打开方式；如果修改没有出现，检查是否保存了另一个同名文件。

这个页面只有已写好的介绍，没有真的检查任何文案。你已经做出了可读的前端草稿，尚未创建后台服务。把这两个状态分清，接下来向AI提要求时就能少一些误会。

给当前版本留一个能比较的起点

Git记录文件的版本，GitHub可以托管Git仓库，它们不是同一个东西。GitHub的Git介绍解释了仓库、提交和基本命令。这里先在本机练习，不上传任何文件，也不需要注册GitHub。

在电脑终端运行git --version。如果能看到git version及版本号，继续；若提示找不到命令，按Git安装说明为自己的系统安装后重新打开终端。macOS也可能先提示安装命令行开发工具，安装完成再试。

在终端进入刚才的练习文件夹。可以先输入cd ，注意末尾有空格，再把文件夹拖进终端，按回车。运行以下命令，创建仓库并存下第一版：

git init
git add index.html
git -c user.name="Practice" \
  -c user.email="practice@example.invalid" \
  commit -m "Add first page"

示例姓名与邮箱只用于这次本地练习的提交，不用于公开发布。成功后，终端会显示提交摘要和创建index.html的记录。本文已在独立临时目录执行过这些Git操作，没有改动正式项目。

现在用编辑器把“reuse lists offline”改成“sync lists across devices”，保存文件。回到终端运行：

git diff -- index.html

输出会包含这样的两行：

-<p>Create packing lists, check off items, and reuse lists offline.</p>
+<p>Create packing lists, check off items, and sync lists across devices.</p>

减号是旧内容，加号是新内容。你不需要懂复杂编程，也能看出新版本增加了跨设备同步，而练习App只支持离线清单。这就是审阅AI改动时最先要掌握的能力：把变更和需求逐行对上。

在编辑器里把这句话改回原文，再运行同一个git diff。若没有其他改动，终端不再打印差异。这里不用删除目录或强制重置的命令，保留你已经理解的那条修改记录即可。

看懂浏览器还会向哪里要东西

本地文件练习只读取电脑上的HTML。真正访问网上的网站时，浏览器会向服务器发请求，再收到响应。MDN的HTTP概览开篇配图还画出了一个页面请求多个资源的过程：HTML、样式、图片、视频可以来自不同位置。

看配图时，从页面走向各资源的箭头读起。以后ClearCopy出现“文字能显示，图片不显示”，你就会知道页面不是只有一项下载；“按钮有样式，检查结果没有回来”，也可能是另一条API请求失败。先判断哪一部分没到，再让AI检查对应文件或接口，比把整站重写一遍更有效。

等进入第三章，我们使用Astro组织页面、Node.js/Fastify处理接口、PostgreSQL保存必要数据、Railway托管服务。现在不需要为这些名字逐个购买账号。官网工具会更新，例如Astro安装页在本次核对时要求Node.js至少22.23.4；安装时先看前提，不能因为一台电脑“已经装了Node”就跳过版本检查。

给AI一份能准确执行的小任务

你现在可以把刚才的事实和文件一起交给AI。下面是一份已填好的请求，可在你使用的AI编程工具中发送；发送前打开练习目录，不要混进正式项目。

任务：只修改当前目录的index.html。
把页面主标题改成 Review your App Store description。
保留浏览器标签名 ClearCopy draft。
正文仍只表达行程、勾选、复用、离线。
不要添加账号、云同步或AI规划。
不要安装依赖，也不要新增文件。
完成后说明改了哪一行。

改完先打开浏览器刷新，看主标题是否变化；再运行git diff -- index.html，看它是否只改了h1。如果AI顺手加了同步承诺或一整套登录页，直接把差异中相关行指给它，让它恢复，并解释原任务只要求改标题。

你留下的成果很小，却完整包含了独立开发的基本动作：把需求写清楚，定位文件，观察页面，比较版本，纠正错误。保留这个练习目录。以后工具越来越多时，你仍可以用同样的动作判断它们究竟改了什么。