【灵犀Claw写代码3】小程序开发，从代码到Logo，灵犀全包了
Lv.3 优质创作者
大家好，我是南月。
这次我用灵犀Claw帮我开发了我多年前的小程序构思。
本期为灵犀Claw写代码的第3篇：第一篇是写了一个网页，并更新了css代码；第二篇是写了一个浏览器扩展，Chrome和FireFox版；本期我准备写一个小程序。
复杂程度为一点点增加，写代码其实是灵犀Claw的基操，只是灵犀没有IDE集成，所以显得用来写代码有点“非主流”。
本次挑战使用Pro模式，之前写扩展使用的是Max模式，最终耗费了2000多灵点完成了1.0版本。
0.环境准备
首先建议安装下面两个和小程序有关的Skill：（万一用到了呢）
微信小程序AI开发模式生成Skills：https://skillhub.cn/skills/wxa-skills-generate
微信小程序AI开发模式校验Skills：https://skillhub.cn/skills/wxa-skills-validate
如果用SkillHub提供的提示词安装，记得安装后检查一下，否则在技能管理和选择技能时看不到：
这次我换一种方式记录，不再按聊天直接记录了，改为分类记录。
1.新需求开发
1.1.创建新小程序
首先我在代码目录用微信开发者工具创建了一个空白小程序项目，模板是默认的空白TS模板。
之后，将自己的想法（需求）描述清楚，因为我不懂美工，所以对页面样式、布局什么的就没说，交由灵犀自己设计，我再根据成品看看要不要修改什么。
命令：E:\网盘\个人用同步\个人代码\开发项目\ChooseASong\mini_program\，这是使用了官方TS模板创建的一个空的微信小程序的项目文件夹，我现在想做一个微信小程序，用来在唱歌时随机点歌。所以需要实现以下功能：暂时有两大页面，首页是歌曲抽选，第二个页面是歌单管理（在底部切换页面），歌单管理功能：添加歌曲：输入歌曲名（必填）、歌手名（必填），还有其他信息为选填：专辑、年代、流派、曲风、标签（输入时中英文逗号都能分隔，最多可设置6个标签），以上这些都需要有保存的地方；编辑同上；删除歌曲，操作需要二次确认；歌单导出导入，文件为方便编辑的csv格式。然后，歌曲抽选，顶部小字显示当前符合条件的歌曲数，为0时不可抽选。页面主要区域显示歌曲名（大字），歌手等其他信息底下小字依次展示；然后给出条件功能，歌曲所有信息（除歌曲名）都可以设为条件项 ，抽选歌曲时仅抽选符合条件的歌曲。筛选时注意合唱的时候会有多个歌手的情况，这时候筛选包含任意一个唱这歌的歌手都可以筛选到。就在这个项目文件夹中开发
（如果不提指定目录，灵犀会在自己的output目录下输出代码，这点需要注意）
Pro实现思考确实比Max快，不过对于需求理解得也很准确。
最终生成了这个风格：
1.2.插入新需求
1.2.1.加入新字段
给歌曲信息增加一个语言字段，方便抽歌时筛选，字段的加入会影响到其他功能，例如导入导出、歌曲信息展示等，需要告诉AI一并修改。
一次改好，测试通过。
并且按照要求修改了界面的布局。
1.2.2.已有功能增加新功能
之前我虽然说了导入导出，但是灵犀当时设计的导出是将歌单列表内容以csv格式的样子复制到剪贴板，你需要自己粘贴进csv文件，所以我让他增加了导出成文件的功能，这个灵犀比我想得周到，采用了三级降级策略。
1.2.3.增加新逻辑
在导入、添加、编辑歌曲时，增加重复校验，在这里，需要将重复的判断逻辑、什么时候触发这个重复校验说清楚，以及重复时要做什么，怎么提示都说清楚了，之后一条过。
2.修改代码
2.1.处理报错
这是第一次生成（1.1完成后）代码后我打开小程序开发者工具准备预览样式时报的错，无法预览样式。
修复后成功解决。
2.2.修改整体样式风格
我安装了一个名为Fluent-design（流畅设计体系，微软提出的UI样式）的技能，让灵犀使用它来设计一个和Win11、WinUI相似风格的新UI，主题为Win11的经典蓝色。
我理想中应该是设计成上面这样的，不过上面的是WinUI3原生的风格，而微信小程序中只能调整样式代码模拟，所以做不到完全一致。
第一个版本做出来按钮的R角有点方，我让灵犀适当调大了点弧度，我开始以为只有2到3，所以让调到5，没想到它已经是8了，灵犀自动改为10。
2.3.微调布局
如1.1和2.1中的截图，文字没有纵向居中，而是在按钮底部。所以我让他改为上下左右都居中。
最后漏改了一个歌单管理的添加歌曲按钮（我猜我上图说的添加歌曲被灵犀理解成了“添加歌曲”中的添加按钮），然后看到了一个新问题，顶部页面名称的文字也沉底了，所以也让他一并改了。
但是它没有顺便校验另一个页面是不是也是这样，只改了我说的管理页面的。我是应该夸他执行严格吗，指哪打哪。但上图右上角那个数量计数是他自己给我加的东西，我全程没有说过要统计（其实是没考虑到）。
修改完页面之后，原本在页面顶上的导入导出按钮跑到标题行去了，我说的意思是修改之后这俩按钮跑走了被覆盖了，隐藏含义是改回去，然后灵犀理解的重点是我后面的“覆盖”，所以就调了一下位置。
话说原来这俩按钮叫胶囊按钮嗷，我一直叫菜单按钮。
所以只好直接告诉他放回页面左上角。
修改没问题后我让灵犀修改了另一个页面的。
后来发现编辑歌曲信息的标题依旧沉底，那么继续修改，顺便叮嘱一下把页面内的元素看好，不要乱跑。
继续调整布局，这次是歌单歌曲列表左右间距不一致，以及切换按钮的图标没了。
这次明确告诉他怎么改，一次就改好了，不过图标这个重新打开了一下项目才加载出来，重新编译不行。
筛选功能区重新排版，以前是5行，现在减少了一行，这个小菜一碟。
3.代码无关－生成Logo
虽然这个不用修改代码，不过还是与小程序有关的东西，我就没切换聊天，继续在当前聊天，要求他设计一个图标，因为确实不知道怎么设计，所以只提了要求：画面必须有一个麦克风，其他的你自由发挥，能体现出是抽取歌曲或者选歌的感觉，保持正方形即可。
其实感觉还可以，骰子和🎵的组合确实体现出运气的成分，但是这个麦克风感觉很眼熟啊……总感觉在哪个Logo上见到过……
边框上不知道为啥还留着数字，接下来让它去掉：
很好，边框也一起去掉了，不过看起来更好了。
4.最终成品
歌单管理。
歌曲信息编辑。
歌曲抽选，这个筛选输入后会立即开始筛选。
实际对话时间线：
全新开发：E:\网盘\个人用同步\个人代码\开发项目\ChooseASong\mini_program\，这是使用了官方TS模板创建的一个空的微信小程序的项目文件夹，我现在想做一个微信小程序，用来在唱歌时随机点歌。所以需要实现以下功能：暂时有两大页面，首页是歌曲抽选，第二个页面是歌单管理（在底部切换页面），歌单管理功能：添加歌曲：输入歌曲名（必填）、歌手名（必填），还有其他信息为选填：专辑、年代、流派、曲风、标签（输入时中英文逗号都能分隔，最多可设置6个标签），以上这些都需要有保存的地方；编辑同上；删除歌曲，操作需要二次确认；歌单导出导入，文件为方便编辑的csv格式。然后，歌曲抽选，顶部小字显示当前符合条件的歌曲数，为0时不可抽选。页面主要区域显示歌曲名（大字），歌手等其他信息底下小字依次展示；然后给出条件功能，歌曲所有信息（除歌曲名）都可以设为条件项 ，抽选歌曲时仅抽选符合条件的歌曲。筛选时注意合唱的时候会有多个歌手的情况，这时候筛选包含任意一个唱这歌的歌手都可以筛选到。就在这个项目文件夹中开发
处理问题：处理一下问题，调试器报错：[ project.config.json 文件内容错误] project.config.json: setting.packNpmRelationList[0].miniprogramNpmDistDir 不能为空(env: Windows,mp,2.01.2510290; lib: 3.17.0)
设计新样式：使用 fluent-design 技能，接下来，要重新设计一下UI。请参考Win11、WinUI3的样式设计一下小程序中所有组件、元素的样式，主题色为Win11的经典蓝色。
微调样式：按钮的R角可以调吗，稍微再圆一些，例如调到5看看
微调布局：接下来，几个大按钮：添加歌曲、抽选和增改歌曲信息的“保存”按钮，他们的文字都是在按钮底部的，现在需要设置成上下左右都居中
微调布局：2个问题：管理页面中的“添加歌曲”文字位置没变化；以及，顶部显示页面标题的文字也没有上下居中，最好是和右侧按钮内容对齐
微调布局：修改标题之后，导入导出按钮跑到标题行去了，然后被右侧按钮覆盖了
微调布局：还是不太好看，我现在需要将导出和导入按钮移动到页面左上角的位置（修改标题之前的位置），歌单总数显示放到页面内右上角，都不要放在标题行了
微调布局：好，下面将抽选页面的标题也作此改动
微调布局：还是两个问题：1.管理页面：歌曲卡片左右间距不一致，将右侧间距调整成和左边一致的，2.底部两个页面的图标怎么没了？
已有功能加新需求：接下来，修改导出功能，导出点击后将歌曲列表导出为csv文件，注意导入功能要能识别
增加新字段：不错。接下来新需求，歌曲信息需要增加一个“语言”项，然后修改一下添加/编辑歌曲信息的排版，将歌手和专辑放到同一行，年代、流派不改，曲风和新增的语言放到同一行。然后注意导入导出两个功能也需要这个加入这个语言，同时语言也作为“抽歌”的筛选项，也要显示在抽到的歌的歌曲信息中
增加新处理逻辑：没问题，接下来做一下导入和添加歌曲（编辑歌曲如果不修改歌曲、歌手和专辑中任意一个则不需要判断）的重复校验。导入时：若当前条目为重复则自动跳过，最终在导入结果里再加一个跳过x条的提示；添加/编辑歌曲时：提示“当前歌曲已存在（歌曲、歌手、专辑对比都相同）”；最后说一下重复的判断条件（通用条件）：当歌曲名、歌手、专辑三者同时相同时，判断为重复歌曲。
设计Logo：接下来和代码没有关系。帮我给这个小程序设计一个图标，背景有一个话筒这个是固定要求，然后设计一些其他元素要体现出抽歌或者选歌。整个图要正方形
微调布局：添加和编辑歌曲时顶部的页面标题也还是沉底的，改成像抽选和管理一样的，主要其他元素保持在页面内，不要跑标题区域去了
微调布局：接下来将抽选页面的筛选功能做一个重新排版：将歌手和专辑放到同一行中，年代、流派、曲风放到同一行，标签和语言放到同一行
改Logo图：Logo图去掉上边框上的数字
5.总结
最终消耗灵点452，比Max节省太多了，当时感觉沟通起来确实没有Max智能。
Pro模式每次都比Max模式思考时间短，消耗灵点也很少，但是需要更清晰完整的要求，千万不要有“他会顺便检查相同类型的东西”或者“其实我这么说是想表达这个意思”的想法。
AI不是人类，和它沟通就是要把已经有的要求都告诉他，然后告诉他可以自行发挥的地方（你没想好的地方）。之后可以根据他自己的设计，先生成一版，你看了之后可能心里就会有点想法了。
我个人认为AI生成代码时，先理清功能和处理逻辑比UI重要，毕竟底层逻辑决定了软件的功能是否正确，UI随时都可以更换（例如以前的QQ每年换皮，底层功能基本没变过）。
而处理问题，如果软件或者开发工具有明确的报错（报错信息、报错代码位置等），直接把报错信息甩给AI就行，不用过多自己描述。
可以截图给AI作为辅助描述。
－－＞南月的发帖记录和回顾合集＜－－
Lv.2潜力创作者
Lv.3 优质创作者