作者简介：
朱海燕，会设计的前端工程师，热衷用AI Coding 赋能开发效率，擅长把繁琐的编码工作交给智能工具，从而腾出时间打磨产品交互细节与技术深度。作品「趣绘像素岛」获得"CCF程序员大会码力全开：AI加速营"活动冠军。
1 产品碎碎念
其实创意灵感在9月就想到了，比如我个人喜欢画画，也愿意教别人画画，但是一个人的力量其实不算大，时间也很有限，希望有一个平台型工具，可以根据每个人的情况和基础，给出不一样的解决方案，这是AI能做得比较好的点。于是我想做一款儿童插画AI辅助工具，去解决画画遇到的四个问题"画什么，怎么画，画得怎么样，画完之后..."。 让整个流程串起来，画完的作品带着温度和意义，可以作为贴纸、表情包、明信片收藏，画板就是这个工具的核心部分。9月底开发了一部分，由于一些技术细节实现卡住，比如笔刷抖动粗细的控制，画完之后图像裁剪、填充、描边，实现效果都不尽如人意，于是进程停顿。
11月份，看到了百度文心快码"CCF程序员大会码力全开：AI加速营"活动宣传，尝试使用了Comate，感觉一下子提升生产力，就开始把之前难以落地的想法都一一实现了，还做了固定元素创意功能，优化了画板交互，更符合操作逻辑（比如选完色块就切到上色笔刷，避免认知错位）。我和Zulu的会话，核心是打磨交互逻辑、实现新功能、重构代码、提升响应性能。尤其加了垫图功能，提升了画板的通用性，也是我最最满意的功能，用户现在可以随便看到哪个画比较好就截图，到画板页面直接CtrlV粘贴用做参考图，这个功能大大提升了用户体验。
截图并粘贴到画板作为参考图
来看看趣味十足的产品演示视频吧：mp.weixin.qq.com/s/tRC4YAASd...
1.1 使用Zulu重构前
没有高亮效果，画笔使用切换存在Bug，没有撤销回退功能，没有清空画布功能，没有工具栏，无法自主控制颜色切换，画板无法自适应，在手机端打开直接崩了无法使用，用户体验较差，没有垫图功能以及垫图调节大小功能，笔刷会卡住，没办法正常作画...总而言之，想法很丰满，落地很骨感。
使用Zulu重构前的绘画产品
1.2 使用Zulu重构后
- 工具有了高亮，切换动画也很流畅；
- 可以自由上传想参考的图片，调节参考图大小，功能完善；
- 有撤销回退功能（可以回退20步），能够一键清空画布，可以自由调节色板，灵活用色；
- 给画完的画做了洪水填充效果，并且加了描边效果，看起来像贴纸一样，贴纸可以直接复制到剪切板，直接发送到聊天框或者文档，也支持一键下载单个贴纸，而非整个贴纸；
- 线条抖动效果也更加合理，Zulu给应用接入了clarity，可以监控用户的埋点信息；
- 整体性能优化提升，秒开率提升。
使用Zulu重构后的绘画产品「趣绘像素岛」
2 Comate帮我做了什么
说明：以下使用Comate均为Zulu模式
2.1 功能实现
2.1.1 完善画板功能
首先，我使用Comate完成了笔刷的优化，并把配置项（抖动幅度、笔刷粗细）暴露出来，可以在实际操作中动态调整，找到最合适的数值。我认为一些功能用户需要自主调节，于是让Comate帮我暴露出来，但是又不希望影响用户决策，于是使用Comate编码，折叠了底部「高级工具」，用户可以控制调色盘的色值，选择自己喜欢的配色。同时增加了撤销和回退功能、一键清空画布的功能。从之前每次画错都要小心用橡皮擦半天，变得可以任意撤销。但是在过程中，又觉得点击按钮的操作方式有点麻烦，于是让Comate加了快捷键控制撤销和回退。Comate几乎3分钟不到就完成了操作，让人十分惊喜，还顺便修复了一个橡皮擦Bug。
画板底部高级工具
使用Zulu暴露笔刷抖动幅度、优化画笔粗细、工具栏布局等
然后，我开始调试交互功能，发现可以加一个用户上传图片（便于临摹）的功能。如果自己想，感觉一下午时间又要没了，于是我直接跟Comate说：帮我加个上传图片功能。Comate也很懂我，在工具栏加了这个功能，使用起来也没有问题。
实际操作时，我发现上传图片很麻烦，需要先截图保存、再上传。于是我又想到了快捷键：能不能CtrlV直接上传呢？于是我跟Comate说，帮我加一个快捷键：粘贴剪切板的图片。一骨碌的功夫，Comate就改好了。现在就能直接从网站截图并站贴自己喜欢的简笔画，进行临摹。
这时，我又发现了问题：截图合适需要考验截图技巧，有时在画板就显得很大，有时显得很小。于是我觉得得需要一个可以调节垫图大小的方法。很快，Comate就完成了。
垫图大小可调节
优化画笔设置、画板交互方式，垫图大小可调节
2.1.2 新增贴纸功能
接下来是贴纸功能，我需要把用户的画作做成贴纸等文创产品。第一步就是拿到用户的画，但我发现因为画板是白色的，用户不会去刻意填充白色。就会导致得到的图片是镂空的，非常丑陋，这种图片能导出给用户吗？显然不可以。于是Comate使用洪水填充算法，帮我先把图片的白色补齐。这个时候，导出来的是一块矩形大图，和画板尺寸一样大，放到贴纸模版里面非常不美观，而且占空间。
那么就得剪裁掉，Comate把外围白色区域全部计算清除，并在我的要求下加上了合适的描边。
清除外围白色区域并添加描边
这时，导出来的贴纸，其实是贴纸集，有时候我觉得某个贴纸很好看，想单独下载，于是，Comate贴心增加了下图工具栏选择、复制、删除贴纸等功能，甚至能直接粘贴到剪切板，用后即焚。
优化贴纸功能
2.1.3 优化画板交互动画
其实画板交互动画，一开始做得也不是很好。用的时候需要手动切换到调色盘，选完颜色再点击上色笔，这个交互很繁琐；有时候可能在勾线，选完颜色，还是用勾线笔涂，就会导致上了黑色，之前还没有撤销功能，简直是灾难现场...需要擦除之后补画，非常麻烦。
于是我想是不是能从工具侧规避这个问题，选完颜色，直接切到上色笔，并给出高亮等交互动画。但我显然只知道可以用多轨道动画，但不太了解该怎么操作，也不想去看npm包源码，于是直接询问Comate，Comate给我列出了API方法，这块我喜滋滋得调用起来，动画交互和逻辑流畅非凡！
询问Comate多轨动画处理方式，Comate列出了API方法
2.1.4 埋点监控
由于需要统计用户使用数据，让Zulu帮我接入了埋点功能，5min不到就帮我接入了clarity，真的很高效～
使用Zulu接入埋点功能
「趣绘像素岛」数据看板
2.2 重构代码与性能优化
此外，Comate还协助完成了代码的优化与重构工作：通过抽象公共函数实现复用，不仅提升了工程代码的可读性（代码中配套添加了丰富注释），还显著优化了性能，实现了应用的秒开效果。其中，我对性能优化、公共函数抽离这两部分的优化成果最为满意，最终代码的注释覆盖率高，可读性也达到了理想状态。
Comate协助完成代码的优化与重构
2.3 样式优化
最后，我使用Comate优化了产品样式，最终UI生成效果美观大气，与Spine界面的融合度极高，整体交互流程流畅顺滑，用户操作体验出色。
Comate优化产品样式
3 心得感悟
《趣绘像素岛》是一款儿童绘画AI辅助工具，我觉得需要有一个AI工具能指导绘画小白去创作，解决"画什么、怎么画、画的怎么样、画完之后"四个问题。用Comate开发最让我惊艳的，除了颜值在线的UI，性能优化这块直接戳中开发者痛点！我用它加了很多之前觉得实现起来很难的功能，完善了项目。
Comate自动做的代码精简、冗余逻辑剔除，还有公共函数抽离，直接让项目跑起来的流畅度飙升。《趣绘像素岛》是骨骼动画项目，我自己也手写了代码，但是自己的代码存在不少重复调用和性能瓶颈，用Comate重构后，动画渲染的帧率稳了很多，交互时的卡顿感直接消失。包括后续加一些动画，进行动画调度，能帮我读取分析npm包，给出对应的API方法。Comate帮我把画板的垫图、撤销回退做得很好，我现在能轻轻松松截图，然后到工具页面直接Ctrl+V贴进去，就可以直接临摹了，也把贴纸的导出加上了直接粘贴到剪贴板，这块用户体验应该很好。
而且它生成的代码注释超全，可读性拉满，后续维护起来巨省心。我还用它完全写了个离线记账APP，真是一行代码都没有写，半天搞定的同时，还自带性能优化buff，完全不用额外花时间去调优，效率直接翻倍！这次没试figma2code，已经准备好标准UI，下次直接冲！
《趣绘像素岛》还在持续迭代，我想加入课程功能，类似任天堂的《绘心教室》，让更多的小朋友可以享受到绘画教育资源，寓教于乐、玩中学、学中创造，我也会继续用Comate进行创作，帮我解决难题，让灵感快速落地～