作者简介：

朱海燕，会设计的前端工程师，热衷用 AI Coding 赋能开发效率，擅长把繁琐的编码工作交给智能工具，从而腾出时间打磨产品交互细节与技术深度。作品「趣绘像素岛」获得“CCF 程序员大会码力全开：AI 加速营”活动冠军。

1 产品碎碎念

其实创意灵感在 9 月就想到了，比如我个人喜欢画画，也愿意教别人画画，但是一个人的力量其实不算大，时间也很有限，希望有一个平台型工具，可以根据每个人的情况和基础，给出不一样的解决方案，这是 AI 能做得比较好的点。于是我想做一款儿童插画 AI 辅助工具，去解决画画遇到的四个问题“画什么，怎么画，画得怎么样，画完之后...”。让整个流程串起来，画完的作品带着温度和意义，可以作为贴纸、表情包、明信片收藏，画板就是这个工具的核心部分。9 月底开发了一部分，由于一些技术细节实现卡住，比如笔刷抖动粗细的控制，画完之后图像裁剪、填充、描边，实现效果都不尽如人意，于是进程停顿。

11 月份，看到了百度文心快码“CCF 程序员大会码力全开：AI 加速营”活动宣传，尝试使用了 Comate，感觉一下子提升生产力，就开始把之前难以落地的想法都一一实现了，还做了固定元素创意功能，优化了画板交互，更符合操作逻辑（比如选完色块就切到上色笔刷，避免认知错位）。我和 Zulu 的会话，核心是打磨交互逻辑、实现新功能、重构代码、提升响应性能。尤其加了垫图功能，提升了画板的通用性，也是我最最满意的功能，用户现在可以随便看到哪个画比较好就截图，到画板页面直接 CtrlV 粘贴用做参考图，这个功能大大提升了用户体验。

截图并粘贴到画板作为参考图

来看看趣味十足的产品演示视频吧：https://mp.weixin.qq.com/s/tRC4YAASdm28QHULbACREw

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 进行创作，帮我解决难题，让灵感快速落地～