学AI编程的第五天我没写新代码而是把一个现成的Drumkit鼓声工具项目从头到尾拆了个底朝天。拆它的方式挺特别全程用cc这个AI编程命令行工具来当讲解员。你可能听过Claude Code这个名字cc是它的常用缩写装进终端后就可以直接在项目目录里跟我对话。这篇文章记录的就是我这一天怎么用cc去了解一个完全的项目——从整体结构到每一行关键逻辑以及过程中踩到的两个真实翻车。先交代一下背景。前四天我主要都在做让AI帮我写功能这种事待办清单、倒计时器、表单校验。写出来的东西确实能跑但我心里明镜似的——那些代码一旦离开AI我单独面对大概率是看不懂的。第五天我想换个方向不再追求让AI写得更多而是逼自己真正读懂一个项目。恰好朋友扔了个Drumkit项目给我说是前端圈子里的入门经典我就在这个项目上开启了这场cc陪读实验。如果你是AI编程初学者或者你经常陷入AI生成一时爽运行报错火葬场的循环这篇文章应该有参考价值。我会把实际敲过的提问、cc回答里的重点、还有翻车的过程尽可能原样写出来不藏私。1. 为什么拿Drumkit当AI读项目的练习素材1.1 Drumkit是什么一个九键鼓机Drumkit来自前端圈很出名的JavaScript30课程作者是Wes Bos。整个项目就三个文件index.html、style.css、main.js外加一个sounds文件夹放音效。页面打开后键盘上的A、S、D、F、G、H、J、K、L一共九个键分别对应clap、hihat、kick、openhat、boom、ride、snare、tom、tink这九种打击乐音色。按下任意键对应的键位块会有一个变亮变大的小动画同时播放音效大约0.07秒后动画结束、键位恢复原状。我特意数过main.js的核心逻辑不到五十行。但就是这不到五十行把前端最基础也最核心的几样东西全占齐了键盘事件监听、DOM查询、音频播放、CSS过渡动画、class切换。放在前端语境里这算是麻雀虽小五脏俱全的典型。1.2 为什么读懂项目比让AI写项目更适合现在的我到了第五天我才想明白一个问题让AI从空文件开始写东西其实是个相对低难度的动作。你只要把需求描述清楚它基本能给你一份能跑的代码。但真实工作里你遇到的绝大多数代码都是别人写的可能带着你看不懂的命名、分层、历史包袱。这时候AI能不能把别人的代码讲明白才是它真正的价值分水岭。Drumkit这种规模刚好处在练习AI读项目能力的甜点区间文件少到AI不至于漏看逻辑又完整到能给它展示跨文件理解的机会。要是选一个几百个文件的工程新手很难验证AI讲得对不对选Drumkit我十几分钟就能把三个文件全部读完cc说的每一句话我都能对着源码核实。这种可验证性对学AI编程的新手来说实在太重要了。1.3 工具选择为什么用cc而不是别的AI编程助手这几天市面上主流的AI编程工具我基本都试过一圈有编辑器插件类的有IDE内置类的有网页对话类的。这次读项目我特意选了cc理由有三个。第一cc是命令行工具天然在项目目录里工作。我说的每句话它都带着当前项目的上下文去理解不像网页版那样需要我把代码复制来复制去。第二它支持长时间连续对话。读一个项目往往要连着问三四十轮cc能记住整个对话上下文前面聊过的后面不用重复交代。第三它的回答明显偏工程思维讲代码时会主动提到边界情况、设计权衡和反例这些恰恰是新手最容易缺的东西。当然工具选择不是非此即彼适合自己就好。但今天要讲的方法论——给AI定身份、分层提问、先猜后问、源码验证——换任何工具都好用。2. 打开cc之前我先自己做的三件事2.1 用命令行确认目录家底在把项目整个交给AI之前我强烈建议你先自己看一眼目录。这不是浪费时间而是在给后面的对话打底稿。我在终端里跑了一句ls -la三秒钟后我就掌握了情况Drumkit没有隐藏的node_modules没有构建配置就是三个源码文件加一个sounds音效目录。这意味着它不需要装依赖不需要跑构建直接双击index.html就能玩。这种零配置项目对AI读项目来说是最理想的——cc不用去理解打包工具、编译流程这些外围噪音可以把全部注意力放在核心逻辑上。顺便提醒一句如果你拿到的是压缩包记得先解压再进目录别把整个压缩包直接丢给AI它读不了打包内容。这种小事看着不起眼真碰上了能卡你好几分钟。我还数了一下sounds目录里的音频文件九个.wav正好和九个键一一对应。到这里我心里有个大概判断了这个项目不需要后端音频文件就是它的全部数据。2.2 读HTML时抓到的关键线索data-key是什么接着我打开了index.html。第一眼有点懵因为里面到处都是>function playSound(e) { const audio document.querySelector(audio[data-key${e.keyCode}]); const key document.querySelector(.key[data-key${e.keyCode}]); if (!audio) return; audio.currentTime 0; audio.play(); key.classList.add(playing); } window.addEventListener(keydown, playSound);cc特意提醒我注意一个细节这里用的是e.keyCode而不是e.key。keyCode是数字A键是65key是字符串a。为什么这个项目用keyCode因为HTML和audio标签里存的就是>function removeTransition(e) { if (e.propertyName ! transform) return; e.target.classList.remove(playing); } const keys Array.from(document.querySelectorAll(.key)); keys.forEach(key key.addEventListener(transitionend, removeTransition));对应的CSS长这样.key { transition: all 0.07s ease; } .playing { transform: scale(1.1); border-color: #ffc600; box-shadow: 0 0 1rem #ffc600; }这里藏着一个很隐蔽的坑CSS里写的是transition: all意思是transform、border-color、box-shadow三个属性都会发生过渡。每个属性过渡结束都会触发一次transitionend事件。也就是说如果不做过滤removeTransition会被连续执行三次结果是playing类被提前移除动画效果闪烁、观感一下子变差。解决办法就在事件对象上transitionend事件自带一个propertyName字段告诉你这次是哪个属性结束了。只要判断e.propertyName ! transform就提前返回只等transform这个主效果结束再删class问题就解决了。cc说这个模式在动画编程里特别常见学会一次后面做拖拽、弹窗、手风琴菜单都会反复用到。4.4 把三道门串成人话版本听完cc的讲解我试着把整个main.js转述成一段不带术语的人话用户在键盘上按下一个键浏览器把这次按键包装成事件对象JS用事件对象里的keyCode在全文档里找出对应的audio和按键块找到之后先倒带、再播放同时给按键块戴上一顶叫playing的高亮帽子帽子一戴上CSS开始跑过渡动画动画跑完transitionend事件发出信号JS再把帽子摘下来页面恢复平静。这个过程本质是个事件进、事件出的闭环。cc让我拿这个闭环去套别的交互项目我后来试了倒计时器和标签页切换确实都能套得上。能把不同项目收敛到同一个模式里我觉得才算真正读懂了。5. 两次翻车cc的讲解并不能盲信5.1 翻车一AI一本正经地编了个不存在的函数拆到一半我问了cc一个问题main.js里的makeSound函数是做什么的cc几乎是立刻给出了一个像模像样的回答说makeSound负责查找音频元素、触发播放还顺带讲了一堆性能方面的考虑。回答完我才觉得不对劲——我明明看过main.js里面只有playSound根本没有makeSound。我反问了一句这个函数具体在文件哪一行cc支吾了一下改口说可能是常见Drumkit实现的其他版本并承认它参考了常见写法。这件事让我后背后发凉。如果我不是提前读过源码根本不会发现这是个幻觉很可能把这个不存在的函数当成真知识记进脑子。从那一刻起我给自己定了一条铁律cc给出的任何代码解释都必须能在源码里找到对应位置否则不采信。验证这个动作成本很低几秒钟的事但能挡住绝大多数的AI脑补。5.2 翻车二听懂了其实是最大的假象第二个坑更隐蔽也更危险。cc的讲解实在太流畅了每个逻辑都顺理成章我一口气听完心里冒出个念头哇我全都懂了。结果第二天我回忆Drumkit发现自己只剩一个模糊印象——好像是按键然后播放声音细节全还回去了。人脑有个毛病理解一段流畅的叙述会误以为自己掌握了知识实际上只是看过而已。这跟刷短视频刷到觉得自己会做饭是一个道理。我后来试了一个办法意外地好用让cc在每个主题讲完时给我出小测验我答完它再批改。比如它当时考过我三个问题如果我想把音色换成钢琴音阶需要改动哪几个文件为什么快速连按同一个键声音还能从头播放而不是叠加如果把CSS里的transition: all改成transition: transformremoveTransition里的propertyName过滤还有必要吗第三个问题我答错了。我以为是没必要了实际还是有必要——虽然过渡只剩一个属性时transitionend只会触发一次但保留过滤逻辑将来增加动画属性时代码依然稳健。这种被AI当面考倒的经历比AI给我讲十遍都管用。5.3 翻车之后我修正的三条铁律两次翻车之后我把使用cc的整套流程改成了三条铁律第一条讲解必须落到源码。AI说到哪个函数我就在编辑器里定位到哪个函数定位不到就追问。任何讲不到行号的解释大概率有水分。第二条每讲完一个主题让cc出题考我。用输出倒逼输入把听懂了变成能答对了才算完。第三条关键结论一定要动手验证。比如删掉currentTime 0看是不是真的会连按失灵改掉transition属性看动画会不会闪。能复现的结论才是自己的。把AI当成讲解员而不是权威——这是今天这个项目教给我最核心的认知转变。6. 第五天的三点收获与下一步打算6.1 给AI配身份是性价比最高的提示词以前我以为提示词就是把需求说清楚今天才体会到给AI一个身份和设定输出格式带来的提升远比想象中大。同一个Drumkit项目问这代码是干什么的和你是我的导师从设计意图开始讲这个项目为什么这么写得到的完全是两个量级的内容。给AI配好身份就像给新员工发岗位说明书它一下就知道该用什么标准工作了。6.2 用真实项目长理解力比刷教程扎实前四天我刷了不少教程刷的时候觉得全会合上电脑全忘。但用Drumkit这个真实项目配合cc拆一遍之后事件流、DOM查询、音频播放、CSS过渡这几个知识点在我脑子里变成了有因果关系的链条而不是一条条孤立的信息。项目逼着我把知识点串起来用教程却在帮我一个个拆开讲。两相对比哪个对新手更友好我心里已经有答案了。6.3 下一步把Drumkit改造成自己的版本第五天结束前我给自己留了个作业三天之内尝试不依赖AI自己默写并扩展一个Drumkit。比如给页面加一个M键来触发贝斯音色或者把固定音色表改成页面上下拉选择动态切换。做不出来也没关系卡住的时候再请cc当导师来提示但绝不直接让它给完整答案。我始终觉得从能读懂到能改得动之间还差一段必须自己走的路。AI可以陪跑但腿得长在我自己身上。这个项目消化完我应该会挑一个带后端的项目再做一轮同样的cc陪读。等把前后端都过一遍我对一个完整项目到底是怎么构成的这件事应该能建立起一个比较成体系的认知了。到时候如果又踩了什么新坑再回来写一篇分享。