本周尝试 CodeBuddy
一口气生成完整小程序失败后,我一直在尝试各种组合。
《多次尝试用 CodeBuddy 做小程序,最终我放弃了 - 掘金》
《从CodeBuddy翻车到MasterGo救场,我的小程序UI终于焕然一新 - 掘金》
《从界面崩塌到功能完整:CodeBuddy + uniapp 小程序生成实录 - 掘金》
昨天本来计划一次性分享完全过程的,但奈何整理文章截图花费了太多时间,最终的界面优化尚未完成。
今天,我就把最后这点补上。
最终效果
经过优化,最终效果如下。
虽然距离精美还有距离,但已基本可看。



使用体验
今天的内容就不罗列具体的操作步骤了,因为每个步骤的相似度太高。
主要包括 3 类操作:
- 有设计图的直接优化
- 没有设计图的参考按照设计图优化过的
- 优化细节
按照设计图优化首页
在昨天功能基本生成的基础上,我上传了设计图,并发送指令。
执行过程

设计图

提示词没有太多技巧,重点在于"按照 "而不要使用"参考",中间有次使用了"参考",结果 CodeBuddy
发挥太多了,和设计图相差太大。
另外一个点就是,不要想着让 CodeBuddy 根据一张设计图优化全部页面。
我已经帮你尝试了,效果如下。

它甚至连主色调都聚焦不了。
参考首页优化其他页面

这里我尝试了多次,最好是配合着提示词指明你想要保留的风格,比如蓝黑色主色调、高质感等等。
也可以参考以前使用的方法,先让 AI 帮你提炼提示词设计风格,然后放到提示词中。
优化细节
只是一遍遍地发送提示词,修改小细节。
比如首页按照设计图优化后,"超期提醒"却没有同步优化。

结语
经过这周的高强度使用,终于跑通了一套小程序"UI+功能"一锅出的流程。
- 创意 → 需求:你提出一个创意,AI 帮你分析整理成需求文档。
- 需求 → 设计:MasterGo AI 帮你生成美观的设计图。
- 设计 → 功能:CodeBuddy 一锅出 UI+功能(云函数)。
- 功能 → 体验:根据体验效果,逐个使用 CodeBuddy 修改优化。
这个流程中的工具,你也可以根据自己喜好进行更换。
当然,整个探索过程也发现了 CodeBuddy
很多需要改进的地方。
- 比如大批量生成会导致可控性较低
- 特别细节的问题修改起来容易定位不准
- 对命令的遵从度需要优化
希望相关团队可以尽快优化升级,再次提升应用研发效率。