12.7 复盘：从 0 到 1 你写了多少"自己的代码"？

统计一下

在整个 MP3-Visualization 应用中，你亲手写的代码有多少？

真实的答案是：可能接近零行。

除非你在某个环节自己打开编辑器手动修改了代码，否则整个项目——从 index.html 到部署配置——都是由 Claude Code 生成的。你的角色是给出指令、做决策、验证结果。

这听起来像"什么都没做"，但恰恰相反。

你真正贡献了什么

让我们逐轮复盘，看看每个阶段你的真实贡献：

轮次	AI 做的	你做的
创建骨架	生成了 3 个文件和基础结构	决定"用原生 Web API，不用框架"
布局设计	编写 HTML 结构和 CSS	决定"左控制右画布"的布局方案
频谱可视化	实现 AnalyserNode 和 Canvas 绘制	选择柱状图样式和颜色方案
三种效果切换	编写三种渲染算法	决定"要有三种模式，用户可切换"
歌词功能	实现解析器和高亮逻辑	提出"模糊匹配时间戳"的设计需求
录制功能	实现 MediaRecorder 整合	决定"录制时要包含音频"
播放列表	实现文件管理和切换	决定"自动播下一首"的交互逻辑
键盘快捷键	实现事件监听	决定快捷键映射方案
配置保存	实现 localStorage 读写	决定"哪些配置需要保存"
调试修复	定位并修复 bug	提供错误信息，验证修复结果
部署上线	配置 GitHub Pages/Actions	选择部署平台，提供仓库地址

这个表格揭示了一个重要事实：每一行代码都是 AI 写的，但每一个决定都是你做的。

什么是"你的代码"

传统意义上的"写代码"等于"打字"。但如果我们用软件工程的视角看，"代码"的核心不是字符的排列，而是意图的精确表达。

当你对 AI 说"把低频柱状条的颜色改成深蓝色"时，你"写"了一行代码：fillStyle = darkBlue for low frequencies。只不过这行代码不是 JavaScript 语法，而是自然语言。但它起到的效果完全一样——改变了程序的最终行为。

从这个角度看，你确实"写"了代码，只是用的语言不同。

进一步延伸：

在第一轮，你决定"用原生 Web API，不用框架"——这是一个技术选型决策，影响了整个项目的架构。

在第三轮，你提出"如果歌词时间戳不是严格递增的，按最接近当前时间的行匹配"——这是一个边缘情况处理需求，传统开发者可能要在写代码很久之后才会意识到。

在第六轮，你要求"添加键盘快捷键"——这是一个用户体验优化，一个传统产品经理可能不会想到，一个传统开发者可能不会主动实现。

每一个决策都直接影响最终产品的形态。这些决策的价值，不亚于手写几十行代码。

你不经意间学到了什么

完成这个项目后，你不知不觉地接触到了以下这些概念：

• HTML 结构：div、canvas、audio、input 标签的作用
• CSS 布局：flexbox、百分比宽度、响应式 media query
• JavaScript 基础：函数、变量、事件监听、箭头函数
• Web Audio API：AudioContext、AnalyserNode、频率数据
• Canvas 绘图：坐标系统、颜色填充、动画循环
• Git 版本管理：init、add、commit、push
• 部署流程：GitHub Pages、域名、HTTPS

你可能没有刻意"学习"这些概念，但在和 AI 对话的过程中，你反复看到它们、听到 AI 解释它们、最终在产品中看到它们工作的结果。这就是"在构建中学习"的模式——效率远超传统教学。

哪些是你可能已经能做的：

• 你能在浏览器控制台中输入 console.log('hello') 并看到输出
• 你能区分 index.html、style.css 和 app.js 各自负责什么
• 你能告诉 AI "在第 42 行后面插入一段新代码"
• 你能在 GitHub 上创建一个仓库并把代码推上去

这些看起来是"小技能"，但它们在 Vibe Coding 中已经足够你完成大部分任务。

真正的价值在哪里

如果说这个项目中有哪些部分是 AI 无法替代你的：

设计决策。

"左侧放控件还是右侧放控件"——这不是一个技术问题，这是一个体验问题。AI 不会在意用户习惯，但你在意。

"频谱颜色用暖色还是冷色"——这是审美判断。AI 可以给你任何颜色，但它不知道什么颜色"好看"。

"是否需要歌词功能"——这是产品决策。AI 不知道你的目标用户是谁，但你知道。

纠偏能力。

当 AI 生成了一个不符合预期的效果时，你说"不对，重来"。这个"不对"的判断——看起来简单——但需要你对"什么是对的"有清晰的画面感。

验收标准。

"可以了，这个效果就是我想要的。"——这句话只能由你来说。

需求转化为指令的能力。

你说"在圆形辐射模式下，柱状条顶端变成圆点"——这是一个很抽象的需求，但 AI 能理解，因为你描述的是"效果"而不是"实现方式"。"柱状条顶端变成圆点"——AI 在 Canvas 中做的事情是：在每条线的末端画一个小圆形。你不需要知道 Canvas 的 arc() 方法，你只需要知道你想要的效果。

一个类比：导演 vs 摄影师

你拍一部电影，摄影师操作摄像机——他决定了光圈、快门、对焦。但导演决定：镜头对准哪里、演员怎么走位、这个场景要什么情绪。没有导演，摄影师拍出来的素材再清晰也没有灵魂。

在 Vibe Coding 中，AI 是摄影师，你是导演。

当 AI 写出一段你不满意的代码时——"不对，这不是我想要的效果"——这句话和导演说的"再来一条"本质上是同一种能力：判断什么是对的，并且坚持直到拿到它。

导演不需要会操作摄像机才能拍电影。同样，你不需要会写每一行代码才能做出应用。

项目完成了，然后呢？

第一个应用完成后，你的下一步是什么？这里有几个方向：

方向一：继续完善这个应用。

还有很多可以加入的功能：

• "添加音效均衡器（EQ）可视化"
• "支持多个主题切换"
• "添加社交媒体分享功能"
• "逐个分析音频文件并生成频谱峰值记录"

每一个新功能都是一轮新的对话。你会发现第二轮开发的对话质量比第一轮更高——因为 AI 已经理解了你的代码库，你也有了"该说什么才有效"的经验。

方向二：开始一个新项目。

你学到的工作流可以应用于任意类型的项目：

• 一个个人博客站点
• 一个记账工具
• 一个天气查询 App
• 一个 AI 对话记录器

每个新项目都会让你对 Vibe Coding 工作流更熟练。你会在对话中发现更多技巧：什么描述方式最有效、什么时候让 AI 先计划、什么时候直接说"做"。

方向三：回顾你学到的概念。

花 30 分钟翻一翻 AI 生成的代码。你不需要理解所有内容，但你可以问 AI：

"解释一下这个项目中你最满意的那个函数是怎么工作的。"

AI 会带你回顾它的设计思路。这不会让你成为"开发者"，但会让你对这个项目有更深的理解。

你应该带走的心态

如果你完成了这个项目，你有理由感到骄傲——不是因为你会打字了，而是因为你把一个想法变成了一个可以访问的网址。

从"我想做一个 MP3 可视化工具"到"在浏览器里输入地址就能看到一个可交互的音乐可视化应用"——这中间的所有决策都是你做的。技术是 AI 给的，但产品是你做的。

这就是 Vibe Coding 最核心的转变：从"怎么实现"到"实现什么"。