最近接了会长大人一个小小的需求，做一个很简易的脸部穴位记忆小游戏，即把脸部的穴位标记好，然后随机出现穴位的名字，要求点击选中这个穴位，正确得一分，毛病不得分，直到15个结束，看看谁的得分高。这个工具可以用在课堂上，也能够平时练习使用。

依照以往的经验，都是直接开始coding了，加上略微的设计也就1⑵天左右的时间能弄定。一样是两天的时间，我这次想交给Midjourney和GPT4来完成——图片的部份交给Midjourney，代码的部份交给GPT4。即我扮演的角色只是一名Prompter（提词人）和Tester（测试员），而不动手写一行代码，看看能不能较好的实现这个需求。

先说结论：除去准备工作，总耗时约4个小时，代码可用度到达98%。我唯一改的是锚定穴位点和手机适配中点位的换算比例代码，其他一行没改。下面的二维码是终究的效果，可以扫码先体验一下，再看看进程是怎么实现的。

人脸的部份

触及到人脸的生成，所以肯定会想规避版权。方法比较简单，直接用一组关键词在Midjourney里面生成一个美人便可。

a chinese young woman wearing white top, in the style of youthful energy, smooth and shiny --ar 15:23

穴位练习要的是正脸放大，然后会长说需求修正一下，需要一张50岁左右中老年人的脸，所以这里还得修改关键词，我们以第一张美女为底图垫图，进行老化。

A close-up portrait of an elderly beauty asian womon , smiling, with a warm and genuine expression on their face. The photo captures the wisdom and life experiences reflected in their eyes. The background is softly blurred, drawing attention to the person's face. The lighting is soft and diffused, casting a gentle glow on their features. wearing white top, in the style of youthful energy, smooth and shiny --ar 15:23 --chaos 20 --repeat 3

我开启了chaos的魔法，然后用repeat反复屡次生成，终究找到了一张差不多满足需求的图。

终究我们选定图3的变体，作为这次人脸的模特，这部份需求完成。大概耗时10分钟。

GPT4的准备工作

之前用过ChatGPT来写shell脚本，微信小程序，后端代码，局部代码的完成度还可以，但需要大量反复的沟通来修正需求描写词以满足GPT对需求的理解。这次算是一个纯前真个活，想测试一下GPT4的能力到底如何。与其临渊羡鱼，不如退而结网，只看他人的文章是不够的，或者得动手实践才好玩。

GPT4的版本需要充值ChatGPT Plus会员才能取得，或直接租赁微软的Azure云取得。这里需要一些准备工作，我这次用的是通过注册国外的Apple ID，支付宝充值礼品卡，然后再租赁Plus会员实现。在Web端登录需要使用Apple ID授权登录，具体的进程，可以点击文章底部的原文链接查看。租赁微软Azure的进程范凯老师有做视频，可以直接参考。

整体说来，有一些你需要做的准备工作：比如能够方便看世界的科学方法，比如国外的邮箱注册，国外的AppleID注册和充值，一台可以上外网的iPhone等等。如果你对解决这些问题其实不觉得枯燥，也不觉得麻烦，你就可以比较快地体验到GPT4冲浪的快乐。如果对这些准备工作厌烦不已，那就没必要折腾自己，折腾这些新东西了。

这里耗时比较久，中间遇到了iPhone上外网需要加Shadow的问题，多充值了$5解决，从找到方法到终究取得ChaGPT Plus会员，总计2小时。

这里我们看到GPT4是有限开放使用时长的：每3小时只能对话25条。

开始对话Coding

由于这是一个倒计时项目，会长要求晚上就要看到代码的运行！所以这一次跟GPT4或者选择英语对话，这样准确率和效力会更高。借助翻译工具，微调单词便可。我用的是谷歌的翻译，翻译后的语句要略微浏览一下，确保翻译不失真，固然大部份时候你可以一个字都不用改。

这里用到了一点Prompt技能：设定角色和需求背景。我并没有让GPT4直接去生成找穴位游戏的方案，而是假定在一个幼儿园里面，给小朋友设计一个根据老师的提示词找位置的需求，这样后面在讲交互友好这些的时候会比较方便。

GPT4一开始明显误解了我的意思，他开始教我要做哪些准备工作，然后给出了HTML和CSS，JS的伪码，这些其实不是我需要的，我要的是直接可以运行的代码！

这里比较成心思的一点是：GPT4选择了jQuery，之前我用ChatGPT试过选择的JS框架是Vue.js，但终究代码跑不起来，且需要修改的地方太多，所以才想着升级GPT4来看看效果。固然这是两个账号的测试，这前后并没有关联，GPT4这次选择jQuery只是一种偶然。

既然弄错了，就得说得更清晰一点，跟老外交换，不要那末涵蓄：

我再明确一下我的需求，我希望你能够给出完全可运行的代码，我最多要做的工作就是设置好图片，和15个或更多个点位的位置，我希望拿到完全代码以后直接修改就能够上传运行

给出了明确的需求后，GPT4开始干活了，输出了可运行的1.0版本的代码。我打开VSCode开始测试，发现这个版本的代码只有一个静态页面，没有交互性，没有地方可以点击。

因而继续沟通，告知明确的交互要求：

需要修正一下：这是给小朋友玩的游戏，需要显示这些可点击区域的位置的热区，比如“眼睛”，“鼻子”，热区可以是一个半透明的红色区域，点击时候有一个简单的动画响应

这次算是V1.0.1版本的代码，也是初步可以运行，可以交互的代码。注意记得标记这些代码的版本，会养成一个好习惯，终究我使用的也是这个版本。

在给出代码的同时，GPT4还会加上一些说明和注释，这是非常好的体验。逻辑性也确切强过ChatGPT。

然后我把代码提交到腾讯云的服务器，发现手机端打开始终白屏，原来里面有一个地址援用了google的cdn，便让GPT4改成阿里的开源地址：

请把jquery的援用地址更换为阿里巴巴的开源地址

再次运行，发现基于PC浏览器的功能基本可用了；接下来需要优化一下样式和美观度。

功能已很接近了，接下来能否优化一下样式，比如提示词和显示总分的区域，图片的区域，热区的样式，都尽可能使用上一些漂亮的css样式，符合小孩子们的审美，可使用github上第三方现成的开源样式库，只要尽可能符合要求就好

出错并一错再错

到这里为止一切都很顺利，GPT4的回复都精准且可用，有点超预期的感觉。固然，styles.css的引入，致使接下来遇到了一点麻烦——样式的调剂，手机真个适配，我给出的指引不够，让我们进入了将近1个小时的毛病路径，且一直不记得回头。这个进程中间出现了两次大的不可用分歧。

注意左上角的<1>这是需要回来的地方

问题产生在图片开始变形了，或在手机端撑开了，GPT4并没有给出viewpoint的适配解决方案，我也没有直接要求GPT4来用这个标签。我以一个设计师的角色告知他图片的高宽要求，希望得到正确的代码。

接下来就是反复交换，反复纠错，但是始终都不对。这个方向其实不正确，直到接近1个小时的无用功。

GPT4开始反复地道歉，其实全部气氛已有一些不对了。

新需求给出的指引

这个时候会长过来“监工”查看进度，还提了个小的交互要求：即便点错了也要显示正确的位置在哪里。这时候我才委曲回到<1>的地方，重新增加功能需求，在这个分支上继续迭代。

新增一个互动的需求，所有的热区在一开始其实不显示，如果孩子点对了文字所指向的位置，则把对应的热区显示出来，并染上绿色，如果没有点击正确，则把正确的热区也显示出来。请依照这个需求修改对应的js和css代码

我发现代码里面的热区半径是以常量20直接分散在各处，因而提出了代码优化的需求，这个调剂GPT4倒是很配合，马上优化了代码：

好的交互就是会相互鼓励，我也适当给到了GPT4回馈，然后把随机出现15个热区的需求也提给了它，它马上增加了一个function来解决这个问题：

函数加入后，功能需求全部解决，接下来又到了头疼的样式适配问题。

给出了方案但不完善

重新回到iPhone和Android手机适配的问题，这一次GPT4直接给出了viewpoint的解决方案。

好极了，功能已完全符合需求。请再优化一下样式，做成响应式的布局，要求iPhone手机或Android，乃至在Wechat这样的app中打开这个链接的时候，文字的大小和整体布局都不产生变化。

把所有的单位都改成相对单位后，手机真个适配基本解决。这个时候正好阿姨喊吃晚餐，我把样式适配好的效果给会长验收，她觉得已可用了，除一个点位的缩放问题，也就是手指导的位置和手机显示出来的位置不一致，当时我还录了一个简单的视频，来记录这个问题。

匆匆地吃完了饭，开始继续探索怎样解决这个问题。

由于图片在手机上进行了缩放，而我原来标注的点位是依照图片原始大小进行的绝对坐标标注，致使接下来鼠标点击的位置和标注位置其实不一致，错位了。

这里再次出现了3次分叉，即我在3个方向上反复发问

第一次告知GPT4点击位置与标注位置不一致

第二次GPT4发现了要进行比例换算的问题，但是依然不对

第三次，我直接用代码对话，它终究发现了点击事件需要调剂

最后用代码对话，意味着这个知识本钱变高了，需要有一定的代码基础才能走到这里。固然，即便到了这里，GPT4依然没发现css里面对canvas画布的大小定义，在js中并没有正确获得到，也就是它计算的scale的换算比例依然不对。

已接近哥哥弟弟要去洗澡睡觉，会长要求交货的时间了。我只好自己来搜索解决，这也是全篇里面唯一动手修改代码的地方，如果时间足够，我相信依然可以通过对话解决。

红框的代码，就是这次我唯一手工调剂的代码部份，也是唯逐一次GPT4没有覆盖的问题。其他都是文本的修改，包括标记穴位点的位置，修改页面上英文的提示语为中文。所以98%可用的含量算是比较准确的。上传到服务器上，得到了终究的效果，也就是前面放过的那个二维码。

二维码的生成，我用了https://qrbtf.com/的方案，这个作品背后的小伙子倪豪很利害，是中国传媒大学的学生，本科阶段就已是王者模式了。推荐关注他的公众号，鸟群效应的那一篇非常震动。

总结

通过这次尝试，可以发现在前端代码的能力上，解决样式适配所消耗的时间较多，而解决功能问题相对简单。GPT4在解决常规的开发需求上，已到达了整体可用的程度，特别对我们这类已长时间没有大量Coding的老程序员来讲非常友好，能看懂它交付的代码，能够用代码和它对话，加上一些调试和测试，基本都能解决问题。

在与GPT交互的进程中，可能由于我们表达的问题，或是GPT理解的问题，致使对话往一个无效或毛病的方向延伸，需要随时收回来到原来正确的轨道上；而不是继续在那个方向上不断地改错！在解决这些基础问题上，GPT4是超级强大的，出问题的通常为我们的Prompt。这样的牛刀眼前，问对问题，才是解决问题的关键。

在全部4个多小时的交互、测试进程中，我消耗掉了将近2个小时在毛病的方向上反复纠错，所以这也极可能是一个普遍的问题：一旦发现毛病连续产生，你要一遍又一遍的反复解释说明，GPT4开始反复道歉的时候，最好有所觉察！然后立即回到原来正确的地方，重新提问，这样的效力反而最高。

固然，一定要记得，项目进程中随时保持和客户的交换，毕竟会长大人满意才是最重要的！再说客户才不管你是自己写的代码，或者GPT4来生成的，你说呢？