drumkit 鼓声工具
一个简易的网站，可以通过点击方块来获取不同鼓的声音，类似于电子鼓。
通过鼓声工具，学会用cc（Claude code）来了解一个完全陌生的项目
用cc来了解、维护一个已有的项目
- cc信任文件夹？ cc尊重用户隐私和版权 就像你请了个程序员帮你改项目，得先把办公室门禁卡给他， 他才能进文件夹看代码，改文件，但权限仅限你授权的那个文件夹
这体现了Anthropic 在cc 里强调的最小权限跟安全边界 AI默认不乱碰你的系统 只有你明确授权，他才能干活
实战
帮我做一个网站，用了来宣传end程序员
- 默认的普通模式 需求： 提示词的能力 业务经验 领域知识 Prompt 编写经验
- 规划模式 --AI会帮你考虑这个项目需要什么
先规划，再动手
给电商系统加一个购物车功能
- 后端加表和接口
- 前端加购物车组件
- 兼容现有的登录和商品模块
cc的 plan mode
/plan
在cluade终端输入，可以进入规划模式
降低了prompt门槛
通过询问一些问题，帮助我们组织Prompt，使我们更方便描述我们的需求。
cc基础指令
/ 下一个cc的指令
/plan 开启规划模式 --适合工作
/init cc对这个项目了解的初始化 --面试例题：/init 是做什么用的 --cc解析整个项目，并生成一个简介
接手一个项目
- 可以看CLAUDE.md
- 如果没有CLAUDE.md，可以生成用/init生成一个，来大致了解一下这个项目
- 随后用chat 模式继续了解项目
下面是cc对于drumkit的了解
CLAUDE.md
项目
一个使用原生 HTML/CSS/JS 和 Web Audio API 构建的静态电子鼓。无构建工具、无依赖、无测试、无包管理器 —— 仅三个文件，直接在浏览器中加载。
运行
没有构建步骤。直接在浏览器中打开 index.html，或静态托管该目录（例如 python -m http.server 或 npx serve）。由于 AudioContext 是惰性创建的，音频只能在用户手势（点击/按键）之后播放。
架构
index.html—— 静态 DOM：9 个鼓垫，形如<button class="pad" data-key="<字母>">（A–L），外加一个<kbd>提示列表。所有文本均为中文（zh-CN）。script.js—— 单个 IIFE（'use strict'），包含全部行为。音频是合成的，而非采样 —— 没有任何音频文件。style.css—— 通过:root中的 CSS 自定义属性实现主题；鼓垫以 3 列网格布局；.active类驱动敲击高亮效果。
Web Audio 信号链
ensureAudio() 惰性地创建一个 AudioContext，并构建一条固定链路：master 增益（0.9）→ DynamicsCompressor → ctx.destination。所有声音都连接到 master。一个 2 秒的白噪声 AudioBuffer（getNoiseBuffer()）只创建一次，并由所有基于噪声的声音复用。
九种乐器（playKick、playSnare、playHiHat(open)、playTom(freq)、playCrash、playRide）分别由正弦/三角振荡器和经过滤波的噪声（通过 noiseHit(...)）构建。
键位映射
script.js 中的 pads 对象将键盘字母映射到播放函数：
| 按键 | 音色 |
|---|---|
| a | 底鼓（kick） |
| s | 军鼓（snare） |
| d / f | 闭合/开放踩镲（closed/open hi-hat） |
| g / h / j | 低/中/高音通鼓（low/mid/high tom） |
| k | 吊镲（crash） |
| l | 叮叮镲（ride） |
添加新的鼓垫
这是唯一跨多个文件的改动 —— DOM 的 data-key 值、JS 的 pads 条目以及屏幕上的提示必须保持一致：
- 在
index.html中添加<button class="pad" data-key="x">（并在头部提示中加入对应的<kbd>）。 - 在
script.js中添加pads.x = { play: ... }条目，必要时再写一个playX()合成函数。 - 无需修改 CSS —— 网格和
.active样式是基于.pad/data-key触发的。
事件处理分为两部分：每个 .pad 上的指针事件（pointerdown/up/leave/cancel），以及 window 上的 keydown/keyup（带有 e.repeat 防护，避免按键自动重复触发）。hit(key) 在播放前会先调用 ensureAudio()，因此音频图在声音触发时始终已经就绪。
