本文作者：JU974，中国科学技术大学人工智能专业本科生

一、灵感来源

一切始于我在数据集网站发现了一个动漫人脸数据集iCartoonFace。当时我正在学习YOLO目标检测算法，便萌生了一个想法：何不做一个动漫人物识别项目？这既能巩固所学知识，又能完成本学期《人工智能实践》的课程作业。

经过一段时间的模型训练，我成功构建了api_server，但项目还缺少一个直观的可视化界面。刚好最近了解到文心快码出了最新的3.5S版本，官方介绍的特色能力是多智能体自主协同完成开发任务，于是决定用文心快码来完成开发。 目前可以通过在 VSCode、JetBrains IDEs 等主流 IDE 中安装 Comate 插件，或直接使用功能强大的独立 AI IDE 来体验文心快码。

我这里采用的是官方默认Agent模式——Zulu，以及默认的大语言模型设置——Auto，其他功能和智能体还没来得及研究。Zulu是能够满足我当前的开发需求的，并且选择Zulu后点击Subagent配置可以看到，它其实已经内置了DeepRead智能体。

二、理解项目

要让AI Coding发挥出真正的实力，得给AI充足的上下文，第一步肯定得让AI知道我的项目是做什么的，这时候DeepRead智能体就有了用武之地。刚好Comate提供了一个「介绍当前项目」的提示标签，所以我直接用这个标签。

Zulu十分详细地阅读了该代码文件，总结了当前的业务目标、核心功能、整体架构、数据实体、业务流程。这其实也算是一个小小的心得，如果想要使用AI Coding在项目上做二次开发，都需要先让AI通读项目结构内容等，方便做出后面的决策修改。

三、直接给要求

由于我是想让Zulu基于原始项目写网页，现在ta已经理解我用了什么框架、实现了哪些功能。这个就是AI的强大之处，不用像工作同事、项目队友合作那样挨个对接。现在直接给ta你的要求，让ta直接交付，后面再慢慢修改。（要是能一遍写好，并让我满意最好不过了😠）

这里我的初步要求是：

我写的网页太丑了，帮我设计一个规整好看的动漫人物识别网页，要求尽量体现api_server的所有功能。

Comate Zulu回复的一部分：

我会创建一个新的HTML文件来展示所有API功能，包含以下部分：

1. 文件上传区域

2. 检测/识别结果显示区

3. API功能切换面板

4. 结果可视化展示

5. 详细的API响应信息

然后就开始编写html文件了，但是！竟然把js、css也都写在html文件中。这一点不是很规范，并且这个网页也不算小，还是需要符合统一标准的。编写完成后，说明了一下特点功能和使用方式等，我迫不及待运行然后点开网页。感觉外观还不错，我还挺喜欢这个配色和布局的，然后检查了一下后台，也没什么报错。

1. 现代化设计：

• 使用Bootstrap 5框架构建响应式布局
• 渐变色标题栏和专业卡片设计
• 清晰的视觉层次和间距

2. 完整功能展示：

• 支持三种API模式切换（检测＋识别/仅检测/仅识别）
• 图片上传和预览功能
• 实时显示检测框和识别结果
• 详细的API响应信息展示

3. 交互体验优化：

• 加载状态指示器
• 错误处理和用户反馈
• 结果可视化展示（检测框＋角色标签）

4. 系统信息展示：

• 服务状态监控
• 模型加载状态
• 最后更新时间

四、测试功能

编写好一个基础的网页是远远不够的，功能完善才是重点。在测试环节，我先是用一张单人角色的图片测试了所有功能，发现都没啥问题。

第二轮测试我选择了一张多角色图，发现存在展示效果上的问题，这得改。

五、优化结构和修改展示效果

于是我提出优化要求：

使用js css不要全部写在html中，还有现在检测框不要标注上标签文字，只需要检测框就行了，然后鼠标悬浮放到对应检测框上面可以在鼠标旁边显示信息

注意：如果是啥也不会的小白，比如js、css都不知道，想要进行二次开发，还是很有局限性的，所以至少得要知道一些基础的前置知识。

后面我就没有太关注回复的流程逻辑了，主要我也不太懂css，js代码，对我来说结果比较重要，只要能修改好代码能跑就没问题。可以看到Comate创建了对应的js和css，这样更好管理网页了。

直接运行访问，发现效果好多了，并且功能也都正常。只不过还有小问题，比如鼠标悬浮显示信息这块，我要求的是在鼠标旁边显示，但是有时候会显示到屏幕外面去，这点需要再优化。

部分bug如下视频：https://live.csdn.net/v/496648

六、问题修复

然后就是基本的流程测试发现问题修复，用了这么多AI Coding工具，很少有可以直接一步修理好这种不明显的非bug类型的问题，Comate也不例外，不过几次修改之后，基本能达到我想要的效果了，而且也没有影响原来的功能。

修复完成后，最终的项目效果如下视频：https://live.csdn.net/v/496650

为了完善项目，后面继续让Comate写了一个api文档页面并能够在主页面跳转，三轮聊天就写好并修复完善了。以及最后还让Comate补充了下README文档。

最终的项目地址可见：https://github.com/minghf85/yolov8_anim_recog/tree/comate

七、总结

Comate用起来还是很方便的，通过多轮对话就能实现我想要的功能，交互很轻松，最终给出一个满意的结果。多智能体的功能是一大亮点，具体的协同开发方式还是得按照个人需求去慢慢探索。但同时还有很多细节需要打磨。

• 使用库版本：虽然在这个项目中没怎么体现，但是在其他地方用的时候，发现大多数时候用的库还都比较老了，不是最新的，这点有待改进。因为一般安装库不指定版本都是安装的最新版，但是Comate用有的库比如openai这个库，还是老版本的类和方法，导致会出bug，虽然也能改但是这个问题还是有点影响体验。
• 代码规范：这点上面也提到了，直接把js、css写在html中，这点不太符合前端开发的规范，应该在提示词中加入规范化代码文件结构的要求，不只是在单个文件内部的代码结构上做文章，还需要整个代码结构规范化。
• 是否保留修改代码问题：这个可以看看其他AI Coding工具的做法，在生成代码后，会询问是否保留修改，现在Comate的覆盖方式很奇怪，不能选择那几行代码进行覆盖，而是直接覆盖整个文件。
• 代码解释和bug解释： 开门见山地给出代码解释和bug解释，这点也还欠缺，有时候一个简单的解释就能让用户知道是什么问题，用户也能成长，也能溯源问题等，而不是闷头大干，用户啥也不知道。

你是否也想用AI Coding打造个人项目？

文心快码Meetup招募进行中！

一起来现场Vibe Coding！

点击🔗阅读文章立即报名！