第二阶段 · 一次只增加一点难度
选一条路继续走,别同时换工具、换练习文件、连接外部资料。
下面每条路线都默认你已经走完“阅读指定内容 → 只改一句 → 对照修改前后 → 保留或恢复”。下一步不是堆更多功能,而是在你能解释清楚的范围内,把同一套检查习惯再走一遍。
ROUTE 01 / 可控的定位与修复
修一个范围明确的小问题。
挑一个几分钟内能再次看到、改动不超过两三个文件的小问题。比如:页面标题写错了、链接打开了错误位置、按钮文字对不上。先让 AI 说明准备看哪些文件;确认后再让它提出最小修改;最后只采用你看懂的变化。
- 这次扩大什么
- 从“改指定的一行”变成“先找出位置,再改一个小问题”。
- 开始前
- 能再次看到这个问题;练习文件仍然可以删除;知道先打开哪个文件。
- 完成时
- 能说清原因、改了哪些文件、怎么复查——而不是只收到一句“已修复”。
建议按这个顺序进行
- 用一句话描述你看到的问题,不要一开始就指定怎样修。
- 让工具先列出计划和要看的文件;发现文件夹不对就停。
- 让它列出修改前后;如果顺手改了格式或无关文件,要求它删掉这些变化。
- 在浏览器里重新检查问题是否消失;没解决就继续找原因,不要连续增加更多改动。
ROUTE 02 / 视觉变化也要能核对
只改一块页面样式,不顺手重做整页。
把可修改范围扩大到一个负责页面外观的 CSS 文件。目标要具体:段落间距调大一点、按钮文字更清楚、卡片在手机上不要被挤扁。先说清要检查电脑还是手机画面、哪些内容不能动,再让 AI 提出最小修改。
- 这次扩大什么
- 从修改文字扩展到修改表现层,但仍限制在一个页面和一个样式文件。
- 开始前
- 能打开本地预览;有一张修改前截图或能说清当前问题。
- 完成时
- 桌面和手机宽度下文字都看得清,其他布局没被顺带挪动。
不要跳过的检查
- 先说清要改善什么,比如“正文行距太挤”,不要只说“做得高级一点”。
- 要求只改目标区域;不要顺手更换整个网站的字体、颜色或基础样式。
- 同时检查手机和电脑宽度;不能让导航、按钮或长链接跑出画面。
- 保留修改前的截图和文字对比;看不出改善就撤销。
ROUTE 03 / 先学回退,再谈协作
为一个小改动留下可以恢复的保存点。
Git 是一种保存文件版本的工具。它能告诉你“现在的文件和刚才哪里不同”,也能帮助你回到之前的版本。第一次可以使用带按钮和窗口的 GitHub Desktop,不必先学命令;先在练习文件里看变化、保存一次版本,再练习恢复。
- 这次扩大什么
- 增加一种保存和恢复文件的方法,而不是增加更多 AI 能力。
- 开始前
- 使用独立练习文件夹;不要把私人或公司项目当作第一次实验。
- 完成时
- 分得清“还没保存的修改”“已经保存的版本”和“恢复到之前”。
最小练习闭环
- 修改前先看状态,确认出现的只有你预期的文件。
- 完成一处小改动并对照修改前后;保存版本时写清实际变化,例如“更新练习页状态文字”。
- 再做一处无关的临时改动,然后练习恢复它。
- 不清楚影响之前,别执行强制覆盖、清空历史、批量删除这类命令。
ROUTE 04 / 连接能力之前
先理解外部连接会让 AI 多接触什么。
有一种常见的连接方式叫 MCP,它能让 AI 读取外部资料、设计文件、数据库或其他工具。好处是少做手工复制,代价是 AI 能看到和操作的内容变多了。第一次不要安装一长串服务,只选一个练习对象,并问清它能看到什么、能做什么、账号密钥放在哪里、怎样关闭。
- 这次扩大什么
- 从本地文件范围扩展到一个明确的外部服务。
- 开始前
- 已完成本地练习;能区分“读数据”“写数据”“执行操作”。
- 完成时
- 能说出这个服务的权限、数据从哪来、怎么停用。
第一次接入的边界
- 只连接一个服务,优先选择只能阅读的资料或单个练习项目。
- 不要把正在使用的业务数据库、整个网盘或公司主项目作为第一次连接对象。
- 先读官方权限说明;不明白账号密钥能访问什么时,不要粘贴。
- 用完检查连接记录,知道怎样移除连接、取消授权。
ROUTE 05 / 设计稿不是自动代码按钮
先读懂一张设计稿,再让 AI 改一个局部。
Figma、Open Design 这类工具能给你尺寸、颜色、文案和组件关系,但不代表可以跳过产品判断。先选一个练习画板或静态页面,让 AI 说它读到了哪些视觉规则,再只实现一个区块。对比要看截图和结构,别只凭“看起来差不多”。
- 这次扩大什么
- 增加设计资料输入,但把输出限制在一个可复查的页面区块。
- 开始前
- 有明确画板、目标区块和本地练习页面;不接触整个团队文件。
- 完成时
- 分得清哪些值来自设计稿、哪些是实现时的取舍,也知道怎么对照验证。
推荐提问方式
- 先问“这个区块有哪些文字、层级、间距和状态”,别开口就是“完全还原”。
- 要求先描述实现计划,再写代码;颜色和尺寸应有明确来源。
- 一次只实现一个区块,并保留原页面截图和修改前后对比。
- 没有明确的交互说明时,先完成静态页面和键盘操作,别自己发明产品流程。
ROUTE 06 / 选择工具不是考试
按账号、环境和任务选择一条能持续用的路线。
Codex、Claude Code、Gemini CLI 都是能在电脑文件夹里协助工作的 AI 命令行工具。它们的登录、安装、权限提示和界面不同。第一次不用比较排行榜;拿同一份练习文件,看哪个更容易让你看懂范围、看见修改前后、处理权限并恢复文件。
- 比较维度
- 账号是否已有、系统是否支持、改动是否可见、权限是否可解释。
- 不要比较
- 别拿一堆匿名跑分代替你自己的项目和安全要求。
- 完成时
- 说得出你现在用哪个工具,以及暂时不选其他的理由。
每次切换工具都重新做的小检查
- 核对官方安装来源、版本和登录账号。
- 重新确认当前打开的文件夹;换工具后要重新说明范围。
- 先只让它读取并列出看到的文件,再允许最小修改。
- 不要因为某个工具的权限提示更简洁,就省掉查看修改前后这一步。