最近刚开始学习弹琴，但是无奈上了年纪记性不好，总是学了新音符又忘了之前的，很是头疼。
了解到有制作闪卡时常复习辅助记忆的方法，恰巧前阵子让DeepSeek帮我写了几个脚本，就想到能不能试试让它帮我制作这么一个网页呢？
这篇短文就是我尝试的一个记录，和大家做一个分享。
1.明确需求
让AI帮我们干活肯定得写提示词，但上来就让它生成一个页面，效果不一定理想。
我的想法是，在提需求之前，我们得先弄清楚自己的需求。
于是乎，我先思考，罗列了下开发过程需要使用的语言，调用的库，我想实现的基本功能和进阶功能。
语言：HTML，CSS，JS （网页开发三剑客）
调用库：abcjs
基本功能：选择音符范围，页面随机生成音符。用户点击音符后显示对应名称，唱名，对应指号。
进阶功能：全键盘快捷键操作，页面提供前后翻页按钮方便鼠标操作，页面UI美化
其中调用库我是通过询问豆包“有能显示abc notation的js库吗”了解的。在知识检索方面，豆包的功能非常强大，而且反应迅速。
如果把AI编程的过程比喻做搭积木的话，通过豆包了解需要调用的相关库就像是找积木的过程。现阶段的AI编程能力并没有强大到能够实现任何功能，半自动地检索一下相关组件，可以让我们事半功倍。在功能无法实现的时候，也能了解到是哪里出了问题，能否解决。
2.编写提示词
在明确需求之后，就可以开始编写提示词了。
请你编写一个网页，调用abcjs库，编写一个音符记忆测试工具。
它应该有如下功能：
- 选择测试的音符范围
- 根据范围生成测试卡片，显示abcjs库生成的音符。用户点击此卡片后，显示答案，包含对应音符名称，唱名。开启DeepSeek深度思考功能和联网功能，发送提示词，经过AI漫长的思考，我们就获得了第一版程序。
测试了一下，发现音符无法正常显示。在浏览器中按下F12打开开发者工具，看控制台报错了解到是abcjs库加载失败。安装配置npm后，安装到本地，修改script引用，解决了这个问题。
3.进一步调整
在实现最基本功能之后，就可以继续编写提示词，让AI实现进阶功能了。
请在卡片左右两侧各自添加一个按钮，点击左侧按钮返回上一个测试，点击右侧按钮生成并进行下一个测试。
绑定键盘快捷键，点击空格翻转卡片，点击键盘上的左方向键返回上一个测试，点击键盘上的右方向键生成并进行下一个测试。上面这段提示词看起来有点蠢，两个按钮一个返回，一个继续，绑定下按键，顺便绑定个空格键，有必要将得那么啰嗦吗？
事实证明，有必要。因为上面是我最终跑通的提示词，之前的一个版本就是因为表述不够清晰所以出现了功能问题。
不论是编程，还是让AI编程，遵循KISS原则（Keep It Simple and Stupid）都是有必要的。
4.进一步测试
所有的功能都正常实现了，测试结果一切正常。正当我要欢呼雀跃的时候，发现怎么所有音符都是高音谱号的呢？而且每次打开页面还得自己手动点击生成，没有显示默认的测试，体验不佳。
显然这还有两个bug，它不影响程序执行，但它是功能缺陷。于是乎，继续编写提示词，让AI继续做调整。
目前音域仅支持高音谱号部分，请对低音谱号进行兼容。
同时在页面加载后，自动生成测试。5.部署发布
几经波折，折腾了大半天之后，项目终于成功跑起来了，而且一切功能正常。
接着就到了部署阶段了，我询问豆包有哪些静态网站部署平台，最好是免费的，它给我推荐了Gitee Pages。
于是我按照网上的教程，将项目传到了Gitee，但却遗憾地发现它暂停了这项服务。
只得再找其他方法，最终上传到了Cloudfare Pages，完成了最终部署。
x.结尾
这就是我使用AI开发一个音符闪卡测试网页工具的经验分享，希望对大家有帮助。
末尾附上Gitee仓库和工具链接：
