2）截屏
3）打开Word，粘贴
4）打开第二张发票PDF
5）循环……
▲添加发票，自动拼合排版
从草图到代码
我习惯用草图表达想法，而图+文的模式，我认为也更有助于Ai理解开发者的意识图。于是，我画了一个简单的三栏布局：
左栏：上传区
中栏：预览区
右栏：说明区
第一版代码虽然还有很多问题，但看到界面逐渐成型的那一刻，我感受到了创造的喜悦。
当初步的布局实现后，我开始通过与Ai对话，互为交互地开始更深入的工程实现。通过一系列对话、调试、修正、迭代、回滚，相关的功能和布局逐步接近了我的预想。
在具体功能的实现上，特别是在PDF的拼版功能实现层面花了近一个半小时来回调整，在某些环节反复出错时，甚至Ai还会有一种类似「敷衍」的语气直接「摆烂」，当然，我这么多年的教师/产品经理双重工作经验发挥了作用，在我忍住怒火说出「怎么实现我不管」之前，在那么一瞬间，我找到了症结，当我「睿智」地向Ai指出核心问题时，Ta才「恍然大悟」地按我的猜想解决了问题。
整个过程，事实上就是一场试图精准表达的对话：
我给出设想，要求实现
Ai给出代码，我来测试
发现布局不对，告诉AI
AI调整代码，界面改进
我提出新需求，比如上传文件须按列表显示
AI继续优化...出现报错一夜回到解放前
我给回正确代码要求在这个基础上继续
……
原本呢，我以为的Ai编程是「我指挥Ai写代码」，经过三小的合作后，我认为这个过程更多像是「Ai指挥我调试」。而且，你能明显地感受到，在Ai编程的帮助下，更考验创作者的产品思维和工程化逻辑的结合。
三个小时后，经历了以JS库为基础的PDF预览功能的技术攻关，经历了发票列表排序功能的功能实现，经历了整体界面的版式调优，我的第一款Web APP「发票排版器」0.00001版上线（在本机上线）了。
与Ai协同编程的一点心得
1. 用图+文表达更清楚
不要仅使用文本表达，相对而言达不到界面需要的精确度，使用草图+文本更有助于Ai理解开发者的意识图。
▲图文混合的模式表达
2. 拆分你的需求（非常重要）
不要一股脑将所有的需求（最终的效果）都告诉Ai。Ai与开发团队是类似的，当信息量过大时，他会理解不了。作为创造者，要清晰地，按步骤拆分自己的需求，分步告知，分步实现，逐步进阶。
比如我想做发票拼合器，那么至少要分成三个步骤
1）上传发票前的状态（准备接收发票的界面）2）上传后的状态（拼合效果的预览）3）进一步优化（排序、提示等）
这三个步骤，我做了三张草图分步骤告知Ai，每一步都经过讨论，代码，调试……直至实现，然后才进行下一步骤，就像下图所示：
除了大功能需要分步告诉Ai，一些小的优化，也应该遵循分步逻辑。
▲先实现2票/页
▲最终实现的效果
最有趣的发现是，有时候直接告诉AI你要什么反而不如让它先「读懂」你的想法。比如当我想在上传的PDF列表上方添加一个计数功能时，我给它看了一张带标注的截图。
AI回应道：这是要想显示已上传的文件数量，对吗？
这种回应方式特别让我惊喜。要知道我原本准备的要求可是噼里啪啦说了一大堆：
我想在这个文件列表上面，就是最上面那块空白的地方，放个数字，数字要能自动变，比如我上传了几个文件就显示几，删掉一个就自动减一。对了，数字要用深色，后面跟个'个文件'的文字，这样用户一眼就能看到自己上传了多少文件...
这种理解-确认-纠正的过程，比我一开始就砸给它一堆细节要求要高效得多。
就像我们教学生时的情景：让学生先说说他理解的设计方案，而不是一上来就告诉他应该怎么做。这样不仅能知道他理解的对不对，还能及时纠正偏差。
▲最终实现的发票拖拽排序
4. 资源本地化更可靠
在调试过程中，我遇到了一个险些让我放弃的问题，原本一切正常的代码，突然就运行不了，我反馈问题再三调试后，反而效果越来越差。这时候我注意到，在页面头部代码里，调用了来自cloudflare.com 和 github.io的两个JS文件。
我怀疑是远程调用不稳定。于是我尝试下载了这两个文件，果然有一个是我下载不下来的，进一步，我让Ai提供了其它能下载的链接。
当我下载了合适的JS文件，把它们放在了项目目录下。并按Ai的要求将JS的绝对路径换成相对路径后，果然，一切就稳定了。
路径对比：
5. 模块化是好习惯在
反复调试的过程中，我发现了一个规律：每当要添加新功能时，之前好不容易调试好的功能就容易出问题。这让我想起了我的合作工程师常说的「不要动屎山…」。
解决方案是：把已经实现的功能模块化，单独存放。需要新功能时，创建新的页面，在新的页面中指定一个部分来调用它，这样，在新的页面开发时，无论如何都不会影响已完成的模块。
我们在工业设计中的「模块化设计理念，在软件中程领域也是通用的，并且，他们做的更好，甚至还可以将CSS、Javascript从html中分离出去，不过对于新手而言，这三者嵌合在同一页面内更方便。
▲我学会了嵌入模块页面
6. 版本管理保平安
作为一个经常在课堂上强调「保存多个版本」的设计老师，我这次也充分领教了版本管理的重要性。
每当一个功能基本实现，我就会和AI确认一下版本号：
「这是v0.1版本，实现了基础布局」「这是v0.2版本，完成了PDF上传功能」「这是v0.3版本，实现了预览效果」
果然，当某个功能调试出问题时，我可以很容易地告诉AI：「让我们回到v0.2版本的代码，从那里重新开始。」这比漫无目的地调试要高效得多。
好的流程和习惯，比单纯的技术更重要。
作为不懂技术的产品设计师，我的编程处女作心得就是这些，欢迎交流。
————end————
