我做出了软件工程最好的Skill

1. 我做出了软件工程最好的Skill

[!abstract] 速览

这个skill的目的，是在修改前，可视化的展示他想要修改的界面，逻辑和内容，并且提供给用户修改的窗口，你可以类似低代码的方式拖动界面，询问，注释，或者给他意见。

在点开一个修改后，你可以看到这次修改的页面修改内容和逻辑修改内容，也可以看到具体的请求URL等，如果你对这个修改不满意，你可以直接点击删除，把这个修改删掉。

同时，你也会注意到有一个「界面上定位的按钮」，他可以直接转跳到对应的界面上，你可以直接得知，这个修改的逻辑，和界面上的对应关系。

此外，你还可以看到他新增了什么API，删除了什么API，如果他为了一个功能新增了数十个API，或者给了高权限API，你完全可以在这里就得知。

最后，你可以复制所有的修改内容到你的Agent对话中，当然，如果不涉及界面修改，你完全不需要带Json这么大的内容，可以取消勾选，只提供修改意见。

你是否曾经有以下场景

[!danger] 典型翻车现场

User：帮我做一个功能，我需要xxxx，你可以使用xxx，xxx

AI：（一顿忙活），已做好，生成xxx测试

User：你这里怎么做的界面，用户怎么点击呢？你这个功能入口在哪？这个按钮位置不对啊，数据库怎么这样修改？为啥你加入了这些逻辑xxxxx

AI：（又是一顿忙活），已改好，请查收，（输出一大堆看不懂的话）

User：什么意思，说简单点，你这里不对啊，xxxx，（重复数次，崩溃

在过去，我经常使用各种软件工程的Skill，比如matt，pstack等，这些都是非常不错的Skill，对开发也有很大的帮助，但是，过于庞大的代码量修改，让我基本放弃了对AI的代码修改和审计。

这没问题，因为AI写的东西，AI能看懂就行了，问题在于，我很难理解他做了一堆修改会带来什么影响，什么结果。

[!warning] 许愿柳

AI写出的东西，往往像是一个许愿柳，条件越是简单的描述，会带来完全失控的结果，如果你向许愿柳许愿世界和平，他也许会摧毁所有生物来达到和平的条件。

当然，我做的这个Skill并不能解决世界和平，也无法解决许愿柳问题，唯一能做的，是能提前知道他会做什么来完成我的愿望，这有点像是杀戮尖塔的SL。

这个Skill是基于我开发中不断修改反馈而总结而成的，当然，我可以想象到也许早就有人做过部分功能类似的东西，毕竟软件工程也只是一套经验总结，不过我觉得，开源他并没有什么坏处。

这个Skill叫做：show me you want，简称 /smyw

https://github.com/nishuzumi/show-me-you-want-skill

这个skill的目的，是在修改前，可视化的展示他想要修改的界面，逻辑和内容，并且提供给用户修改的窗口，你可以类似低代码的方式拖动界面，询问，注释，或者给他意见。也可以在AI想要修改的任何逻辑上发出疑问并且给出修改界面。

下面会逐步展示这个Skill提供的能力

1.1. 1.整屏线框 + 编号改动

smyw 画布界面：左侧「本次改什么」面板列出 8 条界面改动，中间是客服工作台的整屏线框原型，改动处用绿、红、黄三色编号标签标出，并用连线连到右侧对应的改动说明卡片

在需求描述完后，改动的内容那个，会按照原型图的方式生成一个画布，并且通过编号标记每一处修改，如果是包含交互的内容，则会有连线将多个画板进行关联。

点开编号 5 的改动卡片：右侧抽屉显示表单「回复客户」（原「回复」）的改动前后对照，改动前有快捷回复和 POST /api/tickets/:id/replies，改动后增加了 AI 润色 openDrawer 与 PATCH /api/tickets/:id

在点开一个修改后，你可以看到这次修改的页面修改内容和逻辑修改内容，也可以看到具体的请求URL等，如果你对这个修改不满意，你可以直接点击删除，把这个修改删掉。

1.2. 2.批注和移动

编辑方案模式下查看按钮改动：编号 3「标记已解决」的卡片显示「移到了别处」，页面底部是选择位置/布局与建议类型、填写批注的输入框和「添加批注」按钮

当然，单纯的删除并没有什么意义，也许你希望这个逻辑应该是在另外一个板块里面的，你可以点击右上角编辑方案，并且使用拖动的方式，把对应模块移动到其他地方，你几乎可以移动到任何card下面，比如你觉得这个新增的模块应该是另外一个div的子模块或者二级菜单，你可以将它移动过去，或者画布之外，并且通过批注功能，告诉AI应该怎么做。