作者簡介：

朱海燕，會設計的前端工程師，熱衷用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進行創作，幫我解決難題，讓靈感快速落地～